@grafana/scenes 5.14.1--canary.889.10722729172.0 → 5.14.1

package/dist/esm/variables/variants/TextBoxVariable.js

@@ -45,12 +45,10 @@ class TextBoxVariable extends SceneObjectBase {
     return { [this.getKey()]: this.state.value };
   }
   updateFromUrl(values) {
-    const update = {};
     const val = values[this.getKey()];
     if (typeof val === "string") {
-      update.value = val;
+      this.setValue(val);
     }
-    this.setState(update);
   }
 }
 TextBoxVariable.Component = ({ model }) => {

package/dist/esm/variables/variants/TextBoxVariable.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextBoxVariable.js","sources":["../../../../src/variables/variants/TextBoxVariable.tsx"],"sourcesContent":["import React from 'react';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectUrlValues } from '../../core/types';\nimport { SceneObjectUrlSyncConfig } from '../../services/SceneObjectUrlSyncConfig';\nimport { VariableValueInput } from '../components/VariableValueInput';\nimport { SceneVariable, SceneVariableState, SceneVariableValueChangedEvent, VariableValue } from '../types';\n\nexport interface TextBoxVariableState extends SceneVariableState {\n  value: string;\n}\n\nexport class TextBoxVariable\n  extends SceneObjectBase<TextBoxVariableState>\n  implements SceneVariable<TextBoxVariableState>\n{\n  public constructor(initialState: Partial<TextBoxVariableState>) {\n    super({\n      type: 'textbox',\n      value: '',\n      name: '',\n      ...initialState,\n    });\n\n    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: () => [this.getKey()] });\n  }\n\n  public getValue(): VariableValue {\n    return this.state.value;\n  }\n\n  public setValue(newValue: string) {\n    if (newValue !== this.state.value) {\n      this.setState({ value: newValue });\n      this.publishEvent(new SceneVariableValueChangedEvent(this), true);\n    }\n  }\n\n  private getKey(): string {\n    return `var-${this.state.name}`;\n  }\n\n  public getUrlState() {\n    return { [this.getKey()]: this.state.value };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues) {\n    const update: Partial<TextBoxVariableState> = {};\n    const val = values[this.getKey()];\n    if (typeof val === 'string') {\n      update.value = val;\n    }\n\n    this.setState(update);\n  }\n\n  public static Component = ({ model }: SceneComponentProps<TextBoxVariable>) => {\n    return <VariableValueInput model={model} />;\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,wBACH,eAEV,CAAA;AAAA,EACS,YAAY,YAA6C,EAAA;AAC9D,IAAM,KAAA,CAAA,cAAA,CAAA;AAAA,MACJ,IAAM,EAAA,SAAA;AAAA,MACN,KAAO,EAAA,EAAA;AAAA,MACP,IAAM,EAAA,EAAA;AAAA,KAAA,EACH,YACJ,CAAA,CAAA,CAAA;AAED,IAAA,IAAA,CAAK,QAAW,GAAA,IAAI,wBAAyB,CAAA,IAAA,EAAM,EAAE,IAAA,EAAM,MAAM,CAAC,IAAK,CAAA,MAAA,EAAQ,CAAA,EAAG,CAAA,CAAA;AAAA,GACpF;AAAA,EAEO,QAA0B,GAAA;AAC/B,IAAA,OAAO,KAAK,KAAM,CAAA,KAAA,CAAA;AAAA,GACpB;AAAA,EAEO,SAAS,QAAkB,EAAA;AAChC,IAAI,IAAA,QAAA,KAAa,IAAK,CAAA,KAAA,CAAM,KAAO,EAAA;AACjC,MAAA,IAAA,CAAK,QAAS,CAAA,EAAE,KAAO,EAAA,QAAA,EAAU,CAAA,CAAA;AACjC,MAAA,IAAA,CAAK,YAAa,CAAA,IAAI,8BAA+B,CAAA,IAAI,GAAG,IAAI,CAAA,CAAA;AAAA,KAClE;AAAA,GACF;AAAA,EAEQ,MAAiB,GAAA;AACvB,IAAO,OAAA,CAAA,IAAA,EAAO,KAAK,KAAM,CAAA,IAAA,CAAA,CAAA,CAAA;AAAA,GAC3B;AAAA,EAEO,WAAc,GAAA;AACnB,IAAA,OAAO,EAAE,CAAC,IAAA,CAAK,QAAW,GAAA,IAAA,CAAK,MAAM,KAAM,EAAA,CAAA;AAAA,GAC7C;AAAA,EAEO,cAAc,MAA8B,EAAA;AACjD,IAAA,MAAM,SAAwC,EAAC,CAAA;AAC/C,IAAM,MAAA,GAAA,GAAM,MAAO,CAAA,IAAA,CAAK,MAAO,EAAA,CAAA,CAAA;AAC/B,IAAI,IAAA,OAAO,QAAQ,QAAU,EAAA;AAC3B,MAAA,MAAA,CAAO,KAAQ,GAAA,GAAA,CAAA;AAAA,KACjB;AAEA,IAAA,IAAA,CAAK,SAAS,MAAM,CAAA,CAAA;AAAA,GACtB;AAKF,CAAA;AA/Ca,eAAA,CA4CG,SAAY,GAAA,CAAC,EAAE,KAAA,EAAkD,KAAA;AAC7E,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAA,IAAmB,KAAA;AAAA,GAAc,CAAA,CAAA;AAC3C,CAAA;;;;"}
+{"version":3,"file":"TextBoxVariable.js","sources":["../../../../src/variables/variants/TextBoxVariable.tsx"],"sourcesContent":["import React from 'react';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectUrlValues } from '../../core/types';\nimport { SceneObjectUrlSyncConfig } from '../../services/SceneObjectUrlSyncConfig';\nimport { VariableValueInput } from '../components/VariableValueInput';\nimport { SceneVariable, SceneVariableState, SceneVariableValueChangedEvent, VariableValue } from '../types';\n\nexport interface TextBoxVariableState extends SceneVariableState {\n  value: string;\n}\n\nexport class TextBoxVariable\n  extends SceneObjectBase<TextBoxVariableState>\n  implements SceneVariable<TextBoxVariableState>\n{\n  public constructor(initialState: Partial<TextBoxVariableState>) {\n    super({\n      type: 'textbox',\n      value: '',\n      name: '',\n      ...initialState,\n    });\n\n    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: () => [this.getKey()] });\n  }\n\n  public getValue(): VariableValue {\n    return this.state.value;\n  }\n\n  public setValue(newValue: string) {\n    if (newValue !== this.state.value) {\n      this.setState({ value: newValue });\n      this.publishEvent(new SceneVariableValueChangedEvent(this), true);\n    }\n  }\n\n  private getKey(): string {\n    return `var-${this.state.name}`;\n  }\n\n  public getUrlState() {\n    return { [this.getKey()]: this.state.value };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues) {\n    const val = values[this.getKey()];\n\n    if (typeof val === 'string') {\n      this.setValue(val);\n    }\n  }\n\n  public static Component = ({ model }: SceneComponentProps<TextBoxVariable>) => {\n    return <VariableValueInput model={model} />;\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,wBACH,eAEV,CAAA;AAAA,EACS,YAAY,YAA6C,EAAA;AAC9D,IAAM,KAAA,CAAA,cAAA,CAAA;AAAA,MACJ,IAAM,EAAA,SAAA;AAAA,MACN,KAAO,EAAA,EAAA;AAAA,MACP,IAAM,EAAA,EAAA;AAAA,KAAA,EACH,YACJ,CAAA,CAAA,CAAA;AAED,IAAA,IAAA,CAAK,QAAW,GAAA,IAAI,wBAAyB,CAAA,IAAA,EAAM,EAAE,IAAA,EAAM,MAAM,CAAC,IAAK,CAAA,MAAA,EAAQ,CAAA,EAAG,CAAA,CAAA;AAAA,GACpF;AAAA,EAEO,QAA0B,GAAA;AAC/B,IAAA,OAAO,KAAK,KAAM,CAAA,KAAA,CAAA;AAAA,GACpB;AAAA,EAEO,SAAS,QAAkB,EAAA;AAChC,IAAI,IAAA,QAAA,KAAa,IAAK,CAAA,KAAA,CAAM,KAAO,EAAA;AACjC,MAAA,IAAA,CAAK,QAAS,CAAA,EAAE,KAAO,EAAA,QAAA,EAAU,CAAA,CAAA;AACjC,MAAA,IAAA,CAAK,YAAa,CAAA,IAAI,8BAA+B,CAAA,IAAI,GAAG,IAAI,CAAA,CAAA;AAAA,KAClE;AAAA,GACF;AAAA,EAEQ,MAAiB,GAAA;AACvB,IAAO,OAAA,CAAA,IAAA,EAAO,KAAK,KAAM,CAAA,IAAA,CAAA,CAAA,CAAA;AAAA,GAC3B;AAAA,EAEO,WAAc,GAAA;AACnB,IAAA,OAAO,EAAE,CAAC,IAAA,CAAK,QAAW,GAAA,IAAA,CAAK,MAAM,KAAM,EAAA,CAAA;AAAA,GAC7C;AAAA,EAEO,cAAc,MAA8B,EAAA;AACjD,IAAM,MAAA,GAAA,GAAM,MAAO,CAAA,IAAA,CAAK,MAAO,EAAA,CAAA,CAAA;AAE/B,IAAI,IAAA,OAAO,QAAQ,QAAU,EAAA;AAC3B,MAAA,IAAA,CAAK,SAAS,GAAG,CAAA,CAAA;AAAA,KACnB;AAAA,GACF;AAKF,CAAA;AA7Ca,eAAA,CA0CG,SAAY,GAAA,CAAC,EAAE,KAAA,EAAkD,KAAA;AAC7E,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAA,IAAmB,KAAA;AAAA,GAAc,CAAA,CAAA;AAC3C,CAAA;;;;"}

package/dist/index.js

@@ -3636,7 +3636,7 @@ var __objRest$3 = (source, exclude) => {
 };
 const DropdownItem = React.forwardRef(
   function DropdownItem2(_a, ref) {
-    var _b = _a, { children, active, addGroupBottomBorder, isMultiValueEdit, checked } = _b, rest = __objRest$3(_b, ["children", "active", "addGroupBottomBorder", "isMultiValueEdit", "checked"]);
+    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({
@@ -3648,11 +3648,7 @@ const DropdownItem = React.forwardRef(
     }, 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, isMultiValueEdit ? /* @__PURE__ */ React__default["default"].createElement(ui.Checkbox, {
-      tabIndex: -1,
-      checked,
-      className: styles.checkbox
-    }) : null, children)));
+    }, /* @__PURE__ */ React__default["default"].createElement("span", null, children)));
   }
 );
 const getStyles$c = (theme) => ({
@@ -3692,22 +3688,6 @@ const getStyles$c = (theme) => ({
   }),
   groupBottomBorder: css.css({
     borderBottom: `1px solid ${theme.colors.border.weak}`
-  }),
-  checkbox: css.css({
-    paddingRight: theme.spacing(0.5)
-  }),
-  multiValueApply: css.css({
-    position: "absolute",
-    top: 0,
-    left: 0,
-    display: "flex"
-  }),
-  dropdownWrapper: css.css({
-    backgroundColor: theme.colors.background.primary,
-    color: theme.colors.text.primary,
-    boxShadow: theme.shadows.z2,
-    overflowY: "auto",
-    zIndex: theme.zIndex.dropdown
   })
 });
 const LoadingOptionsPlaceholder = () => {
@@ -3725,28 +3705,11 @@ const OptionsErrorPlaceholder = ({ handleFetchOptions }) => {
     onClick: handleFetchOptions
   }, "An error has occurred fetching labels. Click to retry");
 };
