@grafana/scenes 6.7.0 → 6.8.1

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+# v6.8.1 (Fri Apr 11 2025)
+
+### Release Notes
+
+#### Variables: Rename renderSelectForVariable to MultiOrSingleValueSelect ([#1097](https://github.com/grafana/scenes/pull/1097))
+
+RenderSelectForVariable was renamed to MultiOrSingleValueSelect and is now React component.
+
+---
+
+#### 🐛 Bug Fix
+
+- Variables: Rename renderSelectForVariable to MultiOrSingleValueSelect [#1097](https://github.com/grafana/scenes/pull/1097) ([@torkelo](https://github.com/torkelo))
+
+#### Authors: 1
+
+- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))
+
+---
+
+# v6.8.0 (Fri Apr 11 2025)
+
+#### 🚀 Enhancement
+
+- Variables: Switch between multi and single select if state changes [#1096](https://github.com/grafana/scenes/pull/1096) ([@torkelo](https://github.com/torkelo))
+- ConstantVariable: Support interpolation and dependency of other variables in constant value [#1094](https://github.com/grafana/scenes/pull/1094) ([@torkelo](https://github.com/torkelo))
+
+#### Authors: 1
+
+- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))
+
+---
+
 # v6.7.0 (Wed Apr 09 2025)
 
 #### 🚀 Enhancement

package/dist/esm/index.js

@@ -77,7 +77,7 @@ export { FieldConfigBuilder } from './core/PanelBuilders/FieldConfigBuilder.js';
 export { VizPanelBuilder } from './core/PanelBuilders/VizPanelBuilder.js';
 export { SceneDebugger } from './components/SceneDebugger/SceneDebugger.js';
 export { ControlsLabel } from './utils/ControlsLabel.js';
