@grafana/scenes 7.3.4 → 7.3.5

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

@@ -1 +1 @@
-{"version":3,"file":"AdHocFiltersComboboxRenderer.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Button, IconButton, Icon, useStyles2, useTheme2 } from '@grafana/ui';\nimport { t } from '@grafana/i18n';\nimport React, { memo, useRef, useState, useEffect } from 'react';\nimport { useMeasure } from 'react-use';\nimport { AdHocFiltersController } from '../controller/AdHocFiltersController';\nimport { AdHocFilterPill } from './AdHocFilterPill';\nimport { AdHocFiltersAlwaysWipCombobox } from './AdHocFiltersAlwaysWipCombobox';\nimport { GroupByPill } from './GroupByPill';\nimport { isGroupByFilter } from '../AdHocFiltersVariable';\nimport { AdHocGroupByRecommendationsRenderer } from '../AdHocFiltersRecommendations';\n\nconst MAX_VISIBLE_FILTERS_DEFAULT = 4;\nconst MAX_VISIBLE_FILTERS_WITH_GROUP_BY = 2;\nconst MAX_VISIBLE_GROUP_BY = 2;\n\ninterface Props {\n  controller: AdHocFiltersController;\n}\n\nexport const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRenderer({ controller }: Props) {\n  const { originFilters, filters, readOnly, collapsible, valueRecommendations, enableGroupBy, groupByRestorable } =\n    controller.useState();\n  const styles = useStyles2(getStyles);\n  const theme = useTheme2();\n  const [collapsed, setCollapsed] = useState(true);\n  const [wrapperRef, { height: wrapperHeight }] = useMeasure<HTMLDivElement>();\n\n  const clearAll = () => {\n    controller.clearAll?.();\n  };\n\n  // ref that focuses on the always wip filter input\n  // defined in the combobox component via useImperativeHandle\n  const focusOnWipInputRef = useRef<() => void>();\n  const focusOnGroupByWipInputRef = useRef<() => void>();\n\n  // Single line height is approximately minHeight (4 spacing units) + small buffer\n  const singleLineThreshold = theme.spacing.gridSize * 5;\n  const isMultiLine = collapsible && wrapperHeight > singleLineThreshold;\n\n  const handleCollapseToggle = (event: React.MouseEvent) => {\n    event.stopPropagation();\n    if (collapsible) {\n      setCollapsed(true);\n    }\n  };\n\n  const handleExpand = () => {\n    if (collapsible && collapsed) {\n      setCollapsed(false);\n    }\n  };\n\n  // Combine all visible filters into one array\n  const visibleOriginFilters = originFilters?.filter((f) => f.origin && !f.hidden && !f.dismissedGroupBy) ?? [];\n  const visibleFilters = filters.filter((f) => !f.hidden);\n  const allFilters = [...visibleOriginFilters, ...visibleFilters];\n  const totalFiltersCount = allFilters.length;\n\n  const adhocFilters = allFilters.filter((f) => !isGroupByFilter(f));\n  const groupByFilters = allFilters.filter(isGroupByFilter);\n\n  const shouldCollapse = collapsible && collapsed && totalFiltersCount > 0;\n\n  const maxVisibleAdhocFilters = enableGroupBy ? MAX_VISIBLE_FILTERS_WITH_GROUP_BY : MAX_VISIBLE_FILTERS_DEFAULT;\n  const adhocFiltersToRender = shouldCollapse ? adhocFilters.slice(0, maxVisibleAdhocFilters) : adhocFilters;\n  const adhocHiddenCount = shouldCollapse ? Math.max(0, adhocFilters.length - maxVisibleAdhocFilters) : 0;\n\n  const groupByFiltersToRender = shouldCollapse ? groupByFilters.slice(0, MAX_VISIBLE_GROUP_BY) : groupByFilters;\n  const groupByHiddenCount = shouldCollapse ? Math.max(0, groupByFilters.length - MAX_VISIBLE_GROUP_BY) : 0;\n\n  // Reset collapsed state when there are no filters (only when collapsible)\n  useEffect(() => {\n    if (collapsible && totalFiltersCount === 0 && collapsed) {\n      setCollapsed(false);\n    }\n  }, [collapsible, totalFiltersCount, collapsed]);\n\n  // Only show collapse button when expanded and content wraps to multiple lines\n  const showCollapseButton = collapsible && isMultiLine && !collapsed;\n  const showExpandButton = shouldCollapse && (adhocHiddenCount > 0 || groupByHiddenCount > 0);\n\n  return (\n    <div\n      ref={wrapperRef}\n      className={cx(styles.comboboxWrapper, {\n        [styles.comboboxFocusOutline]: !readOnly,\n        [styles.collapsed]: shouldCollapse,\n      })}\n    >\n      {!readOnly && valueRecommendations && <valueRecommendations.Component model={valueRecommendations} />}\n\n      {adhocFiltersToRender.map((filter, index) => (\n        <AdHocFilterPill\n          key={`${filter.origin ? 'origin-' : ''}${index}-${filter.key}`}\n          filter={filter}\n          controller={controller}\n          readOnly={readOnly || filter.readOnly}\n          focusOnWipInputRef={focusOnWipInputRef.current}\n        />\n      ))}\n\n      {shouldCollapse && adhocHiddenCount > 0 && (\n        <Button\n          className={styles.moreIndicator}\n          fill=\"text\"\n          size=\"sm\"\n          aria-label={t(\n            'grafana-scenes.variables.adhoc-filters-combobox-renderer.show-more-filters',\n            'Show {{count}} more filters',\n            { count: adhocHiddenCount }\n          )}\n          onClick={(e) => {\n            e.stopPropagation();\n            handleExpand();\n            setTimeout(() => focusOnWipInputRef.current?.());\n          }}\n        >\n          +{adhocHiddenCount}\n        </Button>\n      )}\n\n      {!readOnly && (\n        <AdHocFiltersAlwaysWipCombobox ref={focusOnWipInputRef} controller={controller} onInputClick={handleExpand} />\n      )}\n\n      {enableGroupBy && (\n        <>\n          <div className={styles.sectionDivider} />\n          <span className={styles.groupByLabel}>\n            {t('grafana-scenes.variables.adhoc-filters-combobox-renderer.group-by-label', 'Group by:')}\n          </span>\n          {!readOnly && valueRecommendations && <AdHocGroupByRecommendationsRenderer model={valueRecommendations} />}\n\n          {groupByFiltersToRender.map((filter, index) => (\n            <GroupByPill\n              key={`groupby-${index}-${filter.key}`}\n              filter={filter}\n              controller={controller}\n              readOnly={readOnly || filter.readOnly}\n              focusOnWipInputRef={focusOnGroupByWipInputRef.current}\n            />\n          ))}\n\n          {shouldCollapse && groupByHiddenCount > 0 && (\n            <Button\n              className={styles.moreIndicator}\n              fill=\"text\"\n              size=\"sm\"\n              aria-label={t(\n                'grafana-scenes.variables.adhoc-filters-combobox-renderer.show-more-group-by',\n                'Show {{count}} more group by',\n                { count: groupByHiddenCount }\n              )}\n              onClick={(e) => {\n                e.stopPropagation();\n                handleExpand();\n                setTimeout(() => focusOnGroupByWipInputRef.current?.());\n              }}\n            >\n              +{groupByHiddenCount}\n            </Button>\n          )}\n\n          {!readOnly && (\n            <AdHocFiltersAlwaysWipCombobox\n              ref={focusOnGroupByWipInputRef}\n              controller={controller}\n              onInputClick={handleExpand}\n              isGroupBy\n            />\n          )}\n\n          {groupByRestorable && (\n            <IconButton\n              name=\"history\"\n              size=\"md\"\n              className={styles.controlButton}\n              tooltip={t(\n                'grafana-scenes.variables.adhoc-filters-combobox-renderer.restore-default-group-by',\n                'Restore groupby set by this dashboard.'\n              )}\n              onClick={() => controller.restoreOriginalGroupBy?.()}\n            />\n          )}\n        </>\n      )}\n\n      {/* Right-side controls: collapse button and clear all */}\n      {(showCollapseButton || showExpandButton || !readOnly) && (\n        <div className={styles.rightControls}>\n          <div className={styles.sectionDivider} />\n\n          {showCollapseButton && (\n            <Button\n              className={styles.collapseButton}\n              fill=\"text\"\n              size=\"sm\"\n              onClick={handleCollapseToggle}\n              aria-label={t(\n                'grafana-scenes.variables.adhoc-filters-combobox-renderer.collapse-filters',\n                'Collapse filters'\n              )}\n              aria-expanded={!collapsed}\n            >\n              {t('grafana-scenes.variables.adhoc-filters-combobox-renderer.collapse', 'Collapse')}\n              <Icon name=\"angle-up\" size=\"md\" />\n            </Button>\n          )}\n\n          {showExpandButton && (\n            <IconButton\n              name=\"angle-down\"\n              size=\"md\"\n              className={styles.dropdownIndicator}\n              tooltip={t('grafana-scenes.variables.adhoc-filters-combobox-renderer.expand-filters', 'Expand filters')}\n              onClick={(e) => {\n                e.stopPropagation();\n                handleExpand();\n              }}\n            />\n          )}\n\n          {!readOnly && (\n            <IconButton\n              name=\"times\"\n              size=\"md\"\n              className={styles.controlButton}\n              tooltip={t('grafana-scenes.variables.adhoc-filters-combobox-renderer.clear-all', 'Clear all')}\n              onClick={clearAll}\n            />\n          )}\n        </div>\n      )}\n    </div>\n  );\n});\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  comboboxWrapper: css({\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    columnGap: theme.spacing(1),\n    rowGap: theme.spacing(0.5),\n    minHeight: theme.spacing(4),\n    backgroundColor: theme.components.input.background,\n    border: `1px solid ${theme.colors.border.strong}`,\n    borderRadius: theme.shape.radius.default,\n    paddingInline: theme.spacing(1),\n    paddingBlock: theme.spacing(0.5),\n    flexGrow: 1,\n    width: '100%',\n  }),\n  comboboxFocusOutline: css({\n    '&:focus-within': {\n      outline: '2px dotted transparent',\n      outlineOffset: '2px',\n      boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,\n      transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,\n      transitionDuration: '0.2s',\n      transitionProperty: 'outline, outline-offset, box-shadow',\n      zIndex: 2,\n    },\n  }),\n  collapsed: css({\n    flexWrap: 'nowrap',\n    overflow: 'hidden',\n  }),\n  rightControls: css({\n    display: 'flex',\n    alignItems: 'center',\n    marginLeft: 'auto',\n    flexShrink: 0,\n    gap: theme.spacing(1.5),\n  }),\n  moreIndicator: css({\n    color: theme.colors.text.primary,\n    background: theme.colors.action.selected,\n    height: 'auto',\n    lineHeight: 'normal',\n    alignSelf: 'stretch',\n    '&:hover': {\n      background: theme.colors.action.hover,\n    },\n  }),\n  dropdownIndicator: css({\n    color: theme.colors.text.secondary,\n    flexShrink: 0,\n  }),\n  collapseButton: css({\n    color: theme.colors.text.secondary,\n    padding: 0,\n    height: 'auto',\n    lineHeight: 'normal',\n    '&:hover': {\n      background: 'transparent',\n      color: theme.colors.text.primary,\n    },\n  }),\n  sectionDivider: css({\n    width: '1px',\n    alignSelf: 'stretch',\n    backgroundColor: theme.colors.border.weak,\n    flexShrink: 0,\n  }),\n  groupByLabel: css({\n    ...theme.typography.bodySmall,\n    fontWeight: theme.typography.fontWeightBold,\n    color: theme.colors.text.primary,\n    whiteSpace: 'nowrap',\n  }),\n  controlButton: css({\n    color: theme.colors.text.secondary,\n    '&:hover': {\n      color: theme.colors.text.primary,\n    },\n  }),\n});\n"],"names":["AdHocFiltersComboboxRenderer","_a"],"mappings":"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"}
+{"version":3,"file":"AdHocFiltersComboboxRenderer.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Button, IconButton, Icon, useStyles2, useTheme2 } from '@grafana/ui';\nimport { t } from '@grafana/i18n';\nimport React, { memo, useRef, useState, useEffect } from 'react';\nimport { useMeasure } from 'react-use';\nimport { AdHocFiltersController } from '../controller/AdHocFiltersController';\nimport { AdHocFilterPill } from './AdHocFilterPill';\nimport { AdHocFiltersAlwaysWipCombobox } from './AdHocFiltersAlwaysWipCombobox';\nimport { GroupByPill } from './GroupByPill';\nimport { isGroupByFilter } from '../AdHocFiltersVariable';\nimport { AdHocGroupByRecommendationsRenderer } from '../AdHocFiltersRecommendations';\n\nconst MAX_VISIBLE_FILTERS_DEFAULT = 4;\nconst MAX_VISIBLE_FILTERS_WITH_GROUP_BY = 2;\nconst MAX_VISIBLE_GROUP_BY = 2;\n\ninterface Props {\n  controller: AdHocFiltersController;\n}\n\nexport const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRenderer({ controller }: Props) {\n  const { originFilters, filters, readOnly, collapsible, valueRecommendations, enableGroupBy, groupByRestorable } =\n    controller.useState();\n  const styles = useStyles2(getStyles);\n  const theme = useTheme2();\n  const [collapsed, setCollapsed] = useState(true);\n  const [wrapperRef, { height: wrapperHeight }] = useMeasure<HTMLDivElement>();\n\n  const clearAll = () => {\n    controller.clearAll?.();\n  };\n\n  // ref that focuses on the always wip filter input\n  // defined in the combobox component via useImperativeHandle\n  const focusOnWipInputRef = useRef<() => void>();\n  const focusOnGroupByWipInputRef = useRef<() => void>();\n\n  // Single line height is approximately minHeight (4 spacing units) + small buffer\n  const singleLineThreshold = theme.spacing.gridSize * 5;\n  const isMultiLine = collapsible && wrapperHeight > singleLineThreshold;\n\n  const handleCollapseToggle = (event: React.MouseEvent) => {\n    event.stopPropagation();\n    if (collapsible) {\n      setCollapsed(true);\n    }\n  };\n\n  const handleExpand = () => {\n    if (collapsible && collapsed) {\n      setCollapsed(false);\n    }\n  };\n\n  // Combine all visible filters into one array\n  const visibleOriginFilters = originFilters?.filter((f) => f.origin && !f.hidden && !f.dismissedGroupBy) ?? [];\n  const visibleFilters = filters.filter((f) => !f.hidden);\n  const allFilters = [...visibleOriginFilters, ...visibleFilters];\n  const totalFiltersCount = allFilters.length;\n\n  const adhocFilters = allFilters.filter((f) => !isGroupByFilter(f));\n  const groupByFilters = allFilters.filter(isGroupByFilter);\n\n  const shouldCollapse = collapsible && collapsed && totalFiltersCount > 0;\n\n  const maxVisibleAdhocFilters = enableGroupBy ? MAX_VISIBLE_FILTERS_WITH_GROUP_BY : MAX_VISIBLE_FILTERS_DEFAULT;\n  const adhocFiltersToRender = shouldCollapse ? adhocFilters.slice(0, maxVisibleAdhocFilters) : adhocFilters;\n  const adhocHiddenCount = shouldCollapse ? Math.max(0, adhocFilters.length - maxVisibleAdhocFilters) : 0;\n\n  const groupByFiltersToRender = shouldCollapse ? groupByFilters.slice(0, MAX_VISIBLE_GROUP_BY) : groupByFilters;\n  const groupByHiddenCount = shouldCollapse ? Math.max(0, groupByFilters.length - MAX_VISIBLE_GROUP_BY) : 0;\n  const variableControlId = controller.getControlId();\n\n  // Reset collapsed state when there are no filters (only when collapsible)\n  useEffect(() => {\n    if (collapsible && totalFiltersCount === 0 && collapsed) {\n      setCollapsed(false);\n    }\n  }, [collapsible, totalFiltersCount, collapsed]);\n\n  // Only show collapse button when expanded and content wraps to multiple lines\n  const showCollapseButton = collapsible && isMultiLine && !collapsed;\n  const showExpandButton = shouldCollapse && (adhocHiddenCount > 0 || groupByHiddenCount > 0);\n\n  return (\n    <div\n      ref={wrapperRef}\n      className={cx(styles.comboboxWrapper, {\n        [styles.comboboxFocusOutline]: !readOnly,\n        [styles.collapsed]: shouldCollapse,\n      })}\n    >\n      {!readOnly && valueRecommendations && <valueRecommendations.Component model={valueRecommendations} />}\n\n      {adhocFiltersToRender.length > 0 && (\n        // if there are filters already selected, this makes sure\n        // that the input is announced before focussing on the pills\n        <span\n          tabIndex={0}\n          aria-labelledby={variableControlId}\n          className={styles.screenReaderOnlyLabel}\n          data-testid=\"AdHocFilter-label-announcer\"\n        />\n      )}\n\n      {adhocFiltersToRender.map((filter, index) => (\n        <AdHocFilterPill\n          key={`${filter.origin ? 'origin-' : ''}${index}-${filter.key}`}\n          filter={filter}\n          controller={controller}\n          readOnly={readOnly || filter.readOnly}\n          focusOnWipInputRef={focusOnWipInputRef.current}\n        />\n      ))}\n\n      {shouldCollapse && adhocHiddenCount > 0 && (\n        <Button\n          className={styles.moreIndicator}\n          fill=\"text\"\n          size=\"sm\"\n          aria-label={t(\n            'grafana-scenes.variables.adhoc-filters-combobox-renderer.show-more-filters',\n            'Show {{count}} more filters',\n            { count: adhocHiddenCount }\n          )}\n          onClick={(e) => {\n            e.stopPropagation();\n            handleExpand();\n            setTimeout(() => focusOnWipInputRef.current?.());\n          }}\n        >\n          +{adhocHiddenCount}\n        </Button>\n      )}\n\n      {!readOnly && (\n        <AdHocFiltersAlwaysWipCombobox ref={focusOnWipInputRef} controller={controller} onInputClick={handleExpand} />\n      )}\n\n      {enableGroupBy && (\n        <>\n          <div className={styles.sectionDivider} />\n          <span className={styles.groupByLabel}>\n            {t('grafana-scenes.variables.adhoc-filters-combobox-renderer.group-by-label', 'Group by:')}\n          </span>\n          {!readOnly && valueRecommendations && <AdHocGroupByRecommendationsRenderer model={valueRecommendations} />}\n\n          {groupByFiltersToRender.map((filter, index) => (\n            <GroupByPill\n              key={`groupby-${index}-${filter.key}`}\n              filter={filter}\n              controller={controller}\n              readOnly={readOnly || filter.readOnly}\n              focusOnWipInputRef={focusOnGroupByWipInputRef.current}\n            />\n          ))}\n\n          {shouldCollapse && groupByHiddenCount > 0 && (\n            <Button\n              className={styles.moreIndicator}\n              fill=\"text\"\n              size=\"sm\"\n              aria-label={t(\n                'grafana-scenes.variables.adhoc-filters-combobox-renderer.show-more-group-by',\n                'Show {{count}} more group by',\n                { count: groupByHiddenCount }\n              )}\n              onClick={(e) => {\n                e.stopPropagation();\n                handleExpand();\n                setTimeout(() => focusOnGroupByWipInputRef.current?.());\n              }}\n            >\n              +{groupByHiddenCount}\n            </Button>\n          )}\n\n          {!readOnly && (\n            <AdHocFiltersAlwaysWipCombobox\n              ref={focusOnGroupByWipInputRef}\n              controller={controller}\n              onInputClick={handleExpand}\n              isGroupBy\n            />\n          )}\n\n          {groupByRestorable && (\n            <IconButton\n              name=\"history\"\n              size=\"md\"\n              className={styles.controlButton}\n              tooltip={t(\n                'grafana-scenes.variables.adhoc-filters-combobox-renderer.restore-default-group-by',\n                'Restore groupby set by this dashboard.'\n              )}\n              onClick={() => controller.restoreOriginalGroupBy?.()}\n            />\n          )}\n        </>\n      )}\n\n      {/* Right-side controls: collapse button and clear all */}\n      {(showCollapseButton || showExpandButton || !readOnly) && (\n        <div className={styles.rightControls}>\n          <div className={styles.sectionDivider} />\n\n          {showCollapseButton && (\n            <Button\n              className={styles.collapseButton}\n              fill=\"text\"\n              size=\"sm\"\n              onClick={handleCollapseToggle}\n              aria-label={t(\n                'grafana-scenes.variables.adhoc-filters-combobox-renderer.collapse-filters',\n                'Collapse filters'\n              )}\n              aria-expanded={!collapsed}\n            >\n              {t('grafana-scenes.variables.adhoc-filters-combobox-renderer.collapse', 'Collapse')}\n              <Icon name=\"angle-up\" size=\"md\" />\n            </Button>\n          )}\n\n          {showExpandButton && (\n            <IconButton\n              name=\"angle-down\"\n              size=\"md\"\n              className={styles.dropdownIndicator}\n              tooltip={t('grafana-scenes.variables.adhoc-filters-combobox-renderer.expand-filters', 'Expand filters')}\n              onClick={(e) => {\n                e.stopPropagation();\n                handleExpand();\n              }}\n            />\n          )}\n\n          {!readOnly && (\n            <IconButton\n              name=\"times\"\n              size=\"md\"\n              className={styles.controlButton}\n              tooltip={t('grafana-scenes.variables.adhoc-filters-combobox-renderer.clear-all', 'Clear all')}\n              onClick={clearAll}\n            />\n          )}\n        </div>\n      )}\n    </div>\n  );\n});\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  comboboxWrapper: css({\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    columnGap: theme.spacing(1),\n    rowGap: theme.spacing(0.5),\n    minHeight: theme.spacing(4),\n    backgroundColor: theme.components.input.background,\n    border: `1px solid ${theme.colors.border.strong}`,\n    borderRadius: theme.shape.radius.default,\n    paddingInline: theme.spacing(1),\n    paddingBlock: theme.spacing(0.5),\n    flexGrow: 1,\n    width: '100%',\n  }),\n  comboboxFocusOutline: css({\n    '&:focus-within': {\n      outline: '2px dotted transparent',\n      outlineOffset: '2px',\n      boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,\n      transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,\n      transitionDuration: '0.2s',\n      transitionProperty: 'outline, outline-offset, box-shadow',\n      zIndex: 2,\n    },\n  }),\n  collapsed: css({\n    flexWrap: 'nowrap',\n    overflow: 'hidden',\n  }),\n  rightControls: css({\n    display: 'flex',\n    alignItems: 'center',\n    marginLeft: 'auto',\n    flexShrink: 0,\n    gap: theme.spacing(1.5),\n  }),\n  moreIndicator: css({\n    color: theme.colors.text.primary,\n    background: theme.colors.action.selected,\n    height: 'auto',\n    lineHeight: 'normal',\n    alignSelf: 'stretch',\n    '&:hover': {\n      background: theme.colors.action.hover,\n    },\n  }),\n  dropdownIndicator: css({\n    color: theme.colors.text.secondary,\n    flexShrink: 0,\n  }),\n  collapseButton: css({\n    color: theme.colors.text.secondary,\n    padding: 0,\n    height: 'auto',\n    lineHeight: 'normal',\n    '&:hover': {\n      background: 'transparent',\n      color: theme.colors.text.primary,\n    },\n  }),\n  sectionDivider: css({\n    width: '1px',\n    alignSelf: 'stretch',\n    backgroundColor: theme.colors.border.weak,\n    flexShrink: 0,\n  }),\n  groupByLabel: css({\n    ...theme.typography.bodySmall,\n    fontWeight: theme.typography.fontWeightBold,\n    color: theme.colors.text.primary,\n    whiteSpace: 'nowrap',\n  }),\n  controlButton: css({\n    color: theme.colors.text.secondary,\n    '&:hover': {\n      color: theme.colors.text.primary,\n    },\n  }),\n  screenReaderOnlyLabel: css({\n    position: 'absolute',\n    width: '1px',\n    height: '1px',\n    padding: 0,\n    margin: '-1px',\n    overflow: 'hidden',\n    clip: 'rect(0, 0, 0, 0)',\n    whiteSpace: 'nowrap',\n    border: 0,\n  }),\n});\n"],"names":["AdHocFiltersComboboxRenderer","_a"],"mappings":";;;;;;;;;;;AAaA,MAAM,2BAA8B,GAAA,CAAA;AACpC,MAAM,iCAAoC,GAAA,CAAA;AAC1C,MAAM,oBAAuB,GAAA,CAAA;AAMtB,MAAM,+BAA+B,IAAK,CAAA,SAASA,6BAA6B,CAAA,EAAE,YAAqB,EAAA;AArB9G,EAAA,IAAA,EAAA;AAsBE,EAAM,MAAA,EAAE,aAAe,EAAA,OAAA,EAAS,QAAU,EAAA,WAAA,EAAa,sBAAsB,aAAe,EAAA,iBAAA,EAC1F,GAAA,UAAA,CAAW,QAAS,EAAA;AACtB,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,IAAI,CAAA;AAC/C,EAAA,MAAM,CAAC,UAAY,EAAA,EAAE,QAAQ,aAAc,EAAC,IAAI,UAA2B,EAAA;AAE3E,EAAA,MAAM,WAAW,MAAM;AA7BzB,IAAAC,IAAAA,GAAAA;AA8BI,IAAA,CAAAA,GAAA,GAAA,UAAA,CAAW,QAAX,KAAA,IAAA,GAAA,MAAA,GAAAA,GAAA,CAAA,IAAA,CAAA,UAAA,CAAA;AAAA,GACF;AAIA,EAAA,MAAM,qBAAqB,MAAmB,EAAA;AAC9C,EAAA,MAAM,4BAA4B,MAAmB,EAAA;AAGrD,EAAM,MAAA,mBAAA,GAAsB,KAAM,CAAA,OAAA,CAAQ,QAAW,GAAA,CAAA;AACrD,EAAM,MAAA,WAAA,GAAc,eAAe,aAAgB,GAAA,mBAAA;AAEnD,EAAM,MAAA,oBAAA,GAAuB,CAAC,KAA4B,KAAA;AACxD,IAAA,KAAA,CAAM,eAAgB,EAAA;AACtB,IAAA,IAAI,WAAa,EAAA;AACf,MAAA,YAAA,CAAa,IAAI,CAAA;AAAA;AACnB,GACF;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,IAAI,eAAe,SAAW,EAAA;AAC5B,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA;AACpB,GACF;AAGA,EAAA,MAAM,oBAAuB,GAAA,CAAA,EAAA,GAAA,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,MAAO,CAAA,CAAC,MAAM,CAAE,CAAA,MAAA,IAAU,CAAC,CAAA,CAAE,MAAU,IAAA,CAAC,CAAE,CAAA,gBAAA,CAAA,KAAzD,YAA8E,EAAC;AAC5G,EAAA,MAAM,iBAAiB,OAAQ,CAAA,MAAA,CAAO,CAAC,CAAM,KAAA,CAAC,EAAE,MAAM,CAAA;AACtD,EAAA,MAAM,UAAa,GAAA,CAAC,GAAG,oBAAA,EAAsB,GAAG,cAAc,CAAA;AAC9D,EAAA,MAAM,oBAAoB,UAAW,CAAA,MAAA;AAErC,EAAM,MAAA,YAAA,GAAe,WAAW,MAAO,CAAA,CAAC,MAAM,CAAC,eAAA,CAAgB,CAAC,CAAC,CAAA;AACjE,EAAM,MAAA,cAAA,GAAiB,UAAW,CAAA,MAAA,CAAO,eAAe,CAAA;AAExD,EAAM,MAAA,cAAA,GAAiB,WAAe,IAAA,SAAA,IAAa,iBAAoB,GAAA,CAAA;AAEvE,EAAM,MAAA,sBAAA,GAAyB,gBAAgB,iCAAoC,GAAA,2BAAA;AACnF,EAAA,MAAM,uBAAuB,cAAiB,GAAA,YAAA,CAAa,KAAM,CAAA,CAAA,EAAG,sBAAsB,CAAI,GAAA,YAAA;AAC9F,EAAM,MAAA,gBAAA,GAAmB,iBAAiB,IAAK,CAAA,GAAA,CAAI,GAAG,YAAa,CAAA,MAAA,GAAS,sBAAsB,CAAI,GAAA,CAAA;AAEtG,EAAA,MAAM,yBAAyB,cAAiB,GAAA,cAAA,CAAe,KAAM,CAAA,CAAA,EAAG,oBAAoB,CAAI,GAAA,cAAA;AAChG,EAAM,MAAA,kBAAA,GAAqB,iBAAiB,IAAK,CAAA,GAAA,CAAI,GAAG,cAAe,CAAA,MAAA,GAAS,oBAAoB,CAAI,GAAA,CAAA;AACxG,EAAM,MAAA,iBAAA,GAAoB,WAAW,YAAa,EAAA;AAGlD,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,WAAA,IAAe,iBAAsB,KAAA,CAAA,IAAK,SAAW,EAAA;AACvD,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA;AACpB,GACC,EAAA,CAAC,WAAa,EAAA,iBAAA,EAAmB,SAAS,CAAC,CAAA;AAG9C,EAAM,MAAA,kBAAA,GAAqB,WAAe,IAAA,WAAA,IAAe,CAAC,SAAA;AAC1D,EAAA,MAAM,gBAAmB,GAAA,cAAA,KAAmB,gBAAmB,GAAA,CAAA,IAAK,kBAAqB,GAAA,CAAA,CAAA;AAEzF,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,UAAA;AAAA,MACL,SAAA,EAAW,EAAG,CAAA,MAAA,CAAO,eAAiB,EAAA;AAAA,QACpC,CAAC,MAAA,CAAO,oBAAoB,GAAG,CAAC,QAAA;AAAA,QAChC,CAAC,MAAO,CAAA,SAAS,GAAG;AAAA,OACrB;AAAA,KAAA;AAAA,IAEA,CAAC,YAAY,oBAAwB,oBAAA,KAAA,CAAA,aAAA,CAAC,qBAAqB,SAArB,EAAA,EAA+B,OAAO,oBAAsB,EAAA,CAAA;AAAA,IAElG,qBAAqB,MAAS,GAAA,CAAA;AAAA;AAAA,oBAG7B,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,QAAU,EAAA,CAAA;AAAA,QACV,iBAAiB,EAAA,iBAAA;AAAA,QACjB,WAAW,MAAO,CAAA,qBAAA;AAAA,QAClB,aAAY,EAAA;AAAA;AAAA,KACd;AAAA,IAGD,oBAAqB,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,KACjC,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,CAAG,EAAA,MAAA,CAAO,MAAS,GAAA,SAAA,GAAY,EAAE,CAAG,EAAA,KAAK,CAAI,CAAA,EAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA,QAC5D,MAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA,EAAU,YAAY,MAAO,CAAA,QAAA;AAAA,QAC7B,oBAAoB,kBAAmB,CAAA;AAAA;AAAA,KAE1C,CAAA;AAAA,IAEA,cAAA,IAAkB,mBAAmB,CACpC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAO,CAAA,aAAA;AAAA,QAClB,IAAK,EAAA,MAAA;AAAA,QACL,IAAK,EAAA,IAAA;AAAA,QACL,YAAY,EAAA,CAAA;AAAA,UACV,4EAAA;AAAA,UACA,6BAAA;AAAA,UACA,EAAE,OAAO,gBAAiB;AAAA,SAC5B;AAAA,QACA,OAAA,EAAS,CAAC,CAAM,KAAA;AACd,UAAA,CAAA,CAAE,eAAgB,EAAA;AAClB,UAAa,YAAA,EAAA;AACb,UAAA,UAAA,CAAW,MAAG;AAjI1B,YAAAA,IAAAA,GAAAA;AAiI6B,YAAA,OAAA,CAAAA,GAAA,GAAA,kBAAA,CAAmB,OAAnB,KAAA,IAAA,GAAA,MAAA,GAAAA,GAAA,CAAA,IAAA,CAAA,kBAAA,CAAA;AAAA,WAA8B,CAAA;AAAA;AACjD,OAAA;AAAA,MACD,GAAA;AAAA,MACG;AAAA,KACJ;AAAA,IAGD,CAAC,4BACC,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA,EAA8B,KAAK,kBAAoB,EAAA,UAAA,EAAwB,cAAc,YAAc,EAAA,CAAA;AAAA,IAG7G,aACC,oBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,cAAgB,EAAA,CAAA,kBACtC,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,MAAA,CAAO,gBACrB,CAAE,CAAA,yEAAA,EAA2E,WAAW,CAC3F,CACC,EAAA,CAAC,QAAY,IAAA,oBAAA,oBAAyB,KAAA,CAAA,aAAA,CAAA,mCAAA,EAAA,EAAoC,KAAO,EAAA,oBAAA,EAAsB,CAEvG,EAAA,sBAAA,CAAuB,GAAI,CAAA,CAAC,QAAQ,KACnC,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,CAAA,QAAA,EAAW,KAAK,CAAA,CAAA,EAAI,OAAO,GAAG,CAAA,CAAA;AAAA,QACnC,MAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA,EAAU,YAAY,MAAO,CAAA,QAAA;AAAA,QAC7B,oBAAoB,yBAA0B,CAAA;AAAA;AAAA,KAEjD,CAAA,EAEA,cAAkB,IAAA,kBAAA,GAAqB,CACtC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAO,CAAA,aAAA;AAAA,QAClB,IAAK,EAAA,MAAA;AAAA,QACL,IAAK,EAAA,IAAA;AAAA,QACL,YAAY,EAAA,CAAA;AAAA,UACV,6EAAA;AAAA,UACA,8BAAA;AAAA,UACA,EAAE,OAAO,kBAAmB;AAAA,SAC9B;AAAA,QACA,OAAA,EAAS,CAAC,CAAM,KAAA;AACd,UAAA,CAAA,CAAE,eAAgB,EAAA;AAClB,UAAa,YAAA,EAAA;AACb,UAAA,UAAA,CAAW,MAAG;AA3K9B,YAAAA,IAAAA,GAAAA;AA2KiC,YAAA,OAAA,CAAAA,GAAA,GAAA,yBAAA,CAA0B,OAA1B,KAAA,IAAA,GAAA,MAAA,GAAAA,GAAA,CAAA,IAAA,CAAA,yBAAA,CAAA;AAAA,WAAqC,CAAA;AAAA;AACxD,OAAA;AAAA,MACD,GAAA;AAAA,MACG;AAAA,KACJ,EAGD,CAAC,QACA,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,6BAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,yBAAA;AAAA,QACL,UAAA;AAAA,QACA,YAAc,EAAA,YAAA;AAAA,QACd,SAAS,EAAA;AAAA;AAAA,OAIZ,iBACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,SAAA;AAAA,QACL,IAAK,EAAA,IAAA;AAAA,QACL,WAAW,MAAO,CAAA,aAAA;AAAA,QAClB,OAAS,EAAA,CAAA;AAAA,UACP,mFAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,SAAS,MAAG;AApM1B,UAAAA,IAAAA,GAAAA;AAoM6B,UAAA,OAAA,CAAAA,GAAA,GAAA,UAAA,CAAW,sBAAX,KAAA,IAAA,GAAA,MAAA,GAAAA,GAAA,CAAA,IAAA,CAAA,UAAA,CAAA;AAAA;AAAA;AAAA,KAGrB,CAAA;AAAA,IAAA,CAIA,kBAAsB,IAAA,gBAAA,IAAoB,CAAC,QAAA,yCAC1C,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,aAAA,EAAA,sCACpB,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,cAAA,EAAgB,GAEtC,kBACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAO,CAAA,cAAA;AAAA,QAClB,IAAK,EAAA,MAAA;AAAA,QACL,IAAK,EAAA,IAAA;AAAA,QACL,OAAS,EAAA,oBAAA;AAAA,QACT,YAAY,EAAA,CAAA;AAAA,UACV,2EAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,iBAAe,CAAC;AAAA,OAAA;AAAA,MAEf,CAAA,CAAE,qEAAqE,UAAU,CAAA;AAAA,sBACjF,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAK,EAAA,UAAA,EAAW,MAAK,IAAK,EAAA;AAAA,OAInC,gBACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,YAAA;AAAA,QACL,IAAK,EAAA,IAAA;AAAA,QACL,WAAW,MAAO,CAAA,iBAAA;AAAA,QAClB,OAAA,EAAS,CAAE,CAAA,yEAAA,EAA2E,gBAAgB,CAAA;AAAA,QACtG,OAAA,EAAS,CAAC,CAAM,KAAA;AACd,UAAA,CAAA,CAAE,eAAgB,EAAA;AAClB,UAAa,YAAA,EAAA;AAAA;AACf;AAAA,KACF,EAGD,CAAC,QACA,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,OAAA;AAAA,QACL,IAAK,EAAA,IAAA;AAAA,QACL,WAAW,MAAO,CAAA,aAAA;AAAA,QAClB,OAAA,EAAS,CAAE,CAAA,oEAAA,EAAsE,WAAW,CAAA;AAAA,QAC5F,OAAS,EAAA;AAAA;AAAA,KAGf;AAAA,GAEJ;AAEJ,CAAC;AAED,MAAM,SAAA,GAAY,CAAC,KAA0B,MAAA;AAAA,EAC3C,iBAAiB,GAAI,CAAA;AAAA,IACnB,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA,MAAA;AAAA,IACV,UAAY,EAAA,QAAA;AAAA,IACZ,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC1B,MAAA,EAAQ,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,IACzB,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC1B,eAAA,EAAiB,KAAM,CAAA,UAAA,CAAW,KAAM,CAAA,UAAA;AAAA,IACxC,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,OAAO,MAAM,CAAA,CAAA;AAAA,IAC/C,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,IACjC,aAAA,EAAe,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC9B,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,IAC/B,QAAU,EAAA,CAAA;AAAA,IACV,KAAO,EAAA;AAAA,GACR,CAAA;AAAA,EACD,sBAAsB,GAAI,CAAA;AAAA,IACxB,gBAAkB,EAAA;AAAA,MAChB,OAAS,EAAA,wBAAA;AAAA,MACT,aAAe,EAAA,KAAA;AAAA,MACf,SAAA,EAAW,CAAa,UAAA,EAAA,KAAA,CAAM,MAAO,CAAA,UAAA,CAAW,MAAM,CAAiB,cAAA,EAAA,KAAA,CAAM,MAAO,CAAA,OAAA,CAAQ,IAAI,CAAA,CAAA;AAAA,MAChG,wBAA0B,EAAA,CAAA,8BAAA,CAAA;AAAA,MAC1B,kBAAoB,EAAA,MAAA;AAAA,MACpB,kBAAoB,EAAA,qCAAA;AAAA,MACpB,MAAQ,EAAA;AAAA;AACV,GACD,CAAA;AAAA,EACD,WAAW,GAAI,CAAA;AAAA,IACb,QAAU,EAAA,QAAA;AAAA,IACV,QAAU,EAAA;AAAA,GACX,CAAA;AAAA,EACD,eAAe,GAAI,CAAA;AAAA,IACjB,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,UAAY,EAAA,MAAA;AAAA,IACZ,UAAY,EAAA,CAAA;AAAA,IACZ,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,GAAG;AAAA,GACvB,CAAA;AAAA,EACD,eAAe,GAAI,CAAA;AAAA,IACjB,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,OAAA;AAAA,IACzB,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,QAAA;AAAA,IAChC,MAAQ,EAAA,MAAA;AAAA,IACR,UAAY,EAAA,QAAA;AAAA,IACZ,SAAW,EAAA,SAAA;AAAA,IACX,SAAW,EAAA;AAAA,MACT,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA;AAAA;AAClC,GACD,CAAA;AAAA,EACD,mBAAmB,GAAI,CAAA;AAAA,IACrB,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,IACzB,UAAY,EAAA;AAAA,GACb,CAAA;AAAA,EACD,gBAAgB,GAAI,CAAA;AAAA,IAClB,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,IACzB,OAAS,EAAA,CAAA;AAAA,IACT,MAAQ,EAAA,MAAA;AAAA,IACR,UAAY,EAAA,QAAA;AAAA,IACZ,SAAW,EAAA;AAAA,MACT,UAAY,EAAA,aAAA;AAAA,MACZ,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,GACD,CAAA;AAAA,EACD,gBAAgB,GAAI,CAAA;AAAA,IAClB,KAAO,EAAA,KAAA;AAAA,IACP,SAAW,EAAA,SAAA;AAAA,IACX,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,IAAA;AAAA,IACrC,UAAY,EAAA;AAAA,GACb,CAAA;AAAA,EACD,cAAc,GAAI,CAAA;AAAA,IAChB,GAAG,MAAM,UAAW,CAAA,SAAA;AAAA,IACpB,UAAA,EAAY,MAAM,UAAW,CAAA,cAAA;AAAA,IAC7B,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,OAAA;AAAA,IACzB,UAAY,EAAA;AAAA,GACb,CAAA;AAAA,EACD,eAAe,GAAI,CAAA;AAAA,IACjB,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,IACzB,SAAW,EAAA;AAAA,MACT,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,GACD,CAAA;AAAA,EACD,uBAAuB,GAAI,CAAA;AAAA,IACzB,QAAU,EAAA,UAAA;AAAA,IACV,KAAO,EAAA,KAAA;AAAA,IACP,MAAQ,EAAA,KAAA;AAAA,IACR,OAAS,EAAA,CAAA;AAAA,IACT,MAAQ,EAAA,MAAA;AAAA,IACR,QAAU,EAAA,QAAA;AAAA,IACV,IAAM,EAAA,kBAAA;AAAA,IACN,UAAY,EAAA,QAAA;AAAA,IACZ,MAAQ,EAAA;AAAA,GACT;AACH,CAAA,CAAA;;;;"}

package/dist/esm/variables/adhoc/controller/AdHocFiltersVariableController.js

@@ -1,5 +1,6 @@
 import { getQueryController } from '../../../core/sceneGraph/getQueryController.js';
 import { getInteractionTracker } from '../../../core/sceneGraph/getInteractionTracker.js';
+import { getVariableControlId } from '../../utils.js';
 
 class AdHocFiltersVariableController {
   constructor(model) {
@@ -81,6 +82,9 @@ class AdHocFiltersVariableController {
     const interactionTracker = getInteractionTracker(this.model);
     interactionTracker == null ? void 0 : interactionTracker.stopInteraction();
   }
+  getControlId() {
+    return getVariableControlId(this.model.state.type, this.model.state.key);
+  }
 }
 
 export { AdHocFiltersVariableController };

package/dist/esm/variables/adhoc/controller/AdHocFiltersVariableController.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdHocFiltersVariableController.js","sources":["../../../../../src/variables/adhoc/controller/AdHocFiltersVariableController.ts"],"sourcesContent":["import { SelectableValue } from '@grafana/data';\nimport { AdHocFilterWithLabels, AdHocFiltersVariable } from '../AdHocFiltersVariable';\nimport { AdHocFiltersController, AdHocFiltersControllerState } from './AdHocFiltersController';\nimport { getQueryController } from '../../../core/sceneGraph/getQueryController';\nimport { getInteractionTracker } from '../../../core/sceneGraph/getInteractionTracker';\n\n/**\n * Adapter that wraps AdHocFiltersVariable to implement the AdHocFiltersController interface.\n * This allows the combobox UI to work with the variable while keeping the UI decoupled.\n */\nexport class AdHocFiltersVariableController implements AdHocFiltersController {\n  public constructor(private model: AdHocFiltersVariable) {}\n\n  public useState(): AdHocFiltersControllerState {\n    const state = this.model.useState();\n\n    return {\n      filters: state.filters,\n      originFilters: state.originFilters,\n      readOnly: state.readOnly,\n      allowCustomValue: state.allowCustomValue,\n      supportsMultiValueOperators: state.supportsMultiValueOperators,\n      onAddCustomValue: state.onAddCustomValue,\n      wip: state._wip,\n      inputPlaceholder: state.inputPlaceholder,\n      groupByInputPlaceholder: state.groupByInputPlaceholder,\n      collapsible: state.collapsible,\n      valueRecommendations: this.model.getRecommendations(),\n      drilldownRecommendationsEnabled: state.drilldownRecommendationsEnabled,\n      enableGroupBy: state.enableGroupBy,\n      groupByRestorable: this.model.isGroupByRestorable(),\n    };\n  }\n\n  public async getKeys(currentKey: string | null): Promise<Array<SelectableValue<string>>> {\n    return this.model._getKeys(currentKey);\n  }\n\n  public async getGroupByKeys(currentKey: string | null): Promise<Array<SelectableValue<string>>> {\n    return this.model._getGroupByKeys(currentKey);\n  }\n\n  public async getValuesFor(filter: AdHocFilterWithLabels): Promise<Array<SelectableValue<string>>> {\n    return this.model._getValuesFor(filter);\n  }\n\n  public getOperators(): Array<SelectableValue<string>> {\n    return this.model._getOperators();\n  }\n\n  public updateFilter(filter: AdHocFilterWithLabels, update: Partial<AdHocFilterWithLabels>): void {\n    this.model._updateFilter(filter, update);\n  }\n\n  public updateFilters(\n    filters: AdHocFilterWithLabels[],\n    options?: {\n      skipPublish?: boolean;\n      forcePublish?: boolean;\n    }\n  ): void {\n    this.model.updateFilters(filters, options);\n  }\n\n  public updateToMatchAll(filter: AdHocFilterWithLabels): void {\n    this.model.updateToMatchAll(filter);\n  }\n\n  public removeFilter(filter: AdHocFilterWithLabels): void {\n    this.model._removeFilter(filter);\n  }\n\n  public removeLastFilter(): void {\n    this.model._removeLastFilter();\n  }\n\n  public handleComboboxBackspace(filter: AdHocFilterWithLabels): void {\n    this.model._handleComboboxBackspace(filter);\n  }\n\n  public addWip(): void {\n    this.model._addWip();\n  }\n\n  public addGroupByFilter(item: SelectableValue<string>): void {\n    this.model._addGroupByFilter(item);\n  }\n\n  public restoreOriginalFilter(filter: AdHocFilterWithLabels): void {\n    this.model.restoreOriginalFilter(filter);\n  }\n\n  public restoreOriginalGroupBy(): void {\n    this.model.restoreOriginalGroupBy();\n  }\n\n  public clearAll(): void {\n    this.model.clearAll();\n  }\n\n  public startProfile(name: string): void {\n    const queryController = getQueryController(this.model);\n    queryController?.startProfile(name);\n  }\n\n  public startInteraction(name: string): void {\n    const interactionTracker = getInteractionTracker(this.model);\n    interactionTracker?.startInteraction(name);\n  }\n\n  public stopInteraction(): void {\n    const interactionTracker = getInteractionTracker(this.model);\n    interactionTracker?.stopInteraction();\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AdHocFiltersVariableController.js","sources":["../../../../../src/variables/adhoc/controller/AdHocFiltersVariableController.ts"],"sourcesContent":["import { SelectableValue } from '@grafana/data';\nimport { AdHocFilterWithLabels, AdHocFiltersVariable } from '../AdHocFiltersVariable';\nimport { AdHocFiltersController, AdHocFiltersControllerState } from './AdHocFiltersController';\nimport { getQueryController } from '../../../core/sceneGraph/getQueryController';\nimport { getInteractionTracker } from '../../../core/sceneGraph/getInteractionTracker';\nimport { getVariableControlId } from '../../utils';\n\n/**\n * Adapter that wraps AdHocFiltersVariable to implement the AdHocFiltersController interface.\n * This allows the combobox UI to work with the variable while keeping the UI decoupled.\n */\nexport class AdHocFiltersVariableController implements AdHocFiltersController {\n  public constructor(private model: AdHocFiltersVariable) {}\n\n  public useState(): AdHocFiltersControllerState {\n    const state = this.model.useState();\n\n    return {\n      filters: state.filters,\n      originFilters: state.originFilters,\n      readOnly: state.readOnly,\n      allowCustomValue: state.allowCustomValue,\n      supportsMultiValueOperators: state.supportsMultiValueOperators,\n      onAddCustomValue: state.onAddCustomValue,\n      wip: state._wip,\n      inputPlaceholder: state.inputPlaceholder,\n      groupByInputPlaceholder: state.groupByInputPlaceholder,\n      collapsible: state.collapsible,\n      valueRecommendations: this.model.getRecommendations(),\n      drilldownRecommendationsEnabled: state.drilldownRecommendationsEnabled,\n      enableGroupBy: state.enableGroupBy,\n      groupByRestorable: this.model.isGroupByRestorable(),\n    };\n  }\n\n  public async getKeys(currentKey: string | null): Promise<Array<SelectableValue<string>>> {\n    return this.model._getKeys(currentKey);\n  }\n\n  public async getGroupByKeys(currentKey: string | null): Promise<Array<SelectableValue<string>>> {\n    return this.model._getGroupByKeys(currentKey);\n  }\n\n  public async getValuesFor(filter: AdHocFilterWithLabels): Promise<Array<SelectableValue<string>>> {\n    return this.model._getValuesFor(filter);\n  }\n\n  public getOperators(): Array<SelectableValue<string>> {\n    return this.model._getOperators();\n  }\n\n  public updateFilter(filter: AdHocFilterWithLabels, update: Partial<AdHocFilterWithLabels>): void {\n    this.model._updateFilter(filter, update);\n  }\n\n  public updateFilters(\n    filters: AdHocFilterWithLabels[],\n    options?: {\n      skipPublish?: boolean;\n      forcePublish?: boolean;\n    }\n  ): void {\n    this.model.updateFilters(filters, options);\n  }\n\n  public updateToMatchAll(filter: AdHocFilterWithLabels): void {\n    this.model.updateToMatchAll(filter);\n  }\n\n  public removeFilter(filter: AdHocFilterWithLabels): void {\n    this.model._removeFilter(filter);\n  }\n\n  public removeLastFilter(): void {\n    this.model._removeLastFilter();\n  }\n\n  public handleComboboxBackspace(filter: AdHocFilterWithLabels): void {\n    this.model._handleComboboxBackspace(filter);\n  }\n\n  public addWip(): void {\n    this.model._addWip();\n  }\n\n  public addGroupByFilter(item: SelectableValue<string>): void {\n    this.model._addGroupByFilter(item);\n  }\n\n  public restoreOriginalFilter(filter: AdHocFilterWithLabels): void {\n    this.model.restoreOriginalFilter(filter);\n  }\n\n  public restoreOriginalGroupBy(): void {\n    this.model.restoreOriginalGroupBy();\n  }\n\n  public clearAll(): void {\n    this.model.clearAll();\n  }\n\n  public startProfile(name: string): void {\n    const queryController = getQueryController(this.model);\n    queryController?.startProfile(name);\n  }\n\n  public startInteraction(name: string): void {\n    const interactionTracker = getInteractionTracker(this.model);\n    interactionTracker?.startInteraction(name);\n  }\n\n  public stopInteraction(): void {\n    const interactionTracker = getInteractionTracker(this.model);\n    interactionTracker?.stopInteraction();\n  }\n\n  public getControlId(): string {\n    return getVariableControlId(this.model.state.type, this.model.state.key);\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/variables/components/VariableValueInput.js

@@ -1,6 +1,7 @@
 import { t } from '@grafana/i18n';
 import React, { useCallback } from 'react';
 import { AutoSizeInput } from '@grafana/ui';
+import { getVariableControlId } from '../utils.js';
 
 function VariableValueInput({ model }) {
   const { value, key, loading } = model.useState();
@@ -21,7 +22,7 @@ function VariableValueInput({ model }) {
   return /* @__PURE__ */ React.createElement(
     AutoSizeInput,
     {
-      id: key,
+      id: getVariableControlId(model.state.type, key),
       placeholder: t("grafana-scenes.variables.variable-value-input.placeholder-enter-value", "Enter value"),
       minWidth: 15,
       maxWidth: 30,

package/dist/esm/variables/components/VariableValueInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"VariableValueInput.js","sources":["../../../../src/variables/components/VariableValueInput.tsx"],"sourcesContent":["import { t } from '@grafana/i18n';\nimport React, { useCallback } from 'react';\n\nimport { AutoSizeInput } from '@grafana/ui';\n\nimport { SceneComponentProps } from '../../core/types';\nimport { TextBoxVariable } from '../variants/TextBoxVariable';\n\nexport function VariableValueInput({ model }: SceneComponentProps<TextBoxVariable>) {\n  const { value, key, loading } = model.useState();\n\n  const onBlur = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      model.setValue(e.currentTarget.value);\n    },\n    [model]\n  );\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') {\n        model.setValue(e.currentTarget.value);\n      }\n    },\n    [model]\n  );\n\n  return (\n    <AutoSizeInput\n      id={key}\n      placeholder={t('grafana-scenes.variables.variable-value-input.placeholder-enter-value', 'Enter value')}\n      minWidth={15}\n      maxWidth={30}\n      value={value}\n      loading={loading}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AAQgB,SAAA,kBAAA,CAAmB,EAAE,KAAA,EAA+C,EAAA;AAClF,EAAA,MAAM,EAAE,KAAO,EAAA,GAAA,EAAK,OAAQ,EAAA,GAAI,MAAM,QAAS,EAAA;AAE/C,EAAA,MAAM,MAAS,GAAA,WAAA;AAAA,IACb,CAAC,CAA2C,KAAA;AAC1C,MAAM,KAAA,CAAA,QAAA,CAAS,CAAE,CAAA,aAAA,CAAc,KAAK,CAAA;AAAA,KACtC;AAAA,IACA,CAAC,KAAK;AAAA,GACR;AAEA,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,CAA6C,KAAA;AAC5C,MAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,QAAM,KAAA,CAAA,QAAA,CAAS,CAAE,CAAA,aAAA,CAAc,KAAK,CAAA;AAAA;AACtC,KACF;AAAA,IACA,CAAC,KAAK;AAAA,GACR;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA,GAAA;AAAA,MACJ,WAAA,EAAa,CAAE,CAAA,uEAAA,EAAyE,aAAa,CAAA;AAAA,MACrG,QAAU,EAAA,EAAA;AAAA,MACV,QAAU,EAAA,EAAA;AAAA,MACV,KAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"VariableValueInput.js","sources":["../../../../src/variables/components/VariableValueInput.tsx"],"sourcesContent":["import { t } from '@grafana/i18n';\nimport React, { useCallback } from 'react';\n\nimport { AutoSizeInput } from '@grafana/ui';\n\nimport { SceneComponentProps } from '../../core/types';\nimport { TextBoxVariable } from '../variants/TextBoxVariable';\nimport { getVariableControlId } from '../utils';\n\nexport function VariableValueInput({ model }: SceneComponentProps<TextBoxVariable>) {\n  const { value, key, loading } = model.useState();\n\n  const onBlur = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      model.setValue(e.currentTarget.value);\n    },\n    [model]\n  );\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') {\n        model.setValue(e.currentTarget.value);\n      }\n    },\n    [model]\n  );\n\n  return (\n    <AutoSizeInput\n      id={getVariableControlId(model.state.type, key)}\n      placeholder={t('grafana-scenes.variables.variable-value-input.placeholder-enter-value', 'Enter value')}\n      minWidth={15}\n      maxWidth={30}\n      value={value}\n      loading={loading}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AASgB,SAAA,kBAAA,CAAmB,EAAE,KAAA,EAA+C,EAAA;AAClF,EAAA,MAAM,EAAE,KAAO,EAAA,GAAA,EAAK,OAAQ,EAAA,GAAI,MAAM,QAAS,EAAA;AAE/C,EAAA,MAAM,MAAS,GAAA,WAAA;AAAA,IACb,CAAC,CAA2C,KAAA;AAC1C,MAAM,KAAA,CAAA,QAAA,CAAS,CAAE,CAAA,aAAA,CAAc,KAAK,CAAA;AAAA,KACtC;AAAA,IACA,CAAC,KAAK;AAAA,GACR;AAEA,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,CAA6C,KAAA;AAC5C,MAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,QAAM,KAAA,CAAA,QAAA,CAAS,CAAE,CAAA,aAAA,CAAc,KAAK,CAAA;AAAA;AACtC,KACF;AAAA,IACA,CAAC,KAAK;AAAA,GACR;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA,oBAAA,CAAqB,KAAM,CAAA,KAAA,CAAM,MAAM,GAAG,CAAA;AAAA,MAC9C,WAAA,EAAa,CAAE,CAAA,uEAAA,EAAyE,aAAa,CAAA;AAAA,MACrG,QAAU,EAAA,EAAA;AAAA,MACV,QAAU,EAAA,EAAA;AAAA,MACV,KAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/esm/variables/components/VariableValueSelect.js

@@ -7,6 +7,7 @@ import { css, cx } from '@emotion/css';
 import { getOptionSearcher } from './getOptionSearcher.js';
 import { sceneGraph } from '../../core/sceneGraph/index.js';
 import { VARIABLE_VALUE_CHANGED_INTERACTION } from '../../performance/interactionConstants.js';
+import { getVariableControlId } from '../utils.js';
 
 const filterNoOp = () => true;
 const filterAll = (v) => v.value !== "$__all";
@@ -55,6 +56,7 @@ function VariableValueSelect({ model, state }) {
     Select,
     {
       id: key,
+      inputId: getVariableControlId(model.state.type, key),
       isValidNewOption: (inputValue2) => inputValue2.trim().length > 0,
       placeholder: t("grafana-scenes.variables.variable-value-select.placeholder-select-value", "Select value"),
       width: "auto",
@@ -121,6 +123,7 @@ function VariableValueSelectMulti({
     MultiSelect,
     {
       id: key,
+      inputId: getVariableControlId(model.state.type, key),
       placeholder,
       width: "auto",
       inputValue,

package/dist/esm/variables/components/VariableValueSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"VariableValueSelect.js","sources":["../../../../src/variables/components/VariableValueSelect.tsx"],"sourcesContent":["import { t } from '@grafana/i18n';\nimport { isArray } from 'lodash';\nimport React, { RefCallback, useEffect, useMemo, useState } from 'react';\nimport {\n  Checkbox,\n  InputActionMeta,\n  MultiSelect,\n  Select,\n  ToggleAllState,\n  getSelectStyles,\n  useStyles2,\n  useTheme2,\n} from '@grafana/ui';\n\nimport { MultiValueVariable, MultiValueVariableState } from '../variants/MultiValueVariable';\nimport { VariableValue, VariableValueSingle } from '../types';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { GrafanaTheme2, SelectableValue } from '@grafana/data';\nimport { css, cx } from '@emotion/css';\nimport { getOptionSearcher } from './getOptionSearcher';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { VARIABLE_VALUE_CHANGED_INTERACTION } from '../../performance/interactionConstants';\n\nconst filterNoOp = () => true;\n\nconst filterAll = (v: SelectableValue<VariableValueSingle>) => v.value !== '$__all';\n\nconst determineToggleAllState = (\n  selectedValues: Array<SelectableValue<VariableValueSingle>>,\n  options: Array<SelectableValue<VariableValueSingle>>\n) => {\n  if (selectedValues.length === options.filter(filterAll).length) {\n    return ToggleAllState.allSelected;\n  } else if (\n    selectedValues.length === 0 ||\n    (selectedValues.length === 1 && selectedValues[0] && selectedValues[0].value === '$__all')\n  ) {\n    return ToggleAllState.noneSelected;\n  } else {\n    return ToggleAllState.indeterminate;\n  }\n};\n\nexport function toSelectableValue<T>(value: T, label?: string): SelectableValue<T> {\n  return {\n    value,\n    label: label ?? String(value),\n  };\n}\n\nexport function VariableValueSelect({ model, state }: { model: MultiValueVariable; state: MultiValueVariableState }) {\n  const { value, text, key, options, includeAll, isReadOnly, allowCustomValue = true } = state;\n  const [inputValue, setInputValue] = useState('');\n  const [hasCustomValue, setHasCustomValue] = useState(false);\n  const selectValue = toSelectableValue(value, String(text));\n  const queryController = sceneGraph.getQueryController(model);\n  const optionSearcher = useMemo(() => getOptionSearcher(options, includeAll), [options, includeAll]);\n\n  const onInputChange = (value: string, { action }: InputActionMeta) => {\n    if (action === 'input-change') {\n      setInputValue(value);\n      if (model.onSearchChange) {\n        model.onSearchChange!(value);\n      }\n      return value;\n    }\n\n    return value;\n  };\n\n  const filteredOptions = optionSearcher(inputValue);\n\n  const onOpenMenu = () => {\n    if (hasCustomValue) {\n      setInputValue(String(text));\n    }\n  };\n\n  const onCloseMenu = () => {\n    setInputValue('');\n  };\n\n  return (\n    <Select<VariableValue>\n      id={key}\n      isValidNewOption={(inputValue) => inputValue.trim().length > 0}\n      placeholder={t('grafana-scenes.variables.variable-value-select.placeholder-select-value', 'Select value')}\n      width=\"auto\"\n      disabled={isReadOnly}\n      value={selectValue}\n      inputValue={inputValue}\n      allowCustomValue={allowCustomValue}\n      virtualized\n      filterOption={filterNoOp}\n      tabSelectsValue={false}\n      onInputChange={onInputChange}\n      onOpenMenu={onOpenMenu}\n      onCloseMenu={onCloseMenu}\n      options={filteredOptions}\n      data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`)}\n      onChange={(newValue) => {\n        model.changeValueTo(newValue.value!, newValue.label!, true);\n        queryController?.startProfile(VARIABLE_VALUE_CHANGED_INTERACTION);\n\n        if (hasCustomValue !== newValue.__isNew__) {\n          setHasCustomValue(newValue.__isNew__);\n        }\n      }}\n    />\n  );\n}\n\nexport function VariableValueSelectMulti({\n  model,\n  state,\n}: {\n  model: MultiValueVariable;\n  state: MultiValueVariableState;\n}) {\n  const {\n    value,\n    options,\n    key,\n    maxVisibleValues,\n    noValueOnClear,\n    includeAll,\n    isReadOnly,\n    allowCustomValue = true,\n  } = state;\n  const arrayValue = useMemo(() => (isArray(value) ? value : [value]), [value]);\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(arrayValue);\n  const [inputValue, setInputValue] = useState('');\n\n  const optionSearcher = useMemo(() => getOptionSearcher(options, includeAll), [options, includeAll]);\n\n  // Detect value changes outside\n  useEffect(() => {\n    setUncommittedValue(arrayValue);\n  }, [arrayValue]);\n\n  const onInputChange = (value: string, { action }: InputActionMeta) => {\n    if (action === 'input-change') {\n      setInputValue(value);\n      if (model.onSearchChange) {\n        model.onSearchChange!(value);\n      }\n      return value;\n    }\n\n    if (action === 'input-blur') {\n      setInputValue('');\n      return '';\n    }\n\n    return inputValue;\n  };\n\n  const placeholder = options.length > 0 ? 'Select value' : '';\n  const filteredOptions = optionSearcher(inputValue);\n\n  return (\n    <MultiSelect<VariableValueSingle>\n      id={key}\n      placeholder={placeholder}\n      width=\"auto\"\n      inputValue={inputValue}\n      disabled={isReadOnly}\n      value={uncommittedValue}\n      noMultiValueWrap={true}\n      maxVisibleValues={maxVisibleValues ?? 5}\n      tabSelectsValue={false}\n      virtualized\n      allowCustomValue={allowCustomValue}\n      //@ts-ignore\n      toggleAllOptions={{\n        enabled: true,\n        optionsFilter: filterAll,\n        determineToggleAllState: determineToggleAllState,\n      }}\n      options={filteredOptions}\n      closeMenuOnSelect={false}\n      components={{ Option: OptionWithCheckbox }}\n      isClearable={true}\n      hideSelectedOptions={false}\n      onInputChange={onInputChange}\n      onBlur={() => {\n        model.changeValueTo(uncommittedValue, undefined, true);\n      }}\n      filterOption={filterNoOp}\n      data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`)}\n      onChange={(newValue, action) => {\n        if (action.action === 'clear' && noValueOnClear) {\n          model.changeValueTo([], undefined, true);\n        }\n        setUncommittedValue(newValue.map((x) => x.value!));\n      }}\n    />\n  );\n}\n\ninterface SelectMenuOptionProps<T> {\n  isDisabled: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n  innerProps: JSX.IntrinsicElements['div'];\n  innerRef: RefCallback<HTMLDivElement>;\n  renderOptionLabel?: (value: SelectableValue<T>) => JSX.Element;\n  data: SelectableValue<T>;\n  indeterminate: boolean;\n}\n\nexport const OptionWithCheckbox = ({\n  children,\n  data,\n  innerProps,\n  innerRef,\n  isFocused,\n  isSelected,\n  indeterminate,\n  renderOptionLabel,\n}: React.PropsWithChildren<SelectMenuOptionProps<unknown>>) => {\n  // We are removing onMouseMove and onMouseOver from innerProps because they cause the whole\n  // list to re-render everytime the user hovers over an option. This is a performance issue.\n  // See https://github.com/JedWatson/react-select/issues/3128#issuecomment-451936743\n  const { onMouseMove, onMouseOver, ...rest } = innerProps;\n  const theme = useTheme2();\n  const selectStyles = getSelectStyles(theme);\n  const optionStyles = useStyles2(getOptionStyles);\n\n  return (\n    <div\n      ref={innerRef}\n      className={cx(selectStyles.option, isFocused && selectStyles.optionFocused)}\n      {...rest}\n      // TODO: use below selector once we update grafana dependencies to ^11.1.0\n      // data-testid={selectors.components.Select.option}\n      data-testid=\"data-testid Select option\"\n      title={data.title}\n    >\n      <div className={optionStyles.checkbox}>\n        <Checkbox indeterminate={indeterminate} value={isSelected} />\n      </div>\n      <div\n        className={selectStyles.optionBody}\n        data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts(\n          data.label ?? String(data.value)\n        )}\n      >\n        <span>{children}</span>\n      </div>\n    </div>\n  );\n};\n\nOptionWithCheckbox.displayName = 'SelectMenuOptions';\n\nconst getOptionStyles = (theme: GrafanaTheme2) => ({\n  checkbox: css({\n    marginRight: theme.spacing(2),\n  }),\n});\n\nexport function MultiOrSingleValueSelect({ model }: { model: MultiValueVariable }) {\n  const state = model.useState();\n\n  if (state.isMulti) {\n    return <VariableValueSelectMulti model={model} state={state} />;\n  } else {\n    return <VariableValueSelect model={model} state={state} />;\n  }\n}\n"],"names":["value","inputValue"],"mappings":"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"}
+{"version":3,"file":"VariableValueSelect.js","sources":["../../../../src/variables/components/VariableValueSelect.tsx"],"sourcesContent":["import { t } from '@grafana/i18n';\nimport { isArray } from 'lodash';\nimport React, { RefCallback, useEffect, useMemo, useState } from 'react';\nimport {\n  Checkbox,\n  InputActionMeta,\n  MultiSelect,\n  Select,\n  ToggleAllState,\n  getSelectStyles,\n  useStyles2,\n  useTheme2,\n} from '@grafana/ui';\n\nimport { MultiValueVariable, MultiValueVariableState } from '../variants/MultiValueVariable';\nimport { VariableValue, VariableValueSingle } from '../types';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { GrafanaTheme2, SelectableValue } from '@grafana/data';\nimport { css, cx } from '@emotion/css';\nimport { getOptionSearcher } from './getOptionSearcher';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { VARIABLE_VALUE_CHANGED_INTERACTION } from '../../performance/interactionConstants';\nimport { getVariableControlId } from '../utils';\n\nconst filterNoOp = () => true;\n\nconst filterAll = (v: SelectableValue<VariableValueSingle>) => v.value !== '$__all';\n\nconst determineToggleAllState = (\n  selectedValues: Array<SelectableValue<VariableValueSingle>>,\n  options: Array<SelectableValue<VariableValueSingle>>\n) => {\n  if (selectedValues.length === options.filter(filterAll).length) {\n    return ToggleAllState.allSelected;\n  } else if (\n    selectedValues.length === 0 ||\n    (selectedValues.length === 1 && selectedValues[0] && selectedValues[0].value === '$__all')\n  ) {\n    return ToggleAllState.noneSelected;\n  } else {\n    return ToggleAllState.indeterminate;\n  }\n};\n\nexport function toSelectableValue<T>(value: T, label?: string): SelectableValue<T> {\n  return {\n    value,\n    label: label ?? String(value),\n  };\n}\n\nexport function VariableValueSelect({ model, state }: { model: MultiValueVariable; state: MultiValueVariableState }) {\n  const { value, text, key, options, includeAll, isReadOnly, allowCustomValue = true } = state;\n  const [inputValue, setInputValue] = useState('');\n  const [hasCustomValue, setHasCustomValue] = useState(false);\n  const selectValue = toSelectableValue(value, String(text));\n  const queryController = sceneGraph.getQueryController(model);\n  const optionSearcher = useMemo(() => getOptionSearcher(options, includeAll), [options, includeAll]);\n\n  const onInputChange = (value: string, { action }: InputActionMeta) => {\n    if (action === 'input-change') {\n      setInputValue(value);\n      if (model.onSearchChange) {\n        model.onSearchChange!(value);\n      }\n      return value;\n    }\n\n    return value;\n  };\n\n  const filteredOptions = optionSearcher(inputValue);\n\n  const onOpenMenu = () => {\n    if (hasCustomValue) {\n      setInputValue(String(text));\n    }\n  };\n\n  const onCloseMenu = () => {\n    setInputValue('');\n  };\n\n  return (\n    <Select<VariableValue>\n      id={key}\n      inputId={getVariableControlId(model.state.type, key)}\n      isValidNewOption={(inputValue) => inputValue.trim().length > 0}\n      placeholder={t('grafana-scenes.variables.variable-value-select.placeholder-select-value', 'Select value')}\n      width=\"auto\"\n      disabled={isReadOnly}\n      value={selectValue}\n      inputValue={inputValue}\n      allowCustomValue={allowCustomValue}\n      virtualized\n      filterOption={filterNoOp}\n      tabSelectsValue={false}\n      onInputChange={onInputChange}\n      onOpenMenu={onOpenMenu}\n      onCloseMenu={onCloseMenu}\n      options={filteredOptions}\n      data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`)}\n      onChange={(newValue) => {\n        model.changeValueTo(newValue.value!, newValue.label!, true);\n        queryController?.startProfile(VARIABLE_VALUE_CHANGED_INTERACTION);\n\n        if (hasCustomValue !== newValue.__isNew__) {\n          setHasCustomValue(newValue.__isNew__);\n        }\n      }}\n    />\n  );\n}\n\nexport function VariableValueSelectMulti({\n  model,\n  state,\n}: {\n  model: MultiValueVariable;\n  state: MultiValueVariableState;\n}) {\n  const {\n    value,\n    options,\n    key,\n    maxVisibleValues,\n    noValueOnClear,\n    includeAll,\n    isReadOnly,\n    allowCustomValue = true,\n  } = state;\n  const arrayValue = useMemo(() => (isArray(value) ? value : [value]), [value]);\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(arrayValue);\n  const [inputValue, setInputValue] = useState('');\n\n  const optionSearcher = useMemo(() => getOptionSearcher(options, includeAll), [options, includeAll]);\n\n  // Detect value changes outside\n  useEffect(() => {\n    setUncommittedValue(arrayValue);\n  }, [arrayValue]);\n\n  const onInputChange = (value: string, { action }: InputActionMeta) => {\n    if (action === 'input-change') {\n      setInputValue(value);\n      if (model.onSearchChange) {\n        model.onSearchChange!(value);\n      }\n      return value;\n    }\n\n    if (action === 'input-blur') {\n      setInputValue('');\n      return '';\n    }\n\n    return inputValue;\n  };\n\n  const placeholder = options.length > 0 ? 'Select value' : '';\n  const filteredOptions = optionSearcher(inputValue);\n\n  return (\n    <MultiSelect<VariableValueSingle>\n      id={key}\n      inputId={getVariableControlId(model.state.type, key)}\n      placeholder={placeholder}\n      width=\"auto\"\n      inputValue={inputValue}\n      disabled={isReadOnly}\n      value={uncommittedValue}\n      noMultiValueWrap={true}\n      maxVisibleValues={maxVisibleValues ?? 5}\n      tabSelectsValue={false}\n      virtualized\n      allowCustomValue={allowCustomValue}\n      //@ts-ignore\n      toggleAllOptions={{\n        enabled: true,\n        optionsFilter: filterAll,\n        determineToggleAllState: determineToggleAllState,\n      }}\n      options={filteredOptions}\n      closeMenuOnSelect={false}\n      components={{ Option: OptionWithCheckbox }}\n      isClearable={true}\n      hideSelectedOptions={false}\n      onInputChange={onInputChange}\n      onBlur={() => {\n        model.changeValueTo(uncommittedValue, undefined, true);\n      }}\n      filterOption={filterNoOp}\n      data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`)}\n      onChange={(newValue, action) => {\n        if (action.action === 'clear' && noValueOnClear) {\n          model.changeValueTo([], undefined, true);\n        }\n        setUncommittedValue(newValue.map((x) => x.value!));\n      }}\n    />\n  );\n}\n\ninterface SelectMenuOptionProps<T> {\n  isDisabled: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n  innerProps: JSX.IntrinsicElements['div'];\n  innerRef: RefCallback<HTMLDivElement>;\n  renderOptionLabel?: (value: SelectableValue<T>) => JSX.Element;\n  data: SelectableValue<T>;\n  indeterminate: boolean;\n}\n\nexport const OptionWithCheckbox = ({\n  children,\n  data,\n  innerProps,\n  innerRef,\n  isFocused,\n  isSelected,\n  indeterminate,\n  renderOptionLabel,\n}: React.PropsWithChildren<SelectMenuOptionProps<unknown>>) => {\n  // We are removing onMouseMove and onMouseOver from innerProps because they cause the whole\n  // list to re-render everytime the user hovers over an option. This is a performance issue.\n  // See https://github.com/JedWatson/react-select/issues/3128#issuecomment-451936743\n  const { onMouseMove, onMouseOver, ...rest } = innerProps;\n  const theme = useTheme2();\n  const selectStyles = getSelectStyles(theme);\n  const optionStyles = useStyles2(getOptionStyles);\n\n  return (\n    <div\n      ref={innerRef}\n      className={cx(selectStyles.option, isFocused && selectStyles.optionFocused)}\n      {...rest}\n      // TODO: use below selector once we update grafana dependencies to ^11.1.0\n      // data-testid={selectors.components.Select.option}\n      data-testid=\"data-testid Select option\"\n      title={data.title}\n    >\n      <div className={optionStyles.checkbox}>\n        <Checkbox indeterminate={indeterminate} value={isSelected} />\n      </div>\n      <div\n        className={selectStyles.optionBody}\n        data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts(\n          data.label ?? String(data.value)\n        )}\n      >\n        <span>{children}</span>\n      </div>\n    </div>\n  );\n};\n\nOptionWithCheckbox.displayName = 'SelectMenuOptions';\n\nconst getOptionStyles = (theme: GrafanaTheme2) => ({\n  checkbox: css({\n    marginRight: theme.spacing(2),\n  }),\n});\n\nexport function MultiOrSingleValueSelect({ model }: { model: MultiValueVariable }) {\n  const state = model.useState();\n\n  if (state.isMulti) {\n    return <VariableValueSelectMulti model={model} state={state} />;\n  } else {\n    return <VariableValueSelect model={model} state={state} />;\n  }\n}\n"],"names":["value","inputValue"],"mappings":"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"}

package/dist/esm/variables/components/VariableValueSelectors.js

@@ -5,6 +5,7 @@ import { sceneGraph } from '../../core/sceneGraph/index.js';
 import { ControlsLabel } from '../../utils/ControlsLabel.js';
 import { css } from '@emotion/css';
 import { selectors } from '@grafana/e2e-selectors';
+import { getVariableControlId } from '../utils.js';
 
 class VariableValueSelectors extends SceneObjectBase {
 }
@@ -27,12 +28,12 @@ function VariableValueSelectWrapper({ variable, layout, showAlways, hideLabel })
   return /* @__PURE__ */ React.createElement("div", { className: containerStyle, "data-testid": selectors.pages.Dashboard.SubMenu.submenuItem }, /* @__PURE__ */ React.createElement(VariableLabel, { variable, hideLabel }), /* @__PURE__ */ React.createElement(variable.Component, { model: variable }));
 }
 function VariableLabel({ variable, layout, hideLabel }) {
-  var _a;
+  var _a, _b;
   const { state } = variable;
   if (variable.state.hide === VariableHide.hideLabel || hideLabel) {
     return null;
   }
-  const elementId = `var-${state.key}`;
+  const elementId = getVariableControlId(variable.state.type, (_a = variable.state.key) != null ? _a : "");
   const labelOrName = state.label || state.name;
   return /* @__PURE__ */ React.createElement(
     ControlsLabel,
@@ -46,7 +47,7 @@ function VariableLabel({ variable, layout, hideLabel }) {
       label: labelOrName,
       error: state.error,
       layout,
-      description: (_a = state.description) != null ? _a : void 0
+      description: (_b = state.description) != null ? _b : void 0
     }
   );
 }

package/dist/esm/variables/components/VariableValueSelectors.js.map

@@ -1 +1 @@
-{"version":3,"file":"VariableValueSelectors.js","sources":["../../../../src/variables/components/VariableValueSelectors.tsx"],"sourcesContent":["import React from 'react';\n\nimport { VariableHide } from '@grafana/data';\n\nimport { SceneObjectBase, useSceneObjectState } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { ControlsLayout, SceneComponentProps, SceneObjectState } from '../../core/types';\nimport { SceneVariable, SceneVariableState } from '../types';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\nimport { css } from '@emotion/css';\nimport { selectors } from '@grafana/e2e-selectors';\n\nexport interface VariableValueSelectorsState extends SceneObjectState {\n  layout?: ControlsLayout;\n}\n\nexport class VariableValueSelectors extends SceneObjectBase<VariableValueSelectorsState> {\n  public static Component = VariableValueSelectorsRenderer;\n}\n\nfunction VariableValueSelectorsRenderer({ model }: SceneComponentProps<VariableValueSelectors>) {\n  const variables = sceneGraph.getVariables(model)!.useState();\n\n  return (\n    <>\n      {variables.variables.map((variable) => (\n        <VariableValueSelectWrapper key={variable.state.key} variable={variable} layout={model.state.layout} />\n      ))}\n    </>\n  );\n}\n\ninterface VariableSelectProps {\n  layout?: ControlsLayout;\n  variable: SceneVariable;\n  /** To override hide from VariableValueSelectByName  */\n  showAlways?: boolean;\n  /** To provide an option to hide the label in the variable value selector */\n  hideLabel?: boolean;\n}\n\nexport function VariableValueSelectWrapper({ variable, layout, showAlways, hideLabel }: VariableSelectProps) {\n  const state = useSceneObjectState<SceneVariableState>(variable, { shouldActivateOrKeepAlive: true });\n\n  if (state.hide === VariableHide.hideVariable && !showAlways) {\n    if (variable.UNSAFE_renderAsHidden) {\n      return <variable.Component model={variable} />;\n    }\n\n    return null;\n  }\n\n  if (layout === 'vertical') {\n    return (\n      <div className={verticalContainer} data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}>\n        <VariableLabel variable={variable} layout={layout} hideLabel={hideLabel} />\n        <variable.Component model={variable} />\n      </div>\n    );\n  }\n\n  return (\n    <div className={containerStyle} data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}>\n      <VariableLabel variable={variable} hideLabel={hideLabel} />\n      <variable.Component model={variable} />\n    </div>\n  );\n}\n\nfunction VariableLabel({ variable, layout, hideLabel }: VariableSelectProps) {\n  const { state } = variable;\n\n  if (variable.state.hide === VariableHide.hideLabel || hideLabel) {\n    return null;\n  }\n\n  const elementId = `var-${state.key}`;\n  const labelOrName = state.label || state.name;\n\n  return (\n    <ControlsLabel\n      htmlFor={elementId}\n      isLoading={state.loading}\n      onCancel={() => variable.onCancel?.()}\n      label={labelOrName}\n      error={state.error}\n      layout={layout}\n      description={state.description ?? undefined}\n    />\n  );\n}\n\nconst containerStyle = css({\n  display: 'flex',\n  // No border for second element (inputs) as label and input border is shared\n  '> :nth-child(2)': css({\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n  }),\n});\n\nconst verticalContainer = css({ display: 'flex', flexDirection: 'column' });\n"],"names":["_a"],"mappings":";;;;;;;;AAgBO,MAAM,+BAA+B,eAA6C,CAAA;AAEzF;AAFa,sBAAA,CACG,SAAY,GAAA,8BAAA;AAG5B,SAAS,8BAAA,CAA+B,EAAE,KAAA,EAAsD,EAAA;AAC9F,EAAA,MAAM,SAAY,GAAA,UAAA,CAAW,YAAa,CAAA,KAAK,EAAG,QAAS,EAAA;AAE3D,EAAA,iEAEK,SAAU,CAAA,SAAA,CAAU,IAAI,CAAC,QAAA,yCACvB,0BAA2B,EAAA,EAAA,GAAA,EAAK,QAAS,CAAA,KAAA,CAAM,KAAK,QAAoB,EAAA,MAAA,EAAQ,MAAM,KAAM,CAAA,MAAA,EAAQ,CACtG,CACH,CAAA;AAEJ;AAWO,SAAS,2BAA2B,EAAE,QAAA,EAAU,MAAQ,EAAA,UAAA,EAAY,WAAkC,EAAA;AAC3G,EAAA,MAAM,QAAQ,mBAAwC,CAAA,QAAA,EAAU,EAAE,yBAAA,EAA2B,MAAM,CAAA;AAEnG,EAAA,IAAI,KAAM,CAAA,IAAA,KAAS,YAAa,CAAA,YAAA,IAAgB,CAAC,UAAY,EAAA;AAC3D,IAAA,IAAI,SAAS,qBAAuB,EAAA;AAClC,MAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,QAAA,CAAS,SAAT,EAAA,EAAmB,OAAO,QAAU,EAAA,CAAA;AAAA;AAG9C,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,IAAI,WAAW,UAAY,EAAA;AACzB,IACE,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,iBAAA,EAAmB,eAAa,SAAU,CAAA,KAAA,CAAM,SAAU,CAAA,OAAA,CAAQ,WAChF,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,iBAAc,QAAoB,EAAA,MAAA,EAAgB,WAAsB,CACzE,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAS,SAAT,EAAA,EAAmB,KAAO,EAAA,QAAA,EAAU,CACvC,CAAA;AAAA;AAIJ,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,cAAA,EAAgB,eAAa,SAAU,CAAA,KAAA,CAAM,UAAU,OAAQ,CAAA,WAAA,EAAA,sCAC5E,aAAc,EAAA,EAAA,QAAA,EAAoB,WAAsB,CACzD,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAS,SAAT,EAAA,EAAmB,KAAO,EAAA,QAAA,EAAU,CACvC,CAAA;AAEJ;AAEA,SAAS,aAAc,CAAA,EAAE,QAAU,EAAA,MAAA,EAAQ,WAAkC,EAAA;AArE7E,EAAA,IAAA,EAAA;AAsEE,EAAM,MAAA,EAAE,OAAU,GAAA,QAAA;AAElB,EAAA,IAAI,QAAS,CAAA,KAAA,CAAM,IAAS,KAAA,YAAA,CAAa,aAAa,SAAW,EAAA;AAC/D,IAAO,OAAA,IAAA;AAAA;AAGT,EAAM,MAAA,SAAA,GAAY,CAAO,IAAA,EAAA,KAAA,CAAM,GAAG,CAAA,CAAA;AAClC,EAAM,MAAA,WAAA,GAAc,KAAM,CAAA,KAAA,IAAS,KAAM,CAAA,IAAA;AAEzC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,SAAA;AAAA,MACT,WAAW,KAAM,CAAA,OAAA;AAAA,MACjB,UAAU,MAAG;AAnFnB,QAAAA,IAAAA,GAAAA;AAmFsB,QAAA,OAAA,CAAAA,GAAA,GAAA,QAAA,CAAS,QAAT,KAAA,IAAA,GAAA,MAAA,GAAAA,GAAA,CAAA,IAAA,CAAA,QAAA,CAAA;AAAA,OAAA;AAAA,MAChB,KAAO,EAAA,WAAA;AAAA,MACP,OAAO,KAAM,CAAA,KAAA;AAAA,MACb,MAAA;AAAA,MACA,WAAA,EAAA,CAAa,EAAM,GAAA,KAAA,CAAA,WAAA,KAAN,IAAqB,GAAA,EAAA,GAAA;AAAA;AAAA,GACpC;AAEJ;AAEA,MAAM,iBAAiB,GAAI,CAAA;AAAA,EACzB,OAAS,EAAA,MAAA;AAAA;AAAA,EAET,mBAAmB,GAAI,CAAA;AAAA,IACrB,mBAAqB,EAAA,CAAA;AAAA,IACrB,sBAAwB,EAAA;AAAA,GACzB;AACH,CAAC,CAAA;AAED,MAAM,oBAAoB,GAAI,CAAA,EAAE,SAAS,MAAQ,EAAA,aAAA,EAAe,UAAU,CAAA;;;;"}
+{"version":3,"file":"VariableValueSelectors.js","sources":["../../../../src/variables/components/VariableValueSelectors.tsx"],"sourcesContent":["import React from 'react';\n\nimport { VariableHide } from '@grafana/data';\n\nimport { SceneObjectBase, useSceneObjectState } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { ControlsLayout, SceneComponentProps, SceneObjectState } from '../../core/types';\nimport { SceneVariable, SceneVariableState } from '../types';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\nimport { css } from '@emotion/css';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { getVariableControlId } from '../utils';\n\nexport interface VariableValueSelectorsState extends SceneObjectState {\n  layout?: ControlsLayout;\n}\n\nexport class VariableValueSelectors extends SceneObjectBase<VariableValueSelectorsState> {\n  public static Component = VariableValueSelectorsRenderer;\n}\n\nfunction VariableValueSelectorsRenderer({ model }: SceneComponentProps<VariableValueSelectors>) {\n  const variables = sceneGraph.getVariables(model)!.useState();\n\n  return (\n    <>\n      {variables.variables.map((variable) => (\n        <VariableValueSelectWrapper key={variable.state.key} variable={variable} layout={model.state.layout} />\n      ))}\n    </>\n  );\n}\n\ninterface VariableSelectProps {\n  layout?: ControlsLayout;\n  variable: SceneVariable;\n  /** To override hide from VariableValueSelectByName  */\n  showAlways?: boolean;\n  /** To provide an option to hide the label in the variable value selector */\n  hideLabel?: boolean;\n}\n\nexport function VariableValueSelectWrapper({ variable, layout, showAlways, hideLabel }: VariableSelectProps) {\n  const state = useSceneObjectState<SceneVariableState>(variable, { shouldActivateOrKeepAlive: true });\n\n  if (state.hide === VariableHide.hideVariable && !showAlways) {\n    if (variable.UNSAFE_renderAsHidden) {\n      return <variable.Component model={variable} />;\n    }\n\n    return null;\n  }\n\n  if (layout === 'vertical') {\n    return (\n      <div className={verticalContainer} data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}>\n        <VariableLabel variable={variable} layout={layout} hideLabel={hideLabel} />\n        <variable.Component model={variable} />\n      </div>\n    );\n  }\n\n  return (\n    <div className={containerStyle} data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}>\n      <VariableLabel variable={variable} hideLabel={hideLabel} />\n      <variable.Component model={variable} />\n    </div>\n  );\n}\n\nfunction VariableLabel({ variable, layout, hideLabel }: VariableSelectProps) {\n  const { state } = variable;\n\n  if (variable.state.hide === VariableHide.hideLabel || hideLabel) {\n    return null;\n  }\n\n  const elementId = getVariableControlId(variable.state.type, variable.state.key ?? '');\n  const labelOrName = state.label || state.name;\n\n  return (\n    <ControlsLabel\n      htmlFor={elementId}\n      isLoading={state.loading}\n      onCancel={() => variable.onCancel?.()}\n      label={labelOrName}\n      error={state.error}\n      layout={layout}\n      description={state.description ?? undefined}\n    />\n  );\n}\n\nconst containerStyle = css({\n  display: 'flex',\n  // No border for second element (inputs) as label and input border is shared\n  '> :nth-child(2)': css({\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n  }),\n});\n\nconst verticalContainer = css({ display: 'flex', flexDirection: 'column' });\n"],"names":["_a"],"mappings":"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"}

package/dist/esm/variables/groupby/GroupByVariable.js

@@ -9,7 +9,7 @@ import { getDataSource } from '../../utils/getDataSource.js';
 import { components } from 'react-select';
 import { useStyles2, MultiSelect, Select } from '@grafana/ui';
 import { isArray, isEqual } from 'lodash';
-import { dataFromResponse, getQueriesForVariables, responseHasError, handleOptionGroups } from '../utils.js';
+import { dataFromResponse, getQueriesForVariables, responseHasError, handleOptionGroups, getVariableControlId } from '../utils.js';
 import { OptionWithCheckbox } from '../components/VariableValueSelect.js';
 import { GroupByVariableUrlSyncHandler } from './GroupByVariableUrlSyncHandler.js';
 import { getOptionSearcher } from '../components/getOptionSearcher.js';
@@ -391,6 +391,7 @@ function GroupByVariableRenderer({ model }) {
         "grafana-scenes.variables.group-by-variable-renderer.aria-label-group-by-selector",
         "Group by selector"
       ),
+      inputId: getVariableControlId(model.state.type, key),
       "data-testid": `GroupBySelect-${key}`,
       id: key,
       placeholder: t(

package/dist/esm/variables/groupby/GroupByVariable.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupByVariable.js","sources":["../../../../src/variables/groupby/GroupByVariable.tsx"],"sourcesContent":["import { t } from '@grafana/i18n';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport {\n  AdHocVariableFilter,\n  DataSourceApi,\n  // @ts-expect-error (temporary till we update grafana/data)\n  DrilldownsApplicability,\n  GetTagResponse,\n  GrafanaTheme2,\n  MetricFindValue,\n  SelectableValue,\n} from '@grafana/data';\nimport { allActiveGroupByVariables } from './findActiveGroupByVariablesByUid';\nimport { DataSourceRef, VariableType } from '@grafana/schema';\nimport { SceneComponentProps, ControlsLayout, SceneObjectUrlSyncHandler, SceneDataQuery } from '../../core/types';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport {\n  SceneVariableValueChangedEvent,\n  ValidateAndUpdateResult,\n  VariableValue,\n  VariableValueOption,\n  VariableValueSingle,\n} from '../types';\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from '../variants/MultiValueVariable';\nimport { from, lastValueFrom, map, mergeMap, Observable, of, take, tap } from 'rxjs';\nimport { getDataSource } from '../../utils/getDataSource';\nimport { components, GroupBase, MenuProps } from 'react-select';\nimport { InputActionMeta, MultiSelect, Select, useStyles2 } from '@grafana/ui';\nimport { isArray, isEqual } from 'lodash';\nimport { dataFromResponse, getQueriesForVariables, handleOptionGroups, responseHasError } from '../utils';\nimport { OptionWithCheckbox } from '../components/VariableValueSelect';\nimport { GroupByVariableUrlSyncHandler } from './GroupByVariableUrlSyncHandler';\nimport { getOptionSearcher } from '../components/getOptionSearcher';\nimport { getEnrichedFiltersRequest } from '../getEnrichedFiltersRequest';\nimport { wrapInSafeSerializableSceneObject } from '../../utils/wrapInSafeSerializableSceneObject';\nimport { DefaultGroupByCustomIndicatorContainer } from './DefaultGroupByCustomIndicatorContainer';\nimport { GroupByValueContainer, GroupByContainerProps } from './GroupByValueContainer';\nimport { getInteractionTracker } from '../../core/sceneGraph/getInteractionTracker';\nimport { GROUPBY_DIMENSIONS_INTERACTION } from '../../performance/interactionConstants';\nimport { css, cx } from '@emotion/css';\nimport { GroupByRecommendations } from './GroupByRecommendations';\n\nexport interface GroupByVariableState extends MultiValueVariableState {\n  /** Defaults to \"Group\" */\n  name: string;\n  /** The visible keys to group on */\n  // TODO review this type and name (naming is hard)\n  defaultOptions?: MetricFindValue[];\n  /** Base filters to always apply when looking up keys */\n  baseFilters?: AdHocVariableFilter[];\n  /** Datasource to use for getTagKeys and also controls which scene queries the group by should apply to */\n  datasource: DataSourceRef | null;\n  /** Default value set for this groupBy. When this field is set, changing value will allow the user to restore back to this default value */\n  defaultValue?: { text: VariableValue; value: VariableValue };\n  /** Needed for url sync when passing flag to another dashboard */\n  restorable?: boolean;\n  /** Controls if the group by can be changed */\n  readOnly?: boolean;\n  /**\n   * @experimental\n   * Controls the layout and design of the label.\n   * Vertical layout does not yet support operator selector.\n   */\n  layout?: ControlsLayout;\n  /**\n   * Defaults to same-datasource which means group by will automatically be applied to all queries with the same data source as this GroupBySet.\n   * In manual mode no queries are re-run on changes, and you have to manually apply the filter to whatever queries you want.\n   */\n  applyMode?: 'auto' | 'manual';\n  /**\n   * Filter out the keys that do not match the regex.\n   */\n  tagKeyRegexFilter?: RegExp;\n  /**\n   * Extension hook for customizing the key lookup.\n   * Return replace: true if you want to override the default lookup\n   * Return replace: false if you want to combine the results with the default lookup\n   */\n  getTagKeysProvider?: getTagKeysProvider;\n  /**\n   * Holds the applicability for each of the selected keys\n   */\n  keysApplicability?: DrilldownsApplicability[];\n  /**\n   * state for checking whether drilldown applicability is enabled\n   */\n  applicabilityEnabled?: boolean;\n  /**\n   * Whether the input should be wide. For example, this is needed when dashboardAdHocAndGroupByWrapper feature toggle is enabled so that\n   * the input fills the remaining space in the row.\n   */\n  wideInput?: boolean;\n\n  /**\n   * enables drilldown recommendations\n   */\n  drilldownRecommendationsEnabled?: boolean;\n}\n\nexport type getTagKeysProvider = (\n  set: GroupByVariable,\n  currentKey: string | null\n) => Promise<{ replace?: boolean; values: MetricFindValue[] | GetTagResponse }>;\n\nexport class GroupByVariable extends MultiValueVariable<GroupByVariableState> {\n  static Component = GroupByVariableRenderer;\n  isLazy = true;\n\n  protected _urlSync: SceneObjectUrlSyncHandler = new GroupByVariableUrlSyncHandler(this);\n\n  private _scopedVars = { __sceneObject: wrapInSafeSerializableSceneObject(this) };\n\n  private _recommendations: GroupByRecommendations | undefined;\n\n  public validateAndUpdate(): Observable<ValidateAndUpdateResult> {\n    return this.getValueOptions({}).pipe(\n      map((options) => {\n        this._updateValueGivenNewOptions(options);\n        return {};\n      })\n    );\n  }\n\n  private _updateValueGivenNewOptions(options: VariableValueOption[]) {\n    const { value: currentValue, text: currentText } = this.state;\n\n    const stateUpdate: Partial<MultiValueVariableState> = {\n      options,\n      loading: false,\n      value: currentValue ?? [],\n      text: currentText ?? [],\n    };\n\n    this.setState(stateUpdate);\n  }\n\n  public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n    // When default dimensions are provided, return the static list\n    if (this.state.defaultOptions) {\n      return of(\n        this.state.defaultOptions.map((o) => ({\n          label: o.text,\n          value: String(o.value),\n          group: o.group,\n        }))\n      );\n    }\n\n    this.setState({ loading: true, error: null });\n\n    return from(getDataSource(this.state.datasource, this._scopedVars)).pipe(\n      mergeMap((ds) => {\n        return from(this._getKeys(ds)).pipe(\n          tap((response) => {\n            if (responseHasError(response)) {\n              this.setState({ error: response.error.message });\n            }\n          }),\n          map((response) => dataFromResponse(response)),\n          take(1),\n          mergeMap((data) => {\n            const a: VariableValueOption[] = data.map((i) => {\n              return {\n                label: i.text,\n                value: i.value ? String(i.value) : i.text,\n                group: i.group,\n              };\n            });\n            return of(a);\n          })\n        );\n      })\n    );\n  }\n\n  public constructor(initialState: Partial<GroupByVariableState>) {\n    const behaviors = initialState.$behaviors ?? [];\n    const recommendations = initialState.drilldownRecommendationsEnabled ? new GroupByRecommendations() : undefined;\n\n    if (recommendations) {\n      behaviors.push(recommendations);\n    }\n\n    super({\n      isMulti: true,\n      name: '',\n      value: [],\n      text: [],\n      options: [],\n      datasource: null,\n      baseFilters: [],\n      applyMode: 'auto',\n      layout: 'horizontal',\n      type: 'groupby' as VariableType,\n      ...initialState,\n      noValueOnClear: true,\n      $behaviors: behaviors.length > 0 ? behaviors : undefined,\n    });\n\n    this._recommendations = recommendations;\n\n    if (this.state.defaultValue) {\n      const currentValue = this.state.value;\n      const hasCurrentValue = Array.isArray(currentValue) ? currentValue.length > 0 : !!currentValue;\n\n      if (!hasCurrentValue) {\n        this.changeValueTo(this.state.defaultValue.value, this.state.defaultValue.text, false);\n      }\n    }\n\n    if (this.state.applyMode === 'auto') {\n      this.addActivationHandler(() => {\n        allActiveGroupByVariables.add(this);\n\n        return () => allActiveGroupByVariables.delete(this);\n      });\n    }\n\n    this.addActivationHandler(this._activationHandler);\n  }\n\n  private _activationHandler = () => {\n    this._verifyApplicability();\n\n    if (this.state.defaultValue) {\n      if (this.checkIfRestorable(this.state.value)) {\n        this.setState({ restorable: true });\n      }\n    }\n\n    return () => {\n      if (this.state.defaultValue) {\n        this.restoreDefaultValues();\n      }\n    };\n  };\n\n  /**\n   * Gets the GroupByRecommendations behavior if it exists in $behaviors\n   */\n  public getRecommendations(): GroupByRecommendations | undefined {\n    return this._recommendations;\n  }\n\n  public getApplicableKeys(): string[] {\n    const { value, keysApplicability } = this.state;\n\n    const valueArray = isArray(value) ? value.map(String) : value ? [String(value)] : [];\n\n    if (!keysApplicability || keysApplicability.length === 0) {\n      return valueArray;\n    }\n\n    const applicableValues = valueArray.filter((val) => {\n      const applicability = keysApplicability.find((item) => item.key === val);\n      return !applicability || applicability.applicable !== false;\n    });\n\n    return applicableValues;\n  }\n\n  public async getGroupByApplicabilityForQueries(\n    value: VariableValue,\n    queries: SceneDataQuery[]\n  ): Promise<DrilldownsApplicability[] | undefined> {\n    const ds = await getDataSource(this.state.datasource, this._scopedVars);\n\n    // @ts-expect-error (temporary till we update grafana/data)\n    if (!ds.getDrilldownsApplicability) {\n      return;\n    }\n\n    const timeRange = sceneGraph.getTimeRange(this).state.value;\n\n    // @ts-expect-error (temporary till we update grafana/data)\n    return await ds.getDrilldownsApplicability({\n      groupByKeys: Array.isArray(value) ? value.map((v) => String(v)) : value ? [String(value)] : [],\n      queries,\n      timeRange,\n      scopes: sceneGraph.getScopes(this),\n      ...getEnrichedFiltersRequest(this),\n    });\n  }\n\n  public async _verifyApplicability() {\n    if (!this.state.applicabilityEnabled) {\n      return;\n    }\n\n    const queries = getQueriesForVariables(this);\n    const value = this.state.value;\n\n    const response = await this.getGroupByApplicabilityForQueries(value, queries);\n\n    if (!response) {\n      return;\n    }\n\n    if (!isEqual(response, this.state.keysApplicability)) {\n      this.setState({ keysApplicability: response ?? undefined });\n\n      this.publishEvent(new SceneVariableValueChangedEvent(this), true);\n    }\n  }\n\n  // This method is related to the defaultValue property. We check if the current value\n  // is different from the default value. If it is, the groupBy will show a button\n  // allowing the user to restore the default values.\n  public checkIfRestorable(values: VariableValue) {\n    const originalValues = isArray(this.state.defaultValue?.value)\n      ? this.state.defaultValue?.value\n      : this.state.defaultValue?.value\n      ? [this.state.defaultValue?.value]\n      : [];\n    const vals = isArray(values) ? values : [values];\n\n    if (vals.length !== originalValues.length) {\n      return true;\n    }\n\n    return !isEqual(vals, originalValues);\n  }\n\n  public restoreDefaultValues() {\n    this.setState({ restorable: false });\n\n    if (!this.state.defaultValue) {\n      return;\n    }\n\n    this.changeValueTo(this.state.defaultValue.value, this.state.defaultValue.text, true);\n  }\n\n  /**\n   * Get possible keys given current filters. Do not call from plugins directly.\n   * @param ds - The datasource to use for fetching keys\n   * @param queries - Optional queries to scope the key lookup. When provided, these are used\n   *   instead of discovering all queries in the scene via getQueriesForVariables.\n   */\n  public _getKeys = async (ds: DataSourceApi, queries?: SceneDataQuery[]) => {\n    // TODO:  provide current dimensions?\n    const override = await this.state.getTagKeysProvider?.(this, null);\n\n    if (override && override.replace) {\n      return override.values;\n    }\n\n    if (this.state.defaultOptions) {\n      return this.state.defaultOptions.concat(dataFromResponse(override?.values ?? []));\n    }\n\n    // @ts-expect-error (temporary till we update grafana/data)\n    if (!ds.getGroupByKeys && !ds.getTagKeys) {\n      return [];\n    }\n\n    // @ts-expect-error (temporary till we update grafana/data)\n    const keyMethod = (ds.getGroupByKeys || ds.getTagKeys).bind(ds);\n\n    const queriesForKeys = queries ?? getQueriesForVariables(this);\n\n    const otherFilters = this.state.baseFilters || [];\n    const timeRange = sceneGraph.getTimeRange(this).state.value;\n    const response = await keyMethod({\n      filters: otherFilters,\n      queries: queriesForKeys,\n      timeRange,\n      scopes: sceneGraph.getScopes(this),\n      ...getEnrichedFiltersRequest(this),\n    });\n    if (responseHasError(response)) {\n      this.setState({ error: response.error.message });\n    }\n\n    let keys = dataFromResponse(response);\n    if (override) {\n      keys = keys.concat(dataFromResponse(override.values));\n    }\n\n    const tagKeyRegexFilter = this.state.tagKeyRegexFilter;\n    if (tagKeyRegexFilter) {\n      keys = keys.filter((f) => f.text.match(tagKeyRegexFilter));\n    }\n\n    return keys;\n  };\n\n  public async _verifyApplicabilityAndStoreRecentGrouping() {\n    await this._verifyApplicability();\n\n    if (!this._recommendations) {\n      return;\n    }\n\n    const applicableValues = this.getApplicableKeys();\n    if (applicableValues.length === 0) {\n      return;\n    }\n\n    this._recommendations.storeRecentGrouping(applicableValues);\n  }\n\n  /**\n   * Allows clearing the value of the variable to an empty value. Overrides default behavior of a MultiValueVariable\n   */\n  public getDefaultMultiState(options: VariableValueOption[]) {\n    return { value: [], text: [] };\n  }\n}\n\nexport function GroupByVariableRenderer({ model }: SceneComponentProps<GroupByVariable>) {\n  const {\n    value,\n    text,\n    key,\n    isMulti = true,\n    maxVisibleValues,\n    noValueOnClear,\n    options,\n    includeAll,\n    allowCustomValue = true,\n    defaultValue,\n    keysApplicability,\n    drilldownRecommendationsEnabled,\n  } = model.useState();\n\n  const recommendations = model.getRecommendations();\n\n  const styles = useStyles2(getStyles);\n\n  const values = useMemo<Array<SelectableValue<VariableValueSingle>>>(() => {\n    const arrayValue = isArray(value) ? value : [value];\n    const arrayText = isArray(text) ? text : [text];\n\n    return arrayValue.map((value, idx) => ({\n      value,\n      label: String(arrayText[idx] ?? value),\n    }));\n  }, [value, text]);\n\n  const [isFetchingOptions, setIsFetchingOptions] = useState(false);\n  const [isOptionsOpen, setIsOptionsOpen] = useState(false);\n  const [inputValue, setInputValue] = useState('');\n\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(values);\n\n  const optionSearcher = useMemo(() => getOptionSearcher(options, includeAll), [options, includeAll]);\n\n  const hasDefaultValue = defaultValue !== undefined;\n\n  // Detect value changes outside\n  useEffect(() => {\n    setUncommittedValue(values);\n  }, [values]);\n\n  const onInputChange = (value: string, { action }: InputActionMeta) => {\n    if (action === 'input-change') {\n      setInputValue(value);\n      if (model.onSearchChange) {\n        model.onSearchChange!(value);\n      }\n      return value;\n    }\n\n    if (action === 'input-blur') {\n      setInputValue('');\n      return '';\n    }\n\n    return inputValue;\n  };\n\n  const filteredOptions = useMemo(\n    () => handleOptionGroups(optionSearcher(inputValue).map(toSelectableValue)),\n    [optionSearcher, inputValue]\n  );\n\n  const WideInputWrapper = (children: React.ReactNode) => <div className={styles.selectWrapper}>{children}</div>;\n\n  const select = isMulti ? (\n    <ConditionalWrapper condition={model.state.wideInput ?? false} wrapper={WideInputWrapper}>\n      <MultiSelect<VariableValueSingle>\n        aria-label={t(\n          'grafana-scenes.variables.group-by-variable-renderer.aria-label-group-by-selector',\n          'Group by selector'\n        )}\n        data-testid={`GroupBySelect-${key}`}\n        id={key}\n        placeholder={t(\n          'grafana-scenes.variables.group-by-variable-renderer.placeholder-group-by-label',\n          'Group by label'\n        )}\n        width=\"auto\"\n        className={cx(drilldownRecommendationsEnabled && styles.selectStylesInWrapper)}\n        allowCustomValue={allowCustomValue}\n        inputValue={inputValue}\n        value={uncommittedValue}\n        noMultiValueWrap={true}\n        maxVisibleValues={maxVisibleValues ?? 5}\n        tabSelectsValue={false}\n        virtualized\n        options={filteredOptions}\n        filterOption={filterNoOp}\n        closeMenuOnSelect={false}\n        isOpen={isOptionsOpen}\n        isClearable={true}\n        hideSelectedOptions={false}\n        isLoading={isFetchingOptions}\n        components={{\n          Option: OptionWithCheckbox,\n          Menu: WideMenu,\n          ...(hasDefaultValue\n            ? {\n                IndicatorsContainer: () => <DefaultGroupByCustomIndicatorContainer model={model} />,\n              }\n            : {}),\n          MultiValueContainer: ({ innerProps, children }: React.PropsWithChildren<GroupByContainerProps>) => (\n            <GroupByValueContainer innerProps={innerProps} keysApplicability={keysApplicability}>\n              {children}\n            </GroupByValueContainer>\n          ),\n        }}\n        onInputChange={onInputChange}\n        onBlur={() => {\n          model.changeValueTo(\n            uncommittedValue.map((x) => x.value!),\n            uncommittedValue.map((x) => x.label!),\n            true\n          );\n\n          const restorable = model.checkIfRestorable(uncommittedValue.map((v) => v.value!));\n\n          if (restorable !== model.state.restorable) {\n            model.setState({ restorable: restorable });\n          }\n\n          model._verifyApplicabilityAndStoreRecentGrouping();\n        }}\n        onChange={(newValue, action) => {\n          if (action.action === 'clear' && noValueOnClear) {\n            model.changeValueTo([], undefined, true);\n          }\n\n          setUncommittedValue(newValue);\n          setInputValue('');\n        }}\n        onOpenMenu={async () => {\n          const profiler = getInteractionTracker(model);\n          profiler?.startInteraction(GROUPBY_DIMENSIONS_INTERACTION);\n\n          setIsFetchingOptions(true);\n          await lastValueFrom(model.validateAndUpdate());\n          setIsFetchingOptions(false);\n          setIsOptionsOpen(true);\n\n          profiler?.stopInteraction();\n        }}\n        onCloseMenu={() => {\n          setIsOptionsOpen(false);\n        }}\n      />\n    </ConditionalWrapper>\n  ) : (\n    <ConditionalWrapper condition={model.state.wideInput ?? false} wrapper={WideInputWrapper}>\n      <Select\n        aria-label={t(\n          'grafana-scenes.variables.group-by-variable-renderer.aria-label-group-by-selector',\n          'Group by selector'\n        )}\n        data-testid={`GroupBySelect-${key}`}\n        id={key}\n        placeholder={t(\n          'grafana-scenes.variables.group-by-variable-renderer.placeholder-group-by-label',\n          'Group by label'\n        )}\n        width=\"auto\"\n        inputValue={inputValue}\n        value={uncommittedValue && uncommittedValue.length > 0 ? uncommittedValue : null}\n        allowCustomValue={allowCustomValue}\n        noMultiValueWrap={true}\n        maxVisibleValues={maxVisibleValues ?? 5}\n        tabSelectsValue={false}\n        virtualized\n        options={filteredOptions}\n        filterOption={filterNoOp}\n        closeMenuOnSelect={true}\n        isOpen={isOptionsOpen}\n        isClearable={true}\n        hideSelectedOptions={false}\n        noValueOnClear={true}\n        isLoading={isFetchingOptions}\n        components={{ Menu: WideMenu }}\n        onInputChange={onInputChange}\n        onChange={(newValue, action) => {\n          if (action.action === 'clear') {\n            setUncommittedValue([]);\n            if (noValueOnClear) {\n              model.changeValueTo([]);\n            }\n            return;\n          }\n          if (newValue?.value) {\n            setUncommittedValue([newValue]);\n            model.changeValueTo([newValue.value], newValue.label ? [newValue.label] : undefined);\n          }\n        }}\n        onOpenMenu={async () => {\n          const profiler = getInteractionTracker(model);\n          profiler?.startInteraction(GROUPBY_DIMENSIONS_INTERACTION);\n\n          setIsFetchingOptions(true);\n          await lastValueFrom(model.validateAndUpdate());\n          setIsFetchingOptions(false);\n          setIsOptionsOpen(true);\n\n          profiler?.stopInteraction();\n        }}\n        onCloseMenu={() => {\n          setIsOptionsOpen(false);\n        }}\n      />\n    </ConditionalWrapper>\n  );\n\n  if (!recommendations) {\n    return select;\n  }\n\n  return (\n    <div className={styles.wrapper}>\n      <div className={styles.recommendations}>\n        <recommendations.Component model={recommendations} />\n      </div>\n\n      {select}\n    </div>\n  );\n}\n\nconst ConditionalWrapper = ({\n  condition,\n  wrapper,\n  children,\n}: {\n  condition: boolean;\n  wrapper: (children: React.ReactNode) => React.ReactElement;\n  children: React.ReactNode;\n}) => {\n  return condition ? wrapper(children) : <>{children}</>;\n};\n\nconst filterNoOp = () => true;\n\n// custom minWidth menu component to fit custom value message\nfunction WideMenu<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(\n  props: MenuProps<Option, IsMulti, Group>\n) {\n  return (\n    <components.Menu {...props}>\n      <div style={{ minWidth: '220px' }}>{props.children}</div>\n    </components.Menu>\n  );\n}\n\nfunction toSelectableValue(input: VariableValueOption): SelectableValue<VariableValueSingle> {\n  const { label, value, group } = input;\n  const result: SelectableValue<VariableValueSingle> = {\n    label,\n    value,\n  };\n\n  if (group) {\n    result.group = group;\n  }\n\n  return result;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  selectWrapper: css({\n    display: 'flex',\n    minWidth: 0,\n    width: '100%',\n  }),\n  // Fix for noMultiValueWrap grid layout - prevent pills from stretching\n  // when the select is full width. The grid layout uses gridAutoFlow: column\n  // which stretches items by default.\n  fullWidthMultiSelect: css({\n    width: '100%',\n    // Target the value container (has data-testid) which uses grid layout\n    '& [data-testid]': {\n      gridAutoColumns: 'max-content',\n      justifyItems: 'start',\n    },\n  }),\n  wrapper: css({\n    display: 'flex',\n  }),\n  selectStylesInWrapper: css({\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n    border: `1px solid ${theme.colors.border.strong}`,\n    borderLeft: 'none',\n  }),\n  recommendations: css({\n    display: 'flex',\n    alignItems: 'center',\n    paddingInline: theme.spacing(0.5),\n    borderTop: `1px solid ${theme.colors.border.strong}`,\n    borderBottom: `1px solid ${theme.colors.border.strong}`,\n    backgroundColor: theme.components.input.background,\n    '& button': {\n      borderRadius: 0,\n      height: '100%',\n      margin: 0,\n      paddingInline: theme.spacing(0.5),\n    },\n  }),\n});\n"],"names":["value","_a"],"mappings":"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"}
+{"version":3,"file":"GroupByVariable.js","sources":["../../../../src/variables/groupby/GroupByVariable.tsx"],"sourcesContent":["import { t } from '@grafana/i18n';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport {\n  AdHocVariableFilter,\n  DataSourceApi,\n  // @ts-expect-error (temporary till we update grafana/data)\n  DrilldownsApplicability,\n  GetTagResponse,\n  GrafanaTheme2,\n  MetricFindValue,\n  SelectableValue,\n} from '@grafana/data';\nimport { allActiveGroupByVariables } from './findActiveGroupByVariablesByUid';\nimport { DataSourceRef, VariableType } from '@grafana/schema';\nimport { SceneComponentProps, ControlsLayout, SceneObjectUrlSyncHandler, SceneDataQuery } from '../../core/types';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport {\n  SceneVariableValueChangedEvent,\n  ValidateAndUpdateResult,\n  VariableValue,\n  VariableValueOption,\n  VariableValueSingle,\n} from '../types';\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from '../variants/MultiValueVariable';\nimport { from, lastValueFrom, map, mergeMap, Observable, of, take, tap } from 'rxjs';\nimport { getDataSource } from '../../utils/getDataSource';\nimport { components, GroupBase, MenuProps } from 'react-select';\nimport { InputActionMeta, MultiSelect, Select, useStyles2 } from '@grafana/ui';\nimport { isArray, isEqual } from 'lodash';\nimport {\n  dataFromResponse,\n  getQueriesForVariables,\n  getVariableControlId,\n  handleOptionGroups,\n  responseHasError,\n} from '../utils';\nimport { OptionWithCheckbox } from '../components/VariableValueSelect';\nimport { GroupByVariableUrlSyncHandler } from './GroupByVariableUrlSyncHandler';\nimport { getOptionSearcher } from '../components/getOptionSearcher';\nimport { getEnrichedFiltersRequest } from '../getEnrichedFiltersRequest';\nimport { wrapInSafeSerializableSceneObject } from '../../utils/wrapInSafeSerializableSceneObject';\nimport { DefaultGroupByCustomIndicatorContainer } from './DefaultGroupByCustomIndicatorContainer';\nimport { GroupByValueContainer, GroupByContainerProps } from './GroupByValueContainer';\nimport { getInteractionTracker } from '../../core/sceneGraph/getInteractionTracker';\nimport { GROUPBY_DIMENSIONS_INTERACTION } from '../../performance/interactionConstants';\nimport { css, cx } from '@emotion/css';\nimport { GroupByRecommendations } from './GroupByRecommendations';\n\nexport interface GroupByVariableState extends MultiValueVariableState {\n  /** Defaults to \"Group\" */\n  name: string;\n  /** The visible keys to group on */\n  // TODO review this type and name (naming is hard)\n  defaultOptions?: MetricFindValue[];\n  /** Base filters to always apply when looking up keys */\n  baseFilters?: AdHocVariableFilter[];\n  /** Datasource to use for getTagKeys and also controls which scene queries the group by should apply to */\n  datasource: DataSourceRef | null;\n  /** Default value set for this groupBy. When this field is set, changing value will allow the user to restore back to this default value */\n  defaultValue?: { text: VariableValue; value: VariableValue };\n  /** Needed for url sync when passing flag to another dashboard */\n  restorable?: boolean;\n  /** Controls if the group by can be changed */\n  readOnly?: boolean;\n  /**\n   * @experimental\n   * Controls the layout and design of the label.\n   * Vertical layout does not yet support operator selector.\n   */\n  layout?: ControlsLayout;\n  /**\n   * Defaults to same-datasource which means group by will automatically be applied to all queries with the same data source as this GroupBySet.\n   * In manual mode no queries are re-run on changes, and you have to manually apply the filter to whatever queries you want.\n   */\n  applyMode?: 'auto' | 'manual';\n  /**\n   * Filter out the keys that do not match the regex.\n   */\n  tagKeyRegexFilter?: RegExp;\n  /**\n   * Extension hook for customizing the key lookup.\n   * Return replace: true if you want to override the default lookup\n   * Return replace: false if you want to combine the results with the default lookup\n   */\n  getTagKeysProvider?: getTagKeysProvider;\n  /**\n   * Holds the applicability for each of the selected keys\n   */\n  keysApplicability?: DrilldownsApplicability[];\n  /**\n   * state for checking whether drilldown applicability is enabled\n   */\n  applicabilityEnabled?: boolean;\n  /**\n   * Whether the input should be wide. For example, this is needed when dashboardAdHocAndGroupByWrapper feature toggle is enabled so that\n   * the input fills the remaining space in the row.\n   */\n  wideInput?: boolean;\n\n  /**\n   * enables drilldown recommendations\n   */\n  drilldownRecommendationsEnabled?: boolean;\n}\n\nexport type getTagKeysProvider = (\n  set: GroupByVariable,\n  currentKey: string | null\n) => Promise<{ replace?: boolean; values: MetricFindValue[] | GetTagResponse }>;\n\nexport class GroupByVariable extends MultiValueVariable<GroupByVariableState> {\n  static Component = GroupByVariableRenderer;\n  isLazy = true;\n\n  protected _urlSync: SceneObjectUrlSyncHandler = new GroupByVariableUrlSyncHandler(this);\n\n  private _scopedVars = { __sceneObject: wrapInSafeSerializableSceneObject(this) };\n\n  private _recommendations: GroupByRecommendations | undefined;\n\n  public validateAndUpdate(): Observable<ValidateAndUpdateResult> {\n    return this.getValueOptions({}).pipe(\n      map((options) => {\n        this._updateValueGivenNewOptions(options);\n        return {};\n      })\n    );\n  }\n\n  private _updateValueGivenNewOptions(options: VariableValueOption[]) {\n    const { value: currentValue, text: currentText } = this.state;\n\n    const stateUpdate: Partial<MultiValueVariableState> = {\n      options,\n      loading: false,\n      value: currentValue ?? [],\n      text: currentText ?? [],\n    };\n\n    this.setState(stateUpdate);\n  }\n\n  public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n    // When default dimensions are provided, return the static list\n    if (this.state.defaultOptions) {\n      return of(\n        this.state.defaultOptions.map((o) => ({\n          label: o.text,\n          value: String(o.value),\n          group: o.group,\n        }))\n      );\n    }\n\n    this.setState({ loading: true, error: null });\n\n    return from(getDataSource(this.state.datasource, this._scopedVars)).pipe(\n      mergeMap((ds) => {\n        return from(this._getKeys(ds)).pipe(\n          tap((response) => {\n            if (responseHasError(response)) {\n              this.setState({ error: response.error.message });\n            }\n          }),\n          map((response) => dataFromResponse(response)),\n          take(1),\n          mergeMap((data) => {\n            const a: VariableValueOption[] = data.map((i) => {\n              return {\n                label: i.text,\n                value: i.value ? String(i.value) : i.text,\n                group: i.group,\n              };\n            });\n            return of(a);\n          })\n        );\n      })\n    );\n  }\n\n  public constructor(initialState: Partial<GroupByVariableState>) {\n    const behaviors = initialState.$behaviors ?? [];\n    const recommendations = initialState.drilldownRecommendationsEnabled ? new GroupByRecommendations() : undefined;\n\n    if (recommendations) {\n      behaviors.push(recommendations);\n    }\n\n    super({\n      isMulti: true,\n      name: '',\n      value: [],\n      text: [],\n      options: [],\n      datasource: null,\n      baseFilters: [],\n      applyMode: 'auto',\n      layout: 'horizontal',\n      type: 'groupby' as VariableType,\n      ...initialState,\n      noValueOnClear: true,\n      $behaviors: behaviors.length > 0 ? behaviors : undefined,\n    });\n\n    this._recommendations = recommendations;\n\n    if (this.state.defaultValue) {\n      const currentValue = this.state.value;\n      const hasCurrentValue = Array.isArray(currentValue) ? currentValue.length > 0 : !!currentValue;\n\n      if (!hasCurrentValue) {\n        this.changeValueTo(this.state.defaultValue.value, this.state.defaultValue.text, false);\n      }\n    }\n\n    if (this.state.applyMode === 'auto') {\n      this.addActivationHandler(() => {\n        allActiveGroupByVariables.add(this);\n\n        return () => allActiveGroupByVariables.delete(this);\n      });\n    }\n\n    this.addActivationHandler(this._activationHandler);\n  }\n\n  private _activationHandler = () => {\n    this._verifyApplicability();\n\n    if (this.state.defaultValue) {\n      if (this.checkIfRestorable(this.state.value)) {\n        this.setState({ restorable: true });\n      }\n    }\n\n    return () => {\n      if (this.state.defaultValue) {\n        this.restoreDefaultValues();\n      }\n    };\n  };\n\n  /**\n   * Gets the GroupByRecommendations behavior if it exists in $behaviors\n   */\n  public getRecommendations(): GroupByRecommendations | undefined {\n    return this._recommendations;\n  }\n\n  public getApplicableKeys(): string[] {\n    const { value, keysApplicability } = this.state;\n\n    const valueArray = isArray(value) ? value.map(String) : value ? [String(value)] : [];\n\n    if (!keysApplicability || keysApplicability.length === 0) {\n      return valueArray;\n    }\n\n    const applicableValues = valueArray.filter((val) => {\n      const applicability = keysApplicability.find((item) => item.key === val);\n      return !applicability || applicability.applicable !== false;\n    });\n\n    return applicableValues;\n  }\n\n  public async getGroupByApplicabilityForQueries(\n    value: VariableValue,\n    queries: SceneDataQuery[]\n  ): Promise<DrilldownsApplicability[] | undefined> {\n    const ds = await getDataSource(this.state.datasource, this._scopedVars);\n\n    // @ts-expect-error (temporary till we update grafana/data)\n    if (!ds.getDrilldownsApplicability) {\n      return;\n    }\n\n    const timeRange = sceneGraph.getTimeRange(this).state.value;\n\n    // @ts-expect-error (temporary till we update grafana/data)\n    return await ds.getDrilldownsApplicability({\n      groupByKeys: Array.isArray(value) ? value.map((v) => String(v)) : value ? [String(value)] : [],\n      queries,\n      timeRange,\n      scopes: sceneGraph.getScopes(this),\n      ...getEnrichedFiltersRequest(this),\n    });\n  }\n\n  public async _verifyApplicability() {\n    if (!this.state.applicabilityEnabled) {\n      return;\n    }\n\n    const queries = getQueriesForVariables(this);\n    const value = this.state.value;\n\n    const response = await this.getGroupByApplicabilityForQueries(value, queries);\n\n    if (!response) {\n      return;\n    }\n\n    if (!isEqual(response, this.state.keysApplicability)) {\n      this.setState({ keysApplicability: response ?? undefined });\n\n      this.publishEvent(new SceneVariableValueChangedEvent(this), true);\n    }\n  }\n\n  // This method is related to the defaultValue property. We check if the current value\n  // is different from the default value. If it is, the groupBy will show a button\n  // allowing the user to restore the default values.\n  public checkIfRestorable(values: VariableValue) {\n    const originalValues = isArray(this.state.defaultValue?.value)\n      ? this.state.defaultValue?.value\n      : this.state.defaultValue?.value\n      ? [this.state.defaultValue?.value]\n      : [];\n    const vals = isArray(values) ? values : [values];\n\n    if (vals.length !== originalValues.length) {\n      return true;\n    }\n\n    return !isEqual(vals, originalValues);\n  }\n\n  public restoreDefaultValues() {\n    this.setState({ restorable: false });\n\n    if (!this.state.defaultValue) {\n      return;\n    }\n\n    this.changeValueTo(this.state.defaultValue.value, this.state.defaultValue.text, true);\n  }\n\n  /**\n   * Get possible keys given current filters. Do not call from plugins directly.\n   * @param ds - The datasource to use for fetching keys\n   * @param queries - Optional queries to scope the key lookup. When provided, these are used\n   *   instead of discovering all queries in the scene via getQueriesForVariables.\n   */\n  public _getKeys = async (ds: DataSourceApi, queries?: SceneDataQuery[]) => {\n    // TODO:  provide current dimensions?\n    const override = await this.state.getTagKeysProvider?.(this, null);\n\n    if (override && override.replace) {\n      return override.values;\n    }\n\n    if (this.state.defaultOptions) {\n      return this.state.defaultOptions.concat(dataFromResponse(override?.values ?? []));\n    }\n\n    // @ts-expect-error (temporary till we update grafana/data)\n    if (!ds.getGroupByKeys && !ds.getTagKeys) {\n      return [];\n    }\n\n    // @ts-expect-error (temporary till we update grafana/data)\n    const keyMethod = (ds.getGroupByKeys || ds.getTagKeys).bind(ds);\n\n    const queriesForKeys = queries ?? getQueriesForVariables(this);\n\n    const otherFilters = this.state.baseFilters || [];\n    const timeRange = sceneGraph.getTimeRange(this).state.value;\n    const response = await keyMethod({\n      filters: otherFilters,\n      queries: queriesForKeys,\n      timeRange,\n      scopes: sceneGraph.getScopes(this),\n      ...getEnrichedFiltersRequest(this),\n    });\n    if (responseHasError(response)) {\n      this.setState({ error: response.error.message });\n    }\n\n    let keys = dataFromResponse(response);\n    if (override) {\n      keys = keys.concat(dataFromResponse(override.values));\n    }\n\n    const tagKeyRegexFilter = this.state.tagKeyRegexFilter;\n    if (tagKeyRegexFilter) {\n      keys = keys.filter((f) => f.text.match(tagKeyRegexFilter));\n    }\n\n    return keys;\n  };\n\n  public async _verifyApplicabilityAndStoreRecentGrouping() {\n    await this._verifyApplicability();\n\n    if (!this._recommendations) {\n      return;\n    }\n\n    const applicableValues = this.getApplicableKeys();\n    if (applicableValues.length === 0) {\n      return;\n    }\n\n    this._recommendations.storeRecentGrouping(applicableValues);\n  }\n\n  /**\n   * Allows clearing the value of the variable to an empty value. Overrides default behavior of a MultiValueVariable\n   */\n  public getDefaultMultiState(options: VariableValueOption[]) {\n    return { value: [], text: [] };\n  }\n}\n\nexport function GroupByVariableRenderer({ model }: SceneComponentProps<GroupByVariable>) {\n  const {\n    value,\n    text,\n    key,\n    isMulti = true,\n    maxVisibleValues,\n    noValueOnClear,\n    options,\n    includeAll,\n    allowCustomValue = true,\n    defaultValue,\n    keysApplicability,\n    drilldownRecommendationsEnabled,\n  } = model.useState();\n\n  const recommendations = model.getRecommendations();\n\n  const styles = useStyles2(getStyles);\n\n  const values = useMemo<Array<SelectableValue<VariableValueSingle>>>(() => {\n    const arrayValue = isArray(value) ? value : [value];\n    const arrayText = isArray(text) ? text : [text];\n\n    return arrayValue.map((value, idx) => ({\n      value,\n      label: String(arrayText[idx] ?? value),\n    }));\n  }, [value, text]);\n\n  const [isFetchingOptions, setIsFetchingOptions] = useState(false);\n  const [isOptionsOpen, setIsOptionsOpen] = useState(false);\n  const [inputValue, setInputValue] = useState('');\n\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(values);\n\n  const optionSearcher = useMemo(() => getOptionSearcher(options, includeAll), [options, includeAll]);\n\n  const hasDefaultValue = defaultValue !== undefined;\n\n  // Detect value changes outside\n  useEffect(() => {\n    setUncommittedValue(values);\n  }, [values]);\n\n  const onInputChange = (value: string, { action }: InputActionMeta) => {\n    if (action === 'input-change') {\n      setInputValue(value);\n      if (model.onSearchChange) {\n        model.onSearchChange!(value);\n      }\n      return value;\n    }\n\n    if (action === 'input-blur') {\n      setInputValue('');\n      return '';\n    }\n\n    return inputValue;\n  };\n\n  const filteredOptions = useMemo(\n    () => handleOptionGroups(optionSearcher(inputValue).map(toSelectableValue)),\n    [optionSearcher, inputValue]\n  );\n\n  const WideInputWrapper = (children: React.ReactNode) => <div className={styles.selectWrapper}>{children}</div>;\n\n  const select = isMulti ? (\n    <ConditionalWrapper condition={model.state.wideInput ?? false} wrapper={WideInputWrapper}>\n      <MultiSelect<VariableValueSingle>\n        aria-label={t(\n          'grafana-scenes.variables.group-by-variable-renderer.aria-label-group-by-selector',\n          'Group by selector'\n        )}\n        data-testid={`GroupBySelect-${key}`}\n        id={key}\n        placeholder={t(\n          'grafana-scenes.variables.group-by-variable-renderer.placeholder-group-by-label',\n          'Group by label'\n        )}\n        width=\"auto\"\n        className={cx(drilldownRecommendationsEnabled && styles.selectStylesInWrapper)}\n        allowCustomValue={allowCustomValue}\n        inputValue={inputValue}\n        value={uncommittedValue}\n        noMultiValueWrap={true}\n        maxVisibleValues={maxVisibleValues ?? 5}\n        tabSelectsValue={false}\n        virtualized\n        options={filteredOptions}\n        filterOption={filterNoOp}\n        closeMenuOnSelect={false}\n        isOpen={isOptionsOpen}\n        isClearable={true}\n        hideSelectedOptions={false}\n        isLoading={isFetchingOptions}\n        components={{\n          Option: OptionWithCheckbox,\n          Menu: WideMenu,\n          ...(hasDefaultValue\n            ? {\n                IndicatorsContainer: () => <DefaultGroupByCustomIndicatorContainer model={model} />,\n              }\n            : {}),\n          MultiValueContainer: ({ innerProps, children }: React.PropsWithChildren<GroupByContainerProps>) => (\n            <GroupByValueContainer innerProps={innerProps} keysApplicability={keysApplicability}>\n              {children}\n            </GroupByValueContainer>\n          ),\n        }}\n        onInputChange={onInputChange}\n        onBlur={() => {\n          model.changeValueTo(\n            uncommittedValue.map((x) => x.value!),\n            uncommittedValue.map((x) => x.label!),\n            true\n          );\n\n          const restorable = model.checkIfRestorable(uncommittedValue.map((v) => v.value!));\n\n          if (restorable !== model.state.restorable) {\n            model.setState({ restorable: restorable });\n          }\n\n          model._verifyApplicabilityAndStoreRecentGrouping();\n        }}\n        onChange={(newValue, action) => {\n          if (action.action === 'clear' && noValueOnClear) {\n            model.changeValueTo([], undefined, true);\n          }\n\n          setUncommittedValue(newValue);\n          setInputValue('');\n        }}\n        onOpenMenu={async () => {\n          const profiler = getInteractionTracker(model);\n          profiler?.startInteraction(GROUPBY_DIMENSIONS_INTERACTION);\n\n          setIsFetchingOptions(true);\n          await lastValueFrom(model.validateAndUpdate());\n          setIsFetchingOptions(false);\n          setIsOptionsOpen(true);\n\n          profiler?.stopInteraction();\n        }}\n        onCloseMenu={() => {\n          setIsOptionsOpen(false);\n        }}\n      />\n    </ConditionalWrapper>\n  ) : (\n    <ConditionalWrapper condition={model.state.wideInput ?? false} wrapper={WideInputWrapper}>\n      <Select\n        aria-label={t(\n          'grafana-scenes.variables.group-by-variable-renderer.aria-label-group-by-selector',\n          'Group by selector'\n        )}\n        inputId={getVariableControlId(model.state.type, key)}\n        data-testid={`GroupBySelect-${key}`}\n        id={key}\n        placeholder={t(\n          'grafana-scenes.variables.group-by-variable-renderer.placeholder-group-by-label',\n          'Group by label'\n        )}\n        width=\"auto\"\n        inputValue={inputValue}\n        value={uncommittedValue && uncommittedValue.length > 0 ? uncommittedValue : null}\n        allowCustomValue={allowCustomValue}\n        noMultiValueWrap={true}\n        maxVisibleValues={maxVisibleValues ?? 5}\n        tabSelectsValue={false}\n        virtualized\n        options={filteredOptions}\n        filterOption={filterNoOp}\n        closeMenuOnSelect={true}\n        isOpen={isOptionsOpen}\n        isClearable={true}\n        hideSelectedOptions={false}\n        noValueOnClear={true}\n        isLoading={isFetchingOptions}\n        components={{ Menu: WideMenu }}\n        onInputChange={onInputChange}\n        onChange={(newValue, action) => {\n          if (action.action === 'clear') {\n            setUncommittedValue([]);\n            if (noValueOnClear) {\n              model.changeValueTo([]);\n            }\n            return;\n          }\n          if (newValue?.value) {\n            setUncommittedValue([newValue]);\n            model.changeValueTo([newValue.value], newValue.label ? [newValue.label] : undefined);\n          }\n        }}\n        onOpenMenu={async () => {\n          const profiler = getInteractionTracker(model);\n          profiler?.startInteraction(GROUPBY_DIMENSIONS_INTERACTION);\n\n          setIsFetchingOptions(true);\n          await lastValueFrom(model.validateAndUpdate());\n          setIsFetchingOptions(false);\n          setIsOptionsOpen(true);\n\n          profiler?.stopInteraction();\n        }}\n        onCloseMenu={() => {\n          setIsOptionsOpen(false);\n        }}\n      />\n    </ConditionalWrapper>\n  );\n\n  if (!recommendations) {\n    return select;\n  }\n\n  return (\n    <div className={styles.wrapper}>\n      <div className={styles.recommendations}>\n        <recommendations.Component model={recommendations} />\n      </div>\n\n      {select}\n    </div>\n  );\n}\n\nconst ConditionalWrapper = ({\n  condition,\n  wrapper,\n  children,\n}: {\n  condition: boolean;\n  wrapper: (children: React.ReactNode) => React.ReactElement;\n  children: React.ReactNode;\n}) => {\n  return condition ? wrapper(children) : <>{children}</>;\n};\n\nconst filterNoOp = () => true;\n\n// custom minWidth menu component to fit custom value message\nfunction WideMenu<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(\n  props: MenuProps<Option, IsMulti, Group>\n) {\n  return (\n    <components.Menu {...props}>\n      <div style={{ minWidth: '220px' }}>{props.children}</div>\n    </components.Menu>\n  );\n}\n\nfunction toSelectableValue(input: VariableValueOption): SelectableValue<VariableValueSingle> {\n  const { label, value, group } = input;\n  const result: SelectableValue<VariableValueSingle> = {\n    label,\n    value,\n  };\n\n  if (group) {\n    result.group = group;\n  }\n\n  return result;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  selectWrapper: css({\n    display: 'flex',\n    minWidth: 0,\n    width: '100%',\n  }),\n  // Fix for noMultiValueWrap grid layout - prevent pills from stretching\n  // when the select is full width. The grid layout uses gridAutoFlow: column\n  // which stretches items by default.\n  fullWidthMultiSelect: css({\n    width: '100%',\n    // Target the value container (has data-testid) which uses grid layout\n    '& [data-testid]': {\n      gridAutoColumns: 'max-content',\n      justifyItems: 'start',\n    },\n  }),\n  wrapper: css({\n    display: 'flex',\n  }),\n  selectStylesInWrapper: css({\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n    border: `1px solid ${theme.colors.border.strong}`,\n    borderLeft: 'none',\n  }),\n  recommendations: css({\n    display: 'flex',\n    alignItems: 'center',\n    paddingInline: theme.spacing(0.5),\n    borderTop: `1px solid ${theme.colors.border.strong}`,\n    borderBottom: `1px solid ${theme.colors.border.strong}`,\n    backgroundColor: theme.components.input.background,\n    '& button': {\n      borderRadius: 0,\n      height: '100%',\n      margin: 0,\n      paddingInline: theme.spacing(0.5),\n    },\n  }),\n});\n"],"names":["value","_a"],"mappings":"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"}

package/dist/esm/variables/utils.js

@@ -180,6 +180,12 @@ function handleOptionGroups(values) {
   }
   return result;
 }
+const getVariableControlId = (variableType, key) => {
+  if (variableType === "switch") {
+    return `var-switch-${key}`;
+  }
+  return `var-${key}`;
+};
 function getNonApplicablePillStyles(theme) {
   return {
     disabledPill: css({
@@ -196,5 +202,5 @@ function getNonApplicablePillStyles(theme) {
   };
 }
 
-export { dataFromResponse, escapeLabelValueInExactSelector, escapeLabelValueInRegexSelector, escapeOriginFilterUrlDelimiters, escapeURLDelimiters, escapeUrlCommaDelimiters, escapeUrlHashDelimiters, escapeUrlPipeDelimiters, getNonApplicablePillStyles, getQueriesForVariables, handleOptionGroups, isVariableValueEqual, renderPrometheusLabelFilters, responseHasError, safeStringifyValue, toUrlCommaDelimitedString, unescapeUrlDelimiters };
+export { dataFromResponse, escapeLabelValueInExactSelector, escapeLabelValueInRegexSelector, escapeOriginFilterUrlDelimiters, escapeURLDelimiters, escapeUrlCommaDelimiters, escapeUrlHashDelimiters, escapeUrlPipeDelimiters, getNonApplicablePillStyles, getQueriesForVariables, getVariableControlId, handleOptionGroups, isVariableValueEqual, renderPrometheusLabelFilters, responseHasError, safeStringifyValue, toUrlCommaDelimitedString, unescapeUrlDelimiters };
 //# sourceMappingURL=utils.js.map