@grafana/scenes 5.20.3 → 5.20.5--canary.942.11520639649.0

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.js CHANGED
@@ -77,8 +77,8 @@ function renderSceneComponentWithRouteProps(sceneObject, routeProps) {
77
77
  }
78
78
 
79
79
  var __defProp$N = Object.defineProperty;
80
- var __defProps$u = Object.defineProperties;
81
- var __getOwnPropDescs$u = Object.getOwnPropertyDescriptors;
80
+ var __defProps$v = Object.defineProperties;
81
+ var __getOwnPropDescs$v = Object.getOwnPropertyDescriptors;
82
82
  var __getOwnPropSymbols$N = Object.getOwnPropertySymbols;
83
83
  var __hasOwnProp$N = Object.prototype.hasOwnProperty;
84
84
  var __propIsEnum$N = Object.prototype.propertyIsEnumerable;
@@ -94,13 +94,13 @@ var __spreadValues$N = (a, b) => {
94
94
  }
95
95
  return a;
96
96
  };
97
- var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
97
+ var __spreadProps$v = (a, b) => __defProps$v(a, __getOwnPropDescs$v(b));
98
98
  const runtimePanelPlugins = /* @__PURE__ */ new Map();
99
99
  function registerRuntimePanelPlugin({ pluginId, plugin }) {
100
100
  if (runtimePanelPlugins.has(pluginId)) {
101
101
  throw new Error(`A runtime panel plugin with id ${pluginId} has already been registered`);
102
102
  }
103
- plugin.meta = __spreadProps$u(__spreadValues$N({}, plugin.meta), {
103
+ plugin.meta = __spreadProps$v(__spreadValues$N({}, plugin.meta), {
104
104
  id: pluginId,
105
105
  name: pluginId,
106
106
  module: "runtime plugin",
@@ -129,8 +129,8 @@ function loadPanelPluginSync(pluginId) {
129
129
  }
130
130
 
131
131
  var __defProp$M = Object.defineProperty;
132
- var __defProps$t = Object.defineProperties;
133
- var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
132
+ var __defProps$u = Object.defineProperties;
133
+ var __getOwnPropDescs$u = Object.getOwnPropertyDescriptors;
134
134
  var __getOwnPropSymbols$M = Object.getOwnPropertySymbols;
135
135
  var __hasOwnProp$M = Object.prototype.hasOwnProperty;
136
136
  var __propIsEnum$M = Object.prototype.propertyIsEnumerable;
@@ -146,7 +146,7 @@ var __spreadValues$M = (a, b) => {
146
146
  }
147
147
  return a;
148
148
  };
149
- var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
149
+ var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
150
150
  var __objRest$5 = (source, exclude) => {
151
151
  var target = {};
152
152
  for (var prop in source)
@@ -172,7 +172,7 @@ function SceneComponentWrapperWithoutMemo(_a) {
172
172
  if (!model.isActive) {
173
173
  return null;
174
174
  }
175
- return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$t(__spreadValues$M({}, otherProps), {
175
+ return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$u(__spreadValues$M({}, otherProps), {
176
176
  model
177
177
  }));
178
178
  }
@@ -1746,8 +1746,8 @@ function collectAllVariables(sceneObject, record = {}) {
1746
1746
  }
1747
1747
 
1748
1748
  var __defProp$H = Object.defineProperty;
1749
- var __defProps$s = Object.defineProperties;
1750
- var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
1749
+ var __defProps$t = Object.defineProperties;
1750
+ var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
1751
1751
  var __getOwnPropSymbols$H = Object.getOwnPropertySymbols;
1752
1752
  var __hasOwnProp$H = Object.prototype.hasOwnProperty;
1753
1753
  var __propIsEnum$H = Object.prototype.propertyIsEnumerable;
@@ -1763,7 +1763,7 @@ var __spreadValues$H = (a, b) => {
1763
1763
  }
1764
1764
  return a;
1765
1765
  };
1766
- var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
1766
+ var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
1767
1767
  function getTemplateProxyForField(field, frame, frames) {
1768
1768
  return new Proxy(
1769
1769
  {},
@@ -1779,7 +1779,7 @@ function getTemplateProxyForField(field, frame, frames) {
1779
1779
  if (!field.labels) {
1780
1780
  return "";
1781
1781
  }
1782
- return __spreadProps$s(__spreadValues$H({}, field.labels), {
1782
+ return __spreadProps$t(__spreadValues$H({}, field.labels), {
1783
1783
  __values: Object.values(field.labels).sort().join(", "),
1784
1784
  toString: () => {
1785
1785
  return data.formatLabels(field.labels, "", true);
@@ -2277,8 +2277,8 @@ function isExtraQueryProvider(obj) {
2277
2277
  }
2278
2278
 
2279
2279
  var __defProp$G = Object.defineProperty;
2280
- var __defProps$r = Object.defineProperties;
2281
- var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
2280
+ var __defProps$s = Object.defineProperties;
2281
+ var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
2282
2282
  var __getOwnPropSymbols$G = Object.getOwnPropertySymbols;
2283
2283
  var __hasOwnProp$G = Object.prototype.hasOwnProperty;
2284
2284
  var __propIsEnum$G = Object.prototype.propertyIsEnumerable;
@@ -2294,7 +2294,7 @@ var __spreadValues$G = (a, b) => {
2294
2294
  }
2295
2295
  return a;
2296
2296
  };
2297
- var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
2297
+ var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
2298
2298
  const passthroughProcessor = (_, secondary) => rxjs.of(secondary);
2299
2299
  const extraQueryProcessingOperator = (processors) => (data) => {
2300
2300
  return data.pipe(
@@ -2307,7 +2307,7 @@ const extraQueryProcessingOperator = (processors) => (data) => {
2307
2307
  }),
2308
2308
  rxjs.map(([primary, ...processedSecondaries]) => {
2309
2309
  var _a;
2310
- return __spreadProps$r(__spreadValues$G({}, primary), {
2310
+ return __spreadProps$s(__spreadValues$G({}, primary), {
2311
2311
  series: [...primary.series, ...processedSecondaries.flatMap((s) => s.series)],
2312
2312
  annotations: [...(_a = primary.annotations) != null ? _a : [], ...processedSecondaries.flatMap((s) => {
2313
2313
  var _a2;
@@ -2319,8 +2319,8 @@ const extraQueryProcessingOperator = (processors) => (data) => {
2319
2319
  };
2320
2320
 
2321
2321
  var __defProp$F = Object.defineProperty;
2322
- var __defProps$q = Object.defineProperties;
2323
- var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
2322
+ var __defProps$r = Object.defineProperties;
2323
+ var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
2324
2324
  var __getOwnPropSymbols$F = Object.getOwnPropertySymbols;
2325
2325
  var __hasOwnProp$F = Object.prototype.hasOwnProperty;
2326
2326
  var __propIsEnum$F = Object.prototype.propertyIsEnumerable;
@@ -2336,7 +2336,7 @@ var __spreadValues$F = (a, b) => {
2336
2336
  }
2337
2337
  return a;
2338
2338
  };
2339
- var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
2339
+ var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
2340
2340
  function filterAnnotations(data, filters) {
2341
2341
  var _a;
2342
2342
  if (!Array.isArray(data) || data.length === 0) {
@@ -2387,11 +2387,11 @@ function filterAnnotations(data, filters) {
2387
2387
  continue;
2388
2388
  }
2389
2389
  }
2390
- fields.push(__spreadProps$q(__spreadValues$F({}, field), {
2390
+ fields.push(__spreadProps$r(__spreadValues$F({}, field), {
2391
2391
  values: buffer
2392
2392
  }));
2393
2393
  }
2394
- processed.push(__spreadProps$q(__spreadValues$F({}, frame), {
2394
+ processed.push(__spreadProps$r(__spreadValues$F({}, frame), {
2395
2395
  fields,
2396
2396
  length: frameLength
2397
2397
  }));
@@ -2518,11 +2518,16 @@ function getOptionSearcher(options, includeAll) {
2518
2518
  haystack.push(allOptions[i].label);
2519
2519
  }
2520
2520
  }
2521
- const idxs = ufuzzy.filter(haystack, search);
2521
+ const [idxs, info, order] = ufuzzy.search(haystack, search);
2522
2522
  const filteredOptions = [];
2523
2523
  if (idxs) {
2524
2524
  for (let i = 0; i < idxs.length; i++) {
2525
- filteredOptions.push(allOptions[idxs[i]]);
2525
+ if (info && order) {
2526
+ const idx = order[i];
2527
+ filteredOptions.push(allOptions[idxs[idx]]);
2528
+ } else {
2529
+ filteredOptions.push(allOptions[idxs[i]]);
2530
+ }
2526
2531
  if (filteredOptions.length > limit) {
2527
2532
  return filteredOptions;
2528
2533
  }
@@ -2537,8 +2542,8 @@ function getOptionSearcher(options, includeAll) {
2537
2542
  }
2538
2543
 
2539
2544
  var __defProp$E = Object.defineProperty;
2540
- var __defProps$p = Object.defineProperties;
2541
- var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors;
2545
+ var __defProps$q = Object.defineProperties;
2546
+ var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
2542
2547
  var __getOwnPropSymbols$E = Object.getOwnPropertySymbols;
2543
2548
  var __hasOwnProp$E = Object.prototype.hasOwnProperty;
2544
2549
  var __propIsEnum$E = Object.prototype.propertyIsEnumerable;
@@ -2554,7 +2559,7 @@ var __spreadValues$E = (a, b) => {
2554
2559
  }
2555
2560
  return a;
2556
2561
  };
2557
- var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
2562
+ var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
2558
2563
  var __objRest$4 = (source, exclude) => {
2559
2564
  var target = {};
2560
2565
  for (var prop in source)
@@ -2710,7 +2715,7 @@ const OptionWithCheckbox = ({
2710
2715
  const theme = ui.useTheme2();
2711
2716
  const selectStyles = ui.getSelectStyles(theme);
2712
2717
  const optionStyles = ui.useStyles2(getOptionStyles);
2713
- return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$p(__spreadValues$E({
2718
+ return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$q(__spreadValues$E({
2714
2719
  ref: innerRef,
2715
2720
  className: css.cx(selectStyles.option, isFocused && selectStyles.optionFocused)
2716
2721
  }, rest), {
@@ -2876,8 +2881,8 @@ function wrapInSafeSerializableSceneObject(sceneObject) {
2876
2881
  }
2877
2882
 
2878
2883
  var __defProp$D = Object.defineProperty;
2879
- var __defProps$o = Object.defineProperties;
2880
- var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
2884
+ var __defProps$p = Object.defineProperties;
2885
+ var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors;
2881
2886
  var __getOwnPropSymbols$D = Object.getOwnPropertySymbols;
2882
2887
  var __hasOwnProp$D = Object.prototype.hasOwnProperty;
2883
2888
  var __propIsEnum$D = Object.prototype.propertyIsEnumerable;
@@ -2893,10 +2898,10 @@ var __spreadValues$D = (a, b) => {
2893
2898
  }
2894
2899
  return a;
2895
2900
  };
2896
- var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
2901
+ var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
2897
2902
  class GroupByVariable extends MultiValueVariable {
2898
2903
  constructor(initialState) {
2899
- super(__spreadProps$o(__spreadValues$D({
2904
+ super(__spreadProps$p(__spreadValues$D({
2900
2905
  isMulti: true,
2901
2906
  name: "",
2902
2907
  value: [],
@@ -3238,11 +3243,16 @@ function getAdhocOptionSearcher(options) {
3238
3243
  haystack.push((_a = options[i].label) != null ? _a : String(options[i].value));
3239
3244
  }
3240
3245
  }
3241
- const idxs = ufuzzy.filter(haystack, search);
3246
+ const [idxs, info, order] = ufuzzy.search(haystack, search);
3242
3247
  const filteredOptions = [];
3243
3248
  if (idxs) {
3244
3249
  for (let i = 0; i < idxs.length; i++) {
3245
- filteredOptions.push(options[idxs[i]]);
3250
+ if (info && order) {
3251
+ const idx = order[i];
3252
+ filteredOptions.push(options[idxs[idx]]);
3253
+ } else {
3254
+ filteredOptions.push(options[idxs[i]]);
3255
+ }
3246
3256
  if (filteredOptions.length > limit) {
3247
3257
  return filteredOptions;
3248
3258
  }
@@ -3808,11 +3818,16 @@ function fuzzySearchOptions(options) {
3808
3818
  haystack.push(options[i].label || options[i].value);
3809
3819
  }
3810
3820
  }
3811
- const idxs = ufuzzy.filter(haystack, search);
3821
+ const [idxs, info, order] = ufuzzy.search(haystack, search);
3812
3822
  const filteredOptions = [];
3813
3823
  if (idxs) {
3814
3824
  for (let i = 0; i < idxs.length; i++) {
3815
- filteredOptions.push(options[idxs[i]]);
3825
+ if (info && order) {
3826
+ const idx = order[i];
3827
+ filteredOptions.push(options[idxs[idx]]);
3828
+ } else {
3829
+ filteredOptions.push(options[idxs[i]]);
3830
+ }
3816
3831
  if (filteredOptions.length > limit) {
3817
3832
  return filteredOptions;
3818
3833
  }
@@ -3997,8 +4012,8 @@ const useFloatingInteractions = ({
3997
4012
  };
3998
4013
 
3999
4014
  var __defProp$A = Object.defineProperty;
4000
- var __defProps$n = Object.defineProperties;
4001
- var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
4015
+ var __defProps$o = Object.defineProperties;
4016
+ var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
4002
4017
  var __getOwnPropSymbols$A = Object.getOwnPropertySymbols;
4003
4018
  var __hasOwnProp$A = Object.prototype.hasOwnProperty;
4004
4019
  var __propIsEnum$A = Object.prototype.propertyIsEnumerable;
@@ -4014,8 +4029,8 @@ var __spreadValues$A = (a, b) => {
4014
4029
  }
4015
4030
  return a;
4016
4031
  };
4017
- var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
4018
- const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model, isAlwaysWip, handleChangeViewMode }, parentRef) {
4032
+ var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
4033
+ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model, isAlwaysWip, handleChangeViewMode, focusOnWipInputRef }, parentRef) {
4019
4034
  var _a, _b, _c;
4020
4035
  const [open, setOpen] = React.useState(false);
4021
4036
  const [options, setOptions] = React.useState([]);
@@ -4167,19 +4182,39 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
4167
4182
  const handleBackspaceInput = React.useCallback(
4168
4183
  (event, multiValueEdit) => {
4169
4184
  if (event.key === "Backspace" && !inputValue) {
4170
- if (multiValueEdit) {
4171
- setFilterMultiValues((items) => {
4172
- const updated = [...items];
4173
- updated.splice(-1, 1);
4174
- return updated;
4175
- });
4176
- } else if (filterInputType === "key") {
4177
- model._removeLastFilter();
4178
- handleFetchOptions(filterInputType);
4185
+ if (filterInputType === "value") {
4186
+ if (multiValueEdit) {
4187
+ if (filterMultiValues.length) {
4188
+ setFilterMultiValues((items) => {
4189
+ const updated = [...items];
4190
+ updated.splice(-1, 1);
4191
+ return updated;
4192
+ });
4193
+ return;
4194
+ }
4195
+ }
4196
+ setInputType("operator");
4197
+ return;
4198
+ }
4199
+ if (model.state.filters[0] === filter) {
4200
+ focusOnWipInputRef == null ? void 0 : focusOnWipInputRef();
4201
+ }
4202
+ model._handleComboboxBackspace(filter);
4203
+ if (isAlwaysWip) {
4204
+ handleResetWip();
4179
4205
  }
4180
4206
  }
4181
4207
  },
4182
- [inputValue, filterInputType, model, handleFetchOptions]
4208
+ [
4209
+ inputValue,
4210
+ filterInputType,
4211
+ model,
4212
+ filter,
4213
+ isAlwaysWip,
4214
+ filterMultiValues.length,
4215
+ handleResetWip,
4216
+ focusOnWipInputRef
4217
+ ]
4183
4218
  );
4184
4219
  const handleTabInput = React.useCallback(
4185
4220
  (event, multiValueEdit) => {
@@ -4323,7 +4358,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
4323
4358
  item,
4324
4359
  index: i,
4325
4360
  handleRemoveMultiValue
4326
- })) : null) : null, /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$n(__spreadValues$A({}, getReferenceProps({
4361
+ })) : null) : null, /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$o(__spreadValues$A({}, getReferenceProps({
4327
4362
  ref: refs.setReference,
4328
4363
  onChange,
4329
4364
  value: inputValue,
@@ -4360,14 +4395,14 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
4360
4395
  visuallyHiddenDismiss: true,
4361
4396
  modal: false
4362
4397
  }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
4363
- style: __spreadProps$n(__spreadValues$A({}, floatingStyles), {
4398
+ style: __spreadProps$o(__spreadValues$A({}, floatingStyles), {
4364
4399
  width: `${optionsError ? ERROR_STATE_DROPDOWN_WIDTH : maxOptionWidth}px`,
4365
4400
  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
4366
4401
  }),
4367
4402
  ref: refs.setFloating,
4368
4403
  className: styles.dropdownWrapper,
4369
4404
  tabIndex: -1
4370
- }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$n(__spreadValues$A({
4405
+ }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$o(__spreadValues$A({
4371
4406
  style: {
4372
4407
  height: `${rowVirtualizer.getTotalSize() || VIRTUAL_LIST_ITEM_HEIGHT}px`
4373
4408
  }
@@ -4395,7 +4430,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
4395
4430
  }
4396
4431
  const nextItem = filteredDropDownItems[virtualItem.index + 1];
4397
4432
  const shouldAddBottomBorder = nextItem && !nextItem.group && !nextItem.options && item.group;
4398
- return /* @__PURE__ */ React__default["default"].createElement(DropdownItem, __spreadProps$n(__spreadValues$A({}, getItemProps({
4433
+ return /* @__PURE__ */ React__default["default"].createElement(DropdownItem, __spreadProps$o(__spreadValues$A({}, getItemProps({
4399
4434
  key: `${item.value}-${index}`,
4400
4435
  ref(node) {
4401
4436
  listRef.current[index] = node;
@@ -4491,7 +4526,7 @@ const getStyles$b = (theme) => ({
4491
4526
  alignItems: "center",
4492
4527
  flexWrap: "wrap"
4493
4528
  }),
4494
- basePill: css.css(__spreadProps$n(__spreadValues$A({
4529
+ basePill: css.css(__spreadProps$o(__spreadValues$A({
4495
4530
  display: "flex",
4496
4531
  alignItems: "center",
4497
4532
  background: theme.colors.action.disabledBackground,
@@ -4558,7 +4593,7 @@ const getStyles$b = (theme) => ({
4558
4593
  color: theme.colors.text.primary
4559
4594
  }
4560
4595
  }),
4561
- descriptionText: css.css(__spreadProps$n(__spreadValues$A({}, theme.typography.bodySmall), {
4596
+ descriptionText: css.css(__spreadProps$o(__spreadValues$A({}, theme.typography.bodySmall), {
4562
4597
  color: theme.colors.text.secondary,
4563
4598
  paddingTop: theme.spacing(0.5)
4564
4599
  })),
@@ -4571,8 +4606,8 @@ const getStyles$b = (theme) => ({
4571
4606
  });
4572
4607
 
4573
4608
  var __defProp$z = Object.defineProperty;
4574
- var __defProps$m = Object.defineProperties;
4575
- var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
4609
+ var __defProps$n = Object.defineProperties;
4610
+ var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
4576
4611
  var __getOwnPropSymbols$z = Object.getOwnPropertySymbols;
4577
4612
  var __hasOwnProp$z = Object.prototype.hasOwnProperty;
4578
4613
  var __propIsEnum$z = Object.prototype.propertyIsEnumerable;
@@ -4588,8 +4623,8 @@ var __spreadValues$z = (a, b) => {
4588
4623
  }
4589
4624
  return a;
4590
4625
  };
4591
- var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
4592
- function AdHocFilterPill({ filter, model, readOnly, focusOnInputRef }) {
4626
+ var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
4627
+ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
4593
4628
  var _a, _b, _c;
4594
4629
  const styles = ui.useStyles2(getStyles$a);
4595
4630
  const [viewMode, setViewMode] = React.useState(true);
@@ -4615,6 +4650,12 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnInputRef }) {
4615
4650
  setShouldFocus(false);
4616
4651
  }
4617
4652
  }, [shouldFocus]);
4653
+ React.useEffect(() => {
4654
+ if (filter.forceEdit && viewMode) {
4655
+ setViewMode(false);
4656
+ model._updateFilter(filter, { forceEdit: void 0 });
4657
+ }
4658
+ }, [filter, model, viewMode]);
4618
4659
  if (viewMode) {
4619
4660
  const pillText = /* @__PURE__ */ React__default["default"].createElement("span", {
4620
4661
  className: styles.pillText
@@ -4640,14 +4681,14 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnInputRef }) {
4640
4681
  onClick: (e) => {
4641
4682
  e.stopPropagation();
4642
4683
  model._removeFilter(filter);
4643
- setTimeout(() => focusOnInputRef == null ? void 0 : focusOnInputRef());
4684
+ setTimeout(() => focusOnWipInputRef == null ? void 0 : focusOnWipInputRef());
4644
4685
  },
4645
4686
  onKeyDownCapture: (e) => {
4646
4687
  if (e.key === "Enter") {
4647
4688
  e.preventDefault();
4648
4689
  e.stopPropagation();
4649
4690
  model._removeFilter(filter);
4650
- setTimeout(() => focusOnInputRef == null ? void 0 : focusOnInputRef());
4691
+ setTimeout(() => focusOnWipInputRef == null ? void 0 : focusOnWipInputRef());
4651
4692
  }
4652
4693
  },
4653
4694
  name: "times",
@@ -4659,11 +4700,12 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnInputRef }) {
4659
4700
  return /* @__PURE__ */ React__default["default"].createElement(AdHocCombobox, {
4660
4701
  filter,
4661
4702
  model,
4662
- handleChangeViewMode
4703
+ handleChangeViewMode,
4704
+ focusOnWipInputRef
4663
4705
  });
4664
4706
  }
4665
4707
  const getStyles$a = (theme) => ({
4666
- combinedFilterPill: css.css(__spreadProps$m(__spreadValues$z({
4708
+ combinedFilterPill: css.css(__spreadProps$n(__spreadValues$z({
4667
4709
  display: "flex",
4668
4710
  alignItems: "center",
4669
4711
  background: theme.colors.action.selected,
@@ -4724,26 +4766,26 @@ const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwa
4724
4766
  const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ model }) {
4725
4767
  const { filters, readOnly } = model.useState();
4726
4768
  const styles = ui.useStyles2(getStyles$9);
4727
- const focusOnInputRef = React.useRef();
4769
+ const focusOnWipInputRef = React.useRef();
4728
4770
  return /* @__PURE__ */ React__default["default"].createElement("div", {
4729
4771
  className: css.cx(styles.comboboxWrapper, { [styles.comboboxFocusOutline]: !readOnly }),
4730
4772
  onClick: () => {
4731
4773
  var _a;
4732
- (_a = focusOnInputRef.current) == null ? void 0 : _a.call(focusOnInputRef);
4774
+ (_a = focusOnWipInputRef.current) == null ? void 0 : _a.call(focusOnWipInputRef);
4733
4775
  }
4734
4776
  }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
4735
4777
  name: "filter",
4736
4778
  className: styles.filterIcon,
4737
4779
  size: "lg"
4738
4780
  }), filters.map((filter, index) => /* @__PURE__ */ React__default["default"].createElement(AdHocFilterPill, {
4739
- key: index,
4781
+ key: `${index}-${filter.key}`,
4740
4782
  filter,
4741
4783
  model,
4742
4784
  readOnly,
4743
- focusOnInputRef: focusOnInputRef.current
4785
+ focusOnWipInputRef: focusOnWipInputRef.current
4744
4786
  })), !readOnly ? /* @__PURE__ */ React__default["default"].createElement(AdHocFiltersAlwaysWipCombobox, {
4745
4787
  model,
4746
- ref: focusOnInputRef
4788
+ ref: focusOnWipInputRef
4747
4789
  }) : null);
4748
4790
  });
4749
4791
  const getStyles$9 = (theme) => ({
@@ -4779,6 +4821,8 @@ const getStyles$9 = (theme) => ({
4779
4821
  });
4780
4822
 
4781
4823
  var __defProp$y = Object.defineProperty;
4824
+ var __defProps$m = Object.defineProperties;
4825
+ var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
4782
4826
  var __getOwnPropSymbols$y = Object.getOwnPropertySymbols;
4783
4827
  var __hasOwnProp$y = Object.prototype.hasOwnProperty;
4784
4828
  var __propIsEnum$y = Object.prototype.propertyIsEnumerable;
@@ -4794,6 +4838,7 @@ var __spreadValues$y = (a, b) => {
4794
4838
  }
4795
4839
  return a;
4796
4840
  };
4841
+ var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
4797
4842
  const OPERATORS = [
4798
4843
  {
4799
4844
  value: "=",
@@ -4890,6 +4935,31 @@ class AdHocFiltersVariable extends SceneObjectBase {
4890
4935
  this._removeFilter(filterToRemove);
4891
4936
  }
4892
4937
  }
4938
+ _handleComboboxBackspace(filter) {
4939
+ if (this.state.filters.length) {
4940
+ let filterToForceIndex = this.state.filters.length - 1;
4941
+ if (filter !== this.state._wip) {
4942
+ const filterIndex = this.state.filters.findIndex((f) => f === filter);
4943
+ filterToForceIndex = filterIndex - 1;
4944
+ }
4945
+ this.setState({
4946
+ filters: this.state.filters.reduce((acc, f, index) => {
4947
+ if (index === filterToForceIndex) {
4948
+ return [
4949
+ ...acc,
4950
+ __spreadProps$m(__spreadValues$y({}, f), {
4951
+ forceEdit: true
4952
+ })
4953
+ ];
4954
+ }
4955
+ if (f === filter) {
4956
+ return acc;
4957
+ }
4958
+ return [...acc, f];
4959
+ }, [])
4960
+ });
4961
+ }
4962
+ }
4893
4963
  async _getKeys(currentKey) {
4894
4964
  var _a, _b, _c;
4895
4965
  const override = await ((_b = (_a = this.state).getTagKeysProvider) == null ? void 0 : _b.call(_a, this, currentKey));