-export { renderSelectForVariable } from './variables/components/VariableValueSelect.js';
+export { MultiOrSingleValueSelect } from './variables/components/VariableValueSelect.js';
 export { VizConfigBuilder } from './core/PanelBuilders/VizConfigBuilder.js';
 export { VizConfigBuilders } from './core/PanelBuilders/VizConfigBuilders.js';
 export { SceneScopesBridge } from './core/SceneScopesBridge.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import { getUrlWithAppState } from './components/SceneApp/utils';\nimport { registerRuntimePanelPlugin } from './components/VizPanel/registerRuntimePanelPlugin';\nimport { cloneSceneObjectState } from './core/sceneGraph/utils';\nimport { registerRuntimeDataSource } from './querying/RuntimeDataSource';\nimport { getUrlState, syncStateFromSearchParams } from './services/utils';\n\nimport { registerVariableMacro } from './variables/macros';\nimport {\n  escapeLabelValueInExactSelector,\n  escapeLabelValueInRegexSelector,\n  escapeURLDelimiters,\n  renderPrometheusLabelFilters,\n} from './variables/utils';\nimport {\n  isAdHocVariable,\n  isQueryVariable,\n  isTextBoxVariable,\n  isCustomVariable,\n  isDataSourceVariable,\n  isConstantVariable,\n  isIntervalVariable,\n  isGroupByVariable,\n} from './variables/variants/guards';\n\nexport * from './core/types';\nexport * from './core/events';\nexport { sceneGraph } from './core/sceneGraph';\nexport * as behaviors from './behaviors';\nexport * as dataLayers from './querying/layers';\n\nexport { SceneObjectBase, useSceneObjectState } from './core/SceneObjectBase';\nexport { SceneDataNode } from './core/SceneDataNode';\nexport { SceneTimeRange } from './core/SceneTimeRange';\nexport { SceneTimeZoneOverride } from './core/SceneTimeZoneOverride';\n\nexport { SceneQueryRunner, type QueryRunnerState } from './querying/SceneQueryRunner';\nexport { DataProviderProxy } from './querying/DataProviderProxy';\nexport {\n  type ExtraQueryDescriptor,\n  type ExtraQueryProvider,\n  type ExtraQueryDataProcessor,\n} from './querying/ExtraQueryProvider';\nexport { SceneDataLayerSet, SceneDataLayerSetBase } from './querying/SceneDataLayerSet';\nexport { SceneDataLayerBase } from './querying/layers/SceneDataLayerBase';\nexport { SceneDataLayerControls } from './querying/layers/SceneDataLayerControls';\nexport { SceneDataTransformer, type SceneDataTransformerState } from './querying/SceneDataTransformer';\nexport { registerQueryWithController } from './querying/registerQueryWithController';\nexport { registerRuntimeDataSource, RuntimeDataSource } from './querying/RuntimeDataSource';\nexport type {\n  SceneQueryControllerLike,\n  SceneQueryControllerEntryType,\n  SceneQueryControllerEntry,\n  SceneInteractionProfileEvent,\n} from './behaviors/types';\n\nexport * from './variables/types';\nexport { VariableDependencyConfig } from './variables/VariableDependencyConfig';\nexport { formatRegistry, type FormatVariable } from './variables/interpolation/formatRegistry';\nexport { VariableValueSelectors } from './variables/components/VariableValueSelectors';\nexport { VariableValueControl } from './variables/components/VariableValueControl';\nexport { SceneVariableSet } from './variables/sets/SceneVariableSet';\nexport { ConstantVariable } from './variables/variants/ConstantVariable';\nexport { CustomVariable } from './variables/variants/CustomVariable';\nexport { DataSourceVariable } from './variables/variants/DataSourceVariable';\nexport { QueryVariable } from './variables/variants/query/QueryVariable';\nexport { TestVariable } from './variables/variants/TestVariable';\nexport { TextBoxVariable } from './variables/variants/TextBoxVariable';\nexport {\n  MultiValueVariable,\n  type MultiValueVariableState,\n  type VariableGetOptionsArgs,\n} from './variables/variants/MultiValueVariable';\nexport { LocalValueVariable } from './variables/variants/LocalValueVariable';\nexport { IntervalVariable } from './variables/variants/IntervalVariable';\nexport { AdHocFiltersVariable, FilterOrigin } from './variables/adhoc/AdHocFiltersVariable';\nexport type { AdHocFilterWithLabels } from './variables/adhoc/AdHocFiltersVariable';\nexport { GroupByVariable } from './variables/groupby/GroupByVariable';\nexport { type MacroVariableConstructor } from './variables/macros/types';\n\nexport { type UrlSyncManagerLike, UrlSyncManager, NewSceneObjectAddedEvent } from './services/UrlSyncManager';\nexport { useUrlSync } from './services/useUrlSync';\nexport { UrlSyncContextProvider } from './services/UrlSyncContextProvider';\nexport { SceneObjectUrlSyncConfig } from './services/SceneObjectUrlSyncConfig';\n\nexport { EmbeddedScene, type EmbeddedSceneState } from './components/EmbeddedScene';\nexport { VizPanel, type VizPanelState } from './components/VizPanel/VizPanel';\nexport { VizPanelMenu } from './components/VizPanel/VizPanelMenu';\nexport { VizPanelExploreButton } from './components/VizPanel/VizPanelExploreButton';\nexport { NestedScene } from './components/NestedScene';\nexport { SceneCanvasText } from './components/SceneCanvasText';\nexport { SceneToolbarButton, SceneToolbarInput } from './components/SceneToolbarButton';\nexport { SceneTimePicker } from './components/SceneTimePicker';\nexport { SceneRefreshPicker, type SceneRefreshPickerState } from './components/SceneRefreshPicker';\nexport { SceneTimeRangeTransformerBase } from './core/SceneTimeRangeTransformerBase';\nexport { SceneTimeRangeCompare } from './components/SceneTimeRangeCompare';\nexport { SceneByFrameRepeater } from './components/SceneByFrameRepeater';\nexport { SceneByVariableRepeater } from './components/SceneByVariableRepeater';\nexport { SceneControlsSpacer } from './components/SceneControlsSpacer';\nexport {\n  SceneFlexLayout,\n  SceneFlexItem,\n  type SceneFlexItemState,\n  type SceneFlexItemLike,\n} from './components/layout/SceneFlexLayout';\nexport { SceneCSSGridLayout, SceneCSSGridItem } from './components/layout/CSSGrid/SceneCSSGridLayout';\nexport { SceneGridLayout } from './components/layout/grid/SceneGridLayout';\nexport { SceneGridLayoutDragStartEvent } from './components/layout/grid/types';\nexport { SceneGridItem } from './components/layout/grid/SceneGridItem';\nexport { SceneGridRow } from './components/layout/grid/SceneGridRow';\nexport { type SceneGridItemStateLike, type SceneGridItemLike } from './components/layout/grid/types';\nexport { SplitLayout } from './components/layout/split/SplitLayout';\nexport { LazyLoader } from './components/layout/LazyLoader';\nexport {\n  type SceneAppPageLike,\n  type SceneRouteMatch,\n  type SceneAppPageState,\n  type SceneAppDrilldownView,\n  type SceneAppRoute,\n} from './components/SceneApp/types';\nexport { SceneApp, useSceneApp } from './components/SceneApp/SceneApp';\nexport { SceneAppPage } from './components/SceneApp/SceneAppPage';\nexport { SceneReactObject } from './components/SceneReactObject';\nexport { SceneObjectRef } from './core/SceneObjectRef';\nexport {\n  PanelBuilders,\n  PanelOptionsBuilders,\n  FieldConfigBuilders,\n  FieldConfigOverridesBuilder,\n} from './core/PanelBuilders';\nexport { FieldConfigBuilder } from './core/PanelBuilders/FieldConfigBuilder';\nexport { VizPanelBuilder } from './core/PanelBuilders/VizPanelBuilder';\nexport { SceneDebugger } from './components/SceneDebugger/SceneDebugger';\nexport { VariableValueSelectWrapper } from './variables/components/VariableValueSelectors';\nexport { ControlsLabel } from './utils/ControlsLabel';\nexport { renderSelectForVariable } from './variables/components/VariableValueSelect';\nexport { VizConfigBuilder } from './core/PanelBuilders/VizConfigBuilder';\nexport { VizConfigBuilders } from './core/PanelBuilders/VizConfigBuilders';\nexport { type VizConfig } from './core/PanelBuilders/types';\nexport { SceneScopesBridge } from './core/SceneScopesBridge';\n\nexport const sceneUtils = {\n  getUrlWithAppState,\n  registerRuntimePanelPlugin,\n  registerRuntimeDataSource,\n  registerVariableMacro,\n  cloneSceneObjectState,\n  syncStateFromSearchParams,\n  getUrlState,\n  renderPrometheusLabelFilters,\n  escapeLabelValueInRegexSelector,\n  escapeLabelValueInExactSelector,\n  escapeURLDelimiters,\n\n  // Variable guards\n  isAdHocVariable,\n  isConstantVariable,\n  isCustomVariable,\n  isDataSourceVariable,\n  isIntervalVariable,\n  isQueryVariable,\n  isTextBoxVariable,\n  isGroupByVariable,\n};\n\nexport { SafeSerializableSceneObject } from './utils/SafeSerializableSceneObject';\nexport { getExploreURL } from './utils/explore';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4IO,MAAM,UAAa,GAAA;AAAA,EACxB,kBAAA;AAAA,EACA,0BAAA;AAAA,EACA,yBAAA;AAAA,EACA,qBAAA;AAAA,EACA,qBAAA;AAAA,EACA,yBAAA;AAAA,EACA,WAAA;AAAA,EACA,4BAAA;AAAA,EACA,+BAAA;AAAA,EACA,+BAAA;AAAA,EACA,mBAAA;AAAA;AAAA,EAGA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,gBAAA;AAAA,EACA,oBAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import { getUrlWithAppState } from './components/SceneApp/utils';\nimport { registerRuntimePanelPlugin } from './components/VizPanel/registerRuntimePanelPlugin';\nimport { cloneSceneObjectState } from './core/sceneGraph/utils';\nimport { registerRuntimeDataSource } from './querying/RuntimeDataSource';\nimport { getUrlState, syncStateFromSearchParams } from './services/utils';\n\nimport { registerVariableMacro } from './variables/macros';\nimport {\n  escapeLabelValueInExactSelector,\n  escapeLabelValueInRegexSelector,\n  escapeURLDelimiters,\n  renderPrometheusLabelFilters,\n} from './variables/utils';\nimport {\n  isAdHocVariable,\n  isQueryVariable,\n  isTextBoxVariable,\n  isCustomVariable,\n  isDataSourceVariable,\n  isConstantVariable,\n  isIntervalVariable,\n  isGroupByVariable,\n} from './variables/variants/guards';\n\nexport * from './core/types';\nexport * from './core/events';\nexport { sceneGraph } from './core/sceneGraph';\nexport * as behaviors from './behaviors';\nexport * as dataLayers from './querying/layers';\n\nexport { SceneObjectBase, useSceneObjectState } from './core/SceneObjectBase';\nexport { SceneDataNode } from './core/SceneDataNode';\nexport { SceneTimeRange } from './core/SceneTimeRange';\nexport { SceneTimeZoneOverride } from './core/SceneTimeZoneOverride';\n\nexport { SceneQueryRunner, type QueryRunnerState } from './querying/SceneQueryRunner';\nexport { DataProviderProxy } from './querying/DataProviderProxy';\nexport {\n  type ExtraQueryDescriptor,\n  type ExtraQueryProvider,\n  type ExtraQueryDataProcessor,\n} from './querying/ExtraQueryProvider';\nexport { SceneDataLayerSet, SceneDataLayerSetBase } from './querying/SceneDataLayerSet';\nexport { SceneDataLayerBase } from './querying/layers/SceneDataLayerBase';\nexport { SceneDataLayerControls } from './querying/layers/SceneDataLayerControls';\nexport { SceneDataTransformer, type SceneDataTransformerState } from './querying/SceneDataTransformer';\nexport { registerQueryWithController } from './querying/registerQueryWithController';\nexport { registerRuntimeDataSource, RuntimeDataSource } from './querying/RuntimeDataSource';\nexport type {\n  SceneQueryControllerLike,\n  SceneQueryControllerEntryType,\n  SceneQueryControllerEntry,\n  SceneInteractionProfileEvent,\n} from './behaviors/types';\n\nexport * from './variables/types';\nexport { VariableDependencyConfig } from './variables/VariableDependencyConfig';\nexport { formatRegistry, type FormatVariable } from './variables/interpolation/formatRegistry';\nexport { VariableValueSelectors } from './variables/components/VariableValueSelectors';\nexport { VariableValueControl } from './variables/components/VariableValueControl';\nexport { SceneVariableSet } from './variables/sets/SceneVariableSet';\nexport { ConstantVariable } from './variables/variants/ConstantVariable';\nexport { CustomVariable } from './variables/variants/CustomVariable';\nexport { DataSourceVariable } from './variables/variants/DataSourceVariable';\nexport { QueryVariable } from './variables/variants/query/QueryVariable';\nexport { TestVariable } from './variables/variants/TestVariable';\nexport { TextBoxVariable } from './variables/variants/TextBoxVariable';\nexport {\n  MultiValueVariable,\n  type MultiValueVariableState,\n  type VariableGetOptionsArgs,\n} from './variables/variants/MultiValueVariable';\nexport { LocalValueVariable } from './variables/variants/LocalValueVariable';\nexport { IntervalVariable } from './variables/variants/IntervalVariable';\nexport { AdHocFiltersVariable, FilterOrigin } from './variables/adhoc/AdHocFiltersVariable';\nexport type { AdHocFilterWithLabels } from './variables/adhoc/AdHocFiltersVariable';\nexport { GroupByVariable } from './variables/groupby/GroupByVariable';\nexport { type MacroVariableConstructor } from './variables/macros/types';\n\nexport { type UrlSyncManagerLike, UrlSyncManager, NewSceneObjectAddedEvent } from './services/UrlSyncManager';\nexport { useUrlSync } from './services/useUrlSync';\nexport { UrlSyncContextProvider } from './services/UrlSyncContextProvider';\nexport { SceneObjectUrlSyncConfig } from './services/SceneObjectUrlSyncConfig';\n\nexport { EmbeddedScene, type EmbeddedSceneState } from './components/EmbeddedScene';\nexport { VizPanel, type VizPanelState } from './components/VizPanel/VizPanel';\nexport { VizPanelMenu } from './components/VizPanel/VizPanelMenu';\nexport { VizPanelExploreButton } from './components/VizPanel/VizPanelExploreButton';\nexport { NestedScene } from './components/NestedScene';\nexport { SceneCanvasText } from './components/SceneCanvasText';\nexport { SceneToolbarButton, SceneToolbarInput } from './components/SceneToolbarButton';\nexport { SceneTimePicker } from './components/SceneTimePicker';\nexport { SceneRefreshPicker, type SceneRefreshPickerState } from './components/SceneRefreshPicker';\nexport { SceneTimeRangeTransformerBase } from './core/SceneTimeRangeTransformerBase';\nexport { SceneTimeRangeCompare } from './components/SceneTimeRangeCompare';\nexport { SceneByFrameRepeater } from './components/SceneByFrameRepeater';\nexport { SceneByVariableRepeater } from './components/SceneByVariableRepeater';\nexport { SceneControlsSpacer } from './components/SceneControlsSpacer';\nexport {\n  SceneFlexLayout,\n  SceneFlexItem,\n  type SceneFlexItemState,\n  type SceneFlexItemLike,\n} from './components/layout/SceneFlexLayout';\nexport { SceneCSSGridLayout, SceneCSSGridItem } from './components/layout/CSSGrid/SceneCSSGridLayout';\nexport { SceneGridLayout } from './components/layout/grid/SceneGridLayout';\nexport { SceneGridLayoutDragStartEvent } from './components/layout/grid/types';\nexport { SceneGridItem } from './components/layout/grid/SceneGridItem';\nexport { SceneGridRow } from './components/layout/grid/SceneGridRow';\nexport { type SceneGridItemStateLike, type SceneGridItemLike } from './components/layout/grid/types';\nexport { SplitLayout } from './components/layout/split/SplitLayout';\nexport { LazyLoader } from './components/layout/LazyLoader';\nexport {\n  type SceneAppPageLike,\n  type SceneRouteMatch,\n  type SceneAppPageState,\n  type SceneAppDrilldownView,\n  type SceneAppRoute,\n} from './components/SceneApp/types';\nexport { SceneApp, useSceneApp } from './components/SceneApp/SceneApp';\nexport { SceneAppPage } from './components/SceneApp/SceneAppPage';\nexport { SceneReactObject } from './components/SceneReactObject';\nexport { SceneObjectRef } from './core/SceneObjectRef';\nexport {\n  PanelBuilders,\n  PanelOptionsBuilders,\n  FieldConfigBuilders,\n  FieldConfigOverridesBuilder,\n} from './core/PanelBuilders';\nexport { FieldConfigBuilder } from './core/PanelBuilders/FieldConfigBuilder';\nexport { VizPanelBuilder } from './core/PanelBuilders/VizPanelBuilder';\nexport { SceneDebugger } from './components/SceneDebugger/SceneDebugger';\nexport { VariableValueSelectWrapper } from './variables/components/VariableValueSelectors';\nexport { ControlsLabel } from './utils/ControlsLabel';\nexport { MultiOrSingleValueSelect } from './variables/components/VariableValueSelect';\nexport { VizConfigBuilder } from './core/PanelBuilders/VizConfigBuilder';\nexport { VizConfigBuilders } from './core/PanelBuilders/VizConfigBuilders';\nexport { type VizConfig } from './core/PanelBuilders/types';\nexport { SceneScopesBridge } from './core/SceneScopesBridge';\n\nexport const sceneUtils = {\n  getUrlWithAppState,\n  registerRuntimePanelPlugin,\n  registerRuntimeDataSource,\n  registerVariableMacro,\n  cloneSceneObjectState,\n  syncStateFromSearchParams,\n  getUrlState,\n  renderPrometheusLabelFilters,\n  escapeLabelValueInRegexSelector,\n  escapeLabelValueInExactSelector,\n  escapeURLDelimiters,\n\n  // Variable guards\n  isAdHocVariable,\n  isConstantVariable,\n  isCustomVariable,\n  isDataSourceVariable,\n  isIntervalVariable,\n  isQueryVariable,\n  isTextBoxVariable,\n  isGroupByVariable,\n};\n\nexport { SafeSerializableSceneObject } from './utils/SafeSerializableSceneObject';\nexport { getExploreURL } from './utils/explore';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4IO,MAAM,UAAa,GAAA;AAAA,EACxB,kBAAA;AAAA,EACA,0BAAA;AAAA,EACA,yBAAA;AAAA,EACA,qBAAA;AAAA,EACA,qBAAA;AAAA,EACA,yBAAA;AAAA,EACA,WAAA;AAAA,EACA,4BAAA;AAAA,EACA,+BAAA;AAAA,EACA,+BAAA;AAAA,EACA,mBAAA;AAAA;AAAA,EAGA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,gBAAA;AAAA,EACA,oBAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF;;;;"}

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