-const MultiValueApplyButton = ({ onClick, floatingElement, maxOptionWidth }) => {
-  const styles = ui.useStyles2(getStyles$c);
-  const floatingElementRect = floatingElement == null ? void 0 : floatingElement.getBoundingClientRect();
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: css.cx(styles.dropdownWrapper, styles.multiValueApply),
-    style: {
-      width: `${maxOptionWidth}px`,
-      transform: `translate(${floatingElementRect == null ? void 0 : floatingElementRect.left}px,${floatingElementRect == null ? void 0 : floatingElementRect.bottom}px)`
-    }
-  }, /* @__PURE__ */ React__default["default"].createElement(ui.Button, {
-    onClick,
-    fill: "text",
-    fullWidth: true,
-    tabIndex: -1
-  }, "Apply"));
-};
 
 const VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER = 8;
 const VIRTUAL_LIST_PADDING = 8;
 const VIRTUAL_LIST_OVERSCAN = 5;
 const VIRTUAL_LIST_ITEM_HEIGHT = 38;
-const VIRTUAL_LIST_ITEM_HEIGHT_WITH_DESCRIPTION = 60;
 const ERROR_STATE_DROPDOWN_WIDTH = 366;
 function fuzzySearchOptions(options) {
   const ufuzzy = new uFuzzy__default["default"]();
@@ -3797,7 +3760,7 @@ function fuzzySearchOptions(options) {
 }
 const flattenOptionGroups = (options) => options.flatMap((option) => option.options ? [option, ...option.options] : [option]);
 const setupDropdownAccessibility = (options, listRef, disabledIndicesRef) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c;
   let maxOptionWidth = 182;
   const listRefArr = [];
   const disabledIndices = [];
@@ -3807,9 +3770,6 @@ const setupDropdownAccessibility = (options, listRef, disabledIndicesRef) => {
       disabledIndices.push(i);
     }
     let label = (_c = (_b = options[i].label) != null ? _b : options[i].value) != null ? _c : "";
-    if (label.length < (((_d = options[i].description) == null ? void 0 : _d.length) || 0)) {
-      label = options[i].description;
-    }
     const widthEstimate = (options[i].isCustom ? label.length + 18 : label.length) * VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER + VIRTUAL_LIST_PADDING * 2;
     if (widthEstimate > maxOptionWidth) {
       maxOptionWidth = widthEstimate;
@@ -3859,7 +3819,7 @@ const useFloatingInteractions = ({
   onOpenChange,
   activeIndex,
   setActiveIndex,
-  outsidePressIdsToIgnore,
+  operatorIdentifier,
   listRef,
   disabledIndicesRef
 }) => {
@@ -3883,13 +3843,7 @@ const useFloatingInteractions = ({
   const role = react.useRole(context, { role: "listbox" });
   const dismiss = react.useDismiss(context, {
     outsidePress: (event) => {
-      var _a;
-      const target = event.currentTarget || event.target;
-      let idToCompare = (target == null ? void 0 : target.id) || "";
-      if ((target == null ? void 0 : target.nodeName) === "path") {
-        idToCompare = ((_a = target.parentElement) == null ? void 0 : _a.id) || "";
-      }
-      if (outsidePressIdsToIgnore.includes(idToCompare)) {
+      if (event.currentTarget instanceof HTMLElement && event.currentTarget.id === operatorIdentifier) {
         return false;
       }
       return true;
@@ -3943,14 +3897,6 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
   const [activeIndex, setActiveIndex] = React.useState(null);
   const [filterInputType, setInputType] = React.useState(!isAlwaysWip ? "value" : "key");
   const styles = ui.useStyles2(getStyles$b);
-  const [filterMultiValues, setFilterMultiValues] = React.useState([]);
-  const [_, setForceRefresh] = React.useState({});
-  const multiValueOperators = React.useMemo(
-    () => OPERATORS.reduce((acc, operator) => operator.isMulti ? [...acc, operator.value] : acc, []),
-    []
-  );
-  const hasMultiValueOperator = multiValueOperators.includes((filter == null ? void 0 : filter.operator) || "");
-  const isMultiValueEdit = hasMultiValueOperator && filterInputType === "value";
   const operatorIdentifier = React.useId();
   const listRef = React.useRef([]);
   const disabledIndicesRef = React.useRef([]);
@@ -3962,70 +3908,22 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       setInputValue("");
     }
   }, [model, isAlwaysWip]);
-  const handleMultiValueFilterCommit = React.useCallback(
-    (model2, filter2, filterMultiValues2, preventFocus) => {
-      if (filterMultiValues2.length) {
-        const valueLabels = [];
-        const values = [];
-        filterMultiValues2.forEach((item) => {
-          var _a2;
-          valueLabels.push((_a2 = item.label) != null ? _a2 : item.value);
-          values.push(item.value);
-        });
-        model2._updateFilter(filter2, { valueLabels, values, value: values[0] });
-        setFilterMultiValues([]);
-      }
-      if (!preventFocus) {
-        setTimeout(() => {
-          var _a2;
-          return (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
-        });
-      }
-    },
-    []
-  );
-  const handleLocalMultiValueChange = React.useCallback((selectedItem) => {
-    setFilterMultiValues((items) => {
-      if (items.some((item) => item.value === selectedItem.value)) {
-        return items.filter((item) => item.value !== selectedItem.value);
-      }
-      return [...items, selectedItem];
-    });
-  }, []);
-  const handleRemoveMultiValue = React.useCallback(
-    (item) => setFilterMultiValues((selected) => selected.filter((option) => option.value !== item.value)),
-    []
-  );
   const onOpenChange = React.useCallback(
-    (nextOpen, _2, reason) => {
+    (nextOpen, _, reason) => {
       setOpen(nextOpen);
       if (reason && ["outside-press", "escape-key"].includes(reason)) {
-        if (isMultiValueEdit) {
-          handleMultiValueFilterCommit(model, filter, filterMultiValues);
-        }
         handleResetWip();
         handleChangeViewMode == null ? void 0 : handleChangeViewMode();
       }
     },
-    [
-      filter,
-      filterMultiValues,
-      handleChangeViewMode,
-      handleMultiValueFilterCommit,
-      handleResetWip,
-      isMultiValueEdit,
-      model
-    ]
+    [handleChangeViewMode, handleResetWip]
   );
-  const outsidePressIdsToIgnore = React.useMemo(() => {
-    return [operatorIdentifier, ...filterMultiValues.map((item, i) => `${item.value}-${i}`)];
-  }, [operatorIdentifier, filterMultiValues]);
   const { refs, floatingStyles, context, getReferenceProps, getFloatingProps, getItemProps } = useFloatingInteractions({
     open,
     onOpenChange,
     activeIndex,
     setActiveIndex,
-    outsidePressIdsToIgnore,
+    operatorIdentifier,
     listRef,
     disabledIndicesRef
   });
@@ -4076,89 +3974,43 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
   const rowVirtualizer = reactVirtual.useVirtualizer({
     count: filteredDropDownItems.length,
     getScrollElement: () => refs.floating.current,
-    estimateSize: (index) => filteredDropDownItems[index].description ? VIRTUAL_LIST_ITEM_HEIGHT_WITH_DESCRIPTION : VIRTUAL_LIST_ITEM_HEIGHT,
+    estimateSize: () => VIRTUAL_LIST_ITEM_HEIGHT,
     overscan: VIRTUAL_LIST_OVERSCAN
   });
   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);
-        }
-      }
-    },
-    [inputValue, filterInputType, model, handleFetchOptions]
-  );
-  const handleTabInput = React.useCallback(
-    (event, multiValueEdit) => {
-      var _a2;
-      if (event.key === "Tab" && !event.shiftKey) {
-        if (multiValueEdit) {
-          event.preventDefault();
-          handleMultiValueFilterCommit(model, filter, filterMultiValues);
-          (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
-        }
-        handleChangeViewMode == null ? void 0 : handleChangeViewMode();
-        handleResetWip();
-      }
-    },
-    [
-      filter,
-      filterMultiValues,
-      handleChangeViewMode,
-      handleMultiValueFilterCommit,
-      handleResetWip,
-      model,
-      refs.domReference
-    ]
-  );
-  const handleShiftTabInput = React.useCallback(
-    (event, multiValueEdit) => {
-      if (event.key === "Tab" && event.shiftKey) {
-        if (multiValueEdit) {
-          event.preventDefault();
-          handleMultiValueFilterCommit(model, filter, filterMultiValues, true);
-        }
-        handleChangeViewMode == null ? void 0 : handleChangeViewMode();
-        handleResetWip();
+    (event) => {
+      if (event.key === "Backspace" && !inputValue && filterInputType === "key") {
+        model._removeLastFilter();
+        handleFetchOptions(filterInputType);
       }
     },
-    [filter, filterMultiValues, handleChangeViewMode, handleMultiValueFilterCommit, handleResetWip, model]
+    [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, multiValueEdit) => {
+    (event) => {
       if (event.key === "Enter" && activeIndex != null) {
         if (!filteredDropDownItems[activeIndex]) {
           return;
         }
-        const selectedItem = filteredDropDownItems[activeIndex];
-        if (multiValueEdit) {
-          handleLocalMultiValueChange(selectedItem);
-        } else {
-          model._updateFilter(filter, generateFilterUpdatePayload(filterInputType, selectedItem));
-          switchToNextInputType(filterInputType, setInputType, handleChangeViewMode, refs.domReference.current);
-          setActiveIndex(0);
-        }
+        model._updateFilter(filter, generateFilterUpdatePayload(filterInputType, filteredDropDownItems[activeIndex]));
         setInputValue("");
+        setActiveIndex(0);
+        switchToNextInputType(filterInputType, setInputType, handleChangeViewMode, refs.domReference.current);
       }
     },
-    [
-      activeIndex,
-      filter,
-      filterInputType,
-      filteredDropDownItems,
-      handleLocalMultiValueChange,
-      handleChangeViewMode,
-      model,
-      refs.domReference
-    ]
+    [activeIndex, filter, filterInputType, filteredDropDownItems, model]
   );
   React.useEffect(() => {
     if (open) {
@@ -4166,34 +4018,13 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     }
   }, [open, filterInputType]);
   React.useEffect(() => {
-    var _a2, _b2;
+    var _a2;
     if (!isAlwaysWip) {
       setInputType("value");
       setInputValue("");
-      if (hasMultiValueOperator && ((_a2 = filter == null ? void 0 : filter.values) == null ? void 0 : _a2.length)) {
-        const multiValueOptions = filter.values.reduce(
-          (acc, value, i) => {
-            var _a3;
-            return [
-              ...acc,
-              {
-                label: ((_a3 = filter.valueLabels) == null ? void 0 : _a3[i]) || value,
-                value
-              }
-            ];
-          },
-          []
-        );
-        setFilterMultiValues(multiValueOptions);
-      }
-      (_b2 = refs.domReference.current) == null ? void 0 : _b2.focus();
+      (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
     }
   }, []);
-  React.useEffect(() => {
-    if (isMultiValueEdit && filterMultiValues) {
-      setTimeout(() => setForceRefresh({}));
-    }
-  }, [filterMultiValues, isMultiValueEdit]);
   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))) {
@@ -4219,17 +4050,14 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       switchInputType("operator", setInputType, void 0, refs.domReference.current);
     },
     onKeyDown: (event) => {
-      handleShiftTabInput(event, hasMultiValueOperator);
+      handleShiftTabInput(event);
       if (event.key === "Enter") {
         switchInputType("operator", setInputType, void 0, refs.domReference.current);
       }
     }
-  }, filter.operator) : null, isMultiValueEdit ? filterMultiValues.map((item, i) => /* @__PURE__ */ React__default["default"].createElement(MultiValuePill, {
-    key: `${item.value}-${i}`,
-    item,
-    index: i,
-    handleRemoveMultiValue
-  })) : null) : null, /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$n(__spreadValues$A({}, getReferenceProps({
+  }, 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,
@@ -4243,9 +4071,9 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       if (filterInputType === "operator") {
         handleShiftTabInput(event);
       }
-      handleBackspaceInput(event, isMultiValueEdit);
-      handleTabInput(event, isMultiValueEdit);
-      handleEnterInput(event, isMultiValueEdit);
+      handleBackspaceInput(event);
+      handleTabInput(event);
+      handleEnterInput(event);
     }
   })), {
     className: css.cx(styles.inputStyle, { [styles.loadingInputPadding]: !optionsLoading }),
@@ -4265,7 +4093,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     initialFocus: -1,
     visuallyHiddenDismiss: true,
     modal: false
-  }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
     style: __spreadProps$n(__spreadValues$A({}, floatingStyles), {
       width: `${optionsError ? ERROR_STATE_DROPDOWN_WIDTH : maxOptionWidth}px`
     }),
@@ -4306,24 +4134,17 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
         listRef.current[index] = node;
       },
       onClick(event) {
-        var _a3;
         if (filterInputType !== "value") {
           event.stopPropagation();
         }
-        if (isMultiValueEdit) {
-          event.stopPropagation();
-          handleLocalMultiValueChange(item);
-          (_a3 = refs.domReference.current) == null ? void 0 : _a3.focus();
-        } else {
-          model._updateFilter(filter, generateFilterUpdatePayload(filterInputType, item));
-          setInputValue("");
-          switchToNextInputType(
-            filterInputType,
-            setInputType,
-            handleChangeViewMode,
-            refs.domReference.current
-          );
-        }
+        model._updateFilter(filter, generateFilterUpdatePayload(filterInputType, item));
+        setInputValue("");
+        switchToNextInputType(
+          filterInputType,
+          setInputType,
+          handleChangeViewMode,
+          refs.domReference.current
+        );
       }
     })), {
       active: activeIndex === index,
@@ -4333,56 +4154,19 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
         transform: `translateY(${virtualItem.start}px)`
       },
       "aria-setsize": filteredDropDownItems.length,
