@grafana/scenes 5.23.0--canary.954.11668840775.0 → 5.23.1--canary.955.11689118589.0

package/dist/index.js

@@ -41,19 +41,19 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var uFuzzy__default = /*#__PURE__*/_interopDefaultLegacy(uFuzzy);
 var ReactGridLayout__default = /*#__PURE__*/_interopDefaultLegacy(ReactGridLayout);
 
-var __defProp$O = Object.defineProperty;
-var __getOwnPropSymbols$O = Object.getOwnPropertySymbols;
-var __hasOwnProp$O = Object.prototype.hasOwnProperty;
-var __propIsEnum$O = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$O = (obj, key, value) => key in obj ? __defProp$O(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$O = (a, b) => {
+var __defProp$P = Object.defineProperty;
+var __getOwnPropSymbols$P = Object.getOwnPropertySymbols;
+var __hasOwnProp$P = Object.prototype.hasOwnProperty;
+var __propIsEnum$P = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$P = (obj, key, value) => key in obj ? __defProp$P(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$P = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$O.call(b, prop))
-      __defNormalProp$O(a, prop, b[prop]);
-  if (__getOwnPropSymbols$O)
-    for (var prop of __getOwnPropSymbols$O(b)) {
-      if (__propIsEnum$O.call(b, prop))
-        __defNormalProp$O(a, prop, b[prop]);
+    if (__hasOwnProp$P.call(b, prop))
+      __defNormalProp$P(a, prop, b[prop]);
+  if (__getOwnPropSymbols$P)
+    for (var prop of __getOwnPropSymbols$P(b)) {
+      if (__propIsEnum$P.call(b, prop))
+        __defNormalProp$P(a, prop, b[prop]);
     }
   return a;
 };
@@ -62,7 +62,7 @@ function useAppQueryParams() {
   return runtime.locationSearchToObject(location.search || "");
 }
 function getUrlWithAppState(path, searchObject, preserveParams) {
-  const paramsCopy = __spreadValues$O({}, searchObject);
+  const paramsCopy = __spreadValues$P({}, searchObject);
   if (preserveParams) {
     for (const key of Object.keys(paramsCopy)) {
       if (!preserveParams.includes(key)) {
@@ -76,31 +76,31 @@ function renderSceneComponentWithRouteProps(sceneObject, routeProps) {
   return React__default["default"].createElement(sceneObject.Component, { model: sceneObject, routeProps });
 }
 
-var __defProp$N = Object.defineProperty;
-var __defProps$v = Object.defineProperties;
-var __getOwnPropDescs$v = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$N = Object.getOwnPropertySymbols;
-var __hasOwnProp$N = Object.prototype.hasOwnProperty;
-var __propIsEnum$N = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$N = (obj, key, value) => key in obj ? __defProp$N(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$N = (a, b) => {
+var __defProp$O = Object.defineProperty;
+var __defProps$w = Object.defineProperties;
+var __getOwnPropDescs$w = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$O = Object.getOwnPropertySymbols;
+var __hasOwnProp$O = Object.prototype.hasOwnProperty;
+var __propIsEnum$O = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$O = (obj, key, value) => key in obj ? __defProp$O(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$O = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$N.call(b, prop))
-      __defNormalProp$N(a, prop, b[prop]);
-  if (__getOwnPropSymbols$N)
-    for (var prop of __getOwnPropSymbols$N(b)) {
-      if (__propIsEnum$N.call(b, prop))
-        __defNormalProp$N(a, prop, b[prop]);
+    if (__hasOwnProp$O.call(b, prop))
+      __defNormalProp$O(a, prop, b[prop]);
+  if (__getOwnPropSymbols$O)
+    for (var prop of __getOwnPropSymbols$O(b)) {
+      if (__propIsEnum$O.call(b, prop))
+        __defNormalProp$O(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$v = (a, b) => __defProps$v(a, __getOwnPropDescs$v(b));
+var __spreadProps$w = (a, b) => __defProps$w(a, __getOwnPropDescs$w(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$v(__spreadValues$N({}, plugin.meta), {
+  plugin.meta = __spreadProps$w(__spreadValues$O({}, plugin.meta), {
     id: pluginId,
     name: pluginId,
     module: "runtime plugin",
@@ -128,33 +128,33 @@ function loadPanelPluginSync(pluginId) {
   return (_a = getPanelPluginFromCache(pluginId)) != null ? _a : runtimePanelPlugins.get(pluginId);
 }
 
-var __defProp$M = Object.defineProperty;
-var __defProps$u = Object.defineProperties;
-var __getOwnPropDescs$u = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$M = Object.getOwnPropertySymbols;
-var __hasOwnProp$M = Object.prototype.hasOwnProperty;
-var __propIsEnum$M = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$M = (obj, key, value) => key in obj ? __defProp$M(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$M = (a, b) => {
+var __defProp$N = Object.defineProperty;
+var __defProps$v = Object.defineProperties;
+var __getOwnPropDescs$v = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$N = Object.getOwnPropertySymbols;
+var __hasOwnProp$N = Object.prototype.hasOwnProperty;
+var __propIsEnum$N = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$N = (obj, key, value) => key in obj ? __defProp$N(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$N = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$M.call(b, prop))
-      __defNormalProp$M(a, prop, b[prop]);
-  if (__getOwnPropSymbols$M)
-    for (var prop of __getOwnPropSymbols$M(b)) {
-      if (__propIsEnum$M.call(b, prop))
-        __defNormalProp$M(a, prop, b[prop]);
+    if (__hasOwnProp$N.call(b, prop))
+      __defNormalProp$N(a, prop, b[prop]);
+  if (__getOwnPropSymbols$N)
+    for (var prop of __getOwnPropSymbols$N(b)) {
+      if (__propIsEnum$N.call(b, prop))
+        __defNormalProp$N(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
+var __spreadProps$v = (a, b) => __defProps$v(a, __getOwnPropDescs$v(b));
 var __objRest$5 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$M.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$N.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$M)
-    for (var prop of __getOwnPropSymbols$M(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$M.call(source, prop))
+  if (source != null && __getOwnPropSymbols$N)
+    for (var prop of __getOwnPropSymbols$N(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$N.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -172,7 +172,7 @@ function SceneComponentWrapperWithoutMemo(_a) {
   if (!model.isActive) {
     return null;
   }
-  return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$u(__spreadValues$M({}, otherProps), {
+  return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$v(__spreadValues$N({}, otherProps), {
     model
   }));
 }
@@ -218,19 +218,19 @@ class SceneObjectRef {
 }
 _ref = new WeakMap();
 
-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) => {
+var __defProp$M = Object.defineProperty;
+var __getOwnPropSymbols$M = Object.getOwnPropertySymbols;
+var __hasOwnProp$M = Object.prototype.hasOwnProperty;
+var __propIsEnum$M = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$M = (obj, key, value) => key in obj ? __defProp$M(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$M = (a, b) => {
   for (var prop in b || (b = {}))
-    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]);
+    if (__hasOwnProp$M.call(b, prop))
+      __defNormalProp$M(a, prop, b[prop]);
+  if (__getOwnPropSymbols$M)
+    for (var prop of __getOwnPropSymbols$M(b)) {
+      if (__propIsEnum$M.call(b, prop))
+        __defNormalProp$M(a, prop, b[prop]);
     }
   return a;
 };
@@ -293,7 +293,7 @@ class SceneObjectBase {
   }
   setState(update) {
     const prevState = this._state;
-    const newState = __spreadValues$L(__spreadValues$L({}, this._state), update);
+    const newState = __spreadValues$M(__spreadValues$M({}, this._state), update);
     this._state = Object.freeze(newState);
     this._setParent(update);
     this._handleActivationOfChangedStateProps(prevState, newState);
@@ -489,19 +489,19 @@ function forEachChild(state, callback) {
   }
 }
 
-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;
 };
@@ -510,7 +510,7 @@ function cloneSceneObject(sceneObject, withState) {
   return new sceneObject.constructor(clonedState);
 }
 function cloneSceneObjectState(sceneState, withState) {
-  const clonedState = __spreadValues$K({}, sceneState);
+  const clonedState = __spreadValues$L({}, sceneState);
   Object.assign(clonedState, withState);
   for (const key in clonedState) {
     if (withState && withState[key] !== void 0) {
@@ -611,25 +611,25 @@ function lookupVariable(name, sceneObject) {
   return null;
 }
 
-var __defProp$J = Object.defineProperty;
-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 __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;
 };
 class SceneDataNode extends SceneObjectBase {
   constructor(state) {
-    super(__spreadValues$J({
+    super(__spreadValues$K({
       data: emptyPanelData
     }, state));
   }
@@ -735,19 +735,19 @@ function isValid$1(value, roundUp, timeZone) {
   return parsed.isValid();
 }
 
-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) => {
+var __defProp$J = Object.defineProperty;
+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;
 };
@@ -765,7 +765,7 @@ class SceneTimeRange extends SceneObjectBase {
       state.UNSAFE_nowDelay
     );
     const refreshOnActivate = (_a = state.refreshOnActivate) != null ? _a : { percent: 10 };
-    super(__spreadValues$I({ from, to, timeZone, value, refreshOnActivate }, state));
+    super(__spreadValues$J({ from, to, timeZone, value, refreshOnActivate }, state));
     this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["from", "to", "timezone", "time", "time.window"] });
     this.onTimeRangeChange = (timeRange) => {
       const update = {};
@@ -896,10 +896,7 @@ class SceneTimeRange extends SceneObjectBase {
   }
   getUrlState() {
     const params = runtime.locationService.getSearchObject();
-    const urlValues = { from: this.state.from, to: this.state.to };
-    if (this.state.timeZone) {
-      urlValues.timezone = this.state.timeZone;
-    }
+    const urlValues = { from: this.state.from, to: this.state.to, timezone: this.getTimeZone() };
     if (params.time && params["time.window"]) {
       urlValues.time = null;
       urlValues["time.window"] = null;
@@ -1345,6 +1342,9 @@ class UrlTimeRangeMacro {
     var _a;
     const timeRange = getTimeRange(this._sceneObject);
     const urlState = (_a = timeRange.urlSync) == null ? void 0 : _a.getUrlState();
+    if ((urlState == null ? void 0 : urlState.timezone) === "browser") {
+      urlState.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    }
     return new SkipFormattingValue(data.urlUtil.toUrlParams(urlState));
   }
   getValueText() {
@@ -1749,25 +1749,25 @@ function collectAllVariables(sceneObject, record = {}) {
   return record;
 }
 
-var __defProp$H = Object.defineProperty;
-var __defProps$t = Object.defineProperties;
-var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
-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 __defProps$u = Object.defineProperties;
+var __getOwnPropDescs$u = 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) => {
   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;
 };
-var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
+var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
 function getTemplateProxyForField(field, frame, frames) {
   return new Proxy(
     {},
@@ -1783,7 +1783,7 @@ function getTemplateProxyForField(field, frame, frames) {
           if (!field.labels) {
             return "";
           }
-          return __spreadProps$t(__spreadValues$H({}, field.labels), {
+          return __spreadProps$u(__spreadValues$I({}, field.labels), {
             __values: Object.values(field.labels).sort().join(", "),
             toString: () => {
               return data.formatLabels(field.labels, "", true);
@@ -2280,25 +2280,25 @@ function isExtraQueryProvider(obj) {
   return typeof obj === "object" && "getExtraQueries" in obj;
 }
 
-var __defProp$G = Object.defineProperty;
-var __defProps$s = Object.defineProperties;
-var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
-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 __defProps$t = Object.defineProperties;
+var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
+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;
 };
-var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
+var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
 const passthroughProcessor = (_, secondary) => rxjs.of(secondary);
 const extraQueryProcessingOperator = (processors) => (data) => {
   return data.pipe(
@@ -2311,7 +2311,7 @@ const extraQueryProcessingOperator = (processors) => (data) => {
     }),
     rxjs.map(([primary, ...processedSecondaries]) => {
       var _a;
-      return __spreadProps$s(__spreadValues$G({}, primary), {
+      return __spreadProps$t(__spreadValues$H({}, primary), {
         series: [...primary.series, ...processedSecondaries.flatMap((s) => s.series)],
         annotations: [...(_a = primary.annotations) != null ? _a : [], ...processedSecondaries.flatMap((s) => {
           var _a2;
@@ -2322,25 +2322,25 @@ const extraQueryProcessingOperator = (processors) => (data) => {
   );
 };
 
-var __defProp$F = Object.defineProperty;
-var __defProps$r = Object.defineProperties;
-var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
-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 __defProps$s = Object.defineProperties;
+var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
+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;
 };
-var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
+var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
 function filterAnnotations(data, filters) {
   var _a;
   if (!Array.isArray(data) || data.length === 0) {
@@ -2391,11 +2391,11 @@ function filterAnnotations(data, filters) {
           continue;
         }
       }
-      fields.push(__spreadProps$r(__spreadValues$F({}, field), {
+      fields.push(__spreadProps$s(__spreadValues$G({}, field), {
         values: buffer
       }));
     }
-    processed.push(__spreadProps$r(__spreadValues$F({}, frame), {
+    processed.push(__spreadProps$s(__spreadValues$G({}, frame), {
       fields,
       length: frameLength
     }));
@@ -2545,33 +2545,33 @@ function getOptionSearcher(options, includeAll) {
   };
 }
 
-var __defProp$E = Object.defineProperty;
-var __defProps$q = Object.defineProperties;
-var __getOwnPropDescs$q = 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) => {
+var __defProp$F = Object.defineProperty;
+var __defProps$r = Object.defineProperties;
+var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
+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;
 };
-var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
+var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
 var __objRest$4 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$E.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$F.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$E)
-    for (var prop of __getOwnPropSymbols$E(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$E.call(source, prop))
+  if (source != null && __getOwnPropSymbols$F)
+    for (var prop of __getOwnPropSymbols$F(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$F.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2719,7 +2719,7 @@ const OptionWithCheckbox = ({
   const theme = ui.useTheme2();
   const selectStyles = ui.getSelectStyles(theme);
   const optionStyles = ui.useStyles2(getOptionStyles);
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$q(__spreadValues$E({
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$r(__spreadValues$F({
     ref: innerRef,
     className: css.cx(selectStyles.option, isFocused && selectStyles.optionFocused)
   }, rest), {
@@ -2884,28 +2884,28 @@ function wrapInSafeSerializableSceneObject(sceneObject) {
   return { value: sceneObject, text: "__sceneObject" };
 }
 
-var __defProp$D = Object.defineProperty;
-var __defProps$p = Object.defineProperties;
-var __getOwnPropDescs$p = 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$q = Object.defineProperties;
+var __getOwnPropDescs$q = 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$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
+var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
 class GroupByVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadProps$p(__spreadValues$D({
+    super(__spreadProps$q(__spreadValues$E({
       isMulti: true,
       name: "",
       value: [],
@@ -2936,7 +2936,7 @@ class GroupByVariable extends MultiValueVariable {
       const queries = getQueriesForVariables(this);
       const otherFilters = this.state.baseFilters || [];
       const timeRange = sceneGraph.getTimeRange(this).state.value;
-      const response = await ds.getTagKeys(__spreadValues$D({
+      const response = await ds.getTagKeys(__spreadValues$E({
         filters: otherFilters,
         queries,
         timeRange
@@ -3131,7 +3131,7 @@ function LoadingIndicator(props) {
 }
 
 function ControlsLabel(props) {
-  const styles = ui.useStyles2(getStyles$e);
+  const styles = ui.useStyles2(getStyles$f);
   const theme = ui.useTheme2();
   const isVertical = props.layout === "vertical";
   const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -3194,7 +3194,7 @@ function ControlsLabel(props) {
   }
   return labelElement;
 }
-const getStyles$e = (theme) => ({
+const getStyles$f = (theme) => ({
   horizontalLabel: css.css({
     background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
     display: `flex`,
@@ -3270,19 +3270,19 @@ function getAdhocOptionSearcher(options) {
   };
 }
 
-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;
 };
@@ -3295,7 +3295,7 @@ function keyLabelToOption(key, label) {
 const filterNoOp = () => true;
 function AdHocFilterRenderer({ filter, model }) {
   var _a, _b, _c;
-  const styles = ui.useStyles2(getStyles$d);
+  const styles = ui.useStyles2(getStyles$e);
   const [keys, setKeys] = React.useState([]);
   const [values, setValues] = React.useState([]);
   const [isKeysLoading, setIsKeysLoading] = React.useState(false);
@@ -3366,7 +3366,7 @@ function AdHocFilterRenderer({ filter, model }) {
       });
     }
   };
-  const valueSelect = /* @__PURE__ */ React__default["default"].createElement(ui.Select, __spreadValues$C({
+  const valueSelect = /* @__PURE__ */ React__default["default"].createElement(ui.Select, __spreadValues$D({
     virtualized: true,
     allowCustomValue: true,
     isValidNewOption: (inputValue) => inputValue.trim().length > 0,
@@ -3498,7 +3498,7 @@ function AdHocFilterRenderer({ filter, model }) {
     onClick: () => model._removeFilter(filter)
   }));
 }
-const getStyles$d = (theme) => ({
+const getStyles$e = (theme) => ({
   field: css.css({
     marginBottom: 0
   }),
@@ -3650,30 +3650,30 @@ function isFilter(filter) {
   return filter !== null && typeof filter.key === "string" && typeof filter.value === "string";
 }
 
-var __defProp$B = Object.defineProperty;
-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 __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 __objRest$3 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$B.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$C.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$B)
-    for (var prop of __getOwnPropSymbols$B(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$B.call(source, prop))
+  if (source != null && __getOwnPropSymbols$C)
+    for (var prop of __getOwnPropSymbols$C(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$C.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -3681,9 +3681,9 @@ var __objRest$3 = (source, exclude) => {
 const DropdownItem = React.forwardRef(
   function DropdownItem2(_a, ref) {
     var _b = _a, { children, active, addGroupBottomBorder, isMultiValueEdit, checked } = _b, rest = __objRest$3(_b, ["children", "active", "addGroupBottomBorder", "isMultiValueEdit", "checked"]);
-    const styles = ui.useStyles2(getStyles$c);
+    const styles = ui.useStyles2(getStyles$d);
     const id = React.useId();
-    return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$B({
+    return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$C({
       ref,
       role: "option",
       id,
@@ -3699,7 +3699,7 @@ const DropdownItem = React.forwardRef(
     }) : null, children)));
   }
 );
-const getStyles$c = (theme) => ({
+const getStyles$d = (theme) => ({
   option: css.css({
     label: "grafana-select-option",
     top: 0,
@@ -3770,7 +3770,7 @@ const OptionsErrorPlaceholder = ({ handleFetchOptions }) => {
   }, "An error has occurred fetching labels. Click to retry");
 };
 const MultiValueApplyButton = ({ onApply, floatingElement, maxOptionWidth, menuHeight }) => {
-  const styles = ui.useStyles2(getStyles$c);
+  const styles = ui.useStyles2(getStyles$d);
   const floatingElementRect = floatingElement == null ? void 0 : floatingElement.getBoundingClientRect();
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: styles.multiValueApplyWrapper,
@@ -3951,6 +3951,19 @@ const generatePlaceholder = (filter, filterInputType, isMultiValueEdit, isAlways
   }
   return filter[filterInputType] && !isAlwaysWip ? `${filter[filterInputType]}` : INPUT_PLACEHOLDER;
 };
+const populateInputValueOnInputTypeSwitch = ({
+  populateInputOnEdit,
+  item,
+  filterInputType,
+  setInputValue,
+  filter
+}) => {
+  if (populateInputOnEdit && !isMultiValueOperator(item.value || "") && nextInputTypeMap[filterInputType] === "value") {
+    setInputValue((filter == null ? void 0 : filter.value) || "");
+  } else {
+    setInputValue("");
+  }
+};
 
 const MAX_MENU_HEIGHT = 300;
 const useFloatingInteractions = ({
@@ -4016,6 +4029,114 @@ const useFloatingInteractions = ({
   };
 };
 
+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$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$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
+const MultiValuePill = ({
+  item,
+  handleRemoveMultiValue,
+  index,
+  handleEditMultiValuePill
+}) => {
+  var _a, _b;
+  const styles = ui.useStyles2(getStyles$c);
+  const editMultiValuePill = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      handleEditMultiValuePill(item);
+    },
+    [handleEditMultiValuePill, item]
+  );
+  const editMultiValuePillWithKeyboard = React.useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        editMultiValuePill(e);
+      }
+    },
+    [editMultiValuePill]
+  );
+  const removePillHandler = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      handleRemoveMultiValue(item);
+    },
+    [handleRemoveMultiValue, item]
+  );
+  const removePillHandlerWithKeyboard = React.useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        removePillHandler(e);
+      }
+    },
+    [removePillHandler]
+  );
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: css.cx(styles.basePill, styles.valuePill),
+    onClick: editMultiValuePill,
+    onKeyDown: editMultiValuePillWithKeyboard,
+    tabIndex: 0,
+    id: `${item.value}-${index}`
+  }, (_a = item.label) != null ? _a : item.value, /* @__PURE__ */ React__default["default"].createElement(ui.Button, {
+    onClick: removePillHandler,
+    onKeyDownCapture: removePillHandlerWithKeyboard,
+    fill: "text",
+    size: "sm",
+    variant: "secondary",
+    className: styles.removeButton,
+    tooltip: `Remove filter value - ${(_b = item.label) != null ? _b : item.value}`
+  }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
+    name: "times",
+    size: "md",
+    id: `${item.value}-${index}-close-icon`
+  })));
+};
+const getStyles$c = (theme) => ({
+  basePill: css.css(__spreadProps$p(__spreadValues$B({
+    display: "flex",
+    alignItems: "center",
+    background: theme.colors.action.disabledBackground,
+    border: `1px solid ${theme.colors.border.weak}`,
+    padding: theme.spacing(0.125, 1, 0.125, 1),
+    color: theme.colors.text.primary,
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    minHeight: theme.spacing(2.75)
+  }, theme.typography.bodySmall), {
+    cursor: "pointer"
+  })),
+  valuePill: css.css({
+    background: theme.colors.action.selected,
+    padding: theme.spacing(0.125, 0, 0.125, 1)
+  }),
+  removeButton: css.css({
+    marginInline: theme.spacing(0.5),
+    height: "100%",
+    padding: 0,
+    cursor: "pointer",
+    "&:hover": {
+      color: theme.colors.text.primary
+    }
+  })
+});
+
 var __defProp$A = Object.defineProperty;
 var __defProps$o = Object.defineProperties;
 var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
@@ -4035,7 +4156,7 @@ var __spreadValues$A = (a, b) => {
   return a;
 };
 var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
-const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model, isAlwaysWip, handleChangeViewMode, focusOnWipInputRef }, parentRef) {
+const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model, isAlwaysWip, handleChangeViewMode, focusOnWipInputRef, populateInputOnEdit }, parentRef) {
   var _a, _b, _c;
   const [open, setOpen] = React.useState(false);
   const [options, setOptions] = React.useState([]);
@@ -4122,7 +4243,13 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     ]
   );
   const outsidePressIdsToIgnore = React.useMemo(() => {
-    return [operatorIdentifier, ...filterMultiValues.map((item, i) => `${item.value}-${i}`)];
+    return [
+      operatorIdentifier,
+      ...filterMultiValues.reduce(
+        (acc, item, i) => [...acc, `${item.value}-${i}`, `${item.value}-${i}-close-icon`],
+        []
+      )
+    ];
   }, [operatorIdentifier, filterMultiValues]);
   const { refs, floatingStyles, context, getReferenceProps, getFloatingProps, getItemProps } = useFloatingInteractions({
     open,
@@ -4275,6 +4402,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
         const selectedItem = filteredDropDownItems[activeIndex];
         if (multiValueEdit) {
           handleLocalMultiValueChange(selectedItem);
+          setInputValue("");
         } else {
           model._updateFilter(
             filter,
@@ -4285,6 +4413,13 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
               setFilterMultiValues
             })
           );
+          populateInputValueOnInputTypeSwitch({
+            populateInputOnEdit,
+            item: selectedItem,
+            filterInputType,
+            setInputValue,
+            filter
+          });
           switchToNextInputType(
             filterInputType,
             setInputType,
@@ -4297,7 +4432,6 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
             focusOnWipInputRef == null ? void 0 : focusOnWipInputRef();
           }
         }
-        setInputValue("");
       }
     },
     [
@@ -4307,12 +4441,23 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       model,
       filter,
       filterInputType,
+      populateInputOnEdit,
       handleChangeViewMode,
       refs.domReference,
       isLastFilter,
       focusOnWipInputRef
     ]
   );
+  const handleEditMultiValuePill = React.useCallback(
+    (value) => {
+      var _a2;
+      const valueLabel = value.label || value.value;
+      setFilterMultiValues((prev) => prev.filter((item) => item.value !== value.value));
+      setInputValue(valueLabel);
+      (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
+    },
+    [refs.domReference]
+  );
   React.useEffect(() => {
     if (open) {
       handleFetchOptions(filterInputType);
@@ -4321,8 +4466,6 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
   React.useEffect(() => {
     var _a2, _b2;
     if (!isAlwaysWip) {
-      setInputType("value");
-      setInputValue("");
       if (hasMultiValueOperator && ((_a2 = filter == null ? void 0 : filter.values) == null ? void 0 : _a2.length)) {
         const multiValueOptions = filter.values.reduce(
           (acc, value, i) => {
@@ -4339,6 +4482,9 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
         );
         setFilterMultiValues(multiValueOptions);
       }
+      if (!hasMultiValueOperator && populateInputOnEdit) {
+        setInputValue((filter == null ? void 0 : filter.value) || "");
+      }
       (_b2 = refs.domReference.current) == null ? void 0 : _b2.focus();
     }
   }, []);
@@ -4368,11 +4514,13 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     tabIndex: 0,
     onClick: (event) => {
       event.stopPropagation();
+      setInputValue("");
       switchInputType("operator", setInputType, void 0, refs.domReference.current);
     },
     onKeyDown: (event) => {
       handleShiftTabInput(event, hasMultiValueOperator);
       if (event.key === "Enter") {
+        setInputValue("");
         switchInputType("operator", setInputType, void 0, refs.domReference.current);
       }
     }
@@ -4382,7 +4530,8 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     key: `${item.value}-${i}`,
     item,
     index: i,
-    handleRemoveMultiValue
+    handleRemoveMultiValue,
+    handleEditMultiValuePill
   })) : null) : null, /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$o(__spreadValues$A({}, getReferenceProps({
     ref: refs.setReference,
     onChange,
@@ -4469,6 +4618,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
           event.preventDefault();
           event.stopPropagation();
           handleLocalMultiValueChange(item);
+          setInputValue("");
           (_a3 = refs.domReference.current) == null ? void 0 : _a3.focus();
         } else {
           model._updateFilter(
@@ -4480,7 +4630,13 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
               setFilterMultiValues
             })
           );
-          setInputValue("");
+          populateInputValueOnInputTypeSwitch({
+            populateInputOnEdit,
+            item,
+            filterInputType,
+            setInputValue,
+            filter
+          });
           switchToNextInputType(
             filterInputType,
             setInputType,
@@ -4513,35 +4669,6 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     menuHeight: Math.min(rowVirtualizer.getTotalSize(), MAX_MENU_HEIGHT)
   }) : null))));
 });
-const MultiValuePill = ({ item, handleRemoveMultiValue, index }) => {
-  var _a, _b;
-  const styles = ui.useStyles2(getStyles$b);
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: css.cx(styles.basePill, styles.valuePill)
-  }, /* @__PURE__ */ React__default["default"].createElement("span", null, " ", (_a = item.label) != null ? _a : item.value), /* @__PURE__ */ React__default["default"].createElement(ui.Button, {
-    onClick: (e) => {
-      e.stopPropagation();
-      e.preventDefault();
-      handleRemoveMultiValue(item);
-    },
-    onKeyDownCapture: (e) => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        e.stopPropagation();
-        handleRemoveMultiValue(item);
-      }
-    },
-    fill: "text",
-    size: "sm",
-    variant: "secondary",
-    className: styles.removeButton,
-    tooltip: `Remove filter value - ${(_b = item.label) != null ? _b : item.value}`
-  }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
-    name: "times",
-    size: "md",
-    id: `${item.value}-${index}`
-  })));
-};
 const getStyles$b = (theme) => ({
   comboboxWrapper: css.css({
     display: "flex",
@@ -4574,10 +4701,6 @@ const getStyles$b = (theme) => ({
       background: theme.colors.action.hover
     }
   }),
-  valuePill: css.css({
-    background: theme.colors.action.selected,
-    padding: theme.spacing(0.125, 0, 0.125, 1)
-  }),
   dropdownWrapper: css.css({
     backgroundColor: theme.colors.background.primary,
     color: theme.colors.text.primary,
@@ -4610,25 +4733,10 @@ const getStyles$b = (theme) => ({
       borderTop: `1px solid ${theme.colors.border.weak}`
     }
   }),
-  removeButton: css.css({
-    marginInline: theme.spacing(0.5),
-    height: "100%",
-    padding: 0,
-    cursor: "pointer",
-    "&:hover": {
-      color: theme.colors.text.primary
-    }
-  }),
   descriptionText: css.css(__spreadProps$o(__spreadValues$A({}, theme.typography.bodySmall), {
     color: theme.colors.text.secondary,
     paddingTop: theme.spacing(0.5)
-  })),
-  multiValueApply: css.css({
-    position: "absolute",
-    top: 0,
-    left: 0,
-    display: "flex"
-  })
+  }))
 });
 
 var __defProp$z = Object.defineProperty;
@@ -4656,6 +4764,7 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
   const [viewMode, setViewMode] = React.useState(true);
   const [shouldFocusOnPillWrapper, setShouldFocusOnPillWrapper] = React.useState(false);
   const pillWrapperRef = React.useRef(null);
+  const [populateInputOnEdit, setPopulateInputOnEdit] = React.useState(false);
   const keyLabel = (_a = filter.keyLabel) != null ? _a : filter.key;
   const valueLabel = ((_b = filter.valueLabels) == null ? void 0 : _b.join(", ")) || ((_c = filter.values) == null ? void 0 : _c.join(", ")) || filter.value;
   const handleChangeViewMode = React.useCallback(
@@ -4682,15 +4791,25 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
       model._updateFilter(filter, { forceEdit: void 0 });
     }
   }, [filter, model, viewMode]);
+  React.useEffect(() => {
+    if (populateInputOnEdit && viewMode) {
+      setPopulateInputOnEdit(false);
+    }
+  }, [viewMode]);
   if (viewMode) {
     const pillText = /* @__PURE__ */ React__default["default"].createElement("span", {
       className: styles.pillText
     }, keyLabel, " ", filter.operator, " ", valueLabel);
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: css.cx(styles.combinedFilterPill, { [styles.readOnlyCombinedFilter]: readOnly }),
-      onClick: handleChangeViewMode,
+      onClick: (e) => {
+        e.stopPropagation();
+        setPopulateInputOnEdit(true);
+        handleChangeViewMode();
+      },
       onKeyDown: (e) => {
         if (e.key === "Enter") {
+          setPopulateInputOnEdit(true);
           handleChangeViewMode();
         }
       },
@@ -4727,7 +4846,8 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
     filter,
     model,
     handleChangeViewMode,
-    focusOnWipInputRef
+    focusOnWipInputRef,
+    populateInputOnEdit
   });
 }
 const getStyles$a = (theme) => ({