@grafana/scenes 6.20.3--canary.1154.15712349855.0 → 6.20.3--canary.1151.15712690859.0

package/dist/esm/utils/ControlsLabel.js

@@ -1,3 +1,4 @@
+import { t } from '@grafana/i18n';
 import React from 'react';
 import { useStyles2, useTheme2, Tooltip, Icon, IconButton } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
@@ -37,7 +38,16 @@ function ControlsLabel(props) {
   const testId = typeof props.label === "string" ? selectors.pages.Dashboard.SubMenu.submenuItemLabels(props.label) : "";
   let labelElement;
   if (isVertical) {
-    labelElement = /* @__PURE__ */ React.createElement("label", { className: cx(styles.verticalLabel, props.className), "data-testid": testId, htmlFor: props.htmlFor }, props.prefix, props.label, descriptionIndicator, errorIndicator, props.icon && /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: styles.normalIcon }), loadingIndicator, props.onRemove && /* @__PURE__ */ React.createElement(IconButton, { variant: "secondary", size: "xs", name: "times", onClick: props.onRemove, tooltip: "Remove" }), props.suffix);
+    labelElement = /* @__PURE__ */ React.createElement("label", { className: cx(styles.verticalLabel, props.className), "data-testid": testId, htmlFor: props.htmlFor }, props.prefix, props.label, descriptionIndicator, errorIndicator, props.icon && /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: styles.normalIcon }), loadingIndicator, props.onRemove && /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        variant: "secondary",
+        size: "xs",
+        name: "times",
+        onClick: props.onRemove,
+        tooltip: t("grafana-scenes.utils.controls-label.tooltip-remove", "Remove")
+      }
+    ), props.suffix);
   } else {
     labelElement = /* @__PURE__ */ React.createElement("label", { className: cx(styles.horizontalLabel, props.className), "data-testid": testId, htmlFor: props.htmlFor }, props.prefix, errorIndicator, props.icon && /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: styles.normalIcon }), props.label, descriptionIndicator, loadingIndicator, props.suffix);
   }

package/dist/esm/utils/ControlsLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlsLabel.js","sources":["../../../src/utils/ControlsLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon, IconButton, Tooltip, useStyles2, useTheme2 } from '@grafana/ui';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { GrafanaTheme2, IconName } from '@grafana/data';\nimport { css, cx } from '@emotion/css';\nimport { LoadingIndicator } from './LoadingIndicator';\nimport { ControlsLayout } from '../core/types';\n\ninterface ControlsLabelProps {\n  label: string;\n  htmlFor?: string;\n  description?: string;\n  isLoading?: boolean;\n  error?: string;\n  icon?: IconName;\n  layout?: ControlsLayout;\n  prefix?: React.ReactNode;\n  suffix?: React.ReactNode;\n  className?: string;\n  onCancel?: () => void;\n  onRemove?: () => void;\n}\n\nexport function ControlsLabel(props: ControlsLabelProps) {\n  const styles = useStyles2(getStyles);\n  const theme = useTheme2();\n  const isVertical = props.layout === 'vertical';\n\n  const loadingIndicator = Boolean(props.isLoading) ? (\n    <div\n      style={{ marginLeft: theme.spacing(1), marginTop: '-1px' }}\n      aria-label={selectors.components.LoadingIndicator.icon}\n    >\n      <LoadingIndicator\n        onCancel={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n          props.onCancel?.();\n        }}\n      />\n    </div>\n  ) : null;\n\n  let errorIndicator = null;\n  if (props.error) {\n    errorIndicator = (\n      <Tooltip content={props.error} placement={'bottom'}>\n        <Icon className={styles.errorIcon} name=\"exclamation-triangle\" />\n      </Tooltip>\n    );\n  }\n\n  let descriptionIndicator = null;\n  if (props.description) {\n    descriptionIndicator = (\n      <Tooltip content={props.description} placement={isVertical ? 'top' : 'bottom'}>\n        <Icon className={styles.normalIcon} name=\"info-circle\" />\n      </Tooltip>\n    );\n  }\n\n  const testId =\n    typeof props.label === 'string' ? selectors.pages.Dashboard.SubMenu.submenuItemLabels(props.label) : '';\n  let labelElement: JSX.Element;\n\n  // The vertical layout has different css class and order of elements (label always first)\n\n  if (isVertical) {\n    labelElement = (\n      <label className={cx(styles.verticalLabel, props.className)} data-testid={testId} htmlFor={props.htmlFor}>\n        {props.prefix}\n        {props.label}\n        {descriptionIndicator}\n        {errorIndicator}\n        {props.icon && <Icon name={props.icon} className={styles.normalIcon} />}\n        {loadingIndicator}\n        {props.onRemove && (\n          <IconButton variant=\"secondary\" size=\"xs\" name=\"times\" onClick={props.onRemove} tooltip={'Remove'} />\n        )}\n        {props.suffix}\n      </label>\n    );\n  } else {\n    labelElement = (\n      <label className={cx(styles.horizontalLabel, props.className)} data-testid={testId} htmlFor={props.htmlFor}>\n        {props.prefix}\n        {errorIndicator}\n        {props.icon && <Icon name={props.icon} className={styles.normalIcon} />}\n        {props.label}\n        {descriptionIndicator}\n        {loadingIndicator}\n        {props.suffix}\n      </label>\n    );\n  }\n\n  return labelElement;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  horizontalLabel: css({\n    background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,\n    display: `flex`,\n    alignItems: 'center',\n    padding: theme.spacing(0, 1),\n    fontWeight: theme.typography.fontWeightMedium,\n    fontSize: theme.typography.bodySmall.fontSize,\n    height: theme.spacing(theme.components.height.md),\n    lineHeight: theme.spacing(theme.components.height.md),\n    borderRadius: `${theme.shape.radius.default} 0 0 ${theme.shape.radius.default}`,\n    border: `1px solid ${theme.components.input.borderColor}`,\n    position: 'relative',\n    // To make the border line up with the input border\n    right: -1,\n    whiteSpace: 'nowrap',\n    gap: theme.spacing(0.5),\n  }),\n  verticalLabel: css({\n    display: `flex`,\n    alignItems: 'center',\n    fontWeight: theme.typography.fontWeightMedium,\n    fontSize: theme.typography.bodySmall.fontSize,\n    lineHeight: theme.typography.bodySmall.lineHeight,\n    whiteSpace: 'nowrap',\n    marginBottom: theme.spacing(0.5),\n    gap: theme.spacing(1),\n  }),\n  errorIcon: css({\n    color: theme.colors.error.text,\n  }),\n  normalIcon: css({\n    color: theme.colors.text.secondary,\n  }),\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ControlsLabel.js","sources":["../../../src/utils/ControlsLabel.tsx"],"sourcesContent":["import { t } from '@grafana/i18n';\nimport React from 'react';\nimport { Icon, IconButton, Tooltip, useStyles2, useTheme2 } from '@grafana/ui';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { GrafanaTheme2, IconName } from '@grafana/data';\nimport { css, cx } from '@emotion/css';\nimport { LoadingIndicator } from './LoadingIndicator';\nimport { ControlsLayout } from '../core/types';\n\ninterface ControlsLabelProps {\n  label: string;\n  htmlFor?: string;\n  description?: string;\n  isLoading?: boolean;\n  error?: string;\n  icon?: IconName;\n  layout?: ControlsLayout;\n  prefix?: React.ReactNode;\n  suffix?: React.ReactNode;\n  className?: string;\n  onCancel?: () => void;\n  onRemove?: () => void;\n}\n\nexport function ControlsLabel(props: ControlsLabelProps) {\n  const styles = useStyles2(getStyles);\n  const theme = useTheme2();\n  const isVertical = props.layout === 'vertical';\n\n  const loadingIndicator = Boolean(props.isLoading) ? (\n    <div\n      style={{ marginLeft: theme.spacing(1), marginTop: '-1px' }}\n      aria-label={selectors.components.LoadingIndicator.icon}\n    >\n      <LoadingIndicator\n        onCancel={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n          props.onCancel?.();\n        }}\n      />\n    </div>\n  ) : null;\n\n  let errorIndicator = null;\n  if (props.error) {\n    errorIndicator = (\n      <Tooltip content={props.error} placement={'bottom'}>\n        <Icon className={styles.errorIcon} name=\"exclamation-triangle\" />\n      </Tooltip>\n    );\n  }\n\n  let descriptionIndicator = null;\n  if (props.description) {\n    descriptionIndicator = (\n      <Tooltip content={props.description} placement={isVertical ? 'top' : 'bottom'}>\n        <Icon className={styles.normalIcon} name=\"info-circle\" />\n      </Tooltip>\n    );\n  }\n\n  const testId =\n    typeof props.label === 'string' ? selectors.pages.Dashboard.SubMenu.submenuItemLabels(props.label) : '';\n  let labelElement: JSX.Element;\n\n  // The vertical layout has different css class and order of elements (label always first)\n\n  if (isVertical) {\n    labelElement = (\n      <label className={cx(styles.verticalLabel, props.className)} data-testid={testId} htmlFor={props.htmlFor}>\n        {props.prefix}\n        {props.label}\n        {descriptionIndicator}\n        {errorIndicator}\n        {props.icon && <Icon name={props.icon} className={styles.normalIcon} />}\n        {loadingIndicator}\n        {props.onRemove && (\n          <IconButton\n            variant=\"secondary\"\n            size=\"xs\"\n            name=\"times\"\n            onClick={props.onRemove}\n            tooltip={t('grafana-scenes.utils.controls-label.tooltip-remove', 'Remove')}\n          />\n        )}\n        {props.suffix}\n      </label>\n    );\n  } else {\n    labelElement = (\n      <label className={cx(styles.horizontalLabel, props.className)} data-testid={testId} htmlFor={props.htmlFor}>\n        {props.prefix}\n        {errorIndicator}\n        {props.icon && <Icon name={props.icon} className={styles.normalIcon} />}\n        {props.label}\n        {descriptionIndicator}\n        {loadingIndicator}\n        {props.suffix}\n      </label>\n    );\n  }\n\n  return labelElement;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  horizontalLabel: css({\n    background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,\n    display: `flex`,\n    alignItems: 'center',\n    padding: theme.spacing(0, 1),\n    fontWeight: theme.typography.fontWeightMedium,\n    fontSize: theme.typography.bodySmall.fontSize,\n    height: theme.spacing(theme.components.height.md),\n    lineHeight: theme.spacing(theme.components.height.md),\n    borderRadius: `${theme.shape.radius.default} 0 0 ${theme.shape.radius.default}`,\n    border: `1px solid ${theme.components.input.borderColor}`,\n    position: 'relative',\n    // To make the border line up with the input border\n    right: -1,\n    whiteSpace: 'nowrap',\n    gap: theme.spacing(0.5),\n  }),\n  verticalLabel: css({\n    display: `flex`,\n    alignItems: 'center',\n    fontWeight: theme.typography.fontWeightMedium,\n    fontSize: theme.typography.bodySmall.fontSize,\n    lineHeight: theme.typography.bodySmall.lineHeight,\n    whiteSpace: 'nowrap',\n    marginBottom: theme.spacing(0.5),\n    gap: theme.spacing(1),\n  }),\n  errorIcon: css({\n    color: theme.colors.error.text,\n  }),\n  normalIcon: css({\n    color: theme.colors.text.secondary,\n  }),\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/utils/LoadingIndicator.js

@@ -1,8 +1,9 @@
+import { t } from '@grafana/i18n';
 import { Tooltip, Icon } from '@grafana/ui';
 import React from 'react';
 
 function LoadingIndicator(props) {
-  return /* @__PURE__ */ React.createElement(Tooltip, { content: "Cancel query" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Tooltip, { content: t("grafana-scenes.utils.loading-indicator.content-cancel-query", "Cancel query") }, /* @__PURE__ */ React.createElement(
     Icon,
     {
       className: "spin-clockwise",

package/dist/esm/utils/LoadingIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingIndicator.js","sources":["../../../src/utils/LoadingIndicator.tsx"],"sourcesContent":["import { Icon, Tooltip } from '@grafana/ui';\nimport React, { useCallback } from 'react';\nimport { LoadingIndicatorProps as SelectLoadingIndicatorProps } from 'react-select';\n\nexport const SelectLoadingIndicator = ({\n  innerProps,\n  ...props\n}: SelectLoadingIndicatorProps & { selectProps: { onCancel: () => void } }) => {\n  const { onCancel } = props.selectProps;\n  const onMouseDown = useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      onCancel();\n    },\n    [onCancel]\n  );\n\n  return <LoadingIndicator onCancel={onMouseDown} />;\n};\n\ninterface LoadingIndicatorProps {\n  onCancel: (event: React.MouseEvent) => void;\n}\n\nexport function LoadingIndicator(props: LoadingIndicatorProps) {\n  return (\n    <Tooltip content=\"Cancel query\">\n      <Icon\n        className=\"spin-clockwise\"\n        name=\"sync\"\n        size=\"xs\"\n        role=\"button\"\n        onMouseDown={(e) => {\n          props.onCancel(e);\n        }}\n      />\n    </Tooltip>\n  );\n}\n"],"names":[],"mappings":";;;AAyBO,SAAS,iBAAiB,KAA8B,EAAA;AAC7D,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,OAAA,EAAQ,cACf,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,gBAAA;AAAA,MACV,IAAK,EAAA,MAAA;AAAA,MACL,IAAK,EAAA,IAAA;AAAA,MACL,IAAK,EAAA,QAAA;AAAA,MACL,WAAA,EAAa,CAAC,CAAM,KAAA;AAClB,QAAA,KAAA,CAAM,SAAS,CAAC,CAAA;AAAA;AAClB;AAAA,GAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"LoadingIndicator.js","sources":["../../../src/utils/LoadingIndicator.tsx"],"sourcesContent":["import { t } from '@grafana/i18n';\nimport { Icon, Tooltip } from '@grafana/ui';\nimport React, { useCallback } from 'react';\nimport { LoadingIndicatorProps as SelectLoadingIndicatorProps } from 'react-select';\n\nexport const SelectLoadingIndicator = ({\n  innerProps,\n  ...props\n}: SelectLoadingIndicatorProps & { selectProps: { onCancel: () => void } }) => {\n  const { onCancel } = props.selectProps;\n  const onMouseDown = useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      onCancel();\n    },\n    [onCancel]\n  );\n\n  return <LoadingIndicator onCancel={onMouseDown} />;\n};\n\ninterface LoadingIndicatorProps {\n  onCancel: (event: React.MouseEvent) => void;\n}\n\nexport function LoadingIndicator(props: LoadingIndicatorProps) {\n  return (\n    <Tooltip content={t('grafana-scenes.utils.loading-indicator.content-cancel-query', 'Cancel query')}>\n      <Icon\n        className=\"spin-clockwise\"\n        name=\"sync\"\n        size=\"xs\"\n        role=\"button\"\n        onMouseDown={(e) => {\n          props.onCancel(e);\n        }}\n      />\n    </Tooltip>\n  );\n}\n"],"names":[],"mappings":";;;;AA0BO,SAAS,iBAAiB,KAA8B,EAAA;AAC7D,EAAA,2CACG,OAAQ,EAAA,EAAA,OAAA,EAAS,CAAE,CAAA,6DAAA,EAA+D,cAAc,CAC/F,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,gBAAA;AAAA,MACV,IAAK,EAAA,MAAA;AAAA,MACL,IAAK,EAAA,IAAA;AAAA,MACL,IAAK,EAAA,QAAA;AAAA,MACL,WAAA,EAAa,CAAC,CAAM,KAAA;AAClB,QAAA,KAAA,CAAM,SAAS,CAAC,CAAA;AAAA;AAClB;AAAA,GAEJ,CAAA;AAEJ;;;;"}

package/dist/esm/utils/loadResources.js

@@ -0,0 +1,23 @@
+import { LANGUAGES } from '@grafana/i18n';
+
+function __variableDynamicImportRuntime0__(path) {
+  switch (path) {
+    case '../locales/en-US/grafana-scenes.json': return import('../locales/en-US/grafana-scenes.json.js');
+    default: return new Promise(function(resolve, reject) {
+      (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
+        reject.bind(null, new Error("Unknown variable dynamic import: " + path))
+      );
+    })
+   }
+ }
+const resources = LANGUAGES.reduce((acc, lang) => {
+  acc[lang.code] = async () => await __variableDynamicImportRuntime0__(`../locales/${lang.code}/grafana-scenes.json`);
+  return acc;
+}, {});
+const loadResources = async (resolvedLanguage) => {
+  const translation = await resources[resolvedLanguage]();
+  return translation.default;
+};
+
+export { loadResources };
+//# sourceMappingURL=loadResources.js.map

package/dist/esm/utils/loadResources.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loadResources.js","sources":["../../../src/utils/loadResources.ts"],"sourcesContent":["import { LANGUAGES, ResourceLoader, Resources } from '@grafana/i18n';\n\nconst resources = LANGUAGES.reduce<Record<string, () => Promise<{ default: Resources }>>>((acc, lang) => {\n  acc[lang.code] = async () => await import(`../locales/${lang.code}/grafana-scenes.json`);\n  return acc;\n}, {});\n\n/**\n * Loads the translation resources for the given language and returns them.\n */\nexport const loadResources: ResourceLoader = async (resolvedLanguage: string) => {\n  const translation = await resources[resolvedLanguage]();\n  return translation.default;\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAEA,MAAM,SAAY,GAAA,SAAA,CAAU,MAA8D,CAAA,CAAC,KAAK,IAAS,KAAA;AACvG,EAAI,GAAA,CAAA,IAAA,CAAK,IAAI,CAAI,GAAA,YAAY,MAAM,iCAAO,CAAA,CAAA,WAAA,EAAc,KAAK,IAAI,CAAA,oBAAA,CAAA,CAAA;AACjE,EAAO,OAAA,GAAA;AACT,CAAA,EAAG,EAAE,CAAA;AAKQ,MAAA,aAAA,GAAgC,OAAO,gBAA6B,KAAA;AAC/E,EAAA,MAAM,WAAc,GAAA,MAAM,SAAU,CAAA,gBAAgB,CAAE,EAAA;AACtD,EAAA,OAAO,WAAY,CAAA,OAAA;AACrB;;;;"}

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

@@ -1,3 +1,4 @@
+import { t } from '@grafana/i18n';
 import React from 'react';
 import { AdHocFilterRenderer } from './AdHocFilterRenderer.js';
 import { Button } from '@grafana/ui';
@@ -10,8 +11,8 @@ function AdHocFilterBuilder({ model, addFilterButtonText }) {
       {
         variant: "secondary",
         icon: "plus",
-        title: "Add filter",
-        "aria-label": "Add filter",
+        title: t("grafana-scenes.variables.ad-hoc-filter-builder.title-add-filter", "Add filter"),
+        "aria-label": t("grafana-scenes.variables.ad-hoc-filter-builder.aria-label-add-filter", "Add filter"),
         "data-testid": `AdHocFilter-add`,
         onClick: () => model._addWip()
       },

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

@@ -1 +1 @@
-{"version":3,"file":"AdHocFilterBuilder.js","sources":["../../../../src/variables/adhoc/AdHocFilterBuilder.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AdHocFilterRenderer } from './AdHocFilterRenderer';\nimport { AdHocFiltersVariable } from './AdHocFiltersVariable';\nimport { Button } from '@grafana/ui';\n\ninterface Props {\n  model: AdHocFiltersVariable;\n  addFilterButtonText?: string;\n}\n\nexport function AdHocFilterBuilder({ model, addFilterButtonText }: Props) {\n  const { _wip } = model.useState();\n\n  if (!_wip) {\n    return (\n      <Button\n        variant=\"secondary\"\n        icon=\"plus\"\n        title={'Add filter'}\n        aria-label=\"Add filter\"\n        data-testid={`AdHocFilter-add`}\n        onClick={() => model._addWip()}\n      >\n        {addFilterButtonText}\n      </Button>\n    );\n  }\n\n  return <AdHocFilterRenderer filter={_wip} model={model} />;\n}\n"],"names":[],"mappings":";;;;AAWO,SAAS,kBAAmB,CAAA,EAAE,KAAO,EAAA,mBAAA,EAA8B,EAAA;AACxE,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,KAAA,CAAM,QAAS,EAAA;AAEhC,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,WAAA;AAAA,QACR,IAAK,EAAA,MAAA;AAAA,QACL,KAAO,EAAA,YAAA;AAAA,QACP,YAAW,EAAA,YAAA;AAAA,QACX,aAAa,EAAA,CAAA,eAAA,CAAA;AAAA,QACb,OAAA,EAAS,MAAM,KAAA,CAAM,OAAQ;AAAA,OAAA;AAAA,MAE5B;AAAA,KACH;AAAA;AAIJ,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,EAAoB,MAAQ,EAAA,IAAA,EAAM,KAAc,EAAA,CAAA;AAC1D;;;;"}
+{"version":3,"file":"AdHocFilterBuilder.js","sources":["../../../../src/variables/adhoc/AdHocFilterBuilder.tsx"],"sourcesContent":["import { t } from '@grafana/i18n';\nimport React from 'react';\n\nimport { AdHocFilterRenderer } from './AdHocFilterRenderer';\nimport { AdHocFiltersVariable } from './AdHocFiltersVariable';\nimport { Button } from '@grafana/ui';\n\ninterface Props {\n  model: AdHocFiltersVariable;\n  addFilterButtonText?: string;\n}\n\nexport function AdHocFilterBuilder({ model, addFilterButtonText }: Props) {\n  const { _wip } = model.useState();\n\n  if (!_wip) {\n    return (\n      <Button\n        variant=\"secondary\"\n        icon=\"plus\"\n        title={t('grafana-scenes.variables.ad-hoc-filter-builder.title-add-filter', 'Add filter')}\n        aria-label={t('grafana-scenes.variables.ad-hoc-filter-builder.aria-label-add-filter', 'Add filter')}\n        data-testid={`AdHocFilter-add`}\n        onClick={() => model._addWip()}\n      >\n        {addFilterButtonText}\n      </Button>\n    );\n  }\n\n  return <AdHocFilterRenderer filter={_wip} model={model} />;\n}\n"],"names":[],"mappings":";;;;;AAYO,SAAS,kBAAmB,CAAA,EAAE,KAAO,EAAA,mBAAA,EAA8B,EAAA;AACxE,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,KAAA,CAAM,QAAS,EAAA;AAEhC,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,WAAA;AAAA,QACR,IAAK,EAAA,MAAA;AAAA,QACL,KAAA,EAAO,CAAE,CAAA,iEAAA,EAAmE,YAAY,CAAA;AAAA,QACxF,YAAA,EAAY,CAAE,CAAA,sEAAA,EAAwE,YAAY,CAAA;AAAA,QAClG,aAAa,EAAA,CAAA,eAAA,CAAA;AAAA,QACb,OAAA,EAAS,MAAM,KAAA,CAAM,OAAQ;AAAA,OAAA;AAAA,MAE5B;AAAA,KACH;AAAA;AAIJ,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,EAAoB,MAAQ,EAAA,IAAA,EAAM,KAAc,EAAA,CAAA;AAC1D;;;;"}

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

@@ -1,3 +1,4 @@
+import { t } from '@grafana/i18n';
 import React, { useState, useMemo } from 'react';
 import { isMultiValueOperator } from './AdHocFiltersVariable.js';
 import { useStyles2, Select, Field, Button } from '@grafana/ui';
@@ -106,7 +107,10 @@ function AdHocFilterRenderer({ filter, model }) {
       width: "auto",
       value: valueValue,
       filterOption: filterNoOp,
-      placeholder: "Select value",
+      placeholder: t(
+        "grafana-scenes.variables.ad-hoc-filter-renderer.value-select.placeholder-select-value",
+        "Select value"
+      ),
       options: filteredValueOptions,
       inputValue: valueInputValue,
       onInputChange: onValueInputChange,
@@ -153,7 +157,10 @@ function AdHocFilterRenderer({ filter, model }) {
       width: "auto",
       allowCustomValue: (_c = model.state.allowCustomValue) != null ? _c : true,
       value: keyValue,
-      placeholder: "Select label",
+      placeholder: t(
+        "grafana-scenes.variables.ad-hoc-filter-renderer.key-select.placeholder-select-label",
+        "Select label"
+      ),
       options: handleOptionGroups(keys),
       onChange: (v) => {
         model._updateFilter(filter, {
@@ -210,15 +217,23 @@ function AdHocFilterRenderer({ filter, model }) {
       const label = /* @__PURE__ */ React.createElement(ControlsLabel, { layout: "vertical", label: (_d = filter.key) != null ? _d : "", onRemove: () => model._removeFilter(filter) });
       return /* @__PURE__ */ React.createElement(Field, { label, "data-testid": `AdHocFilter-${filter.key}`, className: styles.field }, /* @__PURE__ */ React.createElement("div", { className: styles.wrapper }, operatorSelect, valueSelect));
     } else {
-      return /* @__PURE__ */ React.createElement(Field, { label: "Select label", "data-testid": `AdHocFilter-${filter.key}`, className: styles.field }, keySelect);
+      return /* @__PURE__ */ React.createElement(
+        Field,
+        {
+          label: t("grafana-scenes.variables.ad-hoc-filter-renderer.label-select-label", "Select label"),
+          "data-testid": `AdHocFilter-${filter.key}`,
+          className: styles.field
+        },
+        keySelect
+      );
     }
   }
   return /* @__PURE__ */ React.createElement("div", { className: styles.wrapper, "data-testid": `AdHocFilter-${filter.key}` }, keySelect, operatorSelect, valueSelect, /* @__PURE__ */ React.createElement(
     Button,
     {
       variant: "secondary",
-      "aria-label": "Remove filter",
-      title: "Remove filter",
+      "aria-label": t("grafana-scenes.variables.ad-hoc-filter-renderer.aria-label-remove-filter", "Remove filter"),
+      title: t("grafana-scenes.variables.ad-hoc-filter-renderer.title-remove-filter", "Remove filter"),
       className: styles.removeButton,
       icon: "times",
       "data-testid": `AdHocFilter-remove-${(_e = filter.key) != null ? _e : ""}`,

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, 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  const [uncommittedValue, setUncommittedValue] = useState<SelectableValue>(\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  const onAddCustomValue = model.state.onAddCustomValue;\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      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      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        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={model.state.allowCustomValue ?? true}\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        if (onAddCustomValue && v.__isNew__) {\n          model._updateFilter(filter, onAddCustomValue(v, filter));\n        } else {\n          model._updateFilter(filter, {\n            value: v.value,\n            valueLabels: v.label ? [v.label] : [v.value],\n          });\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={model.state.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          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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"}
+{"version":3,"file":"AdHocFilterRenderer.js","sources":["../../../../src/variables/adhoc/AdHocFilterRenderer.tsx"],"sourcesContent":["import { t } from '@grafana/i18n';\nimport 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  const [uncommittedValue, setUncommittedValue] = useState<SelectableValue>(\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  const onAddCustomValue = model.state.onAddCustomValue;\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      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      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        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={model.state.allowCustomValue ?? true}\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={t(\n        'grafana-scenes.variables.ad-hoc-filter-renderer.value-select.placeholder-select-value',\n        'Select value'\n      )}\n      options={filteredValueOptions}\n      inputValue={valueInputValue}\n      onInputChange={onValueInputChange}\n      onChange={(v) => {\n        if (onAddCustomValue && v.__isNew__) {\n          model._updateFilter(filter, onAddCustomValue(v, filter));\n        } else {\n          model._updateFilter(filter, {\n            value: v.value,\n            valueLabels: v.label ? [v.label] : [v.value],\n          });\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={model.state.allowCustomValue ?? true}\n      value={keyValue}\n      placeholder={t(\n        'grafana-scenes.variables.ad-hoc-filter-renderer.key-select.placeholder-select-label',\n        'Select label'\n      )}\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          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\n          label={t('grafana-scenes.variables.ad-hoc-filter-renderer.label-select-label', 'Select label')}\n          data-testid={`AdHocFilter-${filter.key}`}\n          className={styles.field}\n        >\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={t('grafana-scenes.variables.ad-hoc-filter-renderer.aria-label-remove-filter', 'Remove filter')}\n        title={t('grafana-scenes.variables.ad-hoc-filter-renderer.title-remove-filter', '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

@@ -3,6 +3,7 @@ import { useStyles2, Tooltip, IconButton, Icon } from '@grafana/ui';
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { AdHocCombobox } from './AdHocFiltersCombobox.js';
 import { isMatchAllFilter } from '../AdHocFiltersVariable.js';
+import { t } from '@grafana/i18n';
 
 const LABEL_MAX_VISIBLE_LENGTH = 20;
 function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
@@ -85,7 +86,13 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
           }
         },
         role: readOnly ? void 0 : "button",
-        "aria-label": `Edit filter with key ${keyLabel}`,
+        "aria-label": t(
+          "grafana-scenes.components.adhoc-filter-pill.edit-filter-with-key",
+          "Edit filter with key {{keyLabel}}",
+          {
+            keyLabel
+          }
+        ),
         tabIndex: 0,
         ref: pillWrapperRef
       },
@@ -117,10 +124,25 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
           name: "times",
           size: "md",
           className: styles.pillIcon,
-          tooltip: `Remove filter with key ${keyLabel}`
+          tooltip: t(
+            "grafana-scenes.components.adhoc-filter-pill.remove-filter-with-key",
+            "Remove filter with key {{keyLabel}}",
+            {
+              keyLabel
+            }
+          )
         }
       ) : null,
-      filter.origin && filter.readOnly && /* @__PURE__ */ React.createElement(Tooltip, { content: `${filter.origin} managed filter`, placement: "bottom" }, /* @__PURE__ */ React.createElement(Icon, { name: "lock", size: "md", className: styles.readOnlyPillIcon })),
+      filter.origin && filter.readOnly && /* @__PURE__ */ React.createElement(
+        Tooltip,
+        {
+          content: t("grafana-scenes.components.adhoc-filter-pill.managed-filter", "{{origin}} managed filter", {
+            origin: filter.origin
+          }),
+          placement: "bottom"
+        },
+        /* @__PURE__ */ React.createElement(Icon, { name: "lock", size: "md", className: styles.readOnlyPillIcon })
+      ),
       filter.origin && !filter.restorable && !filter.readOnly && /* @__PURE__ */ React.createElement(Tooltip, { content: getOriginFilterTooltips(filter.origin).info, placement: "bottom" }, /* @__PURE__ */ React.createElement(Icon, { name: "info-circle", size: "md", className: styles.infoPillIcon })),
       filter.origin && filter.restorable && !filter.readOnly && /* @__PURE__ */ React.createElement(
         IconButton,

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

@@ -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, Icon } from '@grafana/ui';\nimport React, { useState, useRef, useCallback, useEffect } from 'react';\nimport { AdHocCombobox } from './AdHocFiltersCombobox';\nimport { AdHocFilterWithLabels, AdHocFiltersVariable, FilterOrigin, isMatchAllFilter } from '../AdHocFiltersVariable';\n\nconst LABEL_MAX_VISIBLE_LENGTH = 20;\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  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  const getOriginFilterTooltips = (origin: FilterOrigin): { info: string; restore: string } => {\n    if (origin === 'dashboard') {\n      return {\n        info: 'Applied by default in this dashboard. If edited, it carries over to other dashboards.',\n        restore: 'Restore the value set by this dashboard.',\n      };\n    } else if (origin === 'scope') {\n      return {\n        info: 'Applied automatically from your selected scope.',\n        restore: 'Restore the value set by your selected scope.',\n      };\n    } else {\n      return {\n        info: `This is a ${origin} injected filter.`,\n        restore: `Restore filter to its original value.`,\n      };\n    }\n  };\n\n  if (viewMode) {\n    const pillTextContent = `${keyLabel} ${filter.operator} ${valueLabel}`;\n    const pillText = <span className={styles.pillText}>{pillTextContent}</span>;\n\n    return (\n      <div\n        className={cx(\n          styles.combinedFilterPill,\n          readOnly && styles.readOnlyCombinedFilter,\n          isMatchAllFilter(filter) && styles.matchAllPill,\n          filter.readOnly && styles.filterReadOnly\n        )}\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={readOnly ? undefined : 'button'}\n        aria-label={`Edit filter with key ${keyLabel}`}\n        tabIndex={0}\n        ref={pillWrapperRef}\n      >\n        {pillTextContent.length < LABEL_MAX_VISIBLE_LENGTH ? (\n          pillText\n        ) : (\n          <Tooltip content={<div className={styles.tooltipText}>{pillTextContent}</div>} placement=\"top\">\n            {pillText}\n          </Tooltip>\n        )}\n\n        {!readOnly && !filter.matchAllFilter && (!filter.origin || filter.origin === 'dashboard') ? (\n          <IconButton\n            onClick={(e) => {\n              e.stopPropagation();\n              if (filter.origin && filter.origin === 'dashboard') {\n                model.updateToMatchAll(filter);\n              } else {\n                model._removeFilter(filter);\n              }\n\n              setTimeout(() => focusOnWipInputRef?.());\n            }}\n            onKeyDownCapture={(e) => {\n              if (e.key === 'Enter') {\n                e.preventDefault();\n                e.stopPropagation();\n                if (filter.origin && filter.origin === 'dashboard') {\n                  model.updateToMatchAll(filter);\n                } else {\n                  model._removeFilter(filter);\n                }\n                setTimeout(() => focusOnWipInputRef?.());\n              }\n            }}\n            name=\"times\"\n            size=\"md\"\n            className={styles.pillIcon}\n            tooltip={`Remove filter with key ${keyLabel}`}\n          />\n        ) : null}\n\n        {filter.origin && filter.readOnly && (\n          <Tooltip content={`${filter.origin} managed filter`} placement={'bottom'}>\n            <Icon name=\"lock\" size=\"md\" className={styles.readOnlyPillIcon} />\n          </Tooltip>\n        )}\n\n        {filter.origin && !filter.restorable && !filter.readOnly && (\n          <Tooltip content={getOriginFilterTooltips(filter.origin).info} placement={'bottom'}>\n            <Icon name=\"info-circle\" size=\"md\" className={styles.infoPillIcon} />\n          </Tooltip>\n        )}\n\n        {filter.origin && filter.restorable && !filter.readOnly && (\n          <IconButton\n            onClick={(e) => {\n              e.stopPropagation();\n              model.restoreOriginalFilter(filter);\n            }}\n            onKeyDownCapture={(e) => {\n              if (e.key === 'Enter') {\n                e.preventDefault();\n                e.stopPropagation();\n                model.restoreOriginalFilter(filter);\n              }\n            }}\n            name=\"history\"\n            size=\"md\"\n            className={isMatchAllFilter(filter) ? styles.matchAllPillIcon : styles.pillIcon}\n            tooltip={getOriginFilterTooltips(filter.origin).restore}\n          />\n        )}\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  filterReadOnly: css({\n    background: theme.colors.background.canvas,\n    cursor: 'text',\n    '&:hover': {\n      background: theme.colors.background.canvas,\n    },\n  }),\n  pillIcon: 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  infoPillIcon: css({\n    marginInline: theme.spacing(0.5),\n    cursor: 'pointer',\n  }),\n  readOnlyPillIcon: css({\n    marginInline: theme.spacing(0.5),\n  }),\n  matchAllPillIcon: css({\n    marginInline: theme.spacing(0.5),\n    cursor: 'pointer',\n    color: theme.colors.text.disabled,\n  }),\n  matchAllPill: css({\n    background: theme.colors.action.selected,\n    color: theme.colors.text.disabled,\n    border: 0,\n    '&:hover': {\n      background: theme.colors.action.selected,\n    },\n  }),\n});\n"],"names":["_a"],"mappings":"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"}
+{"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, Icon } from '@grafana/ui';\nimport React, { useState, useRef, useCallback, useEffect } from 'react';\nimport { AdHocCombobox } from './AdHocFiltersCombobox';\nimport { AdHocFilterWithLabels, AdHocFiltersVariable, FilterOrigin, isMatchAllFilter } from '../AdHocFiltersVariable';\nimport { t } from '@grafana/i18n';\n\nconst LABEL_MAX_VISIBLE_LENGTH = 20;\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  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  const getOriginFilterTooltips = (origin: FilterOrigin): { info: string; restore: string } => {\n    if (origin === 'dashboard') {\n      return {\n        info: 'Applied by default in this dashboard. If edited, it carries over to other dashboards.',\n        restore: 'Restore the value set by this dashboard.',\n      };\n    } else if (origin === 'scope') {\n      return {\n        info: 'Applied automatically from your selected scope.',\n        restore: 'Restore the value set by your selected scope.',\n      };\n    } else {\n      return {\n        info: `This is a ${origin} injected filter.`,\n        restore: `Restore filter to its original value.`,\n      };\n    }\n  };\n\n  if (viewMode) {\n    const pillTextContent = `${keyLabel} ${filter.operator} ${valueLabel}`;\n    const pillText = <span className={styles.pillText}>{pillTextContent}</span>;\n\n    return (\n      <div\n        className={cx(\n          styles.combinedFilterPill,\n          readOnly && styles.readOnlyCombinedFilter,\n          isMatchAllFilter(filter) && styles.matchAllPill,\n          filter.readOnly && styles.filterReadOnly\n        )}\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={readOnly ? undefined : 'button'}\n        aria-label={t(\n          'grafana-scenes.components.adhoc-filter-pill.edit-filter-with-key',\n          'Edit filter with key {{keyLabel}}',\n          {\n            keyLabel,\n          }\n        )}\n        tabIndex={0}\n        ref={pillWrapperRef}\n      >\n        {pillTextContent.length < LABEL_MAX_VISIBLE_LENGTH ? (\n          pillText\n        ) : (\n          <Tooltip content={<div className={styles.tooltipText}>{pillTextContent}</div>} placement=\"top\">\n            {pillText}\n          </Tooltip>\n        )}\n\n        {!readOnly && !filter.matchAllFilter && (!filter.origin || filter.origin === 'dashboard') ? (\n          <IconButton\n            onClick={(e) => {\n              e.stopPropagation();\n              if (filter.origin && filter.origin === 'dashboard') {\n                model.updateToMatchAll(filter);\n              } else {\n                model._removeFilter(filter);\n              }\n\n              setTimeout(() => focusOnWipInputRef?.());\n            }}\n            onKeyDownCapture={(e) => {\n              if (e.key === 'Enter') {\n                e.preventDefault();\n                e.stopPropagation();\n                if (filter.origin && filter.origin === 'dashboard') {\n                  model.updateToMatchAll(filter);\n                } else {\n                  model._removeFilter(filter);\n                }\n                setTimeout(() => focusOnWipInputRef?.());\n              }\n            }}\n            name=\"times\"\n            size=\"md\"\n            className={styles.pillIcon}\n            tooltip={t(\n              'grafana-scenes.components.adhoc-filter-pill.remove-filter-with-key',\n              'Remove filter with key {{keyLabel}}',\n              {\n                keyLabel,\n              }\n            )}\n          />\n        ) : null}\n\n        {filter.origin && filter.readOnly && (\n          <Tooltip\n            content={t('grafana-scenes.components.adhoc-filter-pill.managed-filter', '{{origin}} managed filter', {\n              origin: filter.origin,\n            })}\n            placement={'bottom'}\n          >\n            <Icon name=\"lock\" size=\"md\" className={styles.readOnlyPillIcon} />\n          </Tooltip>\n        )}\n\n        {filter.origin && !filter.restorable && !filter.readOnly && (\n          <Tooltip content={getOriginFilterTooltips(filter.origin).info} placement={'bottom'}>\n            <Icon name=\"info-circle\" size=\"md\" className={styles.infoPillIcon} />\n          </Tooltip>\n        )}\n\n        {filter.origin && filter.restorable && !filter.readOnly && (\n          <IconButton\n            onClick={(e) => {\n              e.stopPropagation();\n              model.restoreOriginalFilter(filter);\n            }}\n            onKeyDownCapture={(e) => {\n              if (e.key === 'Enter') {\n                e.preventDefault();\n                e.stopPropagation();\n                model.restoreOriginalFilter(filter);\n              }\n            }}\n            name=\"history\"\n            size=\"md\"\n            className={isMatchAllFilter(filter) ? styles.matchAllPillIcon : styles.pillIcon}\n            tooltip={getOriginFilterTooltips(filter.origin).restore}\n          />\n        )}\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  filterReadOnly: css({\n    background: theme.colors.background.canvas,\n    cursor: 'text',\n    '&:hover': {\n      background: theme.colors.background.canvas,\n    },\n  }),\n  pillIcon: 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  infoPillIcon: css({\n    marginInline: theme.spacing(0.5),\n    cursor: 'pointer',\n  }),\n  readOnlyPillIcon: css({\n    marginInline: theme.spacing(0.5),\n  }),\n  matchAllPillIcon: css({\n    marginInline: theme.spacing(0.5),\n    cursor: 'pointer',\n    color: theme.colors.text.disabled,\n  }),\n  matchAllPill: css({\n    background: theme.colors.action.selected,\n    color: theme.colors.text.disabled,\n    border: 0,\n    '&:hover': {\n      background: theme.colors.action.selected,\n    },\n  }),\n});\n"],"names":["_a"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+import { t } from '@grafana/i18n';
 import React, { forwardRef, useState, useRef, useId, useMemo, useCallback, useImperativeHandle, useEffect, useLayoutEffect } from 'react';
 import { FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { useStyles2, Spinner, Text } from '@grafana/ui';
@@ -401,7 +402,10 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
         filter.origin && styles.keyPill,
         operatorIdentifier
       ),
-      "aria-label": "Edit filter operator",
+      "aria-label": t(
+        "grafana-scenes.variables.ad-hoc-combobox.aria-label-edit-filter-operator",
+        "Edit filter operator"
+      ),
       tabIndex: filter.origin ? -1 : 0,
       onClick: (event) => {
         if (filter.origin) {
@@ -508,6 +512,7 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
         }
         const nextItem = filteredDropDownItems[virtualItem.index + 1];
         const shouldAddBottomBorder = nextItem && !nextItem.group && !nextItem.options && item.group;
+        const itemLabel = (_a2 = item.label) != null ? _a2 : item.value;
         return (
           // key is included in getItemProps()
           // eslint-disable-next-line react/jsx-key
@@ -570,7 +575,11 @@ const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwa
               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),
+            /* @__PURE__ */ React.createElement("span", null, item.isCustom ? t(
+              "grafana-scenes.components.adhoc-filters-combobox.use-custom-value",
+              "Use custom value: {{itemLabel}}",
+              { itemLabel }
+            ) : itemLabel),
             item.description ? /* @__PURE__ */ React.createElement("div", { className: styles.descriptionText }, item.description) : null
           )
         );