-      "aria-posinset": virtualItem.index + 1,
-      isMultiValueEdit,
-      checked: filterMultiValues.some((val) => val.value === item.value)
-    }), /* @__PURE__ */ React__default["default"].createElement("span", null, item.isCustom ? "Use custom value: " : "", " ", (_a2 = item.label) != null ? _a2 : item.value), item.description ? /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: styles.descriptionText
-    }, item.description) : null);
-  }))), isMultiValueEdit && !optionsLoading && !optionsError && filteredDropDownItems.length ? /* @__PURE__ */ React__default["default"].createElement(MultiValueApplyButton, {
-    onClick: () => handleMultiValueFilterCommit(model, filter, filterMultiValues),
-    floatingElement: refs.floating.current,
-    maxOptionWidth
-  }) : null))));
+      "aria-posinset": virtualItem.index + 1
+    }), item.isCustom ? "Use custom value: " : "", " ", (_a2 = item.label) != null ? _a2 : item.value);
+  }))))));
 });
-const MultiValuePill = ({ item, handleRemoveMultiValue, index }) => {
-  var _a, _b;
-  const styles = ui.useStyles2(getStyles$b);
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: css.cx(styles.basePill, styles.valuePill)
-  }, /* @__PURE__ */ React__default["default"].createElement("span", null, " ", (_a = item.label) != null ? _a : item.value), /* @__PURE__ */ React__default["default"].createElement(ui.Button, {
-    onClick: (e) => {
-      e.stopPropagation();
-      e.preventDefault();
-      handleRemoveMultiValue(item);
-    },
-    onKeyDownCapture: (e) => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        e.stopPropagation();
-        handleRemoveMultiValue(item);
-      }
-    },
-    fill: "text",
-    size: "sm",
-    variant: "secondary",
-    className: styles.removeButton,
-    tooltip: `Remove filter value - ${(_b = item.label) != null ? _b : item.value}`
-  }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
-    name: "times",
-    size: "md",
-    id: `${item.value}-${index}`
-  })));
-};
 const getStyles$b = (theme) => ({
   comboboxWrapper: css.css({
     display: "flex",
-    flexWrap: "wrap"
+    flexWrap: "nowrap"
   }),
   pillWrapper: css.css({
     display: "flex",
     alignItems: "center",
-    flexWrap: "wrap"
+    whiteSpace: "nowrap"
   }),
   basePill: css.css(__spreadProps$n(__spreadValues$A({
     display: "flex",
@@ -4407,8 +4191,7 @@ const getStyles$b = (theme) => ({
     }
   }),
   valuePill: css.css({
-    background: theme.colors.action.selected,
-    padding: theme.spacing(0.125, 0, 0.125, 1)
+    background: theme.colors.action.selected
   }),
   dropdownWrapper: css.css({
     backgroundColor: theme.colors.background.primary,
@@ -4441,25 +4224,6 @@ const getStyles$b = (theme) => ({
     "&:not(:first-child)": {
       borderTop: `1px solid ${theme.colors.border.weak}`
     }
-  }),
-  removeButton: css.css({
-    marginInline: theme.spacing(0.5),
-    height: "100%",
-    padding: 0,
-    cursor: "pointer",
-    "&:hover": {
-      color: theme.colors.text.primary
-    }
-  }),
-  descriptionText: css.css(__spreadProps$n(__spreadValues$A({}, theme.typography.bodySmall), {
-    color: theme.colors.text.secondary,
-    paddingTop: theme.spacing(0.5)
-  })),
-  multiValueApply: css.css({
-    position: "absolute",
-    top: 0,
-    left: 0,
-    display: "flex"
   })
 });
 
@@ -4489,7 +4253,7 @@ function AdHocFilterPill({ filter, model, readOnly }) {
   const [shouldFocus, setShouldFocus] = 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 valueLabel = (_c = (_b = filter.valueLabels) == null ? void 0 : _b[0]) != null ? _c : filter.value;
   const handleChangeViewMode = React.useCallback(
     (event) => {
       event == null ? void 0 : event.stopPropagation();
@@ -4521,9 +4285,7 @@ function AdHocFilterPill({ filter, model, readOnly }) {
       "aria-label": `Edit filter with key ${keyLabel}`,
       tabIndex: 0,
       ref: pillWrapperRef
-    }, /* @__PURE__ */ React__default["default"].createElement("span", {
-      className: styles.pillText
-    }, keyLabel, " ", filter.operator, " ", valueLabel), !readOnly ? /* @__PURE__ */ React__default["default"].createElement(ui.IconButton, {
+    }, /* @__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);
@@ -4579,9 +4341,6 @@ const getStyles$a = (theme) => ({
     "&:hover": {
       color: theme.colors.text.primary
     }
-  }),
-  pillText: css.css({
-    whiteSpace: "break-spaces"
   })
 });
 
@@ -4847,7 +4606,7 @@ function renderExpression(builder, filters) {
 function AdHocFiltersVariableRenderer({ model }) {
   const { filters, readOnly, addFilterButtonText } = model.useState();
   const styles = ui.useStyles2(getStyles$8);
-  if (model.state.layout === "combobox") {
+  if (!model.state.supportsMultiValueOperators && model.state.layout === "combobox") {
     return /* @__PURE__ */ React__default["default"].createElement(AdHocFiltersComboboxRenderer, {
       model
     });
@@ -9054,7 +8813,7 @@ function VariableValueInput({ model }) {
     id: key,
     placeholder: "Enter value",
     minWidth: 15,
-    defaultValue: value,
+    value,
     loading,
     onBlur,
     onKeyDown
@@ -9102,12 +8861,10 @@ class TextBoxVariable extends SceneObjectBase {
     return { [this.getKey()]: this.state.value };
   }
   updateFromUrl(values) {
-    const update = {};
     const val = values[this.getKey()];
     if (typeof val === "string") {
-      update.value = val;
+      this.setValue(val);
     }
-    this.setState(update);
   }
 }
 TextBoxVariable.Component = ({ model }) => {