@grafana/scenes 5.21.0 → 5.21.1--canary.942.11596584089.0

package/dist/index.js

@@ -77,8 +77,8 @@ function renderSceneComponentWithRouteProps(sceneObject, routeProps) {
 }
 
 var __defProp$N = Object.defineProperty;
-var __defProps$u = Object.defineProperties;
-var __getOwnPropDescs$u = Object.getOwnPropertyDescriptors;
+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;
@@ -94,13 +94,13 @@ var __spreadValues$N = (a, b) => {
     }
   return a;
 };
-var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
+var __spreadProps$v = (a, b) => __defProps$v(a, __getOwnPropDescs$v(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$u(__spreadValues$N({}, plugin.meta), {
+  plugin.meta = __spreadProps$v(__spreadValues$N({}, plugin.meta), {
     id: pluginId,
     name: pluginId,
     module: "runtime plugin",
@@ -129,8 +129,8 @@ function loadPanelPluginSync(pluginId) {
 }
 
 var __defProp$M = Object.defineProperty;
-var __defProps$t = Object.defineProperties;
-var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
+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;
@@ -146,7 +146,7 @@ var __spreadValues$M = (a, b) => {
     }
   return a;
 };
-var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
+var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
 var __objRest$5 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -172,7 +172,7 @@ function SceneComponentWrapperWithoutMemo(_a) {
   if (!model.isActive) {
     return null;
   }
-  return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$t(__spreadValues$M({}, otherProps), {
+  return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$u(__spreadValues$M({}, otherProps), {
     model
   }));
 }
@@ -1747,8 +1747,8 @@ function collectAllVariables(sceneObject, record = {}) {
 }
 
 var __defProp$H = Object.defineProperty;
-var __defProps$s = Object.defineProperties;
-var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
+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;
@@ -1764,7 +1764,7 @@ var __spreadValues$H = (a, b) => {
     }
   return a;
 };
-var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
+var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
 function getTemplateProxyForField(field, frame, frames) {
   return new Proxy(
     {},
@@ -1780,7 +1780,7 @@ function getTemplateProxyForField(field, frame, frames) {
           if (!field.labels) {
             return "";
           }
-          return __spreadProps$s(__spreadValues$H({}, field.labels), {
+          return __spreadProps$t(__spreadValues$H({}, field.labels), {
             __values: Object.values(field.labels).sort().join(", "),
             toString: () => {
               return data.formatLabels(field.labels, "", true);
@@ -2278,8 +2278,8 @@ function isExtraQueryProvider(obj) {
 }
 
 var __defProp$G = Object.defineProperty;
-var __defProps$r = Object.defineProperties;
-var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
+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;
@@ -2295,7 +2295,7 @@ var __spreadValues$G = (a, b) => {
     }
   return a;
 };
-var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
+var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
 const passthroughProcessor = (_, secondary) => rxjs.of(secondary);
 const extraQueryProcessingOperator = (processors) => (data) => {
   return data.pipe(
@@ -2308,7 +2308,7 @@ const extraQueryProcessingOperator = (processors) => (data) => {
     }),
     rxjs.map(([primary, ...processedSecondaries]) => {
       var _a;
-      return __spreadProps$r(__spreadValues$G({}, primary), {
+      return __spreadProps$s(__spreadValues$G({}, primary), {
         series: [...primary.series, ...processedSecondaries.flatMap((s) => s.series)],
         annotations: [...(_a = primary.annotations) != null ? _a : [], ...processedSecondaries.flatMap((s) => {
           var _a2;
@@ -2320,8 +2320,8 @@ const extraQueryProcessingOperator = (processors) => (data) => {
 };
 
 var __defProp$F = Object.defineProperty;
-var __defProps$q = Object.defineProperties;
-var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
+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;
@@ -2337,7 +2337,7 @@ var __spreadValues$F = (a, b) => {
     }
   return a;
 };
-var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
+var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
 function filterAnnotations(data, filters) {
   var _a;
   if (!Array.isArray(data) || data.length === 0) {
@@ -2388,11 +2388,11 @@ function filterAnnotations(data, filters) {
           continue;
         }
       }
-      fields.push(__spreadProps$q(__spreadValues$F({}, field), {
+      fields.push(__spreadProps$r(__spreadValues$F({}, field), {
         values: buffer
       }));
     }
-    processed.push(__spreadProps$q(__spreadValues$F({}, frame), {
+    processed.push(__spreadProps$r(__spreadValues$F({}, frame), {
       fields,
       length: frameLength
     }));
@@ -2543,8 +2543,8 @@ function getOptionSearcher(options, includeAll) {
 }
 
 var __defProp$E = Object.defineProperty;
-var __defProps$p = Object.defineProperties;
-var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors;
+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;
@@ -2560,7 +2560,7 @@ var __spreadValues$E = (a, b) => {
     }
   return a;
 };
-var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
+var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
 var __objRest$4 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -2716,7 +2716,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$p(__spreadValues$E({
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$q(__spreadValues$E({
     ref: innerRef,
     className: css.cx(selectStyles.option, isFocused && selectStyles.optionFocused)
   }, rest), {
@@ -2882,8 +2882,8 @@ function wrapInSafeSerializableSceneObject(sceneObject) {
 }
 
 var __defProp$D = Object.defineProperty;
-var __defProps$o = Object.defineProperties;
-var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
+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;
@@ -2899,10 +2899,10 @@ var __spreadValues$D = (a, b) => {
     }
   return a;
 };
-var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
+var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
 class GroupByVariable extends MultiValueVariable {
   constructor(initialState) {
-    super(__spreadProps$o(__spreadValues$D({
+    super(__spreadProps$p(__spreadValues$D({
       isMulti: true,
       name: "",
       value: [],
@@ -3872,15 +3872,16 @@ const nextInputTypeMap = {
   operator: "value",
   value: "key"
 };
-const switchToNextInputType = (filterInputType, setInputType, handleChangeViewMode, element) => switchInputType(
+const switchToNextInputType = (filterInputType, setInputType, handleChangeViewMode, element, shouldFocusOnPillWrapperOverride) => switchInputType(
   nextInputTypeMap[filterInputType],
   setInputType,
   filterInputType === "value" ? handleChangeViewMode : void 0,
-  element
+  element,
+  shouldFocusOnPillWrapperOverride
 );
-const switchInputType = (filterInputType, setInputType, handleChangeViewMode, element) => {
+const switchInputType = (filterInputType, setInputType, handleChangeViewMode, element, shouldFocusOnPillWrapperOverride) => {
   setInputType(filterInputType);
-  handleChangeViewMode == null ? void 0 : handleChangeViewMode();
+  handleChangeViewMode == null ? void 0 : handleChangeViewMode(void 0, shouldFocusOnPillWrapperOverride);
   setTimeout(() => element == null ? void 0 : element.focus());
 };
 const generateFilterUpdatePayload = ({
@@ -4013,8 +4014,8 @@ const useFloatingInteractions = ({
 };
 
 var __defProp$A = Object.defineProperty;
-var __defProps$n = Object.defineProperties;
-var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
+var __defProps$o = Object.defineProperties;
+var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$A = Object.getOwnPropertySymbols;
 var __hasOwnProp$A = Object.prototype.hasOwnProperty;
 var __propIsEnum$A = Object.prototype.propertyIsEnumerable;
@@ -4030,8 +4031,8 @@ var __spreadValues$A = (a, b) => {
     }
   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 __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
+const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model, isAlwaysWip, handleChangeViewMode, focusOnWipInputRef }, parentRef) {
   var _a, _b, _c;
   const [open, setOpen] = React.useState(false);
   const [options, setOptions] = React.useState([]);
@@ -4050,6 +4051,15 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
   const listRef = React.useRef([]);
   const disabledIndicesRef = React.useRef([]);
   const optionsSearcher = React.useMemo(() => fuzzySearchOptions(options), [options]);
+  const isLastFilter = React.useMemo(() => {
+    if (isAlwaysWip) {
+      return false;
+    }
+    if (model.state.filters.at(-1) === filter) {
+      return true;
+    }
+    return false;
+  }, [filter, isAlwaysWip, model.state.filters]);
   const handleResetWip = React.useCallback(() => {
     if (isAlwaysWip) {
       model._addWip();
@@ -4166,6 +4176,8 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
         setOptions(options2);
         if ((_a2 = options2[0]) == null ? void 0 : _a2.group) {
           setActiveIndex(1);
+        } else {
+          setActiveIndex(0);
         }
       } catch (e) {
         setOptionsError(true);
@@ -4183,19 +4195,37 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
   const handleBackspaceInput = React.useCallback(
     (event, multiValueEdit) => {
       if (event.key === "Backspace" && !inputValue) {
-        if (multiValueEdit) {
-          setFilterMultiValues((items) => {
-            const updated = [...items];
-            updated.splice(-1, 1);
-            return updated;
-          });
-        } else if (filterInputType === "key") {
-          model._removeLastFilter();
-          handleFetchOptions(filterInputType);
+        if (filterInputType === "value") {
+          if (multiValueEdit) {
+            if (filterMultiValues.length) {
+              setFilterMultiValues((items) => {
+                const updated = [...items];
+                updated.splice(-1, 1);
+                return updated;
+              });
+              return;
+            }
+          }
+          setInputType("operator");
+          return;
+        }
+        focusOnWipInputRef == null ? void 0 : focusOnWipInputRef();
+        model._handleComboboxBackspace(filter);
+        if (isAlwaysWip) {
+          handleResetWip();
         }
       }
     },
-    [inputValue, filterInputType, model, handleFetchOptions]
+    [
+      inputValue,
+      filterInputType,
+      model,
+      filter,
+      isAlwaysWip,
+      filterMultiValues.length,
+      handleResetWip,
+      focusOnWipInputRef
+    ]
   );
   const handleTabInput = React.useCallback(
     (event, multiValueEdit) => {
@@ -4252,21 +4282,32 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
               setFilterMultiValues
             })
           );
-          switchToNextInputType(filterInputType, setInputType, handleChangeViewMode, refs.domReference.current);
-          setActiveIndex(0);
+          switchToNextInputType(
+            filterInputType,
+            setInputType,
+            handleChangeViewMode,
+            refs.domReference.current,
+            isLastFilter ? false : void 0
+          );
+          setActiveIndex(null);
+          if (isLastFilter) {
+            focusOnWipInputRef == null ? void 0 : focusOnWipInputRef();
+          }
         }
         setInputValue("");
       }
     },
     [
       activeIndex,
-      filter,
-      filterInputType,
       filteredDropDownItems,
       handleLocalMultiValueChange,
-      handleChangeViewMode,
       model,
-      refs.domReference
+      filter,
+      filterInputType,
+      handleChangeViewMode,
+      refs.domReference,
+      isLastFilter,
+      focusOnWipInputRef
     ]
   );
   React.useEffect(() => {
@@ -4339,7 +4380,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     item,
     index: i,
     handleRemoveMultiValue
-  })) : null) : null, /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$n(__spreadValues$A({}, getReferenceProps({
+  })) : null) : null, /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$o(__spreadValues$A({}, getReferenceProps({
     ref: refs.setReference,
     onChange,
     value: inputValue,
@@ -4376,14 +4417,14 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     visuallyHiddenDismiss: true,
     modal: false
   }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
-    style: __spreadProps$n(__spreadValues$A({}, floatingStyles), {
+    style: __spreadProps$o(__spreadValues$A({}, floatingStyles), {
       width: `${optionsError ? ERROR_STATE_DROPDOWN_WIDTH : maxOptionWidth}px`,
       transform: isMultiValueEdit ? `translate(${((_b = multiValuePillWrapperRef.current) == null ? void 0 : _b.getBoundingClientRect().left) || 0}px, ${(((_c = refs.domReference.current) == null ? void 0 : _c.getBoundingClientRect().bottom) || 0) + 10}px )` : floatingStyles.transform
     }),
     ref: refs.setFloating,
     className: styles.dropdownWrapper,
     tabIndex: -1
-  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$n(__spreadValues$A({
+  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$o(__spreadValues$A({
     style: {
       height: `${rowVirtualizer.getTotalSize() || VIRTUAL_LIST_ITEM_HEIGHT}px`
     }
@@ -4411,7 +4452,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     }
     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({
+    return /* @__PURE__ */ React__default["default"].createElement(DropdownItem, __spreadProps$o(__spreadValues$A({}, getItemProps({
       key: `${item.value}-${index}`,
       ref(node) {
         listRef.current[index] = node;
@@ -4441,7 +4482,8 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
             filterInputType,
             setInputType,
             handleChangeViewMode,
-            refs.domReference.current
+            refs.domReference.current,
+            false
           );
         }
       }
@@ -4507,7 +4549,7 @@ const getStyles$b = (theme) => ({
     alignItems: "center",
     flexWrap: "wrap"
   }),
-  basePill: css.css(__spreadProps$n(__spreadValues$A({
+  basePill: css.css(__spreadProps$o(__spreadValues$A({
     display: "flex",
     alignItems: "center",
     background: theme.colors.action.disabledBackground,
@@ -4574,7 +4616,7 @@ const getStyles$b = (theme) => ({
       color: theme.colors.text.primary
     }
   }),
-  descriptionText: css.css(__spreadProps$n(__spreadValues$A({}, theme.typography.bodySmall), {
+  descriptionText: css.css(__spreadProps$o(__spreadValues$A({}, theme.typography.bodySmall), {
     color: theme.colors.text.secondary,
     paddingTop: theme.spacing(0.5)
   })),
@@ -4587,8 +4629,8 @@ const getStyles$b = (theme) => ({
 });
 
 var __defProp$z = Object.defineProperty;
-var __defProps$m = Object.defineProperties;
-var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
+var __defProps$n = Object.defineProperties;
+var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$z = Object.getOwnPropertySymbols;
 var __hasOwnProp$z = Object.prototype.hasOwnProperty;
 var __propIsEnum$z = Object.prototype.propertyIsEnumerable;
@@ -4604,33 +4646,39 @@ var __spreadValues$z = (a, b) => {
     }
   return a;
 };
-var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
-function AdHocFilterPill({ filter, model, readOnly, focusOnInputRef }) {
+var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
+function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
   var _a, _b, _c;
   const styles = ui.useStyles2(getStyles$a);
   const [viewMode, setViewMode] = React.useState(true);
-  const [shouldFocus, setShouldFocus] = React.useState(false);
+  const [shouldFocusOnPillWrapper, setShouldFocusOnPillWrapper] = React.useState(false);
   const pillWrapperRef = React.useRef(null);
   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(
-    (event) => {
+    (event, shouldFocusOnPillWrapperOverride) => {
       event == null ? void 0 : event.stopPropagation();
       if (readOnly) {
         return;
       }
-      setShouldFocus(!viewMode);
+      setShouldFocusOnPillWrapper(shouldFocusOnPillWrapperOverride != null ? shouldFocusOnPillWrapperOverride : !viewMode);
       setViewMode(!viewMode);
     },
     [readOnly, viewMode]
   );
   React.useEffect(() => {
     var _a2;
-    if (shouldFocus) {
+    if (shouldFocusOnPillWrapper) {
       (_a2 = pillWrapperRef.current) == null ? void 0 : _a2.focus();
-      setShouldFocus(false);
+      setShouldFocusOnPillWrapper(false);
+    }
+  }, [shouldFocusOnPillWrapper]);
+  React.useEffect(() => {
+    if (filter.forceEdit && viewMode) {
+      setViewMode(false);
+      model._updateFilter(filter, { forceEdit: void 0 });
     }
-  }, [shouldFocus]);
+  }, [filter, model, viewMode]);
   if (viewMode) {
     const pillText = /* @__PURE__ */ React__default["default"].createElement("span", {
       className: styles.pillText
@@ -4656,14 +4704,14 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnInputRef }) {
       onClick: (e) => {
         e.stopPropagation();
         model._removeFilter(filter);
-        setTimeout(() => focusOnInputRef == null ? void 0 : focusOnInputRef());
+        setTimeout(() => focusOnWipInputRef == null ? void 0 : focusOnWipInputRef());
       },
       onKeyDownCapture: (e) => {
         if (e.key === "Enter") {
           e.preventDefault();
           e.stopPropagation();
           model._removeFilter(filter);
-          setTimeout(() => focusOnInputRef == null ? void 0 : focusOnInputRef());
+          setTimeout(() => focusOnWipInputRef == null ? void 0 : focusOnWipInputRef());
         }
       },
       name: "times",
@@ -4675,11 +4723,12 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnInputRef }) {
   return /* @__PURE__ */ React__default["default"].createElement(AdHocCombobox, {
     filter,
     model,
-    handleChangeViewMode
+    handleChangeViewMode,
+    focusOnWipInputRef
   });
 }
 const getStyles$a = (theme) => ({
-  combinedFilterPill: css.css(__spreadProps$m(__spreadValues$z({
+  combinedFilterPill: css.css(__spreadProps$n(__spreadValues$z({
     display: "flex",
     alignItems: "center",
     background: theme.colors.action.selected,
@@ -4740,26 +4789,26 @@ const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwa
 const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ model }) {
   const { filters, readOnly } = model.useState();
   const styles = ui.useStyles2(getStyles$9);
-  const focusOnInputRef = React.useRef();
+  const focusOnWipInputRef = 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);
+      (_a = focusOnWipInputRef.current) == null ? void 0 : _a.call(focusOnWipInputRef);
     }
   }, /* @__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,
+    key: `${index}-${filter.key}`,
     filter,
     model,
     readOnly,
-    focusOnInputRef: focusOnInputRef.current
+    focusOnWipInputRef: focusOnWipInputRef.current
   })), !readOnly ? /* @__PURE__ */ React__default["default"].createElement(AdHocFiltersAlwaysWipCombobox, {
     model,
-    ref: focusOnInputRef
+    ref: focusOnWipInputRef
   }) : null);
 });
 const getStyles$9 = (theme) => ({
@@ -4795,6 +4844,8 @@ const getStyles$9 = (theme) => ({
 });
 
 var __defProp$y = Object.defineProperty;
+var __defProps$m = Object.defineProperties;
+var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$y = Object.getOwnPropertySymbols;
 var __hasOwnProp$y = Object.prototype.hasOwnProperty;
 var __propIsEnum$y = Object.prototype.propertyIsEnumerable;
@@ -4810,6 +4861,7 @@ var __spreadValues$y = (a, b) => {
     }
   return a;
 };
+var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
 const OPERATORS = [
   {
     value: "=",
@@ -4906,6 +4958,30 @@ class AdHocFiltersVariable extends SceneObjectBase {
       this._removeFilter(filterToRemove);
     }
   }
+  _handleComboboxBackspace(filter) {
+    if (this.state.filters.length) {
+      let filterToForceIndex = this.state.filters.length - 1;
+      if (filter !== this.state._wip) {
+        filterToForceIndex = -1;
+      }
+      this.setState({
+        filters: this.state.filters.reduce((acc, f, index) => {
+          if (index === filterToForceIndex) {
+            return [
+              ...acc,
+              __spreadProps$m(__spreadValues$y({}, f), {
+                forceEdit: true
+              })
+            ];
+          }
+          if (f === filter) {
+            return acc;
+          }
+          return [...acc, f];
+        }, [])
+      });
+    }
+  }
   async _getKeys(currentKey) {
     var _a, _b, _c;
     const override = await ((_b = (_a = this.state).getTagKeysProvider) == null ? void 0 : _b.call(_a, this, currentKey));