npm - @grafana/scenes - Versions diffs - 5.23.1--canary.858.11699916776.0 → 5.23.1--canary.955.11702691002.0 - Mend

@grafana/scenes 5.23.1--canary.858.11699916776.0 → 5.23.1--canary.955.11702691002.0

Files changed (45) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AdHocFilterRenderer.js","sources":["../../../../src/variables/adhoc/AdHocFilterRenderer.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\n\nimport { AdHocFiltersVariable, AdHocFilterWithLabels, isMultiValueOperator } 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';\nimport { OptionWithCheckbox } from '../components/VariableValueSelect';\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 [isOperatorOpen, setIsOperatorOpen] = useState(false);\n const [valueInputValue, setValueInputValue] = useState('');\n const [valueHasCustomValue, setValueHasCustomValue] = useState(false);\n // To not trigger queries on every selection we store this state locally here and only update the variable onBlur\n // TODO remove expect-error when we're on the latest version of @grafana/data\n const [uncommittedValue, setUncommittedValue] = useState<SelectableValue>(\n // @ts-expect-error\n filter.values ? filter.values.map((value, index) => keyLabelToOption(value, filter.valueLabels?.[index])) : []\n );\n const isMultiValue = isMultiValueOperator(filter.operator);\n\n const keyValue = keyLabelToOption(filter.key, filter.keyLabel);\n const valueValue = keyLabelToOption(filter.value, filter.valueLabels?.[0]);\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 onOperatorChange = (v: SelectableValue) => {\n const existingOperator = filter.operator;\n const newOperator = v.value;\n\n const update: Partial<AdHocFilterWithLabels> = { operator: newOperator };\n // clear value if operator has changed from multi to single\n if (isMultiValueOperator(existingOperator) && !isMultiValueOperator(newOperator)) {\n update.value = '';\n update.valueLabels = [''];\n // TODO remove expect-error when we're on the latest version of @grafana/data\n // @ts-expect-error\n update.values = undefined;\n setUncommittedValue([]);\n // set values if operator has changed from single to multi\n } else if (!isMultiValueOperator(existingOperator) && isMultiValueOperator(newOperator) && filter.value) {\n // TODO remove expect-error when we're on the latest version of @grafana/data\n // @ts-expect-error\n update.values = [filter.value];\n setUncommittedValue([\n {\n value: filter.value,\n label: filter.valueLabels?.[0] ?? filter.value,\n },\n ]);\n }\n model._updateFilter(filter, update);\n };\n\n const filteredValueOptions = useMemo(\n () => handleOptionGroups(optionSearcher(valueInputValue)),\n [optionSearcher, valueInputValue]\n );\n\n const multiValueProps = {\n isMulti: true,\n value: uncommittedValue,\n components: {\n Option: OptionWithCheckbox,\n },\n hideSelectedOptions: false,\n closeMenuOnSelect: false,\n openMenuOnFocus: false,\n onChange: (v: SelectableValue) => {\n setUncommittedValue(v);\n // clear input value when creating a new custom multi value\n if (v.some((value: SelectableValue) => value.__isNew__)) {\n setValueInputValue('');\n }\n },\n onBlur: () => {\n model._updateFilter(filter, {\n value: uncommittedValue[0]?.value ?? '',\n // TODO remove expect-error when we're on the latest version of @grafana/data\n // @ts-expect-error\n values: uncommittedValue.map((option: SelectableValue<string>) => option.value),\n valueLabels: uncommittedValue.map((option: SelectableValue<string>) => option.label),\n });\n },\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, isValuesOpen ? 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, {\n value: v.value,\n valueLabels: v.label ? [v.label] : [v.value],\n });\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 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 {...(isMultiValue && multiValueProps)}\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 allowCustomValue={true}\n value={keyValue}\n placeholder={'Select label'}\n options={handleOptionGroups(keys)}\n onChange={(v) => {\n model._updateFilter(filter, {\n key: v.value,\n keyLabel: v.label,\n // clear value if key has changed\n value: '',\n valueLabels: [''],\n // TODO remove expect-error when we're on the latest version of @grafana/data\n // @ts-expect-error\n values: undefined,\n });\n setUncommittedValue([]);\n }}\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 const operatorSelect = (\n <Select\n className={cx(styles.operator, {\n [styles.widthWhenOpen]: isOperatorOpen,\n })}\n value={filter.operator}\n disabled={model.state.readOnly}\n options={model._getOperators()}\n onChange={onOperatorChange}\n onOpenMenu={() => {\n setIsOperatorOpen(true);\n }}\n onCloseMenu={() => {\n setIsOperatorOpen(false);\n }}\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 {operatorSelect}\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 {operatorSelect}\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 flexBasis: 'content',\n flexShrink: 1,\n minWidth: '90px',\n }),\n key: css({\n flexBasis: 'content',\n minWidth: '90px',\n flexShrink: 1,\n }),\n operator: css({\n flexShrink: 0,\n flexBasis: 'content',\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","_b","values","keys"],"mappings":"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"}
1	+ {"version":3,"file":"AdHocFilterRenderer.js","sources":["../../../../src/variables/adhoc/AdHocFilterRenderer.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\n\nimport { AdHocFiltersVariable, AdHocFilterWithLabels, isMultiValueOperator } 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';\nimport { OptionWithCheckbox } from '../components/VariableValueSelect';\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 [isOperatorOpen, setIsOperatorOpen] = useState(false);\n const [valueInputValue, setValueInputValue] = useState('');\n const [valueHasCustomValue, setValueHasCustomValue] = useState(false);\n // To not trigger queries on every selection we store this state locally here and only update the variable onBlur\n // TODO remove expect-error when we're on the latest version of @grafana/data\n // @ts-expect-error\n const [uncommittedValue, setUncommittedValue] = useState<SelectableValue>(filter.values ? filter.values.map((value, index) => keyLabelToOption(value, filter.valueLabels?.[index])) : []);\n const isMultiValue = isMultiValueOperator(filter.operator);\n\n const keyValue = keyLabelToOption(filter.key, filter.keyLabel);\n const valueValue = keyLabelToOption(filter.value, filter.valueLabels?.[0]);\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 onOperatorChange = (v: SelectableValue) => {\n const existingOperator = filter.operator;\n const newOperator = v.value;\n\n const update: Partial<AdHocFilterWithLabels> = { operator: newOperator };\n // clear value if operator has changed from multi to single\n if (isMultiValueOperator(existingOperator) && !isMultiValueOperator(newOperator)) {\n update.value = '';\n update.valueLabels = [''];\n // TODO remove expect-error when we're on the latest version of @grafana/data\n // @ts-expect-error\n update.values = undefined;\n setUncommittedValue([]);\n // set values if operator has changed from single to multi\n } else if (!isMultiValueOperator(existingOperator) && isMultiValueOperator(newOperator) && filter.value) {\n // TODO remove expect-error when we're on the latest version of @grafana/data\n // @ts-expect-error\n update.values = [filter.value];\n setUncommittedValue([{\n value: filter.value,\n label: filter.valueLabels?.[0] ?? filter.value,\n }]);\n }\n model._updateFilter(filter, update);\n }\n\n const filteredValueOptions = useMemo(\n () => handleOptionGroups(optionSearcher(valueInputValue)),\n [optionSearcher, valueInputValue]\n );\n\n const multiValueProps = {\n isMulti: true,\n value: uncommittedValue,\n components: {\n Option: OptionWithCheckbox,\n },\n hideSelectedOptions: false,\n closeMenuOnSelect: false,\n openMenuOnFocus: false,\n onChange: (v: SelectableValue) => {\n setUncommittedValue(v);\n // clear input value when creating a new custom multi value\n if (v.some((value: SelectableValue) => value.__isNew__)) {\n setValueInputValue('');\n }\n },\n onBlur: () => {\n model._updateFilter(filter, {\n value: uncommittedValue[0]?.value ?? '',\n // TODO remove expect-error when we're on the latest version of @grafana/data\n // @ts-expect-error\n values: uncommittedValue.map((option: SelectableValue<string>) => option.value),\n valueLabels: uncommittedValue.map((option: SelectableValue<string>) => option.label),\n });\n }\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, isValuesOpen ? 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, {\n value: v.value,\n valueLabels: v.label ? [v.label] : [v.value]\n });\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 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 {...(isMultiValue && multiValueProps)}\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 allowCustomValue={true}\n value={keyValue}\n placeholder={'Select label'}\n options={handleOptionGroups(keys)}\n onChange={(v) => {\n model._updateFilter(filter, {\n key: v.value,\n keyLabel: v.label,\n // clear value if key has changed\n value: '',\n valueLabels: [''],\n // TODO remove expect-error when we're on the latest version of @grafana/data\n // @ts-expect-error\n values: undefined\n })\n setUncommittedValue([]);\n }}\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 const operatorSelect = (\n <Select\n className={cx(styles.operator, {\n [styles.widthWhenOpen]: isOperatorOpen,\n })}\n value={filter.operator}\n disabled={model.state.readOnly}\n options={model._getOperators()}\n onChange={onOperatorChange}\n onOpenMenu={() => {\n setIsOperatorOpen(true)\n }}\n onCloseMenu={() => {\n setIsOperatorOpen(false)\n }}\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 {operatorSelect}\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 {operatorSelect}\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 flexBasis: 'content',\n flexShrink: 1,\n minWidth: '90px',\n }),\n key: css({\n flexBasis: 'content',\n minWidth: '90px',\n flexShrink: 1,\n }),\n operator: css({\n flexShrink: 0,\n flexBasis: 'content',\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","_b","values","keys"],"mappings":"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"}

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

@@ -28,6 +28,7 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
   const [viewMode, setViewMode] = useState(true);
   const [shouldFocusOnPillWrapper, setShouldFocusOnPillWrapper] = useState(false);
   const pillWrapperRef = useRef(null);
+  const [populateInputOnEdit, setPopulateInputOnEdit] = useState(false);
   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 handleChangeViewMode = useCallback(
@@ -54,15 +55,25 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
       model._updateFilter(filter, { forceEdit: void 0 });
     }
   }, [filter, model, viewMode]);
+  useEffect(() => {
+    if (viewMode) {
+      setPopulateInputOnEdit((prevValue) => prevValue ? false : prevValue);
+    }
+  }, [viewMode]);
   if (viewMode) {
     const pillText = /* @__PURE__ */ React.createElement("span", {
       className: styles.pillText
     }, keyLabel, " ", filter.operator, " ", valueLabel);
     return /* @__PURE__ */ React.createElement("div", {
       className: cx(styles.combinedFilterPill, { [styles.readOnlyCombinedFilter]: readOnly }),
-      onClick: handleChangeViewMode,
+      onClick: (e) => {
+        e.stopPropagation();
+        setPopulateInputOnEdit(true);
+        handleChangeViewMode();
+      },
       onKeyDown: (e) => {
         if (e.key === "Enter") {
+          setPopulateInputOnEdit(true);
           handleChangeViewMode();
         }
       },
@@ -99,7 +110,8 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
     filter,
     model,
     handleChangeViewMode,
-    focusOnWipInputRef
+    focusOnWipInputRef,
+    populateInputOnEdit
   });
 }
 const getStyles = (theme) => ({

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, Tooltip } 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 focusOnWipInputRef?: () => void;\n}\n\nexport function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }: Props) {\n const styles = useStyles2(getStyles);\n const [viewMode, setViewMode] = useState(true);\n const [shouldFocusOnPillWrapper, setShouldFocusOnPillWrapper] = 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, shouldFocusOnPillWrapperOverride?: boolean) => {\n event?.stopPropagation();\n if (readOnly) {\n return;\n }\n\n setShouldFocusOnPillWrapper(shouldFocusOnPillWrapperOverride ?? !viewMode);\n setViewMode(!viewMode);\n },\n [readOnly, viewMode]\n );\n\n useEffect(() => {\n if (shouldFocusOnPillWrapper) {\n pillWrapperRef.current?.focus();\n setShouldFocusOnPillWrapper(false);\n }\n }, [shouldFocusOnPillWrapper]);\n\n // set viewMode to false when filter.forceEdit is defined\n useEffect(() => {\n if (filter.forceEdit && viewMode) {\n setViewMode(false);\n // immediately set forceEdit back to undefined as a clean up\n model._updateFilter(filter, { forceEdit: undefined });\n }\n }, [filter, model, viewMode]);\n\n if (viewMode) {\n const pillText = (\n <span className={styles.pillText}>\n {keyLabel} {filter.operator} {valueLabel}\n </span>\n );\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 {valueLabel.length < 20 ? (\n pillText\n ) : (\n <Tooltip content={<div className={styles.tooltipText}>{valueLabel}</div>} placement=\"top\">\n {pillText}\n </Tooltip>\n )}\n\n {!readOnly ? (\n <IconButton\n onClick={(e) => {\n e.stopPropagation();\n model._removeFilter(filter);\n setTimeout(() => focusOnWipInputRef?.());\n }}\n onKeyDownCapture={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n model._removeFilter(filter);\n setTimeout(() => focusOnWipInputRef?.());\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 (\n <AdHocCombobox\n filter={filter}\n model={model}\n handleChangeViewMode={handleChangeViewMode}\n focusOnWipInputRef={focusOnWipInputRef}\n />\n );\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 maxWidth: '200px',\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n }),\n tooltipText: css({\n textAlign: 'center',\n }),\n});\n"],"names":["_a"],"mappings":"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"}
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, Tooltip } 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 focusOnWipInputRef?: () => void;\n}\n\nexport function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }: Props) {\n const styles = useStyles2(getStyles);\n const [viewMode, setViewMode] = useState(true);\n const [shouldFocusOnPillWrapper, setShouldFocusOnPillWrapper] = useState(false);\n const pillWrapperRef = useRef<HTMLDivElement>(null);\n const [populateInputOnEdit, setPopulateInputOnEdit] = useState(false);\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, shouldFocusOnPillWrapperOverride?: boolean) => {\n event?.stopPropagation();\n if (readOnly) {\n return;\n }\n\n setShouldFocusOnPillWrapper(shouldFocusOnPillWrapperOverride ?? !viewMode);\n setViewMode(!viewMode);\n },\n [readOnly, viewMode]\n );\n\n useEffect(() => {\n if (shouldFocusOnPillWrapper) {\n pillWrapperRef.current?.focus();\n setShouldFocusOnPillWrapper(false);\n }\n }, [shouldFocusOnPillWrapper]);\n\n // set viewMode to false when filter.forceEdit is defined\n useEffect(() => {\n if (filter.forceEdit && viewMode) {\n setViewMode(false);\n // immediately set forceEdit back to undefined as a clean up\n model._updateFilter(filter, { forceEdit: undefined });\n }\n }, [filter, model, viewMode]);\n\n // reset populateInputOnEdit when pill goes into view mode\n useEffect(() => {\n if (viewMode) {\n setPopulateInputOnEdit((prevValue) => (prevValue ? false : prevValue));\n }\n }, [viewMode]);\n\n if (viewMode) {\n const pillText = (\n <span className={styles.pillText}>\n {keyLabel} {filter.operator} {valueLabel}\n </span>\n );\n return (\n <div\n className={cx(styles.combinedFilterPill, { [styles.readOnlyCombinedFilter]: readOnly })}\n onClick={(e) => {\n e.stopPropagation();\n setPopulateInputOnEdit(true);\n handleChangeViewMode();\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n setPopulateInputOnEdit(true);\n handleChangeViewMode();\n }\n }}\n role=\"button\"\n aria-label={`Edit filter with key ${keyLabel}`}\n tabIndex={0}\n ref={pillWrapperRef}\n >\n {valueLabel.length < 20 ? (\n pillText\n ) : (\n <Tooltip content={<div className={styles.tooltipText}>{valueLabel}</div>} placement=\"top\">\n {pillText}\n </Tooltip>\n )}\n\n {!readOnly ? (\n <IconButton\n onClick={(e) => {\n e.stopPropagation();\n model._removeFilter(filter);\n setTimeout(() => focusOnWipInputRef?.());\n }}\n onKeyDownCapture={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n model._removeFilter(filter);\n setTimeout(() => focusOnWipInputRef?.());\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 (\n <AdHocCombobox\n filter={filter}\n model={model}\n handleChangeViewMode={handleChangeViewMode}\n focusOnWipInputRef={focusOnWipInputRef}\n populateInputOnEdit={populateInputOnEdit}\n />\n );\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 maxWidth: '200px',\n width: '100%',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n }),\n tooltipText: css({\n textAlign: 'center',\n }),\n});\n"],"names":["_a"],"mappings":"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"}

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

@@ -1,13 +1,14 @@
 import React, { forwardRef, useState, useRef, useId, 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 { isMultiValueOperator } 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, generatePlaceholder, ERROR_STATE_DROPDOWN_WIDTH } from './utils.js';
+import { fuzzySearchOptions, flattenOptionGroups, setupDropdownAccessibility, VIRTUAL_LIST_ITEM_HEIGHT_WITH_DESCRIPTION, VIRTUAL_LIST_ITEM_HEIGHT, VIRTUAL_LIST_OVERSCAN, generateFilterUpdatePayload, populateInputValueOnInputTypeSwitch, switchToNextInputType, switchInputType, generatePlaceholder, ERROR_STATE_DROPDOWN_WIDTH } from './utils.js';
 import { handleOptionGroups } from '../../utils.js';
 import { useFloatingInteractions, MAX_MENU_HEIGHT } from './useFloatingInteractions.js';
+import { MultiValuePill } from './MultiValuePill.js';
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -28,7 +29,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwaysWip, handleChangeViewMode, focusOnWipInputRef }, parentRef) {
+const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwaysWip, handleChangeViewMode, focusOnWipInputRef, populateInputOnEdit }, parentRef) {
   var _a, _b, _c;
   const [open, setOpen] = useState(false);
   const [options, setOptions] = useState([]);
@@ -115,7 +116,13 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
     ]
   );
   const outsidePressIdsToIgnore = useMemo(() => {
-    return [operatorIdentifier, ...filterMultiValues.map((item, i) => `${item.value}-${i}`)];
+    return [
+      operatorIdentifier,
+      ...filterMultiValues.reduce(
+        (acc, item, i) => [...acc, `${item.value}-${i}`, `${item.value}-${i}-close-icon`],
+        []
+      )
+    ];
   }, [operatorIdentifier, filterMultiValues]);
   const { refs, floatingStyles, context, getReferenceProps, getFloatingProps, getItemProps } = useFloatingInteractions({
     open,
@@ -268,6 +275,7 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
         const selectedItem = filteredDropDownItems[activeIndex];
         if (multiValueEdit) {
           handleLocalMultiValueChange(selectedItem);
+          setInputValue("");
         } else {
           model._updateFilter(
             filter,
@@ -278,6 +286,13 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
               setFilterMultiValues
             })
           );
+          populateInputValueOnInputTypeSwitch({
+            populateInputOnEdit,
+            item: selectedItem,
+            filterInputType,
+            setInputValue,
+            filter
+          });
           switchToNextInputType(
             filterInputType,
             setInputType,
@@ -290,7 +305,6 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
             focusOnWipInputRef == null ? void 0 : focusOnWipInputRef();
           }
         }
-        setInputValue("");
       }
     },
     [
@@ -300,12 +314,23 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
       model,
       filter,
       filterInputType,
+      populateInputOnEdit,
       handleChangeViewMode,
       refs.domReference,
       isLastFilter,
       focusOnWipInputRef
     ]
   );
+  const handleEditMultiValuePill = useCallback(
+    (value) => {
+      var _a2;
+      const valueLabel = value.label || value.value;
+      setFilterMultiValues((prev) => prev.filter((item) => item.value !== value.value));
+      setInputValue(valueLabel);
+      (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
+    },
+    [refs.domReference]
+  );
   useEffect(() => {
     if (open) {
       handleFetchOptions(filterInputType);
@@ -314,8 +339,6 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
   useEffect(() => {
     var _a2, _b2;
     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) => {
@@ -332,6 +355,9 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
         );
         setFilterMultiValues(multiValueOptions);
       }
+      if (!hasMultiValueOperator && populateInputOnEdit) {
+        setInputValue((filter == null ? void 0 : filter.value) || "");
+      }
       (_b2 = refs.domReference.current) == null ? void 0 : _b2.focus();
     }
   }, []);
@@ -361,11 +387,13 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
     tabIndex: 0,
     onClick: (event) => {
       event.stopPropagation();
+      setInputValue("");
       switchInputType("operator", setInputType, void 0, refs.domReference.current);
     },
     onKeyDown: (event) => {
       handleShiftTabInput(event, hasMultiValueOperator);
       if (event.key === "Enter") {
+        setInputValue("");
         switchInputType("operator", setInputType, void 0, refs.domReference.current);
       }
     }
@@ -375,7 +403,8 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
     key: `${item.value}-${i}`,
     item,
     index: i,
-    handleRemoveMultiValue
+    handleRemoveMultiValue,
+    handleEditMultiValuePill
   })) : null) : null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, getReferenceProps({
     ref: refs.setReference,
     onChange,
@@ -462,6 +491,7 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
           event.preventDefault();
           event.stopPropagation();
           handleLocalMultiValueChange(item);
+          setInputValue("");
           (_a3 = refs.domReference.current) == null ? void 0 : _a3.focus();
         } else {
           model._updateFilter(
@@ -473,7 +503,13 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
               setFilterMultiValues
             })
           );
-          setInputValue("");
+          populateInputValueOnInputTypeSwitch({
+            populateInputOnEdit,
+            item,
+            filterInputType,
+            setInputValue,
+            filter
+          });
           switchToNextInputType(
             filterInputType,
             setInputType,
@@ -506,35 +542,6 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
     menuHeight: Math.min(rowVirtualizer.getTotalSize(), MAX_MENU_HEIGHT)
   }) : null))));
 });
-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",
@@ -567,10 +574,6 @@ const getStyles = (theme) => ({
       background: theme.colors.action.hover
     }
   }),
-  valuePill: css({
-    background: theme.colors.action.selected,
-    padding: theme.spacing(0.125, 0, 0.125, 1)
-  }),
   dropdownWrapper: css({
     backgroundColor: theme.colors.background.primary,
     color: theme.colors.text.primary,
@@ -603,25 +606,10 @@ const getStyles = (theme) => ({
       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"
-  })
+  }))
 });
 export { AdHocCombobox };