@@ -23,8 +23,8 @@ function toSelectableValue(value, label) {
     label: label != null ? label : String(value)
   };
 }
-function VariableValueSelect({ model }) {
-  const { value, text, key, options, includeAll, isReadOnly, allowCustomValue = true } = model.useState();
+function VariableValueSelect({ model, state }) {
+  const { value, text, key, options, includeAll, isReadOnly, allowCustomValue = true } = state;
   const [inputValue, setInputValue] = useState("");
   const [hasCustomValue, setHasCustomValue] = useState(false);
   const selectValue = toSelectableValue(value, String(text));
@@ -78,7 +78,10 @@ function VariableValueSelect({ model }) {
     }
   );
 }
-function VariableValueSelectMulti({ model }) {
+function VariableValueSelectMulti({
+  model,
+  state
+}) {
   const {
     value,
     options,
@@ -88,7 +91,7 @@ function VariableValueSelectMulti({ model }) {
     includeAll,
     isReadOnly,
     allowCustomValue = true
-  } = model.useState();
+  } = state;
   const arrayValue = useMemo(() => isArray(value) ? value : [value], [value]);
   const [uncommittedValue, setUncommittedValue] = useState(arrayValue);
   const [inputValue, setInputValue] = useState("");
@@ -196,13 +199,14 @@ const getOptionStyles = (theme) => ({
     marginRight: theme.spacing(2)
   })
 });
-function renderSelectForVariable(model) {
-  if (model.state.isMulti) {
-    return /* @__PURE__ */ React.createElement(VariableValueSelectMulti, { model });
+function MultiOrSingleValueSelect({ model }) {
+  const state = model.useState();
+  if (state.isMulti) {
+    return /* @__PURE__ */ React.createElement(VariableValueSelectMulti, { model, state });
   } else {
-    return /* @__PURE__ */ React.createElement(VariableValueSelect, { model });
+    return /* @__PURE__ */ React.createElement(VariableValueSelect, { model, state });
   }
 }
 
-export { OptionWithCheckbox, VariableValueSelect, VariableValueSelectMulti, renderSelectForVariable, toSelectableValue };
+export { MultiOrSingleValueSelect, OptionWithCheckbox, VariableValueSelect, VariableValueSelectMulti, toSelectableValue };
 //# sourceMappingURL=VariableValueSelect.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VariableValueSelect.js","sources":["../../../../src/variables/components/VariableValueSelect.tsx"],"sourcesContent":["import { 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 { SceneComponentProps } from '../../core/types';\nimport { MultiValueVariable } 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';\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 }: SceneComponentProps<MultiValueVariable>) {\n  const { value, text, key, options, includeAll, isReadOnly, allowCustomValue = true } = model.useState();\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=\"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('VariableValueSelect');\n\n        if (hasCustomValue !== newValue.__isNew__) {\n          setHasCustomValue(newValue.__isNew__);\n        }\n      }}\n    />\n  );\n}\n\nexport function VariableValueSelectMulti({ model }: SceneComponentProps<MultiValueVariable>) {\n  const {\n    value,\n    options,\n    key,\n    maxVisibleValues,\n    noValueOnClear,\n    includeAll,\n    isReadOnly,\n    allowCustomValue = true,\n  } = model.useState();\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  const queryController = sceneGraph.getQueryController(model);\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        queryController?.startProfile('VariableValueSelectMulti');\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 renderSelectForVariable(model: MultiValueVariable) {\n  if (model.state.isMulti) {\n    return <VariableValueSelectMulti model={model} />;\n  } else {\n    return <VariableValueSelect model={model} />;\n  }\n}\n"],"names":["value","inputValue"],"mappings":"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"}
+{"version":3,"file":"VariableValueSelect.js","sources":["../../../../src/variables/components/VariableValueSelect.tsx"],"sourcesContent":["import { 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';\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=\"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('VariableValueSelect');\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  const queryController = sceneGraph.getQueryController(model);\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        queryController?.startProfile('VariableValueSelectMulti');\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/variants/ConstantVariable.js

@@ -1,4 +1,8 @@
+import { of } from 'rxjs';
 import { SceneObjectBase } from '../../core/SceneObjectBase.js';
+import { sceneGraph } from '../../core/sceneGraph/index.js';
+import { VariableDependencyConfig } from '../VariableDependencyConfig.js';
+import { SceneVariableValueChangedEvent } from '../types.js';
 
 class ConstantVariable extends SceneObjectBase {
   constructor(initialState) {
@@ -9,8 +13,26 @@ class ConstantVariable extends SceneObjectBase {
       ...initialState,
       skipUrlSync: true
     });
+    this._variableDependency = new VariableDependencyConfig(this, {
+      statePaths: ["value"]
+    });
+    this._prevValue = "";
+  }
+  /**
+   * This function is called on when SceneVariableSet is activated or when a dependency changes.
+   */
+  validateAndUpdate() {
+    const newValue = this.getValue();
+    if (this._prevValue !== newValue) {
+      this._prevValue = newValue;
+      this.publishEvent(new SceneVariableValueChangedEvent(this), true);
+    }
+    return of({});
   }
   getValue() {
+    if (typeof this.state.value === "string") {
+      return sceneGraph.interpolate(this, this.state.value);
+    }
     return this.state.value;
   }
 }

package/dist/esm/variables/variants/ConstantVariable.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConstantVariable.js","sources":["../../../../src/variables/variants/ConstantVariable.ts"],"sourcesContent":["import { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneVariable, SceneVariableState, VariableValue } from '../types';\n\nexport interface ConstantVariableState extends SceneVariableState {\n  value: VariableValue;\n}\n\nexport class ConstantVariable\n  extends SceneObjectBase<ConstantVariableState>\n  implements SceneVariable<ConstantVariableState>\n{\n  public constructor(initialState: Partial<ConstantVariableState>) {\n    super({\n      type: 'constant',\n      value: '',\n      name: '',\n      ...initialState,\n      skipUrlSync: true,\n    });\n  }\n\n  public getValue(): VariableValue {\n    return this.state.value;\n  }\n}\n"],"names":[],"mappings":";;AAOO,MAAM,yBACH,eAEV,CAAA;AAAA,EACS,YAAY,YAA8C,EAAA;AAC/D,IAAM,KAAA,CAAA;AAAA,MACJ,IAAM,EAAA,UAAA;AAAA,MACN,KAAO,EAAA,EAAA;AAAA,MACP,IAAM,EAAA,EAAA;AAAA,MACN,GAAG,YAAA;AAAA,MACH,WAAa,EAAA;AAAA,KACd,CAAA;AAAA;AACH,EAEO,QAA0B,GAAA;AAC/B,IAAA,OAAO,KAAK,KAAM,CAAA,KAAA;AAAA;AAEtB;;;;"}
+{"version":3,"file":"ConstantVariable.js","sources":["../../../../src/variables/variants/ConstantVariable.ts"],"sourcesContent":["import { Observable, of } from 'rxjs';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { VariableDependencyConfig } from '../VariableDependencyConfig';\nimport {\n  SceneVariable,\n  SceneVariableState,\n  SceneVariableValueChangedEvent,\n  ValidateAndUpdateResult,\n  VariableValue,\n} from '../types';\n\nexport interface ConstantVariableState extends SceneVariableState {\n  value: VariableValue;\n}\n\nexport class ConstantVariable\n  extends SceneObjectBase<ConstantVariableState>\n  implements SceneVariable<ConstantVariableState>\n{\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['value'],\n  });\n\n  private _prevValue: VariableValue = '';\n\n  public constructor(initialState: Partial<ConstantVariableState>) {\n    super({\n      type: 'constant',\n      value: '',\n      name: '',\n      ...initialState,\n      skipUrlSync: true,\n    });\n  }\n\n  /**\n   * This function is called on when SceneVariableSet is activated or when a dependency changes.\n   */\n  public validateAndUpdate(): Observable<ValidateAndUpdateResult> {\n    const newValue = this.getValue();\n\n    if (this._prevValue !== newValue) {\n      this._prevValue = newValue;\n      this.publishEvent(new SceneVariableValueChangedEvent(this), true);\n    }\n\n    return of({});\n  }\n\n  public getValue(): VariableValue {\n    if (typeof this.state.value === 'string') {\n      return sceneGraph.interpolate(this, this.state.value);\n    }\n\n    return this.state.value;\n  }\n}\n"],"names":[],"mappings":";;;;;;AAgBO,MAAM,yBACH,eAEV,CAAA;AAAA,EAOS,YAAY,YAA8C,EAAA;AAC/D,IAAM,KAAA,CAAA;AAAA,MACJ,IAAM,EAAA,UAAA;AAAA,MACN,KAAO,EAAA,EAAA;AAAA,MACP,IAAM,EAAA,EAAA;AAAA,MACN,GAAG,YAAA;AAAA,MACH,WAAa,EAAA;AAAA,KACd,CAAA;AAbH,IAAU,IAAA,CAAA,mBAAA,GAAsB,IAAI,wBAAA,CAAyB,IAAM,EAAA;AAAA,MACjE,UAAA,EAAY,CAAC,OAAO;AAAA,KACrB,CAAA;AAED,IAAA,IAAA,CAAQ,UAA4B,GAAA,EAAA;AAAA;AAUpC;AAAA;AAAA;AAAA,EAKO,iBAAyD,GAAA;AAC9D,IAAM,MAAA,QAAA,GAAW,KAAK,QAAS,EAAA;AAE/B,IAAI,IAAA,IAAA,CAAK,eAAe,QAAU,EAAA;AAChC,MAAA,IAAA,CAAK,UAAa,GAAA,QAAA;AAClB,MAAA,IAAA,CAAK,YAAa,CAAA,IAAI,8BAA+B,CAAA,IAAI,GAAG,IAAI,CAAA;AAAA;AAGlE,IAAO,OAAA,EAAA,CAAG,EAAE,CAAA;AAAA;AACd,EAEO,QAA0B,GAAA;AAC/B,IAAA,IAAI,OAAO,IAAA,CAAK,KAAM,CAAA,KAAA,KAAU,QAAU,EAAA;AACxC,MAAA,OAAO,UAAW,CAAA,WAAA,CAAY,IAAM,EAAA,IAAA,CAAK,MAAM,KAAK,CAAA;AAAA;AAGtD,IAAA,OAAO,KAAK,KAAM,CAAA,KAAA;AAAA;AAEtB;;;;"}

package/dist/esm/variables/variants/CustomVariable.js

@@ -1,8 +1,9 @@
 import { of } from 'rxjs';
 import { VariableDependencyConfig } from '../VariableDependencyConfig.js';
-import { renderSelectForVariable } from '../components/VariableValueSelect.js';
+import { MultiOrSingleValueSelect } from '../components/VariableValueSelect.js';
 import { MultiValueVariable } from './MultiValueVariable.js';
 import { sceneGraph } from '../../core/sceneGraph/index.js';
+import React from 'react';
 
 class CustomVariable extends MultiValueVariable {
   constructor(initialState) {
@@ -41,7 +42,7 @@ class CustomVariable extends MultiValueVariable {
   }
 }
 CustomVariable.Component = ({ model }) => {
-  return renderSelectForVariable(model);
+  return /* @__PURE__ */ React.createElement(MultiOrSingleValueSelect, { model });
 };
 
 export { CustomVariable };

package/dist/esm/variables/variants/CustomVariable.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomVariable.js","sources":["../../../../src/variables/variants/CustomVariable.tsx"],"sourcesContent":["import { Observable, of } from 'rxjs';\n\nimport { SceneComponentProps } from '../../core/types';\nimport { VariableDependencyConfig } from '../VariableDependencyConfig';\nimport { renderSelectForVariable } from '../components/VariableValueSelect';\nimport { VariableValueOption } from '../types';\n\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from './MultiValueVariable';\nimport { sceneGraph } from '../../core/sceneGraph';\n\nexport interface CustomVariableState extends MultiValueVariableState {\n  query: string;\n}\n\nexport class CustomVariable extends MultiValueVariable<CustomVariableState> {\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['query'],\n  });\n\n  public constructor(initialState: Partial<CustomVariableState>) {\n    super({\n      type: 'custom',\n      query: '',\n      value: '',\n      text: '',\n      options: [],\n      name: '',\n      ...initialState,\n    });\n  }\n\n  public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n    const interpolated = sceneGraph.interpolate(this, this.state.query);\n    const match = interpolated.match(/(?:\\\\,|[^,])+/g) ?? [];\n\n    const options = match.map((text) => {\n      text = text.replace(/\\\\,/g, ',');\n      const textMatch = /^(.+)\\s:\\s(.+)$/g.exec(text) ?? [];\n      if (textMatch.length === 3) {\n        const [, key, value] = textMatch;\n        return { label: key.trim(), value: value.trim() };\n      } else {\n        return { label: text.trim(), value: text.trim() };\n      }\n    });\n\n    if (!options.length) {\n      this.skipNextValidation = true;\n    }\n\n    return of(options);\n  }\n\n  public static Component = ({ model }: SceneComponentProps<MultiValueVariable>) => {\n    return renderSelectForVariable(model);\n  };\n}\n"],"names":["_a"],"mappings":";;;;;;AAcO,MAAM,uBAAuB,kBAAwC,CAAA;AAAA,EAKnE,YAAY,YAA4C,EAAA;AAC7D,IAAM,KAAA,CAAA;AAAA,MACJ,IAAM,EAAA,QAAA;AAAA,MACN,KAAO,EAAA,EAAA;AAAA,MACP,KAAO,EAAA,EAAA;AAAA,MACP,IAAM,EAAA,EAAA;AAAA,MACN,SAAS,EAAC;AAAA,MACV,IAAM,EAAA,EAAA;AAAA,MACN,GAAG;AAAA,KACJ,CAAA;AAbH,IAAU,IAAA,CAAA,mBAAA,GAAsB,IAAI,wBAAA,CAAyB,IAAM,EAAA;AAAA,MACjE,UAAA,EAAY,CAAC,OAAO;AAAA,KACrB,CAAA;AAAA;AAYD,EAEO,gBAAgB,IAAiE,EAAA;AA/B1F,IAAA,IAAA,EAAA;AAgCI,IAAA,MAAM,eAAe,UAAW,CAAA,WAAA,CAAY,IAAM,EAAA,IAAA,CAAK,MAAM,KAAK,CAAA;AAClE,IAAA,MAAM,SAAQ,EAAa,GAAA,YAAA,CAAA,KAAA,CAAM,gBAAgB,CAAA,KAAnC,YAAwC,EAAC;AAEvD,IAAA,MAAM,OAAU,GAAA,KAAA,CAAM,GAAI,CAAA,CAAC,IAAS,KAAA;AAnCxC,MAAAA,IAAAA,GAAAA;AAoCM,MAAO,IAAA,GAAA,IAAA,CAAK,OAAQ,CAAA,MAAA,EAAQ,GAAG,CAAA;AAC/B,MAAM,MAAA,SAAA,GAAA,CAAYA,MAAA,kBAAmB,CAAA,IAAA,CAAK,IAAI,CAA5B,KAAA,IAAA,GAAAA,MAAiC,EAAC;AACpD,MAAI,IAAA,SAAA,CAAU,WAAW,CAAG,EAAA;AAC1B,QAAA,MAAM,GAAG,GAAK,EAAA,KAAK,CAAI,GAAA,SAAA;AACvB,QAAO,OAAA,EAAE,OAAO,GAAI,CAAA,IAAA,IAAQ,KAAO,EAAA,KAAA,CAAM,MAAO,EAAA;AAAA,OAC3C,MAAA;AACL,QAAO,OAAA,EAAE,OAAO,IAAK,CAAA,IAAA,IAAQ,KAAO,EAAA,IAAA,CAAK,MAAO,EAAA;AAAA;AAClD,KACD,CAAA;AAED,IAAI,IAAA,CAAC,QAAQ,MAAQ,EAAA;AACnB,MAAA,IAAA,CAAK,kBAAqB,GAAA,IAAA;AAAA;AAG5B,IAAA,OAAO,GAAG,OAAO,CAAA;AAAA;AAMrB;AA1Ca,cAAA,CAuCG,SAAY,GAAA,CAAC,EAAE,KAAA,EAAqD,KAAA;AAChF,EAAA,OAAO,wBAAwB,KAAK,CAAA;AACtC,CAAA;;;;"}
+{"version":3,"file":"CustomVariable.js","sources":["../../../../src/variables/variants/CustomVariable.tsx"],"sourcesContent":["import { Observable, of } from 'rxjs';\n\nimport { SceneComponentProps } from '../../core/types';\nimport { VariableDependencyConfig } from '../VariableDependencyConfig';\nimport { MultiOrSingleValueSelect } from '../components/VariableValueSelect';\nimport { VariableValueOption } from '../types';\n\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from './MultiValueVariable';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport React from 'react';\n\nexport interface CustomVariableState extends MultiValueVariableState {\n  query: string;\n}\n\nexport class CustomVariable extends MultiValueVariable<CustomVariableState> {\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['query'],\n  });\n\n  public constructor(initialState: Partial<CustomVariableState>) {\n    super({\n      type: 'custom',\n      query: '',\n      value: '',\n      text: '',\n      options: [],\n      name: '',\n      ...initialState,\n    });\n  }\n\n  public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n    const interpolated = sceneGraph.interpolate(this, this.state.query);\n    const match = interpolated.match(/(?:\\\\,|[^,])+/g) ?? [];\n\n    const options = match.map((text) => {\n      text = text.replace(/\\\\,/g, ',');\n      const textMatch = /^(.+)\\s:\\s(.+)$/g.exec(text) ?? [];\n      if (textMatch.length === 3) {\n        const [, key, value] = textMatch;\n        return { label: key.trim(), value: value.trim() };\n      } else {\n        return { label: text.trim(), value: text.trim() };\n      }\n    });\n\n    if (!options.length) {\n      this.skipNextValidation = true;\n    }\n\n    return of(options);\n  }\n\n  public static Component = ({ model }: SceneComponentProps<MultiValueVariable>) => {\n    return <MultiOrSingleValueSelect model={model} />;\n  };\n}\n"],"names":["_a"],"mappings":";;;;;;;AAeO,MAAM,uBAAuB,kBAAwC,CAAA;AAAA,EAKnE,YAAY,YAA4C,EAAA;AAC7D,IAAM,KAAA,CAAA;AAAA,MACJ,IAAM,EAAA,QAAA;AAAA,MACN,KAAO,EAAA,EAAA;AAAA,MACP,KAAO,EAAA,EAAA;AAAA,MACP,IAAM,EAAA,EAAA;AAAA,MACN,SAAS,EAAC;AAAA,MACV,IAAM,EAAA,EAAA;AAAA,MACN,GAAG;AAAA,KACJ,CAAA;AAbH,IAAU,IAAA,CAAA,mBAAA,GAAsB,IAAI,wBAAA,CAAyB,IAAM,EAAA;AAAA,MACjE,UAAA,EAAY,CAAC,OAAO;AAAA,KACrB,CAAA;AAAA;AAYD,EAEO,gBAAgB,IAAiE,EAAA;AAhC1F,IAAA,IAAA,EAAA;AAiCI,IAAA,MAAM,eAAe,UAAW,CAAA,WAAA,CAAY,IAAM,EAAA,IAAA,CAAK,MAAM,KAAK,CAAA;AAClE,IAAA,MAAM,SAAQ,EAAa,GAAA,YAAA,CAAA,KAAA,CAAM,gBAAgB,CAAA,KAAnC,YAAwC,EAAC;AAEvD,IAAA,MAAM,OAAU,GAAA,KAAA,CAAM,GAAI,CAAA,CAAC,IAAS,KAAA;AApCxC,MAAAA,IAAAA,GAAAA;AAqCM,MAAO,IAAA,GAAA,IAAA,CAAK,OAAQ,CAAA,MAAA,EAAQ,GAAG,CAAA;AAC/B,MAAM,MAAA,SAAA,GAAA,CAAYA,MAAA,kBAAmB,CAAA,IAAA,CAAK,IAAI,CAA5B,KAAA,IAAA,GAAAA,MAAiC,EAAC;AACpD,MAAI,IAAA,SAAA,CAAU,WAAW,CAAG,EAAA;AAC1B,QAAA,MAAM,GAAG,GAAK,EAAA,KAAK,CAAI,GAAA,SAAA;AACvB,QAAO,OAAA,EAAE,OAAO,GAAI,CAAA,IAAA,IAAQ,KAAO,EAAA,KAAA,CAAM,MAAO,EAAA;AAAA,OAC3C,MAAA;AACL,QAAO,OAAA,EAAE,OAAO,IAAK,CAAA,IAAA,IAAQ,KAAO,EAAA,IAAA,CAAK,MAAO,EAAA;AAAA;AAClD,KACD,CAAA;AAED,IAAI,IAAA,CAAC,QAAQ,MAAQ,EAAA;AACnB,MAAA,IAAA,CAAK,kBAAqB,GAAA,IAAA;AAAA;AAG5B,IAAA,OAAO,GAAG,OAAO,CAAA;AAAA;AAMrB;AA1Ca,cAAA,CAuCG,SAAY,GAAA,CAAC,EAAE,KAAA,EAAqD,KAAA;AAChF,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,4BAAyB,KAAc,EAAA,CAAA;AACjD,CAAA;;;;"}

package/dist/esm/variables/variants/DataSourceVariable.js

@@ -3,8 +3,9 @@ import { stringToJsRegex } from '@grafana/data';
 import { getDataSourceSrv } from '@grafana/runtime';
 import { sceneGraph } from '../../core/sceneGraph/index.js';
 import { VariableDependencyConfig } from '../VariableDependencyConfig.js';
-import { renderSelectForVariable } from '../components/VariableValueSelect.js';
+import { MultiOrSingleValueSelect } from '../components/VariableValueSelect.js';
 import { MultiValueVariable } from './MultiValueVariable.js';
+import React from 'react';
 
 class DataSourceVariable extends MultiValueVariable {
   constructor(initialState) {
@@ -51,7 +52,7 @@ class DataSourceVariable extends MultiValueVariable {
   }
 }
 DataSourceVariable.Component = ({ model }) => {
-  return renderSelectForVariable(model);
+  return /* @__PURE__ */ React.createElement(MultiOrSingleValueSelect, { model });
 };
 function isValid(source, regex) {
   if (!regex) {

package/dist/esm/variables/variants/DataSourceVariable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataSourceVariable.js","sources":["../../../../src/variables/variants/DataSourceVariable.tsx"],"sourcesContent":["import { Observable, of } from 'rxjs';\n\nimport { stringToJsRegex, DataSourceInstanceSettings } from '@grafana/data';\nimport { getDataSourceSrv } from '@grafana/runtime';\n\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneComponentProps } from '../../core/types';\nimport { VariableDependencyConfig } from '../VariableDependencyConfig';\nimport { renderSelectForVariable } from '../components/VariableValueSelect';\nimport { VariableValueOption } from '../types';\n\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from './MultiValueVariable';\n\nexport interface DataSourceVariableState extends MultiValueVariableState {\n  /**\n   * Include all data source instances with this plugin id\n   */\n  pluginId: string;\n  /**\n   * Filter data source instances based on name\n   */\n  regex: string;\n  /**\n   * For backwards compatability with old dashboards, will likely be removed\n   */\n  defaultOptionEnabled?: boolean;\n}\n\nexport class DataSourceVariable extends MultiValueVariable<DataSourceVariableState> {\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['regex'],\n  });\n\n  public constructor(initialState: Partial<DataSourceVariableState>) {\n    super({\n      type: 'datasource',\n      value: '',\n      text: '',\n      options: [],\n      name: '',\n      regex: '',\n      pluginId: '',\n      ...initialState,\n    });\n  }\n\n  public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n    if (!this.state.pluginId) {\n      return of([]);\n    }\n\n    const dataSources = getDataSourceSrv().getList({ metrics: true, variables: false, pluginId: this.state.pluginId });\n\n    let regex;\n    if (this.state.regex) {\n      const interpolated = sceneGraph.interpolate(this, this.state.regex, undefined, 'regex');\n      regex = stringToJsRegex(interpolated);\n    }\n\n    const options: VariableValueOption[] = [];\n\n    for (let i = 0; i < dataSources.length; i++) {\n      const source = dataSources[i];\n\n      if (isValid(source, regex)) {\n        options.push({ label: source.name, value: source.uid });\n      }\n\n      if (this.state.defaultOptionEnabled && isDefault(source, regex)) {\n        options.push({ label: 'default', value: 'default' });\n      }\n    }\n\n    if (options.length === 0) {\n      this.setState({ error: 'No data sources found' });\n    } else if (this.state.error) {\n      this.setState({ error: null });\n    }\n\n    return of(options);\n  }\n\n  public static Component = ({ model }: SceneComponentProps<MultiValueVariable>) => {\n    return renderSelectForVariable(model);\n  };\n}\n\nfunction isValid(source: DataSourceInstanceSettings, regex?: RegExp) {\n  if (!regex) {\n    return true;\n  }\n\n  return regex.exec(source.name);\n}\n\nfunction isDefault(source: DataSourceInstanceSettings, regex?: RegExp) {\n  if (!source.isDefault) {\n    return false;\n  }\n\n  if (!regex) {\n    return true;\n  }\n\n  return regex.exec('default');\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataSourceVariable.js","sources":["../../../../src/variables/variants/DataSourceVariable.tsx"],"sourcesContent":["import { Observable, of } from 'rxjs';\n\nimport { stringToJsRegex, DataSourceInstanceSettings } from '@grafana/data';\nimport { getDataSourceSrv } from '@grafana/runtime';\n\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneComponentProps } from '../../core/types';\nimport { VariableDependencyConfig } from '../VariableDependencyConfig';\nimport { MultiOrSingleValueSelect } from '../components/VariableValueSelect';\nimport { VariableValueOption } from '../types';\n\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from './MultiValueVariable';\nimport React from 'react';\n\nexport interface DataSourceVariableState extends MultiValueVariableState {\n  /**\n   * Include all data source instances with this plugin id\n   */\n  pluginId: string;\n  /**\n   * Filter data source instances based on name\n   */\n  regex: string;\n  /**\n   * For backwards compatability with old dashboards, will likely be removed\n   */\n  defaultOptionEnabled?: boolean;\n}\n\nexport class DataSourceVariable extends MultiValueVariable<DataSourceVariableState> {\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['regex'],\n  });\n\n  public constructor(initialState: Partial<DataSourceVariableState>) {\n    super({\n      type: 'datasource',\n      value: '',\n      text: '',\n      options: [],\n      name: '',\n      regex: '',\n      pluginId: '',\n      ...initialState,\n    });\n  }\n\n  public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n    if (!this.state.pluginId) {\n      return of([]);\n    }\n\n    const dataSources = getDataSourceSrv().getList({ metrics: true, variables: false, pluginId: this.state.pluginId });\n\n    let regex;\n    if (this.state.regex) {\n      const interpolated = sceneGraph.interpolate(this, this.state.regex, undefined, 'regex');\n      regex = stringToJsRegex(interpolated);\n    }\n\n    const options: VariableValueOption[] = [];\n\n    for (let i = 0; i < dataSources.length; i++) {\n      const source = dataSources[i];\n\n      if (isValid(source, regex)) {\n        options.push({ label: source.name, value: source.uid });\n      }\n\n      if (this.state.defaultOptionEnabled && isDefault(source, regex)) {\n        options.push({ label: 'default', value: 'default' });\n      }\n    }\n\n    if (options.length === 0) {\n      this.setState({ error: 'No data sources found' });\n    } else if (this.state.error) {\n      this.setState({ error: null });\n    }\n\n    return of(options);\n  }\n\n  public static Component = ({ model }: SceneComponentProps<MultiValueVariable>) => {\n    return <MultiOrSingleValueSelect model={model} />;\n  };\n}\n\nfunction isValid(source: DataSourceInstanceSettings, regex?: RegExp) {\n  if (!regex) {\n    return true;\n  }\n\n  return regex.exec(source.name);\n}\n\nfunction isDefault(source: DataSourceInstanceSettings, regex?: RegExp) {\n  if (!source.isDefault) {\n    return false;\n  }\n\n  if (!regex) {\n    return true;\n  }\n\n  return regex.exec('default');\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/variables/variants/TestVariable.js

@@ -2,11 +2,12 @@ import { Subject, Observable } from 'rxjs';
 import { sceneGraph } from '../../core/sceneGraph/index.js';
 import { queryMetricTree } from '../../utils/metricTree.js';
 import { VariableDependencyConfig } from '../VariableDependencyConfig.js';
-import { renderSelectForVariable } from '../components/VariableValueSelect.js';
+import { MultiOrSingleValueSelect } from '../components/VariableValueSelect.js';
 import { MultiValueVariable } from './MultiValueVariable.js';
 import { VariableRefresh } from '@grafana/data';
 import { getClosest } from '../../core/sceneGraph/utils.js';
 import { SceneVariableSet } from '../sets/SceneVariableSet.js';
+import React from 'react';
 
 class TestVariable extends MultiValueVariable {
   constructor(initialState, isLazy = false) {
@@ -96,7 +97,7 @@ class TestVariable extends MultiValueVariable {
   }
 }
 TestVariable.Component = ({ model }) => {
-  return renderSelectForVariable(model);
+  return /* @__PURE__ */ React.createElement(MultiOrSingleValueSelect, { model });
 };
 
 export { TestVariable };

package/dist/esm/variables/variants/TestVariable.js.map

@@ -1 +1 @@
-{"version":3,"file":"TestVariable.js","sources":["../../../../src/variables/variants/TestVariable.tsx"],"sourcesContent":["import { Observable, Subject } from 'rxjs';\n\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneComponentProps } from '../../core/types';\nimport { queryMetricTree } from '../../utils/metricTree';\nimport { VariableDependencyConfig } from '../VariableDependencyConfig';\nimport { renderSelectForVariable } from '../components/VariableValueSelect';\nimport { VariableValueOption } from '../types';\n\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from './MultiValueVariable';\nimport { VariableRefresh } from '@grafana/data';\nimport { getClosest } from '../../core/sceneGraph/utils';\nimport { SceneVariableSet } from '../sets/SceneVariableSet';\nimport { SceneQueryControllerEntry } from '../../behaviors/types';\n\nexport interface TestVariableState extends MultiValueVariableState {\n  query: string;\n  delayMs?: number;\n  issuedQuery?: string;\n  refresh?: VariableRefresh;\n  throwError?: string;\n  optionsToReturn?: VariableValueOption[];\n  updateOptions?: boolean;\n}\n\n/**\n * This variable is only designed for unit tests and potentially e2e tests.\n */\nexport class TestVariable extends MultiValueVariable<TestVariableState> {\n  private completeUpdate = new Subject<number>();\n  public isGettingValues = true;\n  public getValueOptionsCount = 0;\n  isLazy = false;\n\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['query'],\n  });\n\n  public constructor(initialState: Partial<TestVariableState>, isLazy = false) {\n    super({\n      type: 'custom',\n      name: 'Test',\n      value: 'Value',\n      text: 'Text',\n      query: 'Query',\n      options: [],\n      refresh: VariableRefresh.onDashboardLoad,\n      updateOptions: true,\n      ...initialState,\n    });\n    this.isLazy = isLazy;\n  }\n\n  public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n    const { delayMs } = this.state;\n\n    this.getValueOptionsCount += 1;\n\n    const queryController = sceneGraph.getQueryController(this);\n\n    return new Observable<VariableValueOption[]>((observer) => {\n      const queryEntry: SceneQueryControllerEntry = {\n        type: 'variable',\n        origin: this,\n        cancel: () => observer.complete(),\n      };\n\n      if (queryController) {\n        queryController.queryStarted(queryEntry);\n      }\n\n      this.setState({ loading: true });\n\n      if (this.state.throwError) {\n        throw new Error(this.state.throwError);\n      }\n\n      const interpolatedQuery = sceneGraph.interpolate(this, this.state.query);\n      const options = this.getOptions(interpolatedQuery);\n\n      const sub = this.completeUpdate.subscribe({\n        next: () => {\n          const newState: Partial<TestVariableState> = { issuedQuery: interpolatedQuery, loading: false };\n\n          if (this.state.updateOptions) {\n            newState.options = options;\n          }\n\n          this.setState(newState);\n          observer.next(options);\n          observer.complete();\n        },\n      });\n\n      let timeout: number | undefined;\n      if (delayMs) {\n        timeout = window.setTimeout(() => this.signalUpdateCompleted(), delayMs);\n      } else if (delayMs === 0) {\n        this.signalUpdateCompleted();\n      }\n\n      this.isGettingValues = true;\n\n      return () => {\n        sub.unsubscribe();\n        window.clearTimeout(timeout);\n        this.isGettingValues = false;\n\n        if (this.state.loading) {\n          this.setState({ loading: false });\n        }\n\n        if (queryController) {\n          queryController.queryCompleted(queryEntry);\n        }\n      };\n    });\n  }\n\n  public cancel() {\n    const sceneVarSet = getClosest(this, (s) => (s instanceof SceneVariableSet ? s : undefined));\n    sceneVarSet?.cancel(this);\n  }\n\n  private getOptions(interpolatedQuery: string) {\n    if (this.state.optionsToReturn) {\n      return this.state.optionsToReturn;\n    }\n\n    return queryMetricTree(interpolatedQuery).map((x) => ({ label: x.name, value: x.name }));\n  }\n\n  /** Useful from tests */\n  public signalUpdateCompleted() {\n    this.completeUpdate.next(1);\n  }\n\n  public static Component = ({ model }: SceneComponentProps<MultiValueVariable>) => {\n    return renderSelectForVariable(model);\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TestVariable.js","sources":["../../../../src/variables/variants/TestVariable.tsx"],"sourcesContent":["import { Observable, Subject } from 'rxjs';\n\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneComponentProps } from '../../core/types';\nimport { queryMetricTree } from '../../utils/metricTree';\nimport { VariableDependencyConfig } from '../VariableDependencyConfig';\nimport { MultiOrSingleValueSelect } from '../components/VariableValueSelect';\nimport { VariableValueOption } from '../types';\n\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from './MultiValueVariable';\nimport { VariableRefresh } from '@grafana/data';\nimport { getClosest } from '../../core/sceneGraph/utils';\nimport { SceneVariableSet } from '../sets/SceneVariableSet';\nimport { SceneQueryControllerEntry } from '../../behaviors/types';\nimport React from 'react';\n\nexport interface TestVariableState extends MultiValueVariableState {\n  query: string;\n  delayMs?: number;\n  issuedQuery?: string;\n  refresh?: VariableRefresh;\n  throwError?: string;\n  optionsToReturn?: VariableValueOption[];\n  updateOptions?: boolean;\n}\n\n/**\n * This variable is only designed for unit tests and potentially e2e tests.\n */\nexport class TestVariable extends MultiValueVariable<TestVariableState> {\n  private completeUpdate = new Subject<number>();\n  public isGettingValues = true;\n  public getValueOptionsCount = 0;\n  isLazy = false;\n\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['query'],\n  });\n\n  public constructor(initialState: Partial<TestVariableState>, isLazy = false) {\n    super({\n      type: 'custom',\n      name: 'Test',\n      value: 'Value',\n      text: 'Text',\n      query: 'Query',\n      options: [],\n      refresh: VariableRefresh.onDashboardLoad,\n      updateOptions: true,\n      ...initialState,\n    });\n    this.isLazy = isLazy;\n  }\n\n  public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n    const { delayMs } = this.state;\n\n    this.getValueOptionsCount += 1;\n\n    const queryController = sceneGraph.getQueryController(this);\n\n    return new Observable<VariableValueOption[]>((observer) => {\n      const queryEntry: SceneQueryControllerEntry = {\n        type: 'variable',\n        origin: this,\n        cancel: () => observer.complete(),\n      };\n\n      if (queryController) {\n        queryController.queryStarted(queryEntry);\n      }\n\n      this.setState({ loading: true });\n\n      if (this.state.throwError) {\n        throw new Error(this.state.throwError);\n      }\n\n      const interpolatedQuery = sceneGraph.interpolate(this, this.state.query);\n      const options = this.getOptions(interpolatedQuery);\n\n      const sub = this.completeUpdate.subscribe({\n        next: () => {\n          const newState: Partial<TestVariableState> = { issuedQuery: interpolatedQuery, loading: false };\n\n          if (this.state.updateOptions) {\n            newState.options = options;\n          }\n\n          this.setState(newState);\n          observer.next(options);\n          observer.complete();\n        },\n      });\n\n      let timeout: number | undefined;\n      if (delayMs) {\n        timeout = window.setTimeout(() => this.signalUpdateCompleted(), delayMs);\n      } else if (delayMs === 0) {\n        this.signalUpdateCompleted();\n      }\n\n      this.isGettingValues = true;\n\n      return () => {\n        sub.unsubscribe();\n        window.clearTimeout(timeout);\n        this.isGettingValues = false;\n\n        if (this.state.loading) {\n          this.setState({ loading: false });\n        }\n\n        if (queryController) {\n          queryController.queryCompleted(queryEntry);\n        }\n      };\n    });\n  }\n\n  public cancel() {\n    const sceneVarSet = getClosest(this, (s) => (s instanceof SceneVariableSet ? s : undefined));\n    sceneVarSet?.cancel(this);\n  }\n\n  private getOptions(interpolatedQuery: string) {\n    if (this.state.optionsToReturn) {\n      return this.state.optionsToReturn;\n    }\n\n    return queryMetricTree(interpolatedQuery).map((x) => ({ label: x.name, value: x.name }));\n  }\n\n  /** Useful from tests */\n  public signalUpdateCompleted() {\n    this.completeUpdate.next(1);\n  }\n\n  public static Component = ({ model }: SceneComponentProps<MultiValueVariable>) => {\n    return <MultiOrSingleValueSelect model={model} />;\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/variables/variants/query/QueryVariable.js

@@ -3,7 +3,7 @@ import { v4 } from 'uuid';
 import { VariableSort, VariableRefresh, LoadingState, CoreApp } from '@grafana/data';
 import { sceneGraph } from '../../../core/sceneGraph/index.js';
 import { VariableDependencyConfig } from '../../VariableDependencyConfig.js';
-import { renderSelectForVariable } from '../../components/VariableValueSelect.js';
+import { MultiOrSingleValueSelect } from '../../components/VariableValueSelect.js';
 import { MultiValueVariable } from '../MultiValueVariable.js';
 import { createQueryVariableRunner } from './createQueryVariableRunner.js';
 import { metricNamesToVariableValues } from './utils.js';
@@ -14,6 +14,7 @@ import { SEARCH_FILTER_VARIABLE } from '../../constants.js';
 import { debounce } from 'lodash';
 import { registerQueryWithController } from '../../../querying/registerQueryWithController.js';
 import { wrapInSafeSerializableSceneObject } from '../../../utils/wrapInSafeSerializableSceneObject.js';
+import React from 'react';
 
 class QueryVariable extends MultiValueVariable {
   constructor(initialState) {
@@ -116,7 +117,7 @@ class QueryVariable extends MultiValueVariable {
   }
 }
 QueryVariable.Component = ({ model }) => {
-  return renderSelectForVariable(model);
+  return /* @__PURE__ */ React.createElement(MultiOrSingleValueSelect, { model });
 };
 function containsSearchFilter(query) {
   const str = safeStringifyValue(query);

package/dist/esm/variables/variants/query/QueryVariable.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryVariable.js","sources":["../../../../../src/variables/variants/query/QueryVariable.tsx"],"sourcesContent":["import { Observable, of, filter, take, mergeMap, catchError, throwError, from, lastValueFrom } from 'rxjs';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport {\n  CoreApp,\n  DataQueryRequest,\n  LoadingState,\n  PanelData,\n  ScopedVars,\n  VariableRefresh,\n  VariableSort,\n} from '@grafana/data';\n\nimport { sceneGraph } from '../../../core/sceneGraph';\nimport { SceneComponentProps, SceneDataQuery } from '../../../core/types';\nimport { VariableDependencyConfig } from '../../VariableDependencyConfig';\nimport { renderSelectForVariable } from '../../components/VariableValueSelect';\nimport { VariableValueOption } from '../../types';\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from '../MultiValueVariable';\n\nimport { createQueryVariableRunner } from './createQueryVariableRunner';\nimport { metricNamesToVariableValues } from './utils';\nimport { toMetricFindValues } from './toMetricFindValues';\nimport { getDataSource } from '../../../utils/getDataSource';\nimport { safeStringifyValue } from '../../utils';\nimport { DataQuery, DataSourceRef } from '@grafana/schema';\nimport { SEARCH_FILTER_VARIABLE } from '../../constants';\nimport { debounce } from 'lodash';\nimport { registerQueryWithController } from '../../../querying/registerQueryWithController';\nimport { wrapInSafeSerializableSceneObject } from '../../../utils/wrapInSafeSerializableSceneObject';\n\nexport interface QueryVariableState extends MultiValueVariableState {\n  type: 'query';\n  datasource: DataSourceRef | null;\n  query: string | SceneDataQuery;\n  regex: string;\n  refresh: VariableRefresh;\n  sort: VariableSort;\n  /** @internal Only for use inside core dashboards */\n  definition?: string;\n}\n\nexport class QueryVariable extends MultiValueVariable<QueryVariableState> {\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['regex', 'query', 'datasource'],\n  });\n\n  public constructor(initialState: Partial<QueryVariableState>) {\n    super({\n      type: 'query',\n      name: '',\n      value: '',\n      text: '',\n      options: [],\n      datasource: null,\n      regex: '',\n      query: '',\n      refresh: VariableRefresh.onDashboardLoad,\n      sort: VariableSort.disabled,\n      ...initialState,\n    });\n  }\n\n  public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n    if (!this.state.query) {\n      return of([]);\n    }\n\n    this.setState({ loading: true, error: null });\n\n    return from(\n      getDataSource(this.state.datasource, {\n        __sceneObject: wrapInSafeSerializableSceneObject(this),\n      })\n    ).pipe(\n      mergeMap((ds) => {\n        const runner = createQueryVariableRunner(ds);\n        const target = runner.getTarget(this);\n        const request = this.getRequest(target, args.searchFilter);\n\n        return runner.runRequest({ variable: this, searchFilter: args.searchFilter }, request).pipe(\n          registerQueryWithController({\n            type: 'variable',\n            request: request,\n            origin: this,\n          }),\n          filter((data) => data.state === LoadingState.Done || data.state === LoadingState.Error), // we only care about done or error for now\n          take(1), // take the first result, using first caused a bug where it in some situations throw an uncaught error because of no results had been received yet\n          mergeMap((data: PanelData) => {\n            if (data.state === LoadingState.Error) {\n              return throwError(() => data.error);\n            }\n            return of(data);\n          }),\n          toMetricFindValues(),\n          mergeMap((values) => {\n            let regex = '';\n            if (this.state.regex) {\n              regex = sceneGraph.interpolate(this, this.state.regex, undefined, 'regex');\n            }\n            return of(metricNamesToVariableValues(regex, this.state.sort, values));\n          }),\n          catchError((error) => {\n            if (error.cancelled) {\n              return of([]);\n            }\n            return throwError(() => error);\n          })\n        );\n      })\n    );\n  }\n\n  private getRequest(target: DataQuery | string, searchFilter?: string) {\n    const scopedVars: ScopedVars = {\n      __sceneObject: wrapInSafeSerializableSceneObject(this),\n    };\n\n    if (searchFilter) {\n      scopedVars.__searchFilter = { value: searchFilter, text: searchFilter };\n    }\n\n    const range = sceneGraph.getTimeRange(this).state.value;\n\n    const request: DataQueryRequest = {\n      app: CoreApp.Dashboard,\n      requestId: uuidv4(),\n      timezone: '',\n      range,\n      interval: '',\n      intervalMs: 0,\n      // @ts-ignore\n      targets: [target],\n      scopedVars,\n      startTime: Date.now(),\n    };\n\n    return request;\n  }\n\n  onSearchChange = (searchFilter: string) => {\n    if (!containsSearchFilter(this.state.query)) {\n      return;\n    }\n\n    this._updateOptionsBasedOnSearchFilter(searchFilter);\n  };\n\n  private _updateOptionsBasedOnSearchFilter = debounce(async (searchFilter: string) => {\n    const result = await lastValueFrom(this.getValueOptions({ searchFilter }));\n    this.setState({ options: result, loading: false });\n  }, 400);\n\n  public static Component = ({ model }: SceneComponentProps<MultiValueVariable>) => {\n    return renderSelectForVariable(model);\n  };\n}\n\nfunction containsSearchFilter(query: string | DataQuery) {\n  const str = safeStringifyValue(query);\n  return str.indexOf(SEARCH_FILTER_VARIABLE) > -1;\n}\n"],"names":["uuidv4"],"mappings":"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"}
+{"version":3,"file":"QueryVariable.js","sources":["../../../../../src/variables/variants/query/QueryVariable.tsx"],"sourcesContent":["import { Observable, of, filter, take, mergeMap, catchError, throwError, from, lastValueFrom } from 'rxjs';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport {\n  CoreApp,\n  DataQueryRequest,\n  LoadingState,\n  PanelData,\n  ScopedVars,\n  VariableRefresh,\n  VariableSort,\n} from '@grafana/data';\n\nimport { sceneGraph } from '../../../core/sceneGraph';\nimport { SceneComponentProps, SceneDataQuery } from '../../../core/types';\nimport { VariableDependencyConfig } from '../../VariableDependencyConfig';\nimport { MultiOrSingleValueSelect } from '../../components/VariableValueSelect';\nimport { VariableValueOption } from '../../types';\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from '../MultiValueVariable';\n\nimport { createQueryVariableRunner } from './createQueryVariableRunner';\nimport { metricNamesToVariableValues } from './utils';\nimport { toMetricFindValues } from './toMetricFindValues';\nimport { getDataSource } from '../../../utils/getDataSource';\nimport { safeStringifyValue } from '../../utils';\nimport { DataQuery, DataSourceRef } from '@grafana/schema';\nimport { SEARCH_FILTER_VARIABLE } from '../../constants';\nimport { debounce } from 'lodash';\nimport { registerQueryWithController } from '../../../querying/registerQueryWithController';\nimport { wrapInSafeSerializableSceneObject } from '../../../utils/wrapInSafeSerializableSceneObject';\nimport React from 'react';\n\nexport interface QueryVariableState extends MultiValueVariableState {\n  type: 'query';\n  datasource: DataSourceRef | null;\n  query: string | SceneDataQuery;\n  regex: string;\n  refresh: VariableRefresh;\n  sort: VariableSort;\n  /** @internal Only for use inside core dashboards */\n  definition?: string;\n}\n\nexport class QueryVariable extends MultiValueVariable<QueryVariableState> {\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['regex', 'query', 'datasource'],\n  });\n\n  public constructor(initialState: Partial<QueryVariableState>) {\n    super({\n      type: 'query',\n      name: '',\n      value: '',\n      text: '',\n      options: [],\n      datasource: null,\n      regex: '',\n      query: '',\n      refresh: VariableRefresh.onDashboardLoad,\n      sort: VariableSort.disabled,\n      ...initialState,\n    });\n  }\n\n  public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n    if (!this.state.query) {\n      return of([]);\n    }\n\n    this.setState({ loading: true, error: null });\n\n    return from(\n      getDataSource(this.state.datasource, {\n        __sceneObject: wrapInSafeSerializableSceneObject(this),\n      })\n    ).pipe(\n      mergeMap((ds) => {\n        const runner = createQueryVariableRunner(ds);\n        const target = runner.getTarget(this);\n        const request = this.getRequest(target, args.searchFilter);\n\n        return runner.runRequest({ variable: this, searchFilter: args.searchFilter }, request).pipe(\n          registerQueryWithController({\n            type: 'variable',\n            request: request,\n            origin: this,\n          }),\n          filter((data) => data.state === LoadingState.Done || data.state === LoadingState.Error), // we only care about done or error for now\n          take(1), // take the first result, using first caused a bug where it in some situations throw an uncaught error because of no results had been received yet\n          mergeMap((data: PanelData) => {\n            if (data.state === LoadingState.Error) {\n              return throwError(() => data.error);\n            }\n            return of(data);\n          }),\n          toMetricFindValues(),\n          mergeMap((values) => {\n            let regex = '';\n            if (this.state.regex) {\n              regex = sceneGraph.interpolate(this, this.state.regex, undefined, 'regex');\n            }\n            return of(metricNamesToVariableValues(regex, this.state.sort, values));\n          }),\n          catchError((error) => {\n            if (error.cancelled) {\n              return of([]);\n            }\n            return throwError(() => error);\n          })\n        );\n      })\n    );\n  }\n\n  private getRequest(target: DataQuery | string, searchFilter?: string) {\n    const scopedVars: ScopedVars = {\n      __sceneObject: wrapInSafeSerializableSceneObject(this),\n    };\n\n    if (searchFilter) {\n      scopedVars.__searchFilter = { value: searchFilter, text: searchFilter };\n    }\n\n    const range = sceneGraph.getTimeRange(this).state.value;\n\n    const request: DataQueryRequest = {\n      app: CoreApp.Dashboard,\n      requestId: uuidv4(),\n      timezone: '',\n      range,\n      interval: '',\n      intervalMs: 0,\n      // @ts-ignore\n      targets: [target],\n      scopedVars,\n      startTime: Date.now(),\n    };\n\n    return request;\n  }\n\n  onSearchChange = (searchFilter: string) => {\n    if (!containsSearchFilter(this.state.query)) {\n      return;\n    }\n\n    this._updateOptionsBasedOnSearchFilter(searchFilter);\n  };\n\n  private _updateOptionsBasedOnSearchFilter = debounce(async (searchFilter: string) => {\n    const result = await lastValueFrom(this.getValueOptions({ searchFilter }));\n    this.setState({ options: result, loading: false });\n  }, 400);\n\n  public static Component = ({ model }: SceneComponentProps<MultiValueVariable>) => {\n    return <MultiOrSingleValueSelect model={model} />;\n  };\n}\n\nfunction containsSearchFilter(query: string | DataQuery) {\n  const str = safeStringifyValue(query);\n  return str.indexOf(SEARCH_FILTER_VARIABLE) > -1;\n}\n"],"names":["uuidv4"],"mappings":"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"}

package/dist/index.d.ts

@@ -1005,7 +1005,13 @@ interface ConstantVariableState extends SceneVariableState {
     value: VariableValue;
 }
 declare class ConstantVariable extends SceneObjectBase<ConstantVariableState> implements SceneVariable<ConstantVariableState> {
+    protected _variableDependency: VariableDependencyConfig<ConstantVariableState>;
+    private _prevValue;
     constructor(initialState: Partial<ConstantVariableState>);
+    /**
+     * This function is called on when SceneVariableSet is activated or when a dependency changes.
+     */
+    validateAndUpdate(): Observable<ValidateAndUpdateResult>;
     getValue(): VariableValue;
 }
 
@@ -1090,7 +1096,7 @@ declare class CustomVariable extends MultiValueVariable<CustomVariableState> {
     protected _variableDependency: VariableDependencyConfig<CustomVariableState>;
     constructor(initialState: Partial<CustomVariableState>);
     getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]>;
-    static Component: ({ model }: SceneComponentProps<MultiValueVariable>) => React$1.JSX.Element;
+    static Component: ({ model }: SceneComponentProps<MultiValueVariable>) => React__default.JSX.Element;
 }
 
 interface DataSourceVariableState extends MultiValueVariableState {
@@ -1111,7 +1117,7 @@ declare class DataSourceVariable extends MultiValueVariable<DataSourceVariableSt
     protected _variableDependency: VariableDependencyConfig<DataSourceVariableState>;
     constructor(initialState: Partial<DataSourceVariableState>);
     getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]>;
-    static Component: ({ model }: SceneComponentProps<MultiValueVariable>) => React$1.JSX.Element;
+    static Component: ({ model }: SceneComponentProps<MultiValueVariable>) => React__default.JSX.Element;
 }
 
 interface IntervalVariableState extends SceneVariableState {
@@ -1169,7 +1175,7 @@ declare class QueryVariable extends MultiValueVariable<QueryVariableState> {
     private getRequest;
     onSearchChange: (searchFilter: string) => void;
     private _updateOptionsBasedOnSearchFilter;
-    static Component: ({ model }: SceneComponentProps<MultiValueVariable>) => React$1.JSX.Element;
+    static Component: ({ model }: SceneComponentProps<MultiValueVariable>) => React__default.JSX.Element;
 }
 
 interface GroupByVariableState extends MultiValueVariableState {
@@ -1993,7 +1999,7 @@ declare class TestVariable extends MultiValueVariable<TestVariableState> {
     private getOptions;
     /** Useful from tests */
     signalUpdateCompleted(): void;
-    static Component: ({ model }: SceneComponentProps<MultiValueVariable>) => React$1.JSX.Element;
+    static Component: ({ model }: SceneComponentProps<MultiValueVariable>) => React__default.JSX.Element;
 }
 
 interface LocalValueVariableState extends SceneVariableState {
@@ -2866,7 +2872,9 @@ interface ControlsLabelProps {
 }
 declare function ControlsLabel(props: ControlsLabelProps): JSX.Element;
 
-declare function renderSelectForVariable(model: MultiValueVariable): React__default.JSX.Element;
+declare function MultiOrSingleValueSelect({ model }: {
+    model: MultiValueVariable;
+}): React__default.JSX.Element;
 
 declare class VizConfigBuilder<TOptions extends {}, TFieldConfig extends {}> implements StandardFieldConfigInterface<StandardFieldConfig, VizConfigBuilder<TOptions, TFieldConfig>, 'set'> {
     private _fieldConfigBuilder;
@@ -3019,5 +3027,5 @@ declare const sceneUtils: {
     isGroupByVariable: typeof isGroupByVariable;
 };
 
-export { AdHocFiltersVariable, ConstantVariable, ControlsLabel, CustomVariable, DataProviderProxy, DataSourceVariable, EmbeddedScene, FieldConfigBuilder, FieldConfigBuilders, FieldConfigOverridesBuilder, FilterOrigin, GroupByVariable, IntervalVariable, LazyLoader, LocalValueVariable, MultiValueVariable, NestedScene, NewSceneObjectAddedEvent, PanelBuilders, PanelOptionsBuilders, QueryVariable, RuntimeDataSource, SafeSerializableSceneObject, SceneApp, SceneAppPage, SceneByFrameRepeater, SceneByVariableRepeater, SceneCSSGridItem, SceneCSSGridLayout, SceneCanvasText, SceneControlsSpacer, SceneDataLayerBase, SceneDataLayerControls, SceneDataLayerSet, SceneDataLayerSetBase, SceneDataNode, SceneDataTransformer, SceneDebugger, SceneFlexItem, SceneFlexLayout, SceneGridItem, SceneGridLayout, SceneGridLayoutDragStartEvent, SceneGridRow, SceneObjectBase, SceneObjectRef, SceneObjectStateChangedEvent, SceneObjectUrlSyncConfig, SceneQueryRunner, SceneReactObject, SceneRefreshPicker, SceneScopesBridge, SceneTimePicker, SceneTimeRange, SceneTimeRangeCompare, SceneTimeRangeTransformerBase, SceneTimeZoneOverride, SceneToolbarButton, SceneToolbarInput, SceneVariableSet, SceneVariableValueChangedEvent, SplitLayout, TestVariable, TextBoxVariable, UrlSyncContextProvider, UrlSyncManager, UserActionEvent, VariableDependencyConfig, VariableValueControl, VariableValueSelectWrapper, VariableValueSelectors, VizConfigBuilder, VizConfigBuilders, VizPanel, VizPanelBuilder, VizPanelExploreButton, VizPanelMenu, index$1 as behaviors, index as dataLayers, formatRegistry, getExploreURL, isCustomVariableValue, isDataLayer, isDataRequestEnricher, isFiltersRequestEnricher, isSceneObject, registerQueryWithController, registerRuntimeDataSource, renderSelectForVariable, sceneGraph, sceneUtils, useSceneApp, useSceneObjectState, useUrlSync };
+export { AdHocFiltersVariable, ConstantVariable, ControlsLabel, CustomVariable, DataProviderProxy, DataSourceVariable, EmbeddedScene, FieldConfigBuilder, FieldConfigBuilders, FieldConfigOverridesBuilder, FilterOrigin, GroupByVariable, IntervalVariable, LazyLoader, LocalValueVariable, MultiOrSingleValueSelect, MultiValueVariable, NestedScene, NewSceneObjectAddedEvent, PanelBuilders, PanelOptionsBuilders, QueryVariable, RuntimeDataSource, SafeSerializableSceneObject, SceneApp, SceneAppPage, SceneByFrameRepeater, SceneByVariableRepeater, SceneCSSGridItem, SceneCSSGridLayout, SceneCanvasText, SceneControlsSpacer, SceneDataLayerBase, SceneDataLayerControls, SceneDataLayerSet, SceneDataLayerSetBase, SceneDataNode, SceneDataTransformer, SceneDebugger, SceneFlexItem, SceneFlexLayout, SceneGridItem, SceneGridLayout, SceneGridLayoutDragStartEvent, SceneGridRow, SceneObjectBase, SceneObjectRef, SceneObjectStateChangedEvent, SceneObjectUrlSyncConfig, SceneQueryRunner, SceneReactObject, SceneRefreshPicker, SceneScopesBridge, SceneTimePicker, SceneTimeRange, SceneTimeRangeCompare, SceneTimeRangeTransformerBase, SceneTimeZoneOverride, SceneToolbarButton, SceneToolbarInput, SceneVariableSet, SceneVariableValueChangedEvent, SplitLayout, TestVariable, TextBoxVariable, UrlSyncContextProvider, UrlSyncManager, UserActionEvent, VariableDependencyConfig, VariableValueControl, VariableValueSelectWrapper, VariableValueSelectors, VizConfigBuilder, VizConfigBuilders, VizPanel, VizPanelBuilder, VizPanelExploreButton, VizPanelMenu, index$1 as behaviors, index as dataLayers, formatRegistry, getExploreURL, isCustomVariableValue, isDataLayer, isDataRequestEnricher, isFiltersRequestEnricher, isSceneObject, registerQueryWithController, registerRuntimeDataSource, sceneGraph, sceneUtils, useSceneApp, useSceneObjectState, useUrlSync };
 export type { AdHocFilterWithLabels, CancelActivationHandler, ControlsLayout, CustomFormatterVariable, CustomTransformOperator, CustomTransformerDefinition, CustomVariableValue, DataLayerFilter, DataRequestEnricher, DeepPartial, EmbeddedSceneState, ExtraQueryDataProcessor, ExtraQueryDescriptor, ExtraQueryProvider, FiltersRequestEnricher, FormatVariable, InterpolationFormatParameter, MacroVariableConstructor, MultiValueVariableState, QueryRunnerState, SceneActivationHandler, SceneAppDrilldownView, SceneAppPageLike, SceneAppPageState, SceneAppRoute, SceneComponent, SceneComponentProps, SceneDataLayerProvider, SceneDataLayerProviderState, SceneDataProvider, SceneDataProviderResult, SceneDataQuery, SceneDataState, SceneDataTransformerState, SceneDeactivationHandler, SceneFlexItemLike, SceneFlexItemState, SceneGridItemLike, SceneGridItemStateLike, SceneInteractionProfileEvent, SceneLayout, SceneLayoutChildOptions, SceneLayoutState, SceneObject, SceneObjectState, SceneObjectStateChangedPayload, SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues, SceneObjectWithUrlSync, SceneQueryControllerEntry, SceneQueryControllerEntryType, SceneQueryControllerLike, SceneRefreshPickerState, SceneRouteMatch, SceneStateChangedHandler, SceneStatelessBehavior, SceneTimeRangeLike, SceneTimeRangeState, SceneUrlSyncOptions, SceneVariable, SceneVariableDependencyConfigLike, SceneVariableSetState, SceneVariableState, SceneVariables, UrlSyncManagerLike, UseStateHookOptions, ValidateAndUpdateResult, VariableCustomFormatterFn, VariableGetOptionsArgs, VariableValue, VariableValueOption, VariableValueSingle, VizConfig, VizPanelState };