npm - @grafana/scenes - Versions diffs - 5.14.1--canary.889.10722729172.0 → 5.14.1 - Mend

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

Files changed (20) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,15 @@
+# v5.14.1 (Thu Sep 05 2024)
+#### 🐛 Bug Fix
+- TextBoxVariable: fixes issues with TextBox variable when being updated by URL [#890](https://github.com/grafana/scenes/pull/890) ([@torkelo](https://github.com/torkelo))
+#### Authors: 1
+- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))
+---
 # v5.14.0 (Thu Sep 05 2024)
 #### 🚀 Enhancement

package/dist/esm/variables/adhoc/AdHocFiltersCombobox/AdHocFilterPill.js CHANGED Viewed

@@ -29,7 +29,7 @@ function AdHocFilterPill({ filter, model, readOnly }) {
   const [shouldFocus, setShouldFocus] = useState(false);
   const pillWrapperRef = 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 = useCallback(
     (event) => {
       event == null ? void 0 : event.stopPropagation();
@@ -61,9 +61,7 @@ function AdHocFilterPill({ filter, model, readOnly }) {
       "aria-label": `Edit filter with key ${keyLabel}`,
       tabIndex: 0,
       ref: pillWrapperRef
-    }, /* @__PURE__ */ React.createElement("span", {
-      className: styles.pillText
-    }, keyLabel, " ", filter.operator, " ", valueLabel), !readOnly ? /* @__PURE__ */ React.createElement(IconButton, {
+    }, /* @__PURE__ */ React.createElement("span", null, keyLabel, " ", filter.operator, " ", valueLabel), !readOnly ? /* @__PURE__ */ React.createElement(IconButton, {
       onClick: (e) => {
         e.stopPropagation();
         model._removeFilter(filter);
@@ -119,9 +117,6 @@ const getStyles = (theme) => ({
     "&:hover": {
       color: theme.colors.text.primary
     }
-  }),
-  pillText: css({
-    whiteSpace: "break-spaces"
   })
 });

package/dist/esm/variables/adhoc/AdHocFiltersCombobox/AdHocFilterPill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AdHocFilterPill.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/AdHocFilterPill.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2, IconButton } from '@grafana/ui';\nimport React, { useState, useRef, useCallback, useEffect } from 'react';\nimport { AdHocCombobox } from './AdHocFiltersCombobox';\nimport { AdHocFilterWithLabels, AdHocFiltersVariable } from '../AdHocFiltersVariable';\n\ninterface Props {\n filter: AdHocFilterWithLabels;\n model: AdHocFiltersVariable;\n readOnly?: boolean;\n}\n\nexport function AdHocFilterPill({ filter, model, readOnly }: Props) {\n const styles = useStyles2(getStyles);\n const [viewMode, setViewMode] = useState(true);\n const [shouldFocus, setShouldFocus] = useState(false);\n const pillWrapperRef = useRef<HTMLDivElement>(null);\n\n const keyLabel = filter.keyLabel ?? filter.key;\n ~~// TODO remove when we're on the latest version of @grafana/data\n //@ts-expect-error\n~~ const valueLabel = filter.valueLabels?.~~join(',~~ ') \|\| filter.~~values?.join(', ') \|\| filter.~~value;\n\n const handleChangeViewMode = useCallback(\n (event?: React.MouseEvent) => {\n event?.stopPropagation();\n if (readOnly) {\n return;\n }\n\n setShouldFocus(!viewMode);\n setViewMode(!viewMode);\n },\n [readOnly, viewMode]\n );\n\n useEffect(() => {\n if (shouldFocus) {\n pillWrapperRef.current?.focus();\n setShouldFocus(false);\n }\n }, [shouldFocus]);\n\n if (viewMode) {\n return (\n <div\n className={cx(styles.combinedFilterPill, { [styles.readOnlyCombinedFilter]: readOnly })}\n onClick={handleChangeViewMode}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleChangeViewMode();\n }\n }}\n role=\"button\"\n aria-label={`Edit filter with key ${keyLabel}`}\n tabIndex={0}\n ref={pillWrapperRef}\n >\n <span ~~className={styles.pillText}~~>\n {keyLabel} {filter.operator} {valueLabel}\n </span>\n {!readOnly ? (\n <IconButton\n onClick={(e) => {\n e.stopPropagation();\n model._removeFilter(filter);\n }}\n onKeyDownCapture={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n model._removeFilter(filter);\n }\n }}\n name=\"times\"\n size=\"md\"\n className={styles.removeButton}\n tooltip={`Remove filter with key ${keyLabel}`}\n />\n ) : null}\n </div>\n );\n }\n\n return <AdHocCombobox filter={filter} model={model} handleChangeViewMode={handleChangeViewMode} />;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n combinedFilterPill: css({\n display: 'flex',\n alignItems: 'center',\n background: theme.colors.action.selected,\n borderRadius: theme.shape.radius.default,\n border: `1px solid ${theme.colors.border.weak}`,\n padding: theme.spacing(0.125, 0, 0.125, 1),\n color: theme.colors.text.primary,\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n minHeight: theme.spacing(2.75),\n ...theme.typography.bodySmall,\n fontWeight: theme.typography.fontWeightBold,\n cursor: 'pointer',\n\n '&:hover': {\n background: theme.colors.action.hover,\n },\n }),\n readOnlyCombinedFilter: css({\n paddingRight: theme.spacing(1),\n cursor: 'text',\n '&:hover': {\n background: theme.colors.action.selected,\n },\n }),\n removeButton: css({\n marginInline: theme.spacing(0.5),\n cursor: 'pointer',\n '&:hover': {\n color: theme.colors.text.primary,\n },\n }),\n ~~pillText: css({\n whiteSpace: 'break-spaces',\n~~ })~~,\n})~~;\n"],"names":["_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAaO,SAAS,eAAgB,CAAA,EAAE,MAAQ,EAAA,KAAA,EAAO,UAAmB,EAAA;AAbpE,EAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AAcE,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA,CAAA;AACnC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;AAC7C,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AACpD,EAAM,MAAA,cAAA,GAAiB,OAAuB,IAAI,CAAA,CAAA;AAElD,EAAA,MAAM,QAAW,GAAA,CAAA,EAAA,GAAA,MAAA,CAAO,QAAP,KAAA,IAAA,GAAA,EAAA,GAAmB,MAAO,CAAA,GAAA,CAAA;~~AAG3C~~,~~EAAM~~,~~MAAA~~,~~UAAA~~,GAAA,CAAA,~~CAAa~~,~~EAAO,~~GAAA,MAAA,CAAA,WAAA,KAAP,~~IAAoB~~,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,~~IAAA,CAAK,IAAS,~~CAAA,~~MAAA,~~CAAA,~~EAAA~~,~~GAAA~~,~~MAAA,CAAO,MAAP,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAe,IAAK,CAAA,IAAA,CAAA,CAAA,IAAS,~~MAAO,CAAA,KAAA,CAAA;~~AAEzF~~,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,KAA6B,KAAA;AAC5B,MAAO,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,eAAA,EAAA,CAAA;AACP,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,OAAA;AAAA,OACF;AAEA,MAAA,cAAA,CAAe,CAAC,QAAQ,CAAA,CAAA;AACxB,MAAA,WAAA,CAAY,CAAC,QAAQ,CAAA,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,UAAU,QAAQ,CAAA;AAAA,GACrB,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;~~AArClB~~,IAAAA,IAAAA,GAAAA,CAAAA;~~AAsCI~~,IAAA,IAAI,WAAa,EAAA;AACf,MAAA,CAAAA,GAAA,GAAA,cAAA,CAAe,OAAf,KAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,GAAwB,CAAA,KAAA,EAAA,CAAA;AACxB,MAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AAAA,KACtB;AAAA,GACF,EAAG,CAAC,WAAW,CAAC,CAAA,CAAA;AAEhB,EAAA,IAAI,QAAU,EAAA;AACZ,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,GAAG,MAAO,CAAA,kBAAA,EAAoB,EAAE,CAAC,MAAA,CAAO,sBAAyB,GAAA,QAAA,EAAU,CAAA;AAAA,MACtF,OAAS,EAAA,oBAAA;AAAA,MACT,SAAA,EAAW,CAAC,CAAM,KAAA;AAChB,QAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,UAAqB,oBAAA,EAAA,CAAA;AAAA,SACvB;AAAA,OACF;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACL,cAAY,CAAwB,qBAAA,EAAA,QAAA,CAAA,CAAA;AAAA,MACpC,QAAU,EAAA,CAAA;AAAA,MACV,GAAK,EAAA,cAAA;AAAA,~~KAAA~~,~~kBAEJ~~,KAAA,CAAA,aAAA,~~CAAA~~,~~MAAA~~,EAAA~~;AAAA~~,~~MAAK~~,~~WAAW~~,~~MAAO~~,~~CAAA~~,~~QAAA;AAAA~~,~~KACrB,~~EAAA,~~QAAA~~,~~EAAS~~,~~KAAE~~,~~MAAO~~,~~CAAA~~,~~QAAA~~,~~EAAS,KAAE,~~UAChC,CAAA,EACC,CAAC,QAAA,mBACC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,MACC,OAAA,EAAS,CAAC,CAAM,KAAA;AACd,QAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAClB,QAAA,KAAA,CAAM,cAAc,MAAM,CAAA,CAAA;AAAA,OAC5B;AAAA,MACA,gBAAA,EAAkB,CAAC,CAAM,KAAA;AACvB,QAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,UAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,UAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAClB,UAAA,KAAA,CAAM,cAAc,MAAM,CAAA,CAAA;AAAA,SAC5B;AAAA,OACF;AAAA,MACA,IAAK,EAAA,OAAA;AAAA,MACL,IAAK,EAAA,IAAA;AAAA,MACL,WAAW,MAAO,CAAA,YAAA;AAAA,MAClB,SAAS,CAA0B,uBAAA,EAAA,QAAA,CAAA,CAAA;AAAA,KACrC,IACE,IACN,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IAAc,MAAA;AAAA,IAAgB,KAAA;AAAA,IAAc,oBAAA;AAAA,GAA4C,CAAA,CAAA;AAClG,CAAA;AAEA,MAAM,SAAA,GAAY,CAAC,KAA0B,MAAA;AAAA,EAC3C,oBAAoB,GAAI,CAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IACtB,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,QAAA;AAAA,IAChC,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,IACjC,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,IAAA,CAAA,CAAA;AAAA,IACzC,SAAS,KAAM,CAAA,OAAA,CAAQ,KAAO,EAAA,CAAA,EAAG,OAAO,CAAC,CAAA;AAAA,IACzC,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,OAAA;AAAA,IACzB,QAAU,EAAA,QAAA;AAAA,IACV,UAAY,EAAA,QAAA;AAAA,IACZ,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,GAC1B,EAAA,KAAA,CAAM,WAAW,SAXE,CAAA,EAAA;AAAA,IAYtB,UAAA,EAAY,MAAM,UAAW,CAAA,cAAA;AAAA,IAC7B,MAAQ,EAAA,SAAA;AAAA,IAER,SAAW,EAAA;AAAA,MACT,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,KAAA;AAAA,KAClC;AAAA,GACD,CAAA,CAAA;AAAA,EACD,wBAAwB,GAAI,CAAA;AAAA,IAC1B,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC7B,MAAQ,EAAA,MAAA;AAAA,IACR,SAAW,EAAA;AAAA,MACT,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,QAAA;AAAA,KAClC;AAAA,GACD,CAAA;AAAA,EACD,cAAc,GAAI,CAAA;AAAA,IAChB,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,IAC/B,MAAQ,EAAA,SAAA;AAAA,IACR,SAAW,EAAA;AAAA,MACT,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,OAAA;AAAA,KAC3B;AAAA,GACD,CAAA;~~AAAA,EACD,UAAU,GAAI,CAAA;AAAA,IACZ,UAAY,EAAA,cAAA;AAAA,GACb,CAAA;~~AACH,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"AdHocFilterPill.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/AdHocFilterPill.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2, IconButton } from '@grafana/ui';\nimport React, { useState, useRef, useCallback, useEffect } from 'react';\nimport { AdHocCombobox } from './AdHocFiltersCombobox';\nimport { AdHocFilterWithLabels, AdHocFiltersVariable } from '../AdHocFiltersVariable';\n\ninterface Props {\n filter: AdHocFilterWithLabels;\n model: AdHocFiltersVariable;\n readOnly?: boolean;\n}\n\nexport function AdHocFilterPill({ filter, model, readOnly }: Props) {\n const styles = useStyles2(getStyles);\n const [viewMode, setViewMode] = useState(true);\n const [shouldFocus, setShouldFocus] = useState(false);\n const pillWrapperRef = useRef<HTMLDivElement>(null);\n\n const keyLabel = filter.keyLabel ?? filter.key;\n const valueLabel = filter.valueLabels?.[0] ?? filter.value;\n\n const handleChangeViewMode = useCallback(\n (event?: React.MouseEvent) => {\n event?.stopPropagation();\n if (readOnly) {\n return;\n }\n\n setShouldFocus(!viewMode);\n setViewMode(!viewMode);\n },\n [readOnly, viewMode]\n );\n\n useEffect(() => {\n if (shouldFocus) {\n pillWrapperRef.current?.focus();\n setShouldFocus(false);\n }\n }, [shouldFocus]);\n\n if (viewMode) {\n return (\n <div\n className={cx(styles.combinedFilterPill, { [styles.readOnlyCombinedFilter]: readOnly })}\n onClick={handleChangeViewMode}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleChangeViewMode();\n }\n }}\n role=\"button\"\n aria-label={`Edit filter with key ${keyLabel}`}\n tabIndex={0}\n ref={pillWrapperRef}\n >\n <span>\n {keyLabel} {filter.operator} {valueLabel}\n </span>\n {!readOnly ? (\n <IconButton\n onClick={(e) => {\n e.stopPropagation();\n model._removeFilter(filter);\n }}\n onKeyDownCapture={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n model._removeFilter(filter);\n }\n }}\n name=\"times\"\n size=\"md\"\n className={styles.removeButton}\n tooltip={`Remove filter with key ${keyLabel}`}\n />\n ) : null}\n </div>\n );\n }\n\n return <AdHocCombobox filter={filter} model={model} handleChangeViewMode={handleChangeViewMode} />;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n combinedFilterPill: css({\n display: 'flex',\n alignItems: 'center',\n background: theme.colors.action.selected,\n borderRadius: theme.shape.radius.default,\n border: `1px solid ${theme.colors.border.weak}`,\n padding: theme.spacing(0.125, 0, 0.125, 1),\n color: theme.colors.text.primary,\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n minHeight: theme.spacing(2.75),\n ...theme.typography.bodySmall,\n fontWeight: theme.typography.fontWeightBold,\n cursor: 'pointer',\n\n '&:hover': {\n background: theme.colors.action.hover,\n },\n }),\n readOnlyCombinedFilter: css({\n paddingRight: theme.spacing(1),\n cursor: 'text',\n '&:hover': {\n background: theme.colors.action.selected,\n },\n }),\n removeButton: css({\n marginInline: theme.spacing(0.5),\n cursor: 'pointer',\n '&:hover': {\n color: theme.colors.text.primary,\n },\n }),\n});\n"],"names":["_a"],"mappings":"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"}

package/dist/esm/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersCombobox.js CHANGED Viewed

@@ -1,11 +1,10 @@
-import React, { forwardRef, useState, useMemo, useId, useRef, useCallback, useImperativeHandle, useEffect, useLayoutEffect } from 'react';
+import React, { forwardRef, useState, useId, useRef, useMemo, useCallback, useImperativeHandle, useEffect, useLayoutEffect } from 'react';
 import { FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
-import { useStyles2, Spinner, Text, Button, Icon } from '@grafana/ui';
+import { useStyles2, Spinner, Text } from '@grafana/ui';
 import { cx, css } from '@emotion/css';
-import { OPERATORS } from '../AdHocFiltersVariable.js';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { LoadingOptionsPlaceholder, OptionsErrorPlaceholder, NoOptionsPlaceholder, DropdownItem, MultiValueApplyButton } from './DropdownItem.js';
-import { fuzzySearchOptions, flattenOptionGroups, setupDropdownAccessibility, VIRTUAL_LIST_ITEM_HEIGHT_WITH_DESCRIPTION, VIRTUAL_LIST_ITEM_HEIGHT, VIRTUAL_LIST_OVERSCAN, generateFilterUpdatePayload, switchToNextInputType, switchInputType, ERROR_STATE_DROPDOWN_WIDTH } from './utils.js';
+import { LoadingOptionsPlaceholder, OptionsErrorPlaceholder, NoOptionsPlaceholder, DropdownItem } from './DropdownItem.js';
+import { fuzzySearchOptions, flattenOptionGroups, setupDropdownAccessibility, VIRTUAL_LIST_ITEM_HEIGHT, VIRTUAL_LIST_OVERSCAN, generateFilterUpdatePayload, switchToNextInputType, switchInputType, ERROR_STATE_DROPDOWN_WIDTH } from './utils.js';
 import { handleOptionGroups } from '../../utils.js';
 import { useFloatingInteractions } from './useFloatingInteractions.js';
@@ -38,14 +37,6 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
   const [activeIndex, setActiveIndex] = useState(null);
   const [filterInputType, setInputType] = useState(!isAlwaysWip ? "value" : "key");
   const styles = useStyles2(getStyles);
-  const [filterMultiValues, setFilterMultiValues] = useState([]);
-  const [_, setForceRefresh] = useState({});
-  const multiValueOperators = 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 = useId();
   const listRef = useRef([]);
   const disabledIndicesRef = useRef([]);
@@ -57,70 +48,22 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
       setInputValue("");
     }
   }, [model, isAlwaysWip]);
-  const handleMultiValueFilterCommit = 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 = 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 = useCallback(
-    (item) => setFilterMultiValues((selected) => selected.filter((option) => option.value !== item.value)),
-    []
-  );
   const onOpenChange = 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 = 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
   });
@@ -171,89 +114,43 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
   const rowVirtualizer = 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 = 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 = 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 = 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 = useCallback((event) => {
+    if (event.key === "Tab" && !event.shiftKey) {
+      handleChangeViewMode == null ? void 0 : handleChangeViewMode();
+      handleResetWip();
+    }
+  }, []);
+  const handleShiftTabInput = useCallback((event) => {
+    if (event.key === "Tab" && event.shiftKey) {
+      handleChangeViewMode == null ? void 0 : handleChangeViewMode();
+      handleResetWip();
+    }
+  }, []);
   const handleEnterInput = 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]
   );
   useEffect(() => {
     if (open) {
@@ -261,34 +158,13 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
     }
   }, [open, filterInputType]);
   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();
     }
   }, []);
-  useEffect(() => {
-    if (isMultiValueEdit && filterMultiValues) {
-      setTimeout(() => setForceRefresh({}));
-    }
-  }, [filterMultiValues, isMultiValueEdit]);
   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))) {
@@ -314,17 +190,14 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
       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.createElement(MultiValuePill, {
-    key: `${item.value}-${i}`,
-    item,
-    index: i,
-    handleRemoveMultiValue
-  })) : null) : null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, 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.createElement("div", {
+    className: cx(styles.basePill, styles.valuePill)
+  }, valueLabel) : null) : null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, getReferenceProps({
     ref: refs.setReference,
     onChange,
     value: inputValue,
@@ -338,9 +211,9 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
       if (filterInputType === "operator") {
         handleShiftTabInput(event);
       }
-      handleBackspaceInput(event, isMultiValueEdit);
-      handleTabInput(event, isMultiValueEdit);
-      handleEnterInput(event, isMultiValueEdit);
+      handleBackspaceInput(event);
+      handleTabInput(event);
+      handleEnterInput(event);
     }
   })), {
     className: cx(styles.inputStyle, { [styles.loadingInputPadding]: !optionsLoading }),
@@ -360,7 +233,7 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
     initialFocus: -1,
     visuallyHiddenDismiss: true,
     modal: false
-  }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("div", {
     style: __spreadProps(__spreadValues({}, floatingStyles), {
       width: `${optionsError ? ERROR_STATE_DROPDOWN_WIDTH : maxOptionWidth}px`
     }),
@@ -401,24 +274,17 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
         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,
@@ -428,56 +294,19 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
         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.createElement("span", null, item.isCustom ? "Use custom value: " : "", " ", (_a2 = item.label) != null ? _a2 : item.value), item.description ? /* @__PURE__ */ React.createElement("div", {
-      className: styles.descriptionText
-    }, item.description) : null);
-  }))), isMultiValueEdit && !optionsLoading && !optionsError && filteredDropDownItems.length ? /* @__PURE__ */ React.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 = useStyles2(getStyles);
-  return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles.basePill, styles.valuePill)
-  }, /* @__PURE__ */ React.createElement("span", null, " ", (_a = item.label) != null ? _a : item.value), /* @__PURE__ */ React.createElement(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.createElement(Icon, {
-    name: "times",
-    size: "md",
-    id: `${item.value}-${index}`
-  })));
-};
 const getStyles = (theme) => ({
   comboboxWrapper: css({
     display: "flex",
-    flexWrap: "wrap"
+    flexWrap: "nowrap"
   }),
   pillWrapper: css({
     display: "flex",
     alignItems: "center",
-    flexWrap: "wrap"
+    whiteSpace: "nowrap"
   }),
   basePill: css(__spreadProps(__spreadValues({
     display: "flex",
@@ -502,8 +331,7 @@ const getStyles = (theme) => ({
     }
   }),
   valuePill: css({
-    background: theme.colors.action.selected,
-    padding: theme.spacing(0.125, 0, 0.125, 1)
+    background: theme.colors.action.selected
   }),
   dropdownWrapper: css({
     backgroundColor: theme.colors.background.primary,
@@ -536,25 +364,6 @@ const getStyles = (theme) => ({
     "&:not(:first-child)": {
       borderTop: `1px solid ${theme.colors.border.weak}`
     }
-  }),
-  removeButton: css({
-    marginInline: theme.spacing(0.5),
-    height: "100%",
-    padding: 0,
-    cursor: "pointer",
-    "&:hover": {
-      color: theme.colors.text.primary
-    }
-  }),
-  descriptionText: css(__spreadProps(__spreadValues({}, theme.typography.bodySmall), {
-    color: theme.colors.text.secondary,
-    paddingTop: theme.spacing(0.5)
-  })),
-  multiValueApply: css({
-    position: "absolute",
-    top: 0,
-    left: 0,
-    display: "flex"
   })
 });