@grafana/scenes 5.13.1--canary.889.10720020573.0 → 5.14.0

package/dist/index.js

@@ -241,6 +241,7 @@ class SceneObjectBase {
     this._deactivationHandlers = /* @__PURE__ */ new Map();
     this._subs = new rxjs.Subscription();
     this._refCount = 0;
+    this._UNSAFE_PARENT_ACTIVATION = false;
     if (!state.key) {
       state.key = uuid.v4();
     }
@@ -397,12 +398,19 @@ class SceneObjectBase {
     }
   }
   activate() {
+    let parentDeactivate;
+    if (this.parent && !this.parent.isActive && this._UNSAFE_PARENT_ACTIVATION) {
+      parentDeactivate = this.parent.activate();
+    }
     if (!this.isActive) {
       this._internalActivate();
     }
     this._refCount++;
     let called = false;
     return () => {
+      if (parentDeactivate) {
+        parentDeactivate();
+      }
       this._refCount--;
       if (called) {
         const msg = `SceneObject cancelation handler returned by activate() called a second time`;
@@ -3628,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({
@@ -3640,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) => ({
@@ -3684,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 = () => {
@@ -3717,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"]();
@@ -3789,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 = [];
@@ -3799,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;
@@ -3851,7 +3819,7 @@ const useFloatingInteractions = ({
   onOpenChange,
   activeIndex,
   setActiveIndex,
-  outsidePressIdsToIgnore,
+  operatorIdentifier,
   listRef,
   disabledIndicesRef
 }) => {
@@ -3875,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;
@@ -3935,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([]);
@@ -3954,60 +3908,22 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       setInputValue("");
     }
   }, [model, isAlwaysWip]);
-  const handleMultiValueUpdate = React.useCallback(
-    (model2, filter2, filterMultiValues2) => {
-      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([]);
-      }
-      setTimeout(() => {
-        var _a2;
-        return (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
-      });
-    },
-    []
-  );
-  const handleAddMultiValue = 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) {
-          handleMultiValueUpdate(model, filter, filterMultiValues);
-        }
         handleResetWip();
         handleChangeViewMode == null ? void 0 : handleChangeViewMode();
       }
     },
-    [filter, filterMultiValues, handleChangeViewMode, handleMultiValueUpdate, 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
   });
@@ -4058,41 +3974,24 @@ 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();
-          handleMultiValueUpdate(model, filter, filterMultiValues);
-          (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
-        }
-        handleChangeViewMode == null ? void 0 : handleChangeViewMode();
-        handleResetWip();
+    (event) => {
+      if (event.key === "Backspace" && !inputValue && filterInputType === "key") {
+        model._removeLastFilter();
+        handleFetchOptions(filterInputType);
       }
     },
-    [filter, filterMultiValues, handleChangeViewMode, handleMultiValueUpdate, handleResetWip, model, refs.domReference]
+    [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();
@@ -4100,32 +3999,18 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     }
   }, []);
   const handleEnterInput = React.useCallback(
-    (event, multiValueEdit) => {
+    (event) => {
       if (event.key === "Enter" && activeIndex != null) {
         if (!filteredDropDownItems[activeIndex]) {
           return;
         }
-        const selectedItem = filteredDropDownItems[activeIndex];
-        if (multiValueEdit) {
-          handleAddMultiValue(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,
-      handleAddMultiValue,
-      handleChangeViewMode,
-      model,
-      refs.domReference
-    ]
+    [activeIndex, filter, filterInputType, filteredDropDownItems, model]
   );
   React.useEffect(() => {
     if (open) {
@@ -4133,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))) {
@@ -4191,12 +4055,9 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
         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,
@@ -4210,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 }),
@@ -4232,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`
     }),
@@ -4273,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();
-          handleAddMultiValue(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,
@@ -4300,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: () => handleMultiValueUpdate(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",
@@ -4374,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,
@@ -4408,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"
   })
 });
 
@@ -4456,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();
@@ -4488,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);
@@ -4546,9 +4341,6 @@ const getStyles$a = (theme) => ({
     "&:hover": {
       color: theme.colors.text.primary
     }
-  }),
-  pillText: css.css({
-    whiteSpace: "break-spaces"
   })
 });
 
@@ -4814,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
     });