@grafana/scenes 5.11.0 → 5.11.1--canary.830.10618954979.0

package/dist/index.js

@@ -14,6 +14,9 @@ var ui = require('@grafana/ui');
 var e2eSelectors = require('@grafana/e2e-selectors');
 var css = require('@emotion/css');
 var uFuzzy = require('@leeoniya/ufuzzy');
+var reactDom = require('react-dom');
+var react = require('@floating-ui/react');
+var reactVirtual = require('@tanstack/react-virtual');
 var reactUse = require('react-use');
 var operators = require('rxjs/operators');
 var ReactGridLayout = require('react-grid-layout');
@@ -39,19 +42,19 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var uFuzzy__default = /*#__PURE__*/_interopDefaultLegacy(uFuzzy);
 var ReactGridLayout__default = /*#__PURE__*/_interopDefaultLegacy(ReactGridLayout);
 
-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$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) => {
   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$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;
 };
@@ -60,7 +63,7 @@ function useAppQueryParams() {
   return runtime.locationSearchToObject(location.search || "");
 }
 function getUrlWithAppState(path, preserveParams) {
-  const paramsCopy = __spreadValues$L({}, runtime.locationService.getSearchObject());
+  const paramsCopy = __spreadValues$O({}, runtime.locationService.getSearchObject());
   if (preserveParams) {
     for (const key of Object.keys(paramsCopy)) {
       if (!preserveParams.includes(key)) {
@@ -74,31 +77,31 @@ function renderSceneComponentWithRouteProps(sceneObject, routeProps) {
   return React__default["default"].createElement(sceneObject.Component, { model: sceneObject, routeProps });
 }
 
-var __defProp$K = Object.defineProperty;
-var __defProps$s = Object.defineProperties;
-var __getOwnPropDescs$s = 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) => {
+var __defProp$N = Object.defineProperty;
+var __defProps$u = Object.defineProperties;
+var __getOwnPropDescs$u = 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$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$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$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
+var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(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$K({}, plugin.meta), {
+  plugin.meta = __spreadProps$u(__spreadValues$N({}, plugin.meta), {
     id: pluginId,
     name: pluginId,
     module: "runtime plugin",
@@ -126,39 +129,39 @@ function loadPanelPluginSync(pluginId) {
   return (_a = getPanelPluginFromCache(pluginId)) != null ? _a : runtimePanelPlugins.get(pluginId);
 }
 
-var __defProp$J = Object.defineProperty;
-var __defProps$r = Object.defineProperties;
-var __getOwnPropDescs$r = 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$M = Object.defineProperty;
+var __defProps$t = Object.defineProperties;
+var __getOwnPropDescs$t = 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) => {
   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$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;
 };
-var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
-var __objRest$4 = (source, exclude) => {
+var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
+var __objRest$5 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$J.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$M.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$J)
-    for (var prop of __getOwnPropSymbols$J(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$J.call(source, prop))
+  if (source != null && __getOwnPropSymbols$M)
+    for (var prop of __getOwnPropSymbols$M(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$M.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function SceneComponentWrapperWithoutMemo(_a) {
-  var _b = _a, { model } = _b, otherProps = __objRest$4(_b, ["model"]);
+  var _b = _a, { model } = _b, otherProps = __objRest$5(_b, ["model"]);
   var _a2;
   const Component = (_a2 = model.constructor["Component"]) != null ? _a2 : EmptyRenderer;
   const [_, setValue] = React.useState(0);
@@ -170,7 +173,7 @@ function SceneComponentWrapperWithoutMemo(_a) {
   if (!model.isActive) {
     return null;
   }
-  return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$r(__spreadValues$J({}, otherProps), {
+  return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$t(__spreadValues$M({}, otherProps), {
     model
   }));
 }
@@ -216,19 +219,19 @@ class SceneObjectRef {
 }
 _ref = new WeakMap();
 
-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$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$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$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;
 };
@@ -288,7 +291,7 @@ class SceneObjectBase {
   }
   setState(update) {
     const prevState = this._state;
-    const newState = __spreadValues$I(__spreadValues$I({}, this._state), update);
+    const newState = __spreadValues$L(__spreadValues$L({}, this._state), update);
     this._state = Object.freeze(newState);
     this._setParent(update);
     this._handleActivationOfChangedStateProps(prevState, newState);
@@ -484,19 +487,19 @@ function forEachChild(state, callback) {
   }
 }
 
-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$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$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$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;
 };
@@ -505,7 +508,7 @@ function cloneSceneObject(sceneObject, withState) {
   return new sceneObject.constructor(clonedState);
 }
 function cloneSceneObjectState(sceneState, withState) {
-  const clonedState = __spreadValues$H({}, sceneState);
+  const clonedState = __spreadValues$K({}, sceneState);
   for (const key in clonedState) {
     const propValue = clonedState[key];
     if (propValue instanceof SceneObjectBase) {
@@ -602,25 +605,25 @@ function lookupVariable(name, sceneObject) {
   return null;
 }
 
-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$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$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$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;
 };
 class SceneDataNode extends SceneObjectBase {
   constructor(state) {
-    super(__spreadValues$G({
+    super(__spreadValues$J({
       data: emptyPanelData
     }, state));
   }
@@ -701,19 +704,19 @@ function evaluateTimeRange(from, to, timeZone, fiscalYearStartMonth, delay) {
   };
 }
 
-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$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$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$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;
 };
@@ -731,7 +734,7 @@ class SceneTimeRange extends SceneObjectBase {
       state.UNSAFE_nowDelay
     );
     const refreshOnActivate = (_c = state.refreshOnActivate) != null ? _c : { percent: 10 };
-    super(__spreadValues$F({ from, to, timeZone, value, refreshOnActivate }, state));
+    super(__spreadValues$I({ from, to, timeZone, value, refreshOnActivate }, state));
     this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["from", "to", "timezone"] });
     this.onTimeRangeChange = (timeRange) => {
       const update = {};
@@ -1398,25 +1401,25 @@ function collectAllVariables(sceneObject, record = {}) {
   return record;
 }
 
-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$H = Object.defineProperty;
+var __defProps$s = Object.defineProperties;
+var __getOwnPropDescs$s = 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$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$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$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
+var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
 function getTemplateProxyForField(field, frame, frames) {
   return new Proxy(
     {},
@@ -1432,7 +1435,7 @@ function getTemplateProxyForField(field, frame, frames) {
           if (!field.labels) {
             return "";
           }
-          return __spreadProps$q(__spreadValues$E({}, field.labels), {
+          return __spreadProps$s(__spreadValues$H({}, field.labels), {
             __values: Object.values(field.labels).sort().join(", "),
             toString: () => {
               return data.formatLabels(field.labels, "", true);
@@ -1929,25 +1932,25 @@ function isExtraQueryProvider(obj) {
   return typeof obj === "object" && "getExtraQueries" in obj;
 }
 
-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$G = Object.defineProperty;
+var __defProps$r = Object.defineProperties;
+var __getOwnPropDescs$r = 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$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$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$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
+var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
 const passthroughProcessor = (_, secondary) => rxjs.of(secondary);
 const extraQueryProcessingOperator = (processors) => (data) => {
   return data.pipe(
@@ -1960,7 +1963,7 @@ const extraQueryProcessingOperator = (processors) => (data) => {
     }),
     rxjs.map(([primary, ...processedSecondaries]) => {
       var _a;
-      return __spreadProps$p(__spreadValues$D({}, primary), {
+      return __spreadProps$r(__spreadValues$G({}, primary), {
         series: [...primary.series, ...processedSecondaries.flatMap((s) => s.series)],
         annotations: [...(_a = primary.annotations) != null ? _a : [], ...processedSecondaries.flatMap((s) => {
           var _a2;
@@ -1971,25 +1974,25 @@ const extraQueryProcessingOperator = (processors) => (data) => {
   );
 };
 
-var __defProp$C = Object.defineProperty;
-var __defProps$o = Object.defineProperties;
-var __getOwnPropDescs$o = 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) => {
+var __defProp$F = Object.defineProperty;
+var __defProps$q = Object.defineProperties;
+var __getOwnPropDescs$q = 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$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$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$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
+var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
 function filterAnnotations(data, filters) {
   var _a;
   if (!Array.isArray(data) || data.length === 0) {
@@ -2040,11 +2043,11 @@ function filterAnnotations(data, filters) {
           continue;
         }
       }
-      fields.push(__spreadProps$o(__spreadValues$C({}, field), {
+      fields.push(__spreadProps$q(__spreadValues$F({}, field), {
         values: buffer
       }));
     }
-    processed.push(__spreadProps$o(__spreadValues$C({}, frame), {
+    processed.push(__spreadProps$q(__spreadValues$F({}, frame), {
       fields,
       length: frameLength
     }));
@@ -2475,33 +2478,33 @@ function getOptionSearcher(options, includeAll) {
   };
 }
 
-var __defProp$B = Object.defineProperty;
-var __defProps$n = Object.defineProperties;
-var __getOwnPropDescs$n = 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$E = Object.defineProperty;
+var __defProps$p = Object.defineProperties;
+var __getOwnPropDescs$p = 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$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$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
-var __objRest$3 = (source, exclude) => {
+    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 __objRest$4 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$B.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$E.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$E)
+    for (var prop of __getOwnPropSymbols$E(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$E.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2629,11 +2632,11 @@ const OptionWithCheckbox = ({
   renderOptionLabel
 }) => {
   var _b;
-  const _a = innerProps, rest = __objRest$3(_a, ["onMouseMove", "onMouseOver"]);
+  const _a = innerProps, rest = __objRest$4(_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$n(__spreadValues$B({
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$p(__spreadValues$E({
     ref: innerRef,
     className: css.cx(selectStyles.option, isFocused && selectStyles.optionFocused)
   }, rest), {
@@ -2797,28 +2800,28 @@ function wrapInSafeSerializableSceneObject(sceneObject) {
   return { value: sceneObject, text: "__sceneObject" };
 }
 
-var __defProp$A = Object.defineProperty;
-var __defProps$m = Object.defineProperties;
-var __getOwnPropDescs$m = 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$D = Object.defineProperty;
+var __defProps$o = Object.defineProperties;
+var __getOwnPropDescs$o = 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) => {
   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$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;
 };
-var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
+var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
 class GroupByVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadProps$m(__spreadValues$A({
+    super(__spreadProps$o(__spreadValues$D({
       isMulti: true,
       name: "",
       value: [],
@@ -2849,7 +2852,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$A({
+      const response = await ds.getTagKeys(__spreadValues$D({
         filters: otherFilters,
         queries,
         timeRange
@@ -3044,7 +3047,7 @@ function LoadingIndicator(props) {
 }
 
 function ControlsLabel(props) {
-  const styles = ui.useStyles2(getStyles$a);
+  const styles = ui.useStyles2(getStyles$e);
   const theme = ui.useTheme2();
   const isVertical = props.layout === "vertical";
   const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -3107,7 +3110,7 @@ function ControlsLabel(props) {
   }
   return labelElement;
 }
-const getStyles$a = (theme) => ({
+const getStyles$e = (theme) => ({
   horizontalLabel: css.css({
     background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
     display: `flex`,
@@ -3178,19 +3181,19 @@ function getAdhocOptionSearcher(options) {
   };
 }
 
-var __defProp$z = Object.defineProperty;
-var __getOwnPropSymbols$z = Object.getOwnPropertySymbols;
-var __hasOwnProp$z = Object.prototype.hasOwnProperty;
-var __propIsEnum$z = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$z = (obj, key, value) => key in obj ? __defProp$z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$z = (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$z.call(b, prop))
-      __defNormalProp$z(a, prop, b[prop]);
-  if (__getOwnPropSymbols$z)
-    for (var prop of __getOwnPropSymbols$z(b)) {
-      if (__propIsEnum$z.call(b, prop))
-        __defNormalProp$z(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;
 };
@@ -3203,7 +3206,7 @@ function keyLabelToOption(key, label) {
 const filterNoOp = () => true;
 function AdHocFilterRenderer({ filter, model }) {
   var _a, _b, _c;
-  const styles = ui.useStyles2(getStyles$9);
+  const styles = ui.useStyles2(getStyles$d);
   const [keys, setKeys] = React.useState([]);
   const [values, setValues] = React.useState([]);
   const [isKeysLoading, setIsKeysLoading] = React.useState(false);
@@ -3274,7 +3277,7 @@ function AdHocFilterRenderer({ filter, model }) {
       });
     }
   };
-  const valueSelect = /* @__PURE__ */ React__default["default"].createElement(ui.Select, __spreadValues$z({
+  const valueSelect = /* @__PURE__ */ React__default["default"].createElement(ui.Select, __spreadValues$C({
     virtualized: true,
     allowCustomValue: true,
     isValidNewOption: (inputValue) => inputValue.trim().length > 0,
@@ -3406,7 +3409,7 @@ function AdHocFilterRenderer({ filter, model }) {
     onClick: () => model._removeFilter(filter)
   }));
 }
-const getStyles$9 = (theme) => ({
+const getStyles$d = (theme) => ({
   field: css.css({
     marginBottom: 0
   }),
@@ -3558,6 +3561,812 @@ 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) => {
+  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 __objRest$3 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$B.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))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const DropdownItem = React.forwardRef(
+  function DropdownItem2(_a, ref) {
+    var _b = _a, { children, active, addGroupBottomBorder } = _b, rest = __objRest$3(_b, ["children", "active", "addGroupBottomBorder"]);
+    const styles = ui.useStyles2(getStyles$c);
+    const id = React.useId();
+    return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$B({
+      ref,
+      role: "option",
+      id,
+      "aria-selected": active,
+      className: css.cx(styles.option, active && styles.optionFocused, addGroupBottomBorder && styles.groupBottomBorder)
+    }, rest), /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: styles.optionBody,
+      "data-testid": `data-testid ad hoc filter option value ${children}`
+    }, /* @__PURE__ */ React__default["default"].createElement("span", null, children)));
+  }
+);
+const getStyles$c = (theme) => ({
+  option: css.css({
+    label: "grafana-select-option",
+    top: 0,
+    left: 0,
+    width: "100%",
+    position: "absolute",
+    padding: theme.spacing(1),
+    display: "flex",
+    alignItems: "center",
+    flexDirection: "row",
+    flexShrink: 0,
+    whiteSpace: "nowrap",
+    cursor: "pointer",
+    "&:hover": {
+      background: theme.colors.action.hover,
+      "@media (forced-colors: active), (prefers-contrast: more)": {
+        border: `1px solid ${theme.colors.primary.border}`
+      }
+    }
+  }),
+  optionFocused: css.css({
+    label: "grafana-select-option-focused",
+    background: theme.colors.action.focus,
+    "@media (forced-colors: active), (prefers-contrast: more)": {
+      border: `1px solid ${theme.colors.primary.border}`
+    }
+  }),
+  optionBody: css.css({
+    label: "grafana-select-option-body",
+    display: "flex",
+    fontWeight: theme.typography.fontWeightMedium,
+    flexDirection: "column",
+    flexGrow: 1
+  }),
+  groupBottomBorder: css.css({
+    borderBottom: `1px solid ${theme.colors.border.weak}`
+  })
+});
+const LoadingOptionsPlaceholder = () => {
+  return /* @__PURE__ */ React__default["default"].createElement(DropdownItem, null, "Loading options...");
+};
+const NoOptionsPlaceholder = () => {
+  return /* @__PURE__ */ React__default["default"].createElement(DropdownItem, null, "No options found");
+};
+const OptionsErrorPlaceholder = ({ handleFetchOptions }) => {
+  return /* @__PURE__ */ React__default["default"].createElement(DropdownItem, {
+    onClick: handleFetchOptions
+  }, "An error has occurred fetching labels. Click to retry");
+};
+
+const VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER = 8;
+const VIRTUAL_LIST_PADDING = 8;
+const VIRTUAL_LIST_OVERSCAN = 5;
+const VIRTUAL_LIST_ITEM_HEIGHT = 38;
+const ERROR_STATE_DROPDOWN_WIDTH = 366;
+function fuzzySearchOptions(options) {
+  const ufuzzy = new uFuzzy__default["default"]();
+  const haystack = [];
+  const limit = 1e4;
+  return (search, filterInputType) => {
+    var _a;
+    if (search === "") {
+      if (options.length > limit) {
+        return options.slice(0, limit);
+      } else {
+        return options;
+      }
+    }
+    if (filterInputType === "operator") {
+      const filteredOperators = [];
+      for (let i = 0; i < options.length; i++) {
+        if ((_a = options[i].label || options[i].value) == null ? void 0 : _a.includes(search)) {
+          filteredOperators.push(options[i]);
+          if (filteredOperators.length > limit) {
+            return filteredOperators;
+          }
+        }
+      }
+      return filteredOperators;
+    }
+    if (haystack.length === 0) {
+      for (let i = 0; i < options.length; i++) {
+        haystack.push(options[i].label || options[i].value);
+      }
+    }
+    const idxs = ufuzzy.filter(haystack, search);
+    const filteredOptions = [];
+    if (idxs) {
+      for (let i = 0; i < idxs.length; i++) {
+        filteredOptions.push(options[idxs[i]]);
+        if (filteredOptions.length > limit) {
+          return filteredOptions;
+        }
+      }
+      return filteredOptions;
+    }
+    if (options.length > limit) {
+      return options.slice(0, limit);
+    }
+    return options;
+  };
+}
+const flattenOptionGroups = (options) => options.flatMap((option) => option.options ? [option, ...option.options] : [option]);
+const setupDropdownAccessibility = (options, listRef, disabledIndicesRef) => {
+  var _a, _b, _c;
+  let maxOptionWidth = 182;
+  const listRefArr = [];
+  const disabledIndices = [];
+  for (let i = 0; i < options.length; i++) {
+    listRefArr.push(null);
+    if ((_a = options[i]) == null ? void 0 : _a.options) {
+      disabledIndices.push(i);
+    }
+    let label = (_c = (_b = options[i].label) != null ? _b : options[i].value) != null ? _c : "";
+    const widthEstimate = (options[i].isCustom ? label.length + 18 : label.length) * VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER + VIRTUAL_LIST_PADDING * 2;
+    if (widthEstimate > maxOptionWidth) {
+      maxOptionWidth = widthEstimate;
+    }
+  }
+  listRef.current = [...listRefArr];
+  disabledIndicesRef.current = [...disabledIndices];
+  return maxOptionWidth;
+};
+const nextInputTypeMap = {
+  key: "operator",
+  operator: "value",
+  value: "key"
+};
+const switchToNextInputType = (filterInputType, setInputType, handleChangeViewMode, element) => switchInputType(
+  nextInputTypeMap[filterInputType],
+  setInputType,
+  filterInputType === "value" ? handleChangeViewMode : void 0,
+  element
+);
+const switchInputType = (filterInputType, setInputType, handleChangeViewMode, element) => {
+  setInputType(filterInputType);
+  handleChangeViewMode == null ? void 0 : handleChangeViewMode();
+  setTimeout(() => element == null ? void 0 : element.focus());
+};
+const generateFilterUpdatePayload = (filterInputType, item) => {
+  if (filterInputType === "key") {
+    return {
+      key: item.value,
+      keyLabel: item.label ? item.label : item.value
+    };
+  }
+  if (filterInputType === "value") {
+    return {
+      value: item.value,
+      valueLabels: [item.label ? item.label : item.value]
+    };
+  }
+  return {
+    [filterInputType]: item.value
+  };
+};
+
+const MAX_MENU_HEIGHT = 300;
+const useFloatingInteractions = ({
+  open,
+  onOpenChange,
+  activeIndex,
+  setActiveIndex,
+  operatorIdentifier,
+  listRef,
+  disabledIndicesRef
+}) => {
+  const { refs, floatingStyles, context } = react.useFloating({
+    whileElementsMounted: react.autoUpdate,
+    open,
+    onOpenChange,
+    placement: "bottom-start",
+    middleware: [
+      react.offset(10),
+      react.flip({ padding: 10 }),
+      react.size({
+        apply({ availableHeight, availableWidth, elements }) {
+          elements.floating.style.maxHeight = `${Math.min(MAX_MENU_HEIGHT, availableHeight)}px`;
+          elements.floating.style.maxWidth = `${availableWidth}px`;
+        },
+        padding: 10
+      })
+    ]
+  });
+  const role = react.useRole(context, { role: "listbox" });
+  const dismiss = react.useDismiss(context, {
+    outsidePress: (event) => {
+      if (event.currentTarget instanceof HTMLElement && event.currentTarget.id === operatorIdentifier) {
+        return false;
+      }
+      return true;
+    }
+  });
+  const listNav = react.useListNavigation(context, {
+    listRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    virtual: true,
+    loop: true,
+    disabledIndices: disabledIndicesRef.current
+  });
+  const { getReferenceProps, getFloatingProps, getItemProps } = react.useInteractions([role, dismiss, listNav]);
+  return {
+    refs,
+    floatingStyles,
+    context,
+    getReferenceProps,
+    getFloatingProps,
+    getItemProps
+  };
+};
+
+var __defProp$A = Object.defineProperty;
+var __defProps$n = Object.defineProperties;
+var __getOwnPropDescs$n = 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$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
+const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model, isAlwaysWip, handleChangeViewMode }, parentRef) {
+  var _a, _b, _c;
+  const [open, setOpen] = React.useState(false);
+  const [options, setOptions] = React.useState([]);
+  const [optionsLoading, setOptionsLoading] = React.useState(false);
+  const [optionsError, setOptionsError] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState("");
+  const [activeIndex, setActiveIndex] = React.useState(null);
+  const [filterInputType, setInputType] = React.useState(!isAlwaysWip ? "value" : "key");
+  const styles = ui.useStyles2(getStyles$b);
+  const operatorIdentifier = React.useId();
+  const listRef = React.useRef([]);
+  const disabledIndicesRef = React.useRef([]);
+  const optionsSearcher = React.useMemo(() => fuzzySearchOptions(options), [options]);
+  const handleResetWip = React.useCallback(() => {
+    if (isAlwaysWip) {
+      model._addWip();
+      setInputType("key");
+      setInputValue("");
+    }
+  }, [model, isAlwaysWip]);
+  const onOpenChange = React.useCallback(
+    (nextOpen, _, reason) => {
+      setOpen(nextOpen);
+      if (reason && ["outside-press", "escape-key"].includes(reason)) {
+        handleResetWip();
+        handleChangeViewMode == null ? void 0 : handleChangeViewMode();
+      }
+    },
+    [handleChangeViewMode, handleResetWip]
+  );
+  const { refs, floatingStyles, context, getReferenceProps, getFloatingProps, getItemProps } = useFloatingInteractions({
+    open,
+    onOpenChange,
+    activeIndex,
+    setActiveIndex,
+    operatorIdentifier,
+    listRef,
+    disabledIndicesRef
+  });
+  React.useImperativeHandle(parentRef, () => () => {
+    var _a2;
+    return (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
+  }, [refs.domReference]);
+  function onChange(event) {
+    const value = event.target.value;
+    setInputValue(value);
+    setActiveIndex(0);
+  }
+  const filteredDropDownItems = flattenOptionGroups(handleOptionGroups(optionsSearcher(inputValue, filterInputType)));
+  if (filterInputType !== "operator" && inputValue) {
+    filteredDropDownItems.push({
+      value: inputValue.trim(),
+      label: inputValue.trim(),
+      isCustom: true
+    });
+  }
+  const maxOptionWidth = setupDropdownAccessibility(filteredDropDownItems, listRef, disabledIndicesRef);
+  const handleFetchOptions = React.useCallback(
+    async (inputType) => {
+      var _a2;
+      setOptionsError(false);
+      setOptionsLoading(true);
+      setOptions([]);
+      let options2 = [];
+      try {
+        if (inputType === "key") {
+          options2 = await model._getKeys(null);
+        } else if (inputType === "operator") {
+          options2 = model._getOperators();
+        } else if (inputType === "value") {
+          options2 = await model._getValuesFor(filter);
+        }
+        setOptions(options2);
+        if ((_a2 = options2[0]) == null ? void 0 : _a2.group) {
+          setActiveIndex(1);
+        }
+      } catch (e) {
+        setOptionsError(true);
+      }
+      setOptionsLoading(false);
+    },
+    [filter, model]
+  );
+  const rowVirtualizer = reactVirtual.useVirtualizer({
+    count: filteredDropDownItems.length,
+    getScrollElement: () => refs.floating.current,
+    estimateSize: () => VIRTUAL_LIST_ITEM_HEIGHT,
+    overscan: VIRTUAL_LIST_OVERSCAN
+  });
+  const handleBackspaceInput = React.useCallback(
+    (event) => {
+      if (event.key === "Backspace" && !inputValue && filterInputType === "key") {
+        model._removeLastFilter();
+        handleFetchOptions(filterInputType);
+      }
+    },
+    [inputValue, filterInputType]
+  );
+  const handleTabInput = React.useCallback((event) => {
+    if (event.key === "Tab" && !event.shiftKey) {
+      handleChangeViewMode == null ? void 0 : handleChangeViewMode();
+      handleResetWip();
+    }
+  }, []);
+  const handleShiftTabInput = React.useCallback((event) => {
+    if (event.key === "Tab" && event.shiftKey) {
+      handleChangeViewMode == null ? void 0 : handleChangeViewMode();
+      handleResetWip();
+    }
+  }, []);
+  const handleEnterInput = React.useCallback(
+    (event) => {
+      if (event.key === "Enter" && activeIndex != null) {
+        if (!filteredDropDownItems[activeIndex]) {
+          return;
+        }
+        model._updateFilter(filter, generateFilterUpdatePayload(filterInputType, filteredDropDownItems[activeIndex]));
+        setInputValue("");
+        setActiveIndex(0);
+        switchToNextInputType(filterInputType, setInputType, handleChangeViewMode, refs.domReference.current);
+      }
+    },
+    [activeIndex, filter, filterInputType, filteredDropDownItems, model]
+  );
+  React.useEffect(() => {
+    if (open) {
+      handleFetchOptions(filterInputType);
+    }
+  }, [open, filterInputType]);
+  React.useEffect(() => {
+    var _a2;
+    if (!isAlwaysWip) {
+      setInputType("value");
+      setInputValue("");
+      (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
+    }
+  }, []);
+  React.useLayoutEffect(() => {
+    var _a2, _b2;
+    if (activeIndex !== null && rowVirtualizer.range && (activeIndex > ((_a2 = rowVirtualizer.range) == null ? void 0 : _a2.endIndex) || activeIndex < ((_b2 = rowVirtualizer.range) == null ? void 0 : _b2.startIndex))) {
+      rowVirtualizer.scrollToIndex(activeIndex);
+    }
+  }, [activeIndex, rowVirtualizer]);
+  const keyLabel = (_a = filter == null ? void 0 : filter.keyLabel) != null ? _a : filter == null ? void 0 : filter.key;
+  const valueLabel = (_c = (_b = filter == null ? void 0 : filter.valueLabels) == null ? void 0 : _b[0]) != null ? _c : filter == null ? void 0 : filter.value;
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: styles.comboboxWrapper
+  }, filter ? /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: styles.pillWrapper
+  }, (filter == null ? void 0 : filter.key) ? /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: css.cx(styles.basePill, styles.keyPill)
+  }, keyLabel) : null, (filter == null ? void 0 : filter.key) && (filter == null ? void 0 : filter.operator) && filterInputType !== "operator" ? /* @__PURE__ */ React__default["default"].createElement("div", {
+    id: operatorIdentifier,
+    className: css.cx(styles.basePill, styles.operatorPill, operatorIdentifier),
+    role: "button",
+    "aria-label": "Edit filter operator",
+    tabIndex: 0,
+    onClick: (event) => {
+      event.stopPropagation();
+      switchInputType("operator", setInputType, void 0, refs.domReference.current);
+    },
+    onKeyDown: (event) => {
+      handleShiftTabInput(event);
+      if (event.key === "Enter") {
+        switchInputType("operator", setInputType, void 0, refs.domReference.current);
+      }
+    }
+  }, filter.operator) : null, (filter == null ? void 0 : filter.key) && (filter == null ? void 0 : filter.operator) && (filter == null ? void 0 : filter.value) && !["operator", "value"].includes(filterInputType) ? /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: css.cx(styles.basePill, styles.valuePill)
+  }, valueLabel) : null) : null, /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$n(__spreadValues$A({}, getReferenceProps({
+    ref: refs.setReference,
+    onChange,
+    value: inputValue,
+    placeholder: !isAlwaysWip ? filterInputType === "operator" ? `${filter[filterInputType]} ${valueLabel}` : filter[filterInputType] : "Filter by label values",
+    "aria-autocomplete": "list",
+    onKeyDown(event) {
+      if (!open) {
+        setOpen(true);
+        return;
+      }
+      if (filterInputType === "operator") {
+        handleShiftTabInput(event);
+      }
+      handleBackspaceInput(event);
+      handleTabInput(event);
+      handleEnterInput(event);
+    }
+  })), {
+    className: css.cx(styles.inputStyle, { [styles.loadingInputPadding]: !optionsLoading }),
+    onClick: (event) => {
+      event.stopPropagation();
+      setOpen(true);
+    },
+    onFocus: () => {
+      setActiveIndex(0);
+      setOpen(true);
+    }
+  })), optionsLoading ? /* @__PURE__ */ React__default["default"].createElement(ui.Spinner, {
+    className: styles.loadingIndicator,
+    inline: true
+  }) : null, /* @__PURE__ */ React__default["default"].createElement(react.FloatingPortal, null, open && /* @__PURE__ */ React__default["default"].createElement(react.FloatingFocusManager, {
+    context,
+    initialFocus: -1,
+    visuallyHiddenDismiss: true,
+    modal: false
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    style: __spreadProps$n(__spreadValues$A({}, floatingStyles), {
+      width: `${optionsError ? ERROR_STATE_DROPDOWN_WIDTH : maxOptionWidth}px`
+    }),
+    ref: refs.setFloating,
+    className: styles.dropdownWrapper,
+    tabIndex: -1
+  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$n(__spreadValues$A({
+    style: {
+      height: `${rowVirtualizer.getTotalSize() || VIRTUAL_LIST_ITEM_HEIGHT}px`
+    }
+  }, getFloatingProps()), {
+    tabIndex: -1
+  }), optionsLoading ? /* @__PURE__ */ React__default["default"].createElement(LoadingOptionsPlaceholder, null) : optionsError ? /* @__PURE__ */ React__default["default"].createElement(OptionsErrorPlaceholder, {
+    handleFetchOptions: () => handleFetchOptions(filterInputType)
+  }) : !filteredDropDownItems.length && (filterInputType === "operator" || !inputValue) ? /* @__PURE__ */ React__default["default"].createElement(NoOptionsPlaceholder, null) : rowVirtualizer.getVirtualItems().map((virtualItem) => {
+    var _a2;
+    const item = filteredDropDownItems[virtualItem.index];
+    const index = virtualItem.index;
+    if (item.options) {
+      return /* @__PURE__ */ React__default["default"].createElement("div", {
+        key: `${item.label}+${index}`,
+        className: css.cx(styles.optionGroupLabel, styles.groupTopBorder),
+        style: {
+          height: `${virtualItem.size}px`,
+          transform: `translateY(${virtualItem.start}px)`
+        }
+      }, /* @__PURE__ */ React__default["default"].createElement(ui.Text, {
+        weight: "bold",
+        variant: "bodySmall",
+        color: "secondary"
+      }, item.label));
+    }
+    const nextItem = filteredDropDownItems[virtualItem.index + 1];
+    const shouldAddBottomBorder = nextItem && !nextItem.group && !nextItem.options && item.group;
+    return /* @__PURE__ */ React__default["default"].createElement(DropdownItem, __spreadProps$n(__spreadValues$A({}, getItemProps({
+      key: `${item.value}-${index}`,
+      ref(node) {
+        listRef.current[index] = node;
+      },
+      onClick(event) {
+        if (filterInputType !== "value") {
+          event.stopPropagation();
+        }
+        model._updateFilter(filter, generateFilterUpdatePayload(filterInputType, item));
+        setInputValue("");
+        switchToNextInputType(
+          filterInputType,
+          setInputType,
+          handleChangeViewMode,
+          refs.domReference.current
+        );
+      }
+    })), {
+      active: activeIndex === index,
+      addGroupBottomBorder: shouldAddBottomBorder,
+      style: {
+        height: `${virtualItem.size}px`,
+        transform: `translateY(${virtualItem.start}px)`
+      },
+      "aria-setsize": filteredDropDownItems.length,
+      "aria-posinset": virtualItem.index + 1
+    }), item.isCustom ? "Use custom value: " : "", " ", (_a2 = item.label) != null ? _a2 : item.value);
+  }))))));
+});
+const getStyles$b = (theme) => ({
+  comboboxWrapper: css.css({
+    display: "flex",
+    flexWrap: "nowrap"
+  }),
+  pillWrapper: css.css({
+    display: "flex",
+    alignItems: "center",
+    whiteSpace: "nowrap"
+  }),
+  basePill: css.css(__spreadProps$n(__spreadValues$A({
+    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"
+  })),
+  keyPill: css.css({
+    fontWeight: theme.typography.fontWeightBold,
+    cursor: "default"
+  }),
+  operatorPill: css.css({
+    "&:hover": {
+      background: theme.colors.action.hover
+    }
+  }),
+  valuePill: css.css({
+    background: theme.colors.action.selected
+  }),
+  dropdownWrapper: css.css({
+    backgroundColor: theme.colors.background.primary,
+    color: theme.colors.text.primary,
+    boxShadow: theme.shadows.z2,
+    overflowY: "auto",
+    zIndex: theme.zIndex.dropdown
+  }),
+  inputStyle: css.css({
+    paddingBlock: 0,
+    "&:focus": {
+      outline: "none"
+    }
+  }),
+  loadingIndicator: css.css({
+    color: theme.colors.text.secondary,
+    marginLeft: theme.spacing(0.5)
+  }),
+  loadingInputPadding: css.css({
+    paddingRight: theme.spacing(2.5)
+  }),
+  optionGroupLabel: css.css({
+    padding: theme.spacing(1),
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%"
+  }),
+  groupTopBorder: css.css({
+    "&:not(:first-child)": {
+      borderTop: `1px solid ${theme.colors.border.weak}`
+    }
+  })
+});
+
+var __defProp$z = Object.defineProperty;
+var __defProps$m = Object.defineProperties;
+var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$z = Object.getOwnPropertySymbols;
+var __hasOwnProp$z = Object.prototype.hasOwnProperty;
+var __propIsEnum$z = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$z = (obj, key, value) => key in obj ? __defProp$z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$z = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$z.call(b, prop))
+      __defNormalProp$z(a, prop, b[prop]);
+  if (__getOwnPropSymbols$z)
+    for (var prop of __getOwnPropSymbols$z(b)) {
+      if (__propIsEnum$z.call(b, prop))
+        __defNormalProp$z(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
+function AdHocFilterPill({ filter, model, readOnly }) {
+  var _a, _b, _c;
+  const styles = ui.useStyles2(getStyles$a);
+  const [viewMode, setViewMode] = React.useState(true);
+  const pillWrapperRef = React.useRef(null);
+  const keyLabel = (_a = filter.keyLabel) != null ? _a : filter.key;
+  const valueLabel = (_c = (_b = filter.valueLabels) == null ? void 0 : _b[0]) != null ? _c : filter.value;
+  const handleChangeViewMode = React.useCallback(
+    (event) => {
+      var _a2;
+      event == null ? void 0 : event.stopPropagation();
+      if (readOnly) {
+        return;
+      }
+      let viewMode2 = false;
+      reactDom.flushSync(() => {
+        setViewMode((mode) => {
+          viewMode2 = mode;
+          return !mode;
+        });
+      });
+      if (!viewMode2) {
+        (_a2 = pillWrapperRef.current) == null ? void 0 : _a2.focus();
+      }
+    },
+    [readOnly]
+  );
+  if (viewMode) {
+    return /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: css.cx(styles.combinedFilterPill, { [styles.readOnlyCombinedFilter]: readOnly }),
+      onClick: handleChangeViewMode,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          handleChangeViewMode();
+        }
+      },
+      role: "button",
+      "aria-label": `Edit filter with key ${keyLabel}`,
+      tabIndex: 0,
+      ref: pillWrapperRef
+    }, /* @__PURE__ */ React__default["default"].createElement("span", null, keyLabel, " ", filter.operator, " ", valueLabel), !readOnly ? /* @__PURE__ */ React__default["default"].createElement(ui.IconButton, {
+      onClick: (e) => {
+        e.stopPropagation();
+        model._removeFilter(filter);
+      },
+      onKeyDownCapture: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          e.stopPropagation();
+          model._removeFilter(filter);
+        }
+      },
+      name: "times",
+      size: "md",
+      className: styles.removeButton,
+      tooltip: `Remove filter with key ${keyLabel}`
+    }) : null);
+  }
+  return /* @__PURE__ */ React__default["default"].createElement(AdHocCombobox, {
+    filter,
+    model,
+    handleChangeViewMode
+  });
+}
+const getStyles$a = (theme) => ({
+  combinedFilterPill: css.css(__spreadProps$m(__spreadValues$z({
+    display: "flex",
+    alignItems: "center",
+    background: theme.colors.action.selected,
+    borderRadius: theme.shape.radius.default,
+    border: `1px solid ${theme.colors.border.weak}`,
+    padding: theme.spacing(0.125, 0, 0.125, 1),
+    color: theme.colors.text.primary,
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    minHeight: theme.spacing(2.75)
+  }, theme.typography.bodySmall), {
+    fontWeight: theme.typography.fontWeightBold,
+    cursor: "pointer",
+    "&:hover": {
+      background: theme.colors.action.hover
+    }
+  })),
+  readOnlyCombinedFilter: css.css({
+    paddingRight: theme.spacing(1),
+    cursor: "text",
+    "&:hover": {
+      background: theme.colors.action.selected
+    }
+  }),
+  removeButton: css.css({
+    marginInline: theme.spacing(0.5),
+    cursor: "pointer",
+    "&:hover": {
+      color: theme.colors.text.primary
+    }
+  })
+});
+
+const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwaysWipCombobox2({ model }, parentRef) {
+  const { _wip } = model.useState();
+  React.useLayoutEffect(() => {
+    if (!_wip) {
+      model._addWip();
+    }
+  }, [_wip]);
+  return /* @__PURE__ */ React__default["default"].createElement(AdHocCombobox, {
+    model,
+    filter: _wip,
+    isAlwaysWip: true,
+    ref: parentRef
+  });
+});
+
+const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ model }) {
+  const { filters, readOnly } = model.useState();
+  const styles = ui.useStyles2(getStyles$9);
+  const focusOnInputRef = React.useRef();
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: css.cx(styles.comboboxWrapper, { [styles.comboboxFocusOutline]: !readOnly }),
+    onClick: () => {
+      var _a;
+      (_a = focusOnInputRef.current) == null ? void 0 : _a.call(focusOnInputRef);
+    }
+  }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
+    name: "filter",
+    className: styles.filterIcon,
+    size: "lg"
+  }), filters.map((filter, index) => /* @__PURE__ */ React__default["default"].createElement(AdHocFilterPill, {
+    key: index,
+    filter,
+    model,
+    readOnly
+  })), !readOnly ? /* @__PURE__ */ React__default["default"].createElement(AdHocFiltersAlwaysWipCombobox, {
+    model,
+    ref: focusOnInputRef
+  }) : null);
+});
+const getStyles$9 = (theme) => ({
+  comboboxWrapper: css.css({
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    columnGap: theme.spacing(1),
+    rowGap: theme.spacing(0.5),
+    minHeight: theme.spacing(4),
+    backgroundColor: theme.components.input.background,
+    border: `1px solid ${theme.colors.border.strong}`,
+    borderRadius: theme.shape.radius.default,
+    paddingInline: theme.spacing(1),
+    paddingBlock: theme.spacing(0.5),
+    flexGrow: 1
+  }),
+  comboboxFocusOutline: css.css({
+    "&:focus-within": {
+      outline: "2px dotted transparent",
+      outlineOffset: "2px",
+      boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,
+      transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,
+      transitionDuration: "0.2s",
+      transitionProperty: "outline, outline-offset, box-shadow",
+      zIndex: 2
+    }
+  }),
+  filterIcon: css.css({
+    color: theme.colors.text.secondary,
+    alignSelf: "center"
+  })
+});
+
 var __defProp$y = Object.defineProperty;
 var __getOwnPropSymbols$y = Object.getOwnPropertySymbols;
 var __hasOwnProp$y = Object.prototype.hasOwnProperty;
@@ -3574,29 +4383,38 @@ var __spreadValues$y = (a, b) => {
     }
   return a;
 };
-const OPERATORS = [{
-  value: "="
-}, {
-  value: "!="
-}, {
-  value: "=|",
-  description: "Is one of. Use to filter on multiple values.",
-  isMulti: true
-}, {
-  value: "!=|",
-  description: "Is not one of. Use to exclude multiple values.",
-  isMulti: true
-}, {
-  value: "=~",
-  description: "Matches regex"
-}, {
-  value: "!~",
-  description: "Does not match regex"
-}, {
-  value: "<"
-}, {
-  value: ">"
-}];
+const OPERATORS = [
+  {
+    value: "="
+  },
+  {
+    value: "!="
+  },
+  {
+    value: "=|",
+    description: "Is one of. Use to filter on multiple values.",
+    isMulti: true
+  },
+  {
+    value: "!=|",
+    description: "Is not one of. Use to exclude multiple values.",
+    isMulti: true
+  },
+  {
+    value: "=~",
+    description: "Matches regex"
+  },
+  {
+    value: "!~",
+    description: "Does not match regex"
+  },
+  {
+    value: "<"
+  },
+  {
+    value: ">"
+  }
+];
 class AdHocFiltersVariable extends SceneObjectBase {
   constructor(state) {
     var _a, _b;
@@ -3651,6 +4469,12 @@ class AdHocFiltersVariable extends SceneObjectBase {
     }
     this.setState({ filters: this.state.filters.filter((f) => f !== filter) });
   }
+  _removeLastFilter() {
+    const filterToRemove = this.state.filters.at(-1);
+    if (filterToRemove) {
+      this._removeFilter(filterToRemove);
+    }
+  }
   async _getKeys(currentKey) {
     var _a, _b, _c;
     const override = await ((_b = (_a = this.state).getTagKeysProvider) == null ? void 0 : _b.call(_a, this, currentKey));
@@ -3734,6 +4558,11 @@ function renderExpression(builder, filters) {
 function AdHocFiltersVariableRenderer({ model }) {
   const { filters, readOnly, addFilterButtonText } = model.useState();
   const styles = ui.useStyles2(getStyles$8);
+  if (!model.state.supportsMultiValueOperators && model.state.layout === "combobox") {
+    return /* @__PURE__ */ React__default["default"].createElement(AdHocFiltersComboboxRenderer, {
+      model
+    });
+  }
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: styles.wrapper
   }, filters.map((filter, index) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, {
@@ -3754,10 +4583,6 @@ const getStyles$8 = (theme) => ({
     alignItems: "flex-end",
     columnGap: theme.spacing(2),
     rowGap: theme.spacing(1)
-  }),
-  filterIcon: css.css({
-    color: theme.colors.text.secondary,
-    paddingRight: theme.spacing(0.5)
   })
 });
 function toSelectableValue(input) {