@grafana/scenes 5.5.1 → 5.5.2--canary.830.10005065313.0

package/dist/esm/variables/adhoc/AdHocFilterRenderer.js

@@ -25,10 +25,7 @@ function AdHocFilterRenderer({ filter, model }) {
   const [valueHasCustomValue, setValueHasCustomValue] = useState(false);
   const keyValue = keyLabelToOption(filter.key, filter.keyLabel);
   const valueValue = keyLabelToOption(filter.value, filter.valueLabel);
-  const optionSearcher = useMemo(
-    () => getAdhocOptionSearcher(values),
-    [values]
-  );
+  const optionSearcher = useMemo(() => getAdhocOptionSearcher(values), [values]);
   const onValueInputChange = (value, { action }) => {
     if (action === "input-change") {
       setValueInputValue(value);

package/dist/esm/variables/adhoc/AdHocFilterRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdHocFilterRenderer.js","sources":["../../../../src/variables/adhoc/AdHocFilterRenderer.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\n\nimport { AdHocFiltersVariable, AdHocFilterWithLabels } from './AdHocFiltersVariable';\nimport { GrafanaTheme2, SelectableValue } from '@grafana/data';\nimport { Button, Field, InputActionMeta, Select, useStyles2 } from '@grafana/ui';\nimport { css, cx } from '@emotion/css';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\nimport { getAdhocOptionSearcher } from './getAdhocOptionSearcher';\nimport { handleOptionGroups } from '../utils';\n\ninterface Props {\n  filter: AdHocFilterWithLabels;\n  model: AdHocFiltersVariable;\n}\n\nfunction keyLabelToOption(key: string, label?: string): SelectableValue | null {\n  return key !== ''\n    ? {\n        value: key,\n        label: label || key,\n      }\n    : null;\n}\n\nconst filterNoOp = () => true;\n\nexport function AdHocFilterRenderer({ filter, model }: Props) {\n  const styles = useStyles2(getStyles);\n\n  const [keys, setKeys] = useState<SelectableValue[]>([]);\n  const [values, setValues] = useState<SelectableValue[]>([]);\n  const [isKeysLoading, setIsKeysLoading] = useState(false);\n  const [isValuesLoading, setIsValuesLoading] = useState(false);\n  const [isKeysOpen, setIsKeysOpen] = useState(false);\n  const [isValuesOpen, setIsValuesOpen] = useState(false);\n  const [valueInputValue, setValueInputValue] = useState('');\n  const [valueHasCustomValue, setValueHasCustomValue] = useState(false);\n\n  const keyValue = keyLabelToOption(filter.key, filter.keyLabel);\n  const valueValue = keyLabelToOption(filter.value, filter.valueLabel);\n\n  const optionSearcher = useMemo(\n    () => getAdhocOptionSearcher(values),\n    [values]\n  );\n\n  const onValueInputChange = (value: string, { action }: InputActionMeta) => {\n    if (action === 'input-change') {\n      setValueInputValue(value);\n    }\n    return value;\n  };\n\n  const filteredValueOptions = useMemo(\n    () => handleOptionGroups(optionSearcher(valueInputValue)),\n    [optionSearcher, valueInputValue]\n  );\n\n  const valueSelect = (\n    <Select\n      virtualized\n      allowCustomValue\n      isValidNewOption={(inputValue) => inputValue.trim().length > 0}\n      allowCreateWhileLoading\n      formatCreateLabel={(inputValue) => `Use custom value: ${inputValue}`}\n      disabled={model.state.readOnly}\n      className={cx(styles.value, isKeysOpen ? styles.widthWhenOpen : undefined)}\n      width=\"auto\"\n      value={valueValue}\n      filterOption={filterNoOp}\n      placeholder={'Select value'}\n      options={filteredValueOptions}\n      inputValue={valueInputValue}\n      onInputChange={onValueInputChange}\n      onChange={(v) => {\n        model._updateFilter(filter, 'value', v);\n\n        if (valueHasCustomValue !== v.__isNew__) {\n          setValueHasCustomValue(v.__isNew__);\n        }\n      }}\n      // there's a bug in react-select where the menu doesn't recalculate its position when the options are loaded asynchronously\n      // see https://github.com/grafana/grafana/issues/63558\n      // instead, we explicitly control the menu visibility and prevent showing it until the options have fully loaded\n      isOpen={isValuesOpen && !isValuesLoading}\n      isLoading={isValuesLoading}\n      autoFocus={filter.key !== '' && filter.value === ''}\n      openMenuOnFocus={true}\n      onOpenMenu={async () => {\n        setIsValuesLoading(true);\n        setIsValuesOpen(true);\n        const values = await model._getValuesFor(filter);\n        setIsValuesLoading(false);\n        setValues(values);\n        if (valueHasCustomValue) {\n          setValueInputValue(valueValue?.label ?? '');\n        }\n      }}\n      onCloseMenu={() => {\n        setIsValuesOpen(false);\n        setValueInputValue('');\n      }}\n    />\n  );\n\n  const keySelect = (\n    <Select\n      // By changing the key, we reset the Select component,\n      // to ensure that the loaded values are shown after they are loaded\n      key={`${isValuesLoading ? 'loading' : 'loaded'}`}\n      disabled={model.state.readOnly}\n      className={cx(styles.key, isKeysOpen ? styles.widthWhenOpen : undefined)}\n      width=\"auto\"\n      value={keyValue}\n      placeholder={'Select label'}\n      options={handleOptionGroups(keys)}\n      onChange={(v) => model._updateFilter(filter, 'key', v)}\n      autoFocus={filter.key === ''}\n      // there's a bug in react-select where the menu doesn't recalculate its position when the options are loaded asynchronously\n      // see https://github.com/grafana/grafana/issues/63558\n      // instead, we explicitly control the menu visibility and prevent showing it until the options have fully loaded\n      isOpen={isKeysOpen && !isKeysLoading}\n      isLoading={isKeysLoading}\n      onOpenMenu={async () => {\n        setIsKeysOpen(true);\n        setIsKeysLoading(true);\n        const keys = await model._getKeys(filter.key);\n        setIsKeysLoading(false);\n        setKeys(keys);\n      }}\n      onCloseMenu={() => {\n        setIsKeysOpen(false);\n      }}\n      onBlur={() => {\n        if (filter.key === '') {\n          model._removeFilter(filter);\n        }\n      }}\n      openMenuOnFocus={true}\n    />\n  );\n\n  if (model.state.layout === 'vertical') {\n    if (filter.key) {\n      const label = (\n        <ControlsLabel layout=\"vertical\" label={filter.key ?? ''} onRemove={() => model._removeFilter(filter)} />\n      );\n\n      return (\n        <Field label={label} data-testid={`AdHocFilter-${filter.key}`} className={styles.field}>\n          <div className={styles.wrapper}>\n            <Select\n              className={styles.operator}\n              value={filter.operator}\n              disabled={model.state.readOnly}\n              options={model._getOperators()}\n              width=\"auto\"\n              onChange={(v) => model._updateFilter(filter, 'operator', v)}\n            />\n            {valueSelect}\n          </div>\n        </Field>\n      );\n    } else {\n      return (\n        <Field label={'Select label'} data-testid={`AdHocFilter-${filter.key}`} className={styles.field}>\n          {keySelect}\n        </Field>\n      );\n    }\n  }\n\n  return (\n    <div className={styles.wrapper} data-testid={`AdHocFilter-${filter.key}`}>\n      {keySelect}\n      <Select\n        className={styles.operator}\n        value={filter.operator}\n        disabled={model.state.readOnly}\n        options={model._getOperators()}\n        width=\"auto\"\n        onChange={(v) => model._updateFilter(filter, 'operator', v)}\n      />\n      {valueSelect}\n      <Button\n        variant=\"secondary\"\n        aria-label=\"Remove filter\"\n        title=\"Remove filter\"\n        className={styles.removeButton}\n        icon=\"times\"\n        data-testid={`AdHocFilter-remove-${filter.key ?? ''}`}\n        onClick={() => model._removeFilter(filter)}\n      />\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  field: css({\n    marginBottom: 0,\n  }),\n  wrapper: css({\n    display: 'flex',\n    '> *': {\n      '&:not(:first-child)': {\n        // Negative margin hides the double-border on adjacent selects\n        marginLeft: -1,\n      },\n\n      '&:first-child': {\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0,\n      },\n\n      '&:last-child': {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n      },\n\n      '&:not(:first-child):not(:last-child)': {\n        borderRadius: 0,\n      },\n\n      // Fix focus state zIndex issues\n      position: 'relative',\n      zIndex: 0,\n\n      // Adjacent borders are overlapping, so raise children up when hovering etc\n      // so all that child's borders are visible.\n      '&:hover': {\n        zIndex: 1,\n      },\n\n      '&:focus-within': {\n        zIndex: 2,\n      },\n    },\n  }),\n  widthWhenOpen: css({\n    minWidth: theme.spacing(16),\n  }),\n  value: css({\n    flexShrink: 1,\n  }),\n  key: css({\n    minWidth: '90px',\n    flexShrink: 1,\n  }),\n  operator: css({\n    flexShrink: 0,\n  }),\n  removeButton: css({\n    paddingLeft: theme.spacing(3 / 2),\n    paddingRight: theme.spacing(3 / 2),\n    borderLeft: 'none',\n    width: theme.spacing(3),\n    marginRight: theme.spacing(1),\n    boxSizing: 'border-box',\n    // To not have button background and last select border intersect\n    position: 'relative',\n    left: '1px',\n  }),\n});\n"],"names":["_a","values","keys"],"mappings":"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"}
+{"version":3,"file":"AdHocFilterRenderer.js","sources":["../../../../src/variables/adhoc/AdHocFilterRenderer.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\n\nimport { AdHocFiltersVariable, AdHocFilterWithLabels } from './AdHocFiltersVariable';\nimport { GrafanaTheme2, SelectableValue } from '@grafana/data';\nimport { Button, Field, InputActionMeta, Select, useStyles2 } from '@grafana/ui';\nimport { css, cx } from '@emotion/css';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\nimport { getAdhocOptionSearcher } from './getAdhocOptionSearcher';\nimport { handleOptionGroups } from '../utils';\n\ninterface Props {\n  filter: AdHocFilterWithLabels;\n  model: AdHocFiltersVariable;\n}\n\nfunction keyLabelToOption(key: string, label?: string): SelectableValue | null {\n  return key !== ''\n    ? {\n        value: key,\n        label: label || key,\n      }\n    : null;\n}\n\nconst filterNoOp = () => true;\n\nexport function AdHocFilterRenderer({ filter, model }: Props) {\n  const styles = useStyles2(getStyles);\n\n  const [keys, setKeys] = useState<SelectableValue[]>([]);\n  const [values, setValues] = useState<SelectableValue[]>([]);\n  const [isKeysLoading, setIsKeysLoading] = useState(false);\n  const [isValuesLoading, setIsValuesLoading] = useState(false);\n  const [isKeysOpen, setIsKeysOpen] = useState(false);\n  const [isValuesOpen, setIsValuesOpen] = useState(false);\n  const [valueInputValue, setValueInputValue] = useState('');\n  const [valueHasCustomValue, setValueHasCustomValue] = useState(false);\n\n  const keyValue = keyLabelToOption(filter.key, filter.keyLabel);\n  const valueValue = keyLabelToOption(filter.value, filter.valueLabel);\n\n  const optionSearcher = useMemo(() => getAdhocOptionSearcher(values), [values]);\n\n  const onValueInputChange = (value: string, { action }: InputActionMeta) => {\n    if (action === 'input-change') {\n      setValueInputValue(value);\n    }\n    return value;\n  };\n\n  const filteredValueOptions = useMemo(\n    () => handleOptionGroups(optionSearcher(valueInputValue)),\n    [optionSearcher, valueInputValue]\n  );\n\n  const valueSelect = (\n    <Select\n      virtualized\n      allowCustomValue\n      isValidNewOption={(inputValue) => inputValue.trim().length > 0}\n      allowCreateWhileLoading\n      formatCreateLabel={(inputValue) => `Use custom value: ${inputValue}`}\n      disabled={model.state.readOnly}\n      className={cx(styles.value, isKeysOpen ? styles.widthWhenOpen : undefined)}\n      width=\"auto\"\n      value={valueValue}\n      filterOption={filterNoOp}\n      placeholder={'Select value'}\n      options={filteredValueOptions}\n      inputValue={valueInputValue}\n      onInputChange={onValueInputChange}\n      onChange={(v) => {\n        model._updateFilter(filter, 'value', v);\n\n        if (valueHasCustomValue !== v.__isNew__) {\n          setValueHasCustomValue(v.__isNew__);\n        }\n      }}\n      // there's a bug in react-select where the menu doesn't recalculate its position when the options are loaded asynchronously\n      // see https://github.com/grafana/grafana/issues/63558\n      // instead, we explicitly control the menu visibility and prevent showing it until the options have fully loaded\n      isOpen={isValuesOpen && !isValuesLoading}\n      isLoading={isValuesLoading}\n      autoFocus={filter.key !== '' && filter.value === ''}\n      openMenuOnFocus={true}\n      onOpenMenu={async () => {\n        setIsValuesLoading(true);\n        setIsValuesOpen(true);\n        const values = await model._getValuesFor(filter);\n        setIsValuesLoading(false);\n        setValues(values);\n        if (valueHasCustomValue) {\n          setValueInputValue(valueValue?.label ?? '');\n        }\n      }}\n      onCloseMenu={() => {\n        setIsValuesOpen(false);\n        setValueInputValue('');\n      }}\n    />\n  );\n\n  const keySelect = (\n    <Select\n      // By changing the key, we reset the Select component,\n      // to ensure that the loaded values are shown after they are loaded\n      key={`${isValuesLoading ? 'loading' : 'loaded'}`}\n      disabled={model.state.readOnly}\n      className={cx(styles.key, isKeysOpen ? styles.widthWhenOpen : undefined)}\n      width=\"auto\"\n      value={keyValue}\n      placeholder={'Select label'}\n      options={handleOptionGroups(keys)}\n      onChange={(v) => model._updateFilter(filter, 'key', v)}\n      autoFocus={filter.key === ''}\n      // there's a bug in react-select where the menu doesn't recalculate its position when the options are loaded asynchronously\n      // see https://github.com/grafana/grafana/issues/63558\n      // instead, we explicitly control the menu visibility and prevent showing it until the options have fully loaded\n      isOpen={isKeysOpen && !isKeysLoading}\n      isLoading={isKeysLoading}\n      onOpenMenu={async () => {\n        setIsKeysOpen(true);\n        setIsKeysLoading(true);\n        const keys = await model._getKeys(filter.key);\n        setIsKeysLoading(false);\n        setKeys(keys);\n      }}\n      onCloseMenu={() => {\n        setIsKeysOpen(false);\n      }}\n      onBlur={() => {\n        if (filter.key === '') {\n          model._removeFilter(filter);\n        }\n      }}\n      openMenuOnFocus={true}\n    />\n  );\n\n  if (model.state.layout === 'vertical') {\n    if (filter.key) {\n      const label = (\n        <ControlsLabel layout=\"vertical\" label={filter.key ?? ''} onRemove={() => model._removeFilter(filter)} />\n      );\n\n      return (\n        <Field label={label} data-testid={`AdHocFilter-${filter.key}`} className={styles.field}>\n          <div className={styles.wrapper}>\n            <Select\n              className={styles.operator}\n              value={filter.operator}\n              disabled={model.state.readOnly}\n              options={model._getOperators()}\n              width=\"auto\"\n              onChange={(v) => model._updateFilter(filter, 'operator', v)}\n            />\n            {valueSelect}\n          </div>\n        </Field>\n      );\n    } else {\n      return (\n        <Field label={'Select label'} data-testid={`AdHocFilter-${filter.key}`} className={styles.field}>\n          {keySelect}\n        </Field>\n      );\n    }\n  }\n\n  return (\n    <div className={styles.wrapper} data-testid={`AdHocFilter-${filter.key}`}>\n      {keySelect}\n      <Select\n        className={styles.operator}\n        value={filter.operator}\n        disabled={model.state.readOnly}\n        options={model._getOperators()}\n        width=\"auto\"\n        onChange={(v) => model._updateFilter(filter, 'operator', v)}\n      />\n      {valueSelect}\n      <Button\n        variant=\"secondary\"\n        aria-label=\"Remove filter\"\n        title=\"Remove filter\"\n        className={styles.removeButton}\n        icon=\"times\"\n        data-testid={`AdHocFilter-remove-${filter.key ?? ''}`}\n        onClick={() => model._removeFilter(filter)}\n      />\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  field: css({\n    marginBottom: 0,\n  }),\n  wrapper: css({\n    display: 'flex',\n    '> *': {\n      '&:not(:first-child)': {\n        // Negative margin hides the double-border on adjacent selects\n        marginLeft: -1,\n      },\n\n      '&:first-child': {\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0,\n      },\n\n      '&:last-child': {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n      },\n\n      '&:not(:first-child):not(:last-child)': {\n        borderRadius: 0,\n      },\n\n      // Fix focus state zIndex issues\n      position: 'relative',\n      zIndex: 0,\n\n      // Adjacent borders are overlapping, so raise children up when hovering etc\n      // so all that child's borders are visible.\n      '&:hover': {\n        zIndex: 1,\n      },\n\n      '&:focus-within': {\n        zIndex: 2,\n      },\n    },\n  }),\n  widthWhenOpen: css({\n    minWidth: theme.spacing(16),\n  }),\n  value: css({\n    flexShrink: 1,\n  }),\n  key: css({\n    minWidth: '90px',\n    flexShrink: 1,\n  }),\n  operator: css({\n    flexShrink: 0,\n  }),\n  removeButton: css({\n    paddingLeft: theme.spacing(3 / 2),\n    paddingRight: theme.spacing(3 / 2),\n    borderLeft: 'none',\n    width: theme.spacing(3),\n    marginRight: theme.spacing(1),\n    boxSizing: 'border-box',\n    // To not have button background and last select border intersect\n    position: 'relative',\n    left: '1px',\n  }),\n});\n"],"names":["_a","values","keys"],"mappings":"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"}

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

@@ -0,0 +1,406 @@
+import React, { forwardRef, useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react';
+import { useId, useFloating, autoUpdate, flip, size, useRole, useDismiss, useListNavigation, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { useTheme2, getSelectStyles, useStyles2 } from '@grafana/ui';
+import { cx, css } from '@emotion/css';
+import { flushSync } from 'react-dom';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const Item = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, active } = _b, rest = __objRest(_b, ["children", "active"]);
+    const theme = useTheme2();
+    const selectStyles = getSelectStyles(theme);
+    const id = useId();
+    return /* @__PURE__ */ React.createElement("div", __spreadValues({
+      ref,
+      role: "option",
+      id,
+      "aria-selected": active,
+      className: cx(selectStyles.option, active && selectStyles.optionFocused)
+    }, rest), /* @__PURE__ */ React.createElement("div", {
+      className: selectStyles.optionBody,
+      "data-testid": `data-testid ad hoc filter option value ${children}`
+    }, /* @__PURE__ */ React.createElement("span", null, children)));
+  }
+);
+const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, wip, handleChangeViewMode }, parentRef) {
+  var _a;
+  const [open, setOpen] = useState(false);
+  const [options, setOptions] = useState([]);
+  const [optionsLoading, setOptionsLoading] = useState(false);
+  const [optionsError, setOptionsError] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [inputType, setInputType] = useState(!wip ? "value" : "key");
+  const styles = useStyles2(getStyles2);
+  const listRef = useRef([]);
+  const { _wip } = model.useState();
+  const handleResetWip = useCallback(() => {
+    if (wip) {
+      model._addWip();
+      setInputType("key");
+      setInputValue("");
+    }
+  }, [model, wip]);
+  const filterToUse = filter || _wip;
+  const operatorIdentifier = `${(_a = filterToUse == null ? void 0 : filterToUse.key) != null ? _a : ""}-operator`;
+  const { refs, floatingStyles, context } = useFloating({
+    whileElementsMounted: autoUpdate,
+    open,
+    onOpenChange: (nextOpen, _, reason) => {
+      setOpen(nextOpen);
+      if (["outside-press", "escape-key"].includes(reason || "")) {
+        handleResetWip();
+        handleChangeViewMode == null ? void 0 : handleChangeViewMode();
+      }
+    },
+    middleware: [
+      flip({ padding: 10 }),
+      size({
+        apply({ rects, availableHeight, elements }) {
+          Object.assign(elements.floating.style, {
+            width: `${rects.reference.width}px`,
+            maxHeight: `${availableHeight > 256 ? 256 : availableHeight}px`
+          });
+        },
+        padding: 10
+      })
+    ]
+  });
+  const role = useRole(context, { role: "listbox" });
+  const dismiss = useDismiss(context, {
+    outsidePress: (event) => {
+      return !event.currentTarget.classList.contains(
+        operatorIdentifier
+      );
+    }
+  });
+  const listNav = useListNavigation(context, {
+    listRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    virtual: true,
+    loop: true
+  });
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([role, dismiss, listNav]);
+  useImperativeHandle(parentRef, () => () => {
+    var _a2;
+    return (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
+  }, [refs.domReference]);
+  function onChange(event) {
+    var _a2, _b;
+    if (inputType === "key") {
+      const lastChar = event.target.value.slice(-1);
+      if (["=", "!", "<", ">"].includes(lastChar)) {
+        const key = event.target.value.slice(0, -1);
+        const optionIndex = options.findIndex((option) => option.value === key);
+        if (optionIndex >= 0) {
+          model._updateFilter(filterToUse, inputType, options[optionIndex]);
+          setInputValue(lastChar);
+        }
+        flushSync(() => {
+          setInputType("operator");
+        });
+        (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
+        return;
+      }
+    }
+    if (inputType === "operator") {
+      const lastChar = event.target.value.slice(-1);
+      if (/\w/.test(lastChar)) {
+        const operator = event.target.value.slice(0, -1);
+        if (!/\w/.test(operator)) {
+          const optionIndex = options.findIndex((option) => option.value === operator);
+          if (optionIndex >= 0) {
+            model._updateFilter(filterToUse, inputType, options[optionIndex]);
+            setInputValue(lastChar);
+          }
+          flushSync(() => {
+            setInputType("value");
+          });
+          (_b = refs.domReference.current) == null ? void 0 : _b.focus();
+          return;
+        }
+      }
+    }
+    const value = event.target.value;
+    setInputValue(value);
+    setActiveIndex(0);
+  }
+  const items = options.filter(
+    (item) => {
+      var _a2, _b;
+      return (_b = (_a2 = item.label) != null ? _a2 : item.value) == null ? void 0 : _b.toLocaleLowerCase().startsWith(inputValue.toLowerCase());
+    }
+  );
+  const flushInputType = useCallback((inputType2) => {
+    flushSync(() => {
+      setInputType(inputType2);
+    });
+  }, []);
+  useEffect(() => {
+    if (wip && !_wip) {
+      model._addWip();
+    }
+  }, [_wip]);
+  useEffect(() => {
+    if (!wip && refs.domReference.current) {
+      setInputType("value");
+      setInputValue("");
+      refs.domReference.current.focus();
+    }
+  }, []);
+  const handleFetchOptions = useCallback(
+    async (inputType2) => {
+      setOptionsError(false);
+      setOptionsLoading(true);
+      setOptions([]);
+      let options2 = [];
+      try {
+        if (inputType2 === "key") {
+          options2 = await model._getKeys(null);
+        } else if (inputType2 === "operator") {
+          options2 = model._getOperators();
+        } else if (inputType2 === "value") {
+          options2 = await model._getValuesFor(filterToUse);
+        }
+        setOptions(options2);
+      } catch (e) {
+        setOptionsError(true);
+      }
+      setOptionsLoading(false);
+    },
+    [filterToUse, model]
+  );
+  const handleBackspaceInput = useCallback(
+    (event) => {
+      if (event.key === "Backspace" && !inputValue && inputType === "key") {
+        model._removeLastFilter();
+        handleFetchOptions(inputType);
+      }
+    },
+    [inputValue, inputType]
+  );
+  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) => {
+      var _a2;
+      if (event.key === "Enter" && activeIndex != null && items[activeIndex]) {
+        model._updateFilter(filterToUse, inputType, items[activeIndex]);
+        setInputValue("");
+        setActiveIndex(0);
+        if (inputType === "key") {
+          flushInputType("operator");
+        } else if (inputType === "operator") {
+          flushInputType("value");
+        } else if (inputType === "value") {
+          flushInputType("key");
+          handleChangeViewMode == null ? void 0 : handleChangeViewMode();
+        }
+        (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
+      }
+    },
+    [activeIndex, filterToUse, inputType, items, model]
+  );
+  useEffect(() => {
+    if (open) {
+      handleFetchOptions(inputType);
+    }
+  }, [open, inputType]);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: styles.comboboxWrapper
+  }, filterToUse ? /* @__PURE__ */ React.createElement("div", {
+    className: styles.pillWrapper
+  }, (filterToUse == null ? void 0 : filterToUse.key) ? /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles.basePill, styles.keyPill)
+  }, filterToUse.key) : null, (filterToUse == null ? void 0 : filterToUse.key) && (filterToUse == null ? void 0 : filterToUse.operator) && inputType !== "operator" ? /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles.basePill, styles.operatorPill, operatorIdentifier),
+    role: "button",
+    "aria-label": "Edit filter operator",
+    tabIndex: 0,
+    onClick: (event) => {
+      var _a2;
+      event.stopPropagation();
+      flushInputType("operator");
+      (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
+    },
+    onKeyDown: (event) => {
+      var _a2;
+      handleShiftTabInput(event);
+      if (event.key === "Enter") {
+        flushInputType("operator");
+        (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
+      }
+    }
+  }, filterToUse.operator) : null, (filterToUse == null ? void 0 : filterToUse.key) && (filterToUse == null ? void 0 : filterToUse.operator) && (filterToUse == null ? void 0 : filterToUse.value) && !["operator", "value"].includes(inputType) ? /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles.basePill, styles.valuePill)
+  }, filterToUse.value) : null) : null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, getReferenceProps({
+    ref: refs.setReference,
+    onChange,
+    value: inputValue,
+    placeholder: !wip ? inputType === "operator" ? `${filterToUse[inputType]} ${filterToUse.value || ""}` : filterToUse[inputType] : "Filter by label values",
+    "aria-autocomplete": "list",
+    onKeyDown(event) {
+      if (inputType === "operator") {
+        handleShiftTabInput(event);
+      }
+      handleBackspaceInput(event);
+      handleTabInput(event);
+      handleEnterInput(event);
+    }
+  })), {
+    className: styles.inputStyle,
+    onClick: (event) => {
+      event.stopPropagation();
+      setOpen(true);
+    },
+    onFocus: () => {
+      setActiveIndex(0);
+      setOpen(true);
+    }
+  })), /* @__PURE__ */ React.createElement(FloatingPortal, null, open && /* @__PURE__ */ React.createElement(FloatingFocusManager, {
+    context,
+    initialFocus: -1,
+    visuallyHiddenDismiss: true
+  }, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, getFloatingProps({
+    ref: refs.setFloating,
+    style: __spreadProps(__spreadValues({}, floatingStyles), {
+      overflowY: "auto"
+    })
+  })), {
+    className: styles.dropdownWrapper
+  }), optionsLoading ? /* @__PURE__ */ React.createElement(LoadingOptionsPlaceholder, null) : optionsError ? /* @__PURE__ */ React.createElement(OptionsErrorPlaceholder, {
+    handleFetchOptions: () => handleFetchOptions(inputType)
+  }) : !items.length ? /* @__PURE__ */ React.createElement(NoOptionsPlaceholder, null) : items.map((item, index) => {
+    var _a2;
+    return /* @__PURE__ */ React.createElement(Item, __spreadProps(__spreadValues({}, getItemProps({
+      key: item.value,
+      ref(node) {
+        listRef.current[index] = node;
+      },
+      onClick() {
+        var _a3;
+        model._updateFilter(filterToUse, inputType, item);
+        setInputValue("");
+        if (inputType === "key") {
+          flushInputType("operator");
+        } else if (inputType === "operator") {
+          flushInputType("value");
+        } else if (inputType === "value") {
+          flushInputType("key");
+          handleChangeViewMode == null ? void 0 : handleChangeViewMode();
+        }
+        (_a3 = refs.domReference.current) == null ? void 0 : _a3.focus();
+      }
+    })), {
+      active: activeIndex === index
+    }), (_a2 = item.label) != null ? _a2 : item.value);
+  })))));
+});
+const LoadingOptionsPlaceholder = () => {
+  return /* @__PURE__ */ React.createElement(Item, {
+    active: false
+  }, "Loading options...");
+};
+const NoOptionsPlaceholder = () => {
+  return /* @__PURE__ */ React.createElement(Item, {
+    active: false
+  }, "No options found");
+};
+const OptionsErrorPlaceholder = ({ handleFetchOptions }) => {
+  return /* @__PURE__ */ React.createElement(Item, {
+    active: false,
+    onClick: handleFetchOptions
+  }, "Error. Click to try again!");
+};
+const getStyles2 = (theme) => ({
+  comboboxWrapper: css({
+    display: "flex",
+    flexWrap: "nowrap"
+  }),
+  pillWrapper: css({
+    display: "flex",
+    alignItems: "center",
+    whiteSpace: "nowrap"
+  }),
+  basePill: css(__spreadProps(__spreadValues({
+    display: "flex",
+    alignItems: "center",
+    background: theme.colors.action.disabledBackground,
+    border: `1px solid ${theme.colors.border.weak}`,
+    padding: theme.spacing(0.125, 1, 0.125, 1),
+    color: theme.colors.text.primary,
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    minHeight: "22px"
+  }, theme.typography.bodySmall), {
+    cursor: "pointer"
+  })),
+  keyPill: css({
+    fontWeight: theme.typography.fontWeightBold,
+    cursor: "default"
+  }),
+  operatorPill: css({
+    "&:hover": {
+      background: theme.colors.action.hover
+    }
+  }),
+  valuePill: css({
+    background: theme.colors.action.selected
+  }),
+  dropdownWrapper: css({
+    backgroundColor: theme.colors.background.primary,
+    color: theme.colors.text.primary,
+    boxShadow: theme.shadows.z2
+  }),
+  inputStyle: css({
+    paddingBlock: 0,
+    "&:focus": {
+      outline: "none"
+    }
+  })
+});
+
+export { AdHocCombobox };
+//# sourceMappingURL=AdHocFiltersCombobox.js.map

package/dist/esm/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersCombobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdHocFiltersCombobox.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersCombobox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport {\n  autoUpdate,\n  size,\n  flip,\n  useId,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n  FloatingFocusManager,\n  FloatingPortal,\n} from '@floating-ui/react';\nimport { getSelectStyles, useStyles2, useTheme2 } from '@grafana/ui';\nimport { GrafanaTheme2, SelectableValue } from '@grafana/data';\nimport { css, cx } from '@emotion/css';\nimport { AdHocFilterWithLabels, AdHocFiltersVariable } from '../AdHocFiltersVariable';\nimport { flushSync } from 'react-dom';\n\ninterface ItemProps {\n  children: React.ReactNode;\n  active: boolean;\n}\n\n// eslint-disable-next-line react/display-name\nconst Item = forwardRef<HTMLDivElement, ItemProps & React.HTMLProps<HTMLDivElement>>(\n  ({ children, active, ...rest }, ref) => {\n    const theme = useTheme2();\n    const selectStyles = getSelectStyles(theme);\n    const id = useId();\n    return (\n      <div\n        ref={ref}\n        role=\"option\"\n        id={id}\n        aria-selected={active}\n        className={cx(selectStyles.option, active && selectStyles.optionFocused)}\n        {...rest}\n      >\n        <div className={selectStyles.optionBody} data-testid={`data-testid ad hoc filter option value ${children}`}>\n          <span>{children}</span>\n        </div>\n      </div>\n    );\n  }\n);\n\ninterface AdHocComboboxProps {\n  filter?: AdHocFilterWithLabels;\n  wip?: boolean;\n  model: AdHocFiltersVariable;\n  handleChangeViewMode?: () => void;\n}\n\ntype AdHocInputType = 'key' | 'operator' | 'value';\n\nexport const AdHocCombobox = forwardRef(function AdHocCombobox(\n  { filter, model, wip, handleChangeViewMode }: AdHocComboboxProps,\n  parentRef\n) {\n  const [open, setOpen] = useState(false);\n\n  const [options, setOptions] = useState<Array<SelectableValue<string>>>([]);\n  const [optionsLoading, setOptionsLoading] = useState<boolean>(false);\n  const [optionsError, setOptionsError] = useState<boolean>(false);\n  const [inputValue, setInputValue] = useState('');\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const [inputType, setInputType] = useState<AdHocInputType>(!wip ? 'value' : 'key');\n  const styles = useStyles2(getStyles2);\n\n  const listRef = useRef<Array<HTMLElement | null>>([]);\n  const { _wip } = model.useState();\n\n  const handleResetWip = useCallback(() => {\n    if (wip) {\n      model._addWip();\n      setInputType('key');\n      setInputValue('');\n    }\n  }, [model, wip]);\n\n  const filterToUse = filter || _wip;\n\n  const operatorIdentifier = `${filterToUse?.key ?? ''}-operator`;\n\n  const { refs, floatingStyles, context } = useFloating<HTMLInputElement>({\n    whileElementsMounted: autoUpdate,\n    open,\n    onOpenChange: (nextOpen, _, reason) => {\n      setOpen(nextOpen);\n      // change from filter edit mode to filter view mode when clicked\n      //   outside input or dropdown\n      if (['outside-press', 'escape-key'].includes(reason || '')) {\n        handleResetWip();\n        handleChangeViewMode?.();\n      }\n    },\n    middleware: [\n      flip({ padding: 10 }),\n      size({\n        apply({ rects, availableHeight, elements }) {\n          Object.assign(elements.floating.style, {\n            width: `${rects.reference.width}px`,\n            // limit the maxHeight of dropdown\n            maxHeight: `${availableHeight > 256 ? 256 : availableHeight}px`,\n          });\n        },\n        padding: 10,\n      }),\n    ],\n  });\n\n  const role = useRole(context, { role: 'listbox' });\n  const dismiss = useDismiss(context, {\n    // if outside click lands on operator pill, then ignore outside click\n    outsidePress: (event) => {\n      return !(event as unknown as React.MouseEvent<HTMLElement, MouseEvent>).currentTarget.classList.contains(\n        operatorIdentifier\n      );\n    },\n  });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    virtual: true,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([role, dismiss, listNav]);\n\n  // pass ability to focus on input element back to parent\n  useImperativeHandle(parentRef, () => () => refs.domReference.current?.focus(), [refs.domReference]);\n\n  function onChange(event: React.ChangeEvent<HTMLInputElement>) {\n    // part of POC for seamless filter parser\n    if (inputType === 'key') {\n      const lastChar = event.target.value.slice(-1);\n      if (['=', '!', '<', '>'].includes(lastChar)) {\n        const key = event.target.value.slice(0, -1);\n        const optionIndex = options.findIndex((option) => option.value === key);\n        if (optionIndex >= 0) {\n          model._updateFilter(filterToUse!, inputType, options[optionIndex]);\n          setInputValue(lastChar);\n        }\n        flushSync(() => {\n          setInputType('operator');\n        });\n        refs.domReference.current?.focus();\n        return;\n      }\n    }\n    if (inputType === 'operator') {\n      const lastChar = event.target.value.slice(-1);\n      if (/\\w/.test(lastChar)) {\n        const operator = event.target.value.slice(0, -1);\n        if (!/\\w/.test(operator)) {\n          const optionIndex = options.findIndex((option) => option.value === operator);\n          if (optionIndex >= 0) {\n            model._updateFilter(filterToUse!, inputType, options[optionIndex]);\n            setInputValue(lastChar);\n          }\n          flushSync(() => {\n            setInputType('value');\n          });\n          refs.domReference.current?.focus();\n          return;\n        }\n      }\n    }\n\n    const value = event.target.value;\n    setInputValue(value);\n    setActiveIndex(0);\n  }\n\n  const items = options.filter((item) =>\n    (item.label ?? item.value)?.toLocaleLowerCase().startsWith(inputValue.toLowerCase())\n  );\n\n  const flushInputType = useCallback((inputType: AdHocInputType) => {\n    flushSync(() => {\n      setInputType(inputType);\n    });\n  }, []);\n\n  // when combobox is in wip mode then check and add _wip if its missing\n  //    needed on first render and when _wip is reset on filter value commit\n  useEffect(() => {\n    if (wip && !_wip) {\n      model._addWip();\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [_wip]);\n\n  // when not in wip mode this is the point of switching from view to edit mode\n  //    and in this case we default to 'value' input type and focus input\n  useEffect(() => {\n    if (!wip && refs.domReference.current) {\n      setInputType('value');\n      setInputValue('');\n\n      refs.domReference.current.focus();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleFetchOptions = useCallback(\n    async (inputType: AdHocInputType) => {\n      setOptionsError(false);\n      setOptionsLoading(true);\n      setOptions([]);\n      let options: Array<SelectableValue<string>> = [];\n      try {\n        if (inputType === 'key') {\n          options = await model._getKeys(null);\n        } else if (inputType === 'operator') {\n          options = model._getOperators();\n        } else if (inputType === 'value') {\n          options = await model._getValuesFor(filterToUse!);\n        }\n        setOptions(options);\n      } catch (e) {\n        setOptionsError(true);\n      }\n      setOptionsLoading(false);\n    },\n    [filterToUse, model]\n  );\n\n  const handleBackspaceInput = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === 'Backspace' && !inputValue && inputType === 'key') {\n        model._removeLastFilter();\n        handleFetchOptions(inputType);\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [inputValue, inputType]\n  );\n\n  const handleTabInput = useCallback((event: React.KeyboardEvent) => {\n    // change filter to view mode when navigating away with Tab key\n    //  this is needed because useDismiss only reacts to mousedown\n    if (event.key === 'Tab' && !event.shiftKey) {\n      handleChangeViewMode?.();\n      handleResetWip();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleShiftTabInput = useCallback((event: React.KeyboardEvent) => {\n    if (event.key === 'Tab' && event.shiftKey) {\n      handleChangeViewMode?.();\n      handleResetWip();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleEnterInput = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === 'Enter' && activeIndex != null && items[activeIndex]) {\n        model._updateFilter(filterToUse!, inputType, items[activeIndex]);\n        setInputValue('');\n        setActiveIndex(0);\n\n        if (inputType === 'key') {\n          flushInputType('operator');\n        } else if (inputType === 'operator') {\n          flushInputType('value');\n        } else if (inputType === 'value') {\n          flushInputType('key');\n\n          handleChangeViewMode?.();\n        }\n\n        refs.domReference.current?.focus();\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [activeIndex, filterToUse, inputType, items, model]\n  );\n\n  useEffect(() => {\n    if (open) {\n      handleFetchOptions(inputType);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, inputType]);\n\n  return (\n    <div className={styles.comboboxWrapper}>\n      {filterToUse ? (\n        <div className={styles.pillWrapper}>\n          {filterToUse?.key ? <div className={cx(styles.basePill, styles.keyPill)}>{filterToUse.key}</div> : null}\n          {filterToUse?.key && filterToUse?.operator && inputType !== 'operator' ? (\n            <div\n              className={cx(styles.basePill, styles.operatorPill, operatorIdentifier)}\n              role=\"button\"\n              aria-label=\"Edit filter operator\"\n              tabIndex={0}\n              onClick={(event) => {\n                event.stopPropagation();\n                flushInputType('operator');\n\n                refs.domReference.current?.focus();\n              }}\n              onKeyDown={(event) => {\n                handleShiftTabInput(event);\n                if (event.key === 'Enter') {\n                  flushInputType('operator');\n                  refs.domReference.current?.focus();\n                }\n              }}\n            >\n              {filterToUse.operator}\n            </div>\n          ) : null}\n          {filterToUse?.key &&\n          filterToUse?.operator &&\n          filterToUse?.value &&\n          !['operator', 'value'].includes(inputType) ? (\n            <div className={cx(styles.basePill, styles.valuePill)}>{filterToUse.value}</div>\n          ) : null}\n        </div>\n      ) : null}\n\n      <input\n        {...getReferenceProps({\n          ref: refs.setReference,\n          onChange,\n          value: inputValue,\n          // dynamic placeholder to display operator and/or value in filter edit mode\n          placeholder: !wip\n            ? inputType === 'operator'\n              ? `${filterToUse![inputType]} ${filterToUse!.value || ''}`\n              : filterToUse![inputType]\n            : 'Filter by label values',\n          'aria-autocomplete': 'list',\n          onKeyDown(event) {\n            if (inputType === 'operator') {\n              handleShiftTabInput(event);\n            }\n            handleBackspaceInput(event);\n            handleTabInput(event);\n            handleEnterInput(event);\n          },\n        })}\n        className={styles.inputStyle}\n        onClick={(event) => {\n          event.stopPropagation();\n          setOpen(true);\n        }}\n        onFocus={() => {\n          setActiveIndex(0);\n          setOpen(true);\n        }}\n      />\n      <FloatingPortal>\n        {open && (\n          <FloatingFocusManager context={context} initialFocus={-1} visuallyHiddenDismiss>\n            <div\n              {...getFloatingProps({\n                ref: refs.setFloating,\n                style: {\n                  ...floatingStyles,\n                  overflowY: 'auto',\n                },\n              })}\n              className={styles.dropdownWrapper}\n            >\n              {optionsLoading ? (\n                <LoadingOptionsPlaceholder />\n              ) : optionsError ? (\n                <OptionsErrorPlaceholder handleFetchOptions={() => handleFetchOptions(inputType)} />\n              ) : !items.length ? (\n                <NoOptionsPlaceholder />\n              ) : (\n                items.map((item, index) => (\n                  // eslint-disable-next-line react/jsx-key\n                  <Item\n                    {...getItemProps({\n                      key: item.value!,\n                      ref(node) {\n                        listRef.current[index] = node;\n                      },\n                      onClick() {\n                        model._updateFilter(filterToUse!, inputType, item);\n                        setInputValue('');\n\n                        if (inputType === 'key') {\n                          flushInputType('operator');\n                        } else if (inputType === 'operator') {\n                          flushInputType('value');\n                        } else if (inputType === 'value') {\n                          flushInputType('key');\n                          handleChangeViewMode?.();\n                        }\n\n                        refs.domReference.current?.focus();\n                      },\n                    })}\n                    active={activeIndex === index}\n                  >\n                    {item.label ?? item.value}\n                  </Item>\n                ))\n              )}\n            </div>\n          </FloatingFocusManager>\n        )}\n      </FloatingPortal>\n    </div>\n  );\n});\n\nconst LoadingOptionsPlaceholder = () => {\n  return <Item active={false}>Loading options...</Item>;\n};\n\nconst NoOptionsPlaceholder = () => {\n  return <Item active={false}>No options found</Item>;\n};\n\nconst OptionsErrorPlaceholder = ({ handleFetchOptions }: { handleFetchOptions: () => void }) => {\n  return (\n    <Item active={false} onClick={handleFetchOptions}>\n      Error. Click to try again!\n    </Item>\n  );\n};\n\nconst getStyles2 = (theme: GrafanaTheme2) => ({\n  comboboxWrapper: css({\n    display: 'flex',\n    flexWrap: 'nowrap',\n  }),\n  pillWrapper: css({\n    display: 'flex',\n    alignItems: 'center',\n    whiteSpace: 'nowrap',\n  }),\n  basePill: css({\n    display: 'flex',\n    alignItems: 'center',\n    background: theme.colors.action.disabledBackground,\n    border: `1px solid ${theme.colors.border.weak}`,\n    padding: theme.spacing(0.125, 1, 0.125, 1),\n    color: theme.colors.text.primary,\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n    minHeight: '22px',\n    ...theme.typography.bodySmall,\n    cursor: 'pointer',\n  }),\n  keyPill: css({\n    fontWeight: theme.typography.fontWeightBold,\n    cursor: 'default',\n  }),\n  operatorPill: css({\n    '&:hover': {\n      background: theme.colors.action.hover,\n    },\n  }),\n  valuePill: css({\n    background: theme.colors.action.selected,\n  }),\n  dropdownWrapper: css({\n    backgroundColor: theme.colors.background.primary,\n    color: theme.colors.text.primary,\n    boxShadow: theme.shadows.z2,\n  }),\n  inputStyle: css({\n    paddingBlock: 0,\n    '&:focus': {\n      outline: 'none',\n    },\n  }),\n});\n"],"names":["AdHocCombobox","_a","inputType","options"],"mappings":"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"}