@grafana/scenes 5.14.1 → 5.14.2--canary.889.10728276286.0

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 } = _b, rest = __objRest$3(_b, ["children", "active", "addGroupBottomBorder"]);
+    var _b = _a, { children, active, addGroupBottomBorder, isMultiValueEdit, checked } = _b, rest = __objRest$3(_b, ["children", "active", "addGroupBottomBorder", "isMultiValueEdit", "checked"]);
     const styles = ui.useStyles2(getStyles$c);
     const id = React.useId();
     return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$B({
@@ -3648,7 +3648,11 @@ 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, children)));
+    }, /* @__PURE__ */ React__default["default"].createElement("span", null, isMultiValueEdit ? /* @__PURE__ */ React__default["default"].createElement(ui.Checkbox, {
+      tabIndex: -1,
+      checked,
+      className: styles.checkbox
+    }) : null, children)));
   }
 );
 const getStyles$c = (theme) => ({
@@ -3688,6 +3692,22 @@ 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 = () => {
@@ -3705,11 +3725,29 @@ 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_DESCRIPTION_WIDTH_ESTIMATE_MULTIPLIER = 6;
 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"]();
@@ -3760,7 +3798,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;
+  var _a, _b, _c, _d;
   let maxOptionWidth = 182;
   const listRefArr = [];
   const disabledIndices = [];
@@ -3770,7 +3808,12 @@ const setupDropdownAccessibility = (options, listRef, disabledIndicesRef) => {
       disabledIndices.push(i);
     }
     let label = (_c = (_b = options[i].label) != null ? _b : options[i].value) != null ? _c : "";
-    const widthEstimate = (options[i].isCustom ? label.length + 18 : label.length) * VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER + VIRTUAL_LIST_PADDING * 2;
+    let multiplierToUse = VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER;
+    if (label.length * VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER < (((_d = options[i].description) == null ? void 0 : _d.length) || 0) * VIRTUAL_LIST_DESCRIPTION_WIDTH_ESTIMATE_MULTIPLIER) {
+      label = options[i].description;
+      multiplierToUse = VIRTUAL_LIST_DESCRIPTION_WIDTH_ESTIMATE_MULTIPLIER;
+    }
+    const widthEstimate = (options[i].isCustom ? label.length + 18 : label.length) * multiplierToUse + VIRTUAL_LIST_PADDING * 2;
     if (widthEstimate > maxOptionWidth) {
       maxOptionWidth = widthEstimate;
     }
@@ -3812,6 +3855,20 @@ const generateFilterUpdatePayload = (filterInputType, item) => {
     [filterInputType]: item.value
   };
 };
+const INPUT_PLACEHOLDER = "Filter by label values";
+const generatePlaceholder = (filter, filterInputType, isMultiValueEdit, isAlwaysWip) => {
+  var _a;
+  if (filterInputType === "key") {
+    return INPUT_PLACEHOLDER;
+  }
+  if (filterInputType === "value") {
+    if (isMultiValueEdit) {
+      return INPUT_PLACEHOLDER;
+    }
+    return ((_a = filter.valueLabels) == null ? void 0 : _a[0]) || "";
+  }
+  return filter[filterInputType] && !isAlwaysWip ? `${filter[filterInputType]}` : INPUT_PLACEHOLDER;
+};
 
 const MAX_MENU_HEIGHT = 300;
 const useFloatingInteractions = ({
@@ -3819,7 +3876,7 @@ const useFloatingInteractions = ({
   onOpenChange,
   activeIndex,
   setActiveIndex,
-  operatorIdentifier,
+  outsidePressIdsToIgnore,
   listRef,
   disabledIndicesRef
 }) => {
@@ -3843,7 +3900,13 @@ const useFloatingInteractions = ({
   const role = react.useRole(context, { role: "listbox" });
   const dismiss = react.useDismiss(context, {
     outsidePress: (event) => {
-      if (event.currentTarget instanceof HTMLElement && event.currentTarget.id === operatorIdentifier) {
+      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)) {
         return false;
       }
       return true;
@@ -3897,6 +3960,15 @@ 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 multiValuePillWrapperRef = React.useRef(null);
+  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([]);
@@ -3908,22 +3980,66 @@ 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 onOpenChange = React.useCallback(
-    (nextOpen, _, reason) => {
+    (nextOpen, _2, reason) => {
       setOpen(nextOpen);
       if (reason && ["outside-press", "escape-key"].includes(reason)) {
+        if (isMultiValueEdit) {
+          handleMultiValueFilterCommit(model, filter, filterMultiValues);
+        }
         handleResetWip();
         handleChangeViewMode == null ? void 0 : handleChangeViewMode();
       }
     },
-    [handleChangeViewMode, handleResetWip]
+    [
+      filter,
+      filterMultiValues,
+      handleChangeViewMode,
+      handleMultiValueFilterCommit,
+      handleResetWip,
+      isMultiValueEdit,
+      model
+    ]
   );
+  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,
-    operatorIdentifier,
+    outsidePressIdsToIgnore,
     listRef,
     disabledIndicesRef
   });
@@ -3936,6 +4052,16 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     setInputValue(value);
     setActiveIndex(0);
   }
+  const handleRemoveMultiValue = React.useCallback(
+    (item) => {
+      setFilterMultiValues((selected) => selected.filter((option) => option.value !== item.value));
+      setTimeout(() => {
+        var _a2;
+        return (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
+      });
+    },
+    [refs.domReference]
+  );
   const filteredDropDownItems = flattenOptionGroups(handleOptionGroups(optionsSearcher(inputValue, filterInputType)));
   if (filterInputType !== "operator" && inputValue) {
     filteredDropDownItems.push({
@@ -3974,43 +4100,89 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
   const rowVirtualizer = reactVirtual.useVirtualizer({
     count: filteredDropDownItems.length,
     getScrollElement: () => refs.floating.current,
-    estimateSize: () => VIRTUAL_LIST_ITEM_HEIGHT,
+    estimateSize: (index) => filteredDropDownItems[index].description ? VIRTUAL_LIST_ITEM_HEIGHT_WITH_DESCRIPTION : VIRTUAL_LIST_ITEM_HEIGHT,
     overscan: VIRTUAL_LIST_OVERSCAN
   });
   const handleBackspaceInput = React.useCallback(
-    (event) => {
-      if (event.key === "Backspace" && !inputValue && filterInputType === "key") {
-        model._removeLastFilter();
-        handleFetchOptions(filterInputType);
+    (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]
+    [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();
+      }
+    },
+    [filter, filterMultiValues, handleChangeViewMode, handleMultiValueFilterCommit, handleResetWip, model]
   );
-  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) => {
+    (event, multiValueEdit) => {
       if (event.key === "Enter" && activeIndex != null) {
         if (!filteredDropDownItems[activeIndex]) {
           return;
         }
-        model._updateFilter(filter, generateFilterUpdatePayload(filterInputType, filteredDropDownItems[activeIndex]));
+        const selectedItem = filteredDropDownItems[activeIndex];
+        if (multiValueEdit) {
+          handleLocalMultiValueChange(selectedItem);
+        } else {
+          model._updateFilter(filter, generateFilterUpdatePayload(filterInputType, selectedItem));
+          switchToNextInputType(filterInputType, setInputType, handleChangeViewMode, refs.domReference.current);
+          setActiveIndex(0);
+        }
         setInputValue("");
-        setActiveIndex(0);
-        switchToNextInputType(filterInputType, setInputType, handleChangeViewMode, refs.domReference.current);
       }
     },
-    [activeIndex, filter, filterInputType, filteredDropDownItems, model]
+    [
+      activeIndex,
+      filter,
+      filterInputType,
+      filteredDropDownItems,
+      handleLocalMultiValueChange,
+      handleChangeViewMode,
+      model,
+      refs.domReference
+    ]
   );
   React.useEffect(() => {
     if (open) {
@@ -4018,13 +4190,34 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     }
   }, [open, filterInputType]);
   React.useEffect(() => {
-    var _a2;
+    var _a2, _b2;
     if (!isAlwaysWip) {
       setInputType("value");
       setInputValue("");
-      (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
+      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();
     }
   }, []);
+  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))) {
@@ -4032,7 +4225,6 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     }
   }, [activeIndex, rowVirtualizer]);
   const keyLabel = (_a = filter == null ? void 0 : filter.keyLabel) != null ? _a : filter == null ? void 0 : filter.key;
-  const valueLabel = (_c = (_b = filter == null ? void 0 : filter.valueLabels) == null ? void 0 : _b[0]) != null ? _c : filter == null ? void 0 : filter.value;
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: styles.comboboxWrapper
   }, filter ? /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -4050,18 +4242,23 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       switchInputType("operator", setInputType, void 0, refs.domReference.current);
     },
     onKeyDown: (event) => {
-      handleShiftTabInput(event);
+      handleShiftTabInput(event, hasMultiValueOperator);
       if (event.key === "Enter") {
         switchInputType("operator", setInputType, void 0, refs.domReference.current);
       }
     }
-  }, filter.operator) : null, (filter == null ? void 0 : filter.key) && (filter == null ? void 0 : filter.operator) && (filter == null ? void 0 : filter.value) && !["operator", "value"].includes(filterInputType) ? /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: css.cx(styles.basePill, styles.valuePill)
-  }, valueLabel) : null) : null, /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$n(__spreadValues$A({}, getReferenceProps({
+  }, filter.operator) : null, /* @__PURE__ */ React__default["default"].createElement("div", {
+    ref: multiValuePillWrapperRef
+  }), 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({
     ref: refs.setReference,
     onChange,
     value: inputValue,
-    placeholder: !isAlwaysWip ? filterInputType === "operator" ? `${filter[filterInputType]} ${valueLabel}` : filter[filterInputType] : "Filter by label values",
+    placeholder: generatePlaceholder(filter, filterInputType, isMultiValueEdit, isAlwaysWip),
     "aria-autocomplete": "list",
     onKeyDown(event) {
       if (!open) {
@@ -4071,9 +4268,9 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
       if (filterInputType === "operator") {
         handleShiftTabInput(event);
       }
-      handleBackspaceInput(event);
-      handleTabInput(event);
-      handleEnterInput(event);
+      handleBackspaceInput(event, isMultiValueEdit);
+      handleTabInput(event, isMultiValueEdit);
+      handleEnterInput(event, isMultiValueEdit);
     }
   })), {
     className: css.cx(styles.inputStyle, { [styles.loadingInputPadding]: !optionsLoading }),
@@ -4093,9 +4290,10 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     initialFocus: -1,
     visuallyHiddenDismiss: true,
     modal: false
-  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+  }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
     style: __spreadProps$n(__spreadValues$A({}, floatingStyles), {
-      width: `${optionsError ? ERROR_STATE_DROPDOWN_WIDTH : maxOptionWidth}px`
+      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,
@@ -4134,17 +4332,25 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
         listRef.current[index] = node;
       },
       onClick(event) {
+        var _a3;
         if (filterInputType !== "value") {
           event.stopPropagation();
         }
-        model._updateFilter(filter, generateFilterUpdatePayload(filterInputType, item));
-        setInputValue("");
-        switchToNextInputType(
-          filterInputType,
-          setInputType,
-          handleChangeViewMode,
-          refs.domReference.current
-        );
+        if (isMultiValueEdit) {
+          event.preventDefault();
+          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
+          );
+        }
       }
     })), {
       active: activeIndex === index,
@@ -4154,19 +4360,56 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
         transform: `translateY(${virtualItem.start}px)`
       },
       "aria-setsize": filteredDropDownItems.length,
-      "aria-posinset": virtualItem.index + 1
-    }), item.isCustom ? "Use custom value: " : "", " ", (_a2 = item.label) != null ? _a2 : item.value);
-  }))))));
+      "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))));
 });
+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: "nowrap"
+    flexWrap: "wrap"
   }),
   pillWrapper: css.css({
     display: "flex",
     alignItems: "center",
-    whiteSpace: "nowrap"
+    flexWrap: "wrap"
   }),
   basePill: css.css(__spreadProps$n(__spreadValues$A({
     display: "flex",
@@ -4191,7 +4434,8 @@ const getStyles$b = (theme) => ({
     }
   }),
   valuePill: css.css({
-    background: theme.colors.action.selected
+    background: theme.colors.action.selected,
+    padding: theme.spacing(0.125, 0, 0.125, 1)
   }),
   dropdownWrapper: css.css({
     backgroundColor: theme.colors.background.primary,
@@ -4224,6 +4468,25 @@ 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"
   })
 });
 
@@ -4246,14 +4509,14 @@ var __spreadValues$z = (a, b) => {
   return a;
 };
 var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
-function AdHocFilterPill({ filter, model, readOnly }) {
+function AdHocFilterPill({ filter, model, readOnly, focusOnInputRef }) {
   var _a, _b, _c;
   const styles = ui.useStyles2(getStyles$a);
   const [viewMode, setViewMode] = React.useState(true);
   const [shouldFocus, setShouldFocus] = React.useState(false);
   const pillWrapperRef = React.useRef(null);
   const keyLabel = (_a = filter.keyLabel) != null ? _a : filter.key;
-  const valueLabel = (_c = (_b = filter.valueLabels) == null ? void 0 : _b[0]) != null ? _c : filter.value;
+  const 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 == null ? void 0 : event.stopPropagation();
@@ -4285,16 +4548,20 @@ function AdHocFilterPill({ filter, model, readOnly }) {
       "aria-label": `Edit filter with key ${keyLabel}`,
       tabIndex: 0,
       ref: pillWrapperRef
-    }, /* @__PURE__ */ React__default["default"].createElement("span", null, keyLabel, " ", filter.operator, " ", valueLabel), !readOnly ? /* @__PURE__ */ React__default["default"].createElement(ui.IconButton, {
+    }, /* @__PURE__ */ React__default["default"].createElement("span", {
+      className: styles.pillText
+    }, keyLabel, " ", filter.operator, " ", valueLabel), !readOnly ? /* @__PURE__ */ React__default["default"].createElement(ui.IconButton, {
       onClick: (e) => {
         e.stopPropagation();
         model._removeFilter(filter);
+        setTimeout(() => focusOnInputRef == null ? void 0 : focusOnInputRef());
       },
       onKeyDownCapture: (e) => {
         if (e.key === "Enter") {
           e.preventDefault();
           e.stopPropagation();
           model._removeFilter(filter);
+          setTimeout(() => focusOnInputRef == null ? void 0 : focusOnInputRef());
         }
       },
       name: "times",
@@ -4341,6 +4608,9 @@ const getStyles$a = (theme) => ({
     "&:hover": {
       color: theme.colors.text.primary
     }
+  }),
+  pillText: css.css({
+    whiteSpace: "break-spaces"
   })
 });
 
@@ -4377,7 +4647,8 @@ const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRen
     key: index,
     filter,
     model,
-    readOnly
+    readOnly,
+    focusOnInputRef: focusOnInputRef.current
   })), !readOnly ? /* @__PURE__ */ React__default["default"].createElement(AdHocFiltersAlwaysWipCombobox, {
     model,
     ref: focusOnInputRef
@@ -4606,7 +4877,7 @@ function renderExpression(builder, filters) {
 function AdHocFiltersVariableRenderer({ model }) {
   const { filters, readOnly, addFilterButtonText } = model.useState();
   const styles = ui.useStyles2(getStyles$8);
-  if (!model.state.supportsMultiValueOperators && model.state.layout === "combobox") {
+  if (model.state.layout === "combobox") {
     return /* @__PURE__ */ React__default["default"].createElement(AdHocFiltersComboboxRenderer, {
       model
     });