@grafana/scenes 6.39.2 → 6.39.3

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v6.39.3 (Thu Oct 09 2025)
+
+#### 🐛 Bug Fix
+
+- Variables: Introduce a new type called "switch" [#1258](https://github.com/grafana/scenes/pull/1258) ([@leventebalogh](https://github.com/leventebalogh))
+
+#### Authors: 1
+
+- Levente Balogh ([@leventebalogh](https://github.com/leventebalogh))
+
+---
+
 # v6.39.2 (Wed Oct 08 2025)
 
 #### 🐛 Bug Fix

package/dist/esm/index.js

@@ -10,7 +10,7 @@ import { isRepeatCloneOrChildOf } from './utils/utils.js';
 import { registerVariableMacro } from './variables/macros/index.js';
 import { escapeURLDelimiters, escapeLabelValueInExactSelector, escapeLabelValueInRegexSelector, renderPrometheusLabelFilters } from './variables/utils.js';
 export { escapeUrlPipeDelimiters } from './variables/utils.js';
-import { isGroupByVariable, isTextBoxVariable, isQueryVariable, isIntervalVariable, isDataSourceVariable, isCustomVariable, isConstantVariable, isAdHocVariable } from './variables/variants/guards.js';
+import { isSwitchVariable, isGroupByVariable, isTextBoxVariable, isQueryVariable, isIntervalVariable, isDataSourceVariable, isCustomVariable, isConstantVariable, isAdHocVariable } from './variables/variants/guards.js';
 export { isDataLayer, isDataRequestEnricher, isFiltersRequestEnricher, isSceneObject } from './core/types.js';
 export { SceneObjectStateChangedEvent, UserActionEvent } from './core/events.js';
 export { sceneGraph } from './core/sceneGraph/index.js';
@@ -38,6 +38,7 @@ export { VariableValueControl } from './variables/components/VariableValueContro
 export { SceneVariableSet } from './variables/sets/SceneVariableSet.js';
 export { ConstantVariable } from './variables/variants/ConstantVariable.js';
 export { CustomVariable } from './variables/variants/CustomVariable.js';
+export { SwitchVariable } from './variables/variants/SwitchVariable.js';
 export { DataSourceVariable } from './variables/variants/DataSourceVariable.js';
 export { QueryVariable } from './variables/variants/query/QueryVariable.js';
 export { TestVariable } from './variables/variants/TestVariable.js';
@@ -114,6 +115,7 @@ const sceneUtils = {
   isQueryVariable,
   isTextBoxVariable,
   isGroupByVariable,
+  isSwitchVariable,
   isRepeatCloneOrChildOf,
   buildPathIdFor
 };

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/cloneSceneObject';\nimport { registerRuntimeDataSource } from './querying/RuntimeDataSource';\nimport { getUrlState, syncStateFromSearchParams } from './services/utils';\nimport { buildPathIdFor } from './utils/pathId';\nimport { isRepeatCloneOrChildOf } from './utils/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';\nexport { SceneRenderProfiler } from './behaviors/SceneRenderProfiler';\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 { ScopesVariable } from './variables/variants/ScopesVariable';\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 } from './variables/adhoc/AdHocFiltersVariable';\nexport type { AdHocFilterWithLabels } from './variables/adhoc/AdHocFiltersVariable';\nexport { GroupByVariable } from './variables/groupby/GroupByVariable';\nexport { type MacroVariableConstructor } from './variables/macros/types';\nexport { escapeUrlPipeDelimiters } from './variables/utils';\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';\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  isRepeatCloneOrChildOf,\n  buildPathIdFor,\n};\n\nexport { SafeSerializableSceneObject } from './utils/SafeSerializableSceneObject';\nexport { getExploreURL } from './utils/explore';\nexport { loadResources } from './utils/loadResources';\nexport { PATH_ID_SEPARATOR } from './utils/pathId';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgJO,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,iBAAA;AAAA,EACA,sBAAA;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/cloneSceneObject';\nimport { registerRuntimeDataSource } from './querying/RuntimeDataSource';\nimport { getUrlState, syncStateFromSearchParams } from './services/utils';\nimport { buildPathIdFor } from './utils/pathId';\nimport { isRepeatCloneOrChildOf } from './utils/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  isSwitchVariable,\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';\nexport { SceneRenderProfiler } from './behaviors/SceneRenderProfiler';\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 { SwitchVariable } from './variables/variants/SwitchVariable';\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 { ScopesVariable } from './variables/variants/ScopesVariable';\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 } from './variables/adhoc/AdHocFiltersVariable';\nexport type { AdHocFilterWithLabels } from './variables/adhoc/AdHocFiltersVariable';\nexport { GroupByVariable } from './variables/groupby/GroupByVariable';\nexport { type MacroVariableConstructor } from './variables/macros/types';\nexport { escapeUrlPipeDelimiters } from './variables/utils';\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';\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  isSwitchVariable,\n  isRepeatCloneOrChildOf,\n  buildPathIdFor,\n};\n\nexport { SafeSerializableSceneObject } from './utils/SafeSerializableSceneObject';\nexport { getExploreURL } from './utils/explore';\nexport { loadResources } from './utils/loadResources';\nexport { PATH_ID_SEPARATOR } from './utils/pathId';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkJO,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,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,sBAAA;AAAA,EACA;AACF;;;;"}

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

@@ -0,0 +1,108 @@
+import React from 'react';
+import { of } from 'rxjs';
+import { useStyles2, Switch } from '@grafana/ui';
+import { css } from '@emotion/css';
+import { SceneObjectBase } from '../../core/SceneObjectBase.js';
+import { SceneObjectUrlSyncConfig } from '../../services/SceneObjectUrlSyncConfig.js';
+import { SceneVariableValueChangedEvent } from '../types.js';
+
+class SwitchVariable extends SceneObjectBase {
+  constructor(initialState) {
+    super({
+      // TODO: remove this once switch is in the schema @leventebalogh
+      // @ts-expect-error - switch is a valid variable type, but not in the schema yet
+      type: "switch",
+      value: "false",
+      enabledValue: "true",
+      disabledValue: "false",
+      name: "",
+      ...initialState
+    });
+    this._prevValue = "";
+    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: () => this.getKeys() });
+  }
+  /**
+   * 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({});
+  }
+  setValue(newValue) {
+    if (this.getValue() === newValue) {
+      return;
+    }
+    if ([this.state.enabledValue, this.state.disabledValue].includes(newValue)) {
+      this.setState({ value: newValue });
+      this.publishEvent(new SceneVariableValueChangedEvent(this), true);
+    } else {
+      console.error(
+        `Invalid value for switch variable: "${newValue}". Valid values are: "${this.state.enabledValue}" and "${this.state.disabledValue}".`
+      );
+    }
+  }
+  getValue() {
+    return this.state.value;
+  }
+  isEnabled() {
+    return this.state.value === this.state.enabledValue;
+  }
+  isDisabled() {
+    return this.state.value === this.state.disabledValue;
+  }
+  getKey() {
+    return `var-${this.state.name}`;
+  }
+  getKeys() {
+    if (this.state.skipUrlSync) {
+      return [];
+    }
+    return [this.getKey()];
+  }
+  getUrlState() {
+    if (this.state.skipUrlSync) {
+      return {};
+    }
+    return { [this.getKey()]: this.state.value };
+  }
+  updateFromUrl(values) {
+    const val = values[this.getKey()];
+    if (typeof val === "string") {
+      this.setValue(val);
+    }
+  }
+}
+SwitchVariable.Component = SwitchVariableRenderer;
+function SwitchVariableRenderer({ model }) {
+  const state = model.useState();
+  const styles = useStyles2(getStyles);
+  return /* @__PURE__ */ React.createElement("div", { className: styles.container }, /* @__PURE__ */ React.createElement(
+    Switch,
+    {
+      value: state.value === state.enabledValue,
+      onChange: (event) => {
+        model.setValue(event.currentTarget.checked ? state.enabledValue : state.disabledValue);
+      }
+    }
+  ));
+}
+function getStyles(theme) {
+  return {
+    container: css({
+      display: "flex",
+      alignItems: "center",
+      padding: theme.spacing(0, 1),
+      height: theme.spacing(theme.components.height.md),
+      borderRadius: theme.shape.radius.default,
+      border: `1px solid ${theme.components.input.borderColor}`,
+      background: theme.colors.background.primary
+    })
+  };
+}
+
+export { SwitchVariable };
+//# sourceMappingURL=SwitchVariable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchVariable.js","sources":["../../../../src/variables/variants/SwitchVariable.tsx"],"sourcesContent":["import React from 'react';\nimport { Observable, of } from 'rxjs';\nimport { Switch, useStyles2 } from '@grafana/ui';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { css } from '@emotion/css';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectUrlValues } from '../../core/types';\nimport { SceneObjectUrlSyncConfig } from '../../services/SceneObjectUrlSyncConfig';\nimport {\n  SceneVariable,\n  SceneVariableState,\n  SceneVariableValueChangedEvent,\n  ValidateAndUpdateResult,\n  VariableValue,\n} from '../types';\n\nexport interface SwitchVariableState extends SceneVariableState {\n  value: string;\n  enabledValue: string;\n  disabledValue: string;\n}\n\nexport class SwitchVariable extends SceneObjectBase<SwitchVariableState> implements SceneVariable<SwitchVariableState> {\n  public static Component = SwitchVariableRenderer;\n  private _prevValue: VariableValue = '';\n\n  public constructor(initialState: Partial<SwitchVariableState>) {\n    super({\n      // TODO: remove this once switch is in the schema @leventebalogh\n      // @ts-expect-error - switch is a valid variable type, but not in the schema yet\n      type: 'switch',\n      value: 'false',\n      enabledValue: 'true',\n      disabledValue: 'false',\n      name: '',\n      ...initialState,\n    });\n\n    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: () => this.getKeys() });\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 setValue(newValue: string): void {\n    // Ignore if there's no change\n    if (this.getValue() === newValue) {\n      return;\n    }\n\n    if ([this.state.enabledValue, this.state.disabledValue].includes(newValue)) {\n      this.setState({ value: newValue });\n      this.publishEvent(new SceneVariableValueChangedEvent(this), true);\n    } else {\n      console.error(\n        `Invalid value for switch variable: \"${newValue}\". Valid values are: \"${this.state.enabledValue}\" and \"${this.state.disabledValue}\".`\n      );\n    }\n  }\n\n  public getValue(): VariableValue {\n    return this.state.value;\n  }\n\n  public isEnabled(): boolean {\n    return this.state.value === this.state.enabledValue;\n  }\n\n  public isDisabled(): boolean {\n    return this.state.value === this.state.disabledValue;\n  }\n\n  private getKey(): string {\n    return `var-${this.state.name}`;\n  }\n\n  public getKeys(): string[] {\n    if (this.state.skipUrlSync) {\n      return [];\n    }\n\n    return [this.getKey()];\n  }\n\n  public getUrlState(): SceneObjectUrlValues {\n    if (this.state.skipUrlSync) {\n      return {};\n    }\n\n    return { [this.getKey()]: this.state.value };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues): void {\n    const val = values[this.getKey()];\n\n    if (typeof val === 'string') {\n      this.setValue(val);\n    }\n  }\n}\n\nfunction SwitchVariableRenderer({ model }: SceneComponentProps<SwitchVariable>) {\n  const state = model.useState();\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.container}>\n      <Switch\n        value={state.value === state.enabledValue}\n        onChange={(event) => {\n          model.setValue(event!.currentTarget.checked ? state.enabledValue : state.disabledValue);\n        }}\n      />\n    </div>\n  );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    container: css({\n      display: 'flex',\n      alignItems: 'center',\n      padding: theme.spacing(0, 1),\n      height: theme.spacing(theme.components.height.md),\n      borderRadius: theme.shape.radius.default,\n      border: `1px solid ${theme.components.input.borderColor}`,\n      background: theme.colors.background.primary,\n    }),\n  };\n}\n"],"names":[],"mappings":"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"}

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

@@ -22,6 +22,9 @@ function isTextBoxVariable(variable) {
 function isGroupByVariable(variable) {
   return variable.state.type === "groupby";
 }
+function isSwitchVariable(variable) {
+  return variable.state.type === "switch";
+}
 
-export { isAdHocVariable, isConstantVariable, isCustomVariable, isDataSourceVariable, isGroupByVariable, isIntervalVariable, isQueryVariable, isTextBoxVariable };
+export { isAdHocVariable, isConstantVariable, isCustomVariable, isDataSourceVariable, isGroupByVariable, isIntervalVariable, isQueryVariable, isSwitchVariable, isTextBoxVariable };
 //# sourceMappingURL=guards.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"guards.js","sources":["../../../../src/variables/variants/guards.ts"],"sourcesContent":["import { AdHocFiltersVariable } from '../adhoc/AdHocFiltersVariable';\nimport { SceneVariable } from '../types';\nimport { ConstantVariable } from './ConstantVariable';\nimport { CustomVariable } from './CustomVariable';\nimport { DataSourceVariable } from './DataSourceVariable';\nimport { IntervalVariable } from './IntervalVariable';\nimport { TextBoxVariable } from './TextBoxVariable';\nimport { QueryVariable } from './query/QueryVariable';\nimport { GroupByVariable } from '../groupby/GroupByVariable';\n\nexport function isAdHocVariable(variable: SceneVariable): variable is AdHocFiltersVariable {\n  return variable.state.type === 'adhoc';\n}\n\nexport function isConstantVariable(variable: SceneVariable): variable is ConstantVariable {\n  return variable.state.type === 'constant';\n}\n\nexport function isCustomVariable(variable: SceneVariable): variable is CustomVariable {\n  return variable.state.type === 'custom';\n}\n\nexport function isDataSourceVariable(variable: SceneVariable): variable is DataSourceVariable {\n  return variable.state.type === 'datasource';\n}\n\nexport function isIntervalVariable(variable: SceneVariable): variable is IntervalVariable {\n  return variable.state.type === 'interval';\n}\n\nexport function isQueryVariable(variable: SceneVariable): variable is QueryVariable {\n  return variable.state.type === 'query';\n}\n\nexport function isTextBoxVariable(variable: SceneVariable): variable is TextBoxVariable {\n  return variable.state.type === 'textbox';\n}\n\nexport function isGroupByVariable(variable: SceneVariable): variable is GroupByVariable {\n  return variable.state.type === 'groupby';\n}\n"],"names":[],"mappings":"AAUO,SAAS,gBAAgB,QAA2D,EAAA;AACzF,EAAO,OAAA,QAAA,CAAS,MAAM,IAAS,KAAA,OAAA;AACjC;AAEO,SAAS,mBAAmB,QAAuD,EAAA;AACxF,EAAO,OAAA,QAAA,CAAS,MAAM,IAAS,KAAA,UAAA;AACjC;AAEO,SAAS,iBAAiB,QAAqD,EAAA;AACpF,EAAO,OAAA,QAAA,CAAS,MAAM,IAAS,KAAA,QAAA;AACjC;AAEO,SAAS,qBAAqB,QAAyD,EAAA;AAC5F,EAAO,OAAA,QAAA,CAAS,MAAM,IAAS,KAAA,YAAA;AACjC;AAEO,SAAS,mBAAmB,QAAuD,EAAA;AACxF,EAAO,OAAA,QAAA,CAAS,MAAM,IAAS,KAAA,UAAA;AACjC;AAEO,SAAS,gBAAgB,QAAoD,EAAA;AAClF,EAAO,OAAA,QAAA,CAAS,MAAM,IAAS,KAAA,OAAA;AACjC;AAEO,SAAS,kBAAkB,QAAsD,EAAA;AACtF,EAAO,OAAA,QAAA,CAAS,MAAM,IAAS,KAAA,SAAA;AACjC;AAEO,SAAS,kBAAkB,QAAsD,EAAA;AACtF,EAAO,OAAA,QAAA,CAAS,MAAM,IAAS,KAAA,SAAA;AACjC;;;;"}
+{"version":3,"file":"guards.js","sources":["../../../../src/variables/variants/guards.ts"],"sourcesContent":["import { AdHocFiltersVariable } from '../adhoc/AdHocFiltersVariable';\nimport { SceneVariable } from '../types';\nimport { ConstantVariable } from './ConstantVariable';\nimport { CustomVariable } from './CustomVariable';\nimport { DataSourceVariable } from './DataSourceVariable';\nimport { IntervalVariable } from './IntervalVariable';\nimport { TextBoxVariable } from './TextBoxVariable';\nimport { QueryVariable } from './query/QueryVariable';\nimport { GroupByVariable } from '../groupby/GroupByVariable';\nimport { SwitchVariable } from './SwitchVariable';\n\nexport function isAdHocVariable(variable: SceneVariable): variable is AdHocFiltersVariable {\n  return variable.state.type === 'adhoc';\n}\n\nexport function isConstantVariable(variable: SceneVariable): variable is ConstantVariable {\n  return variable.state.type === 'constant';\n}\n\nexport function isCustomVariable(variable: SceneVariable): variable is CustomVariable {\n  return variable.state.type === 'custom';\n}\n\nexport function isDataSourceVariable(variable: SceneVariable): variable is DataSourceVariable {\n  return variable.state.type === 'datasource';\n}\n\nexport function isIntervalVariable(variable: SceneVariable): variable is IntervalVariable {\n  return variable.state.type === 'interval';\n}\n\nexport function isQueryVariable(variable: SceneVariable): variable is QueryVariable {\n  return variable.state.type === 'query';\n}\n\nexport function isTextBoxVariable(variable: SceneVariable): variable is TextBoxVariable {\n  return variable.state.type === 'textbox';\n}\n\nexport function isGroupByVariable(variable: SceneVariable): variable is GroupByVariable {\n  return variable.state.type === 'groupby';\n}\n\nexport function isSwitchVariable(variable: SceneVariable): variable is SwitchVariable {\n  // TODO: remove this once switch is in the schema @leventebalogh\n  // @ts-expect-error - switch is a valid variable type, but not in the schema yet\n  return variable.state.type === 'switch';\n}\n"],"names":[],"mappings":"AAWO,SAAS,gBAAgB,QAA2D,EAAA;AACzF,EAAO,OAAA,QAAA,CAAS,MAAM,IAAS,KAAA,OAAA;AACjC;AAEO,SAAS,mBAAmB,QAAuD,EAAA;AACxF,EAAO,OAAA,QAAA,CAAS,MAAM,IAAS,KAAA,UAAA;AACjC;AAEO,SAAS,iBAAiB,QAAqD,EAAA;AACpF,EAAO,OAAA,QAAA,CAAS,MAAM,IAAS,KAAA,QAAA;AACjC;AAEO,SAAS,qBAAqB,QAAyD,EAAA;AAC5F,EAAO,OAAA,QAAA,CAAS,MAAM,IAAS,KAAA,YAAA;AACjC;AAEO,SAAS,mBAAmB,QAAuD,EAAA;AACxF,EAAO,OAAA,QAAA,CAAS,MAAM,IAAS,KAAA,UAAA;AACjC;AAEO,SAAS,gBAAgB,QAAoD,EAAA;AAClF,EAAO,OAAA,QAAA,CAAS,MAAM,IAAS,KAAA,OAAA;AACjC;AAEO,SAAS,kBAAkB,QAAsD,EAAA;AACtF,EAAO,OAAA,QAAA,CAAS,MAAM,IAAS,KAAA,SAAA;AACjC;AAEO,SAAS,kBAAkB,QAAsD,EAAA;AACtF,EAAO,OAAA,QAAA,CAAS,MAAM,IAAS,KAAA,SAAA;AACjC;AAEO,SAAS,iBAAiB,QAAqD,EAAA;AAGpF,EAAO,OAAA,QAAA,CAAS,MAAM,IAAS,KAAA,QAAA;AACjC;;;;"}

package/dist/index.d.ts

@@ -1285,6 +1285,30 @@ declare class GroupByVariable extends MultiValueVariable<GroupByVariableState> {
 }
 declare function GroupByVariableRenderer({ model }: SceneComponentProps<GroupByVariable>): React__default.JSX.Element;
 
+interface SwitchVariableState extends SceneVariableState {
+    value: string;
+    enabledValue: string;
+    disabledValue: string;
+}
+declare class SwitchVariable extends SceneObjectBase<SwitchVariableState> implements SceneVariable<SwitchVariableState> {
+    static Component: typeof SwitchVariableRenderer;
+    private _prevValue;
+    constructor(initialState: Partial<SwitchVariableState>);
+    /**
+     * This function is called on when SceneVariableSet is activated or when a dependency changes.
+     */
+    validateAndUpdate(): Observable<ValidateAndUpdateResult>;
+    setValue(newValue: string): void;
+    getValue(): VariableValue;
+    isEnabled(): boolean;
+    isDisabled(): boolean;
+    private getKey;
+    getKeys(): string[];
+    getUrlState(): SceneObjectUrlValues;
+    updateFromUrl(values: SceneObjectUrlValues): void;
+}
+declare function SwitchVariableRenderer({ model }: SceneComponentProps<SwitchVariable>): React__default.JSX.Element;
+
 declare function isAdHocVariable(variable: SceneVariable): variable is AdHocFiltersVariable;
 declare function isConstantVariable(variable: SceneVariable): variable is ConstantVariable;
 declare function isCustomVariable(variable: SceneVariable): variable is CustomVariable;
@@ -1293,6 +1317,7 @@ declare function isIntervalVariable(variable: SceneVariable): variable is Interv
 declare function isQueryVariable(variable: SceneVariable): variable is QueryVariable;
 declare function isTextBoxVariable(variable: SceneVariable): variable is TextBoxVariable;
 declare function isGroupByVariable(variable: SceneVariable): variable is GroupByVariable;
+declare function isSwitchVariable(variable: SceneVariable): variable is SwitchVariable;
 
 interface SceneObjectStateChangedPayload<TState extends SceneObjectState = SceneObjectState> {
     prevState: TState;
@@ -3201,9 +3226,10 @@ declare const sceneUtils: {
     isQueryVariable: typeof isQueryVariable;
     isTextBoxVariable: typeof isTextBoxVariable;
     isGroupByVariable: typeof isGroupByVariable;
+    isSwitchVariable: typeof isSwitchVariable;
     isRepeatCloneOrChildOf: typeof isRepeatCloneOrChildOf;
     buildPathIdFor: typeof buildPathIdFor;
 };
 
-export { AdHocFiltersVariable, ConstantVariable, ControlsLabel, CustomVariable, DataProviderProxy, DataSourceVariable, EmbeddedScene, FieldConfigBuilder, FieldConfigBuilders, FieldConfigOverridesBuilder, GroupByVariable, IntervalVariable, LazyLoader, LocalValueVariable, MultiOrSingleValueSelect, MultiValueVariable, NestedScene, NewSceneObjectAddedEvent, PATH_ID_SEPARATOR, 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, SceneRenderProfiler, SceneTimePicker, SceneTimeRange, SceneTimeRangeCompare, SceneTimeRangeTransformerBase, SceneTimeZoneOverride, SceneToolbarButton, SceneToolbarInput, SceneVariableSet, SceneVariableValueChangedEvent, ScopesVariable, SplitLayout, TestVariable, TextBoxVariable, UrlSyncContextProvider, UrlSyncManager, UserActionEvent, VariableDependencyConfig, VariableValueControl, VariableValueSelectWrapper, VariableValueSelectors, VizConfigBuilder, VizConfigBuilders, VizPanel, VizPanelBuilder, VizPanelExploreButton, VizPanelMenu, index$1 as behaviors, index as dataLayers, escapeUrlPipeDelimiters, formatRegistry, getExploreURL, isCustomVariableValue, isDataLayer, isDataRequestEnricher, isFiltersRequestEnricher, isSceneObject, loadResources, registerQueryWithController, registerRuntimeDataSource, sceneGraph, sceneUtils, useSceneApp, useSceneObjectState, useUrlSync };
+export { AdHocFiltersVariable, ConstantVariable, ControlsLabel, CustomVariable, DataProviderProxy, DataSourceVariable, EmbeddedScene, FieldConfigBuilder, FieldConfigBuilders, FieldConfigOverridesBuilder, GroupByVariable, IntervalVariable, LazyLoader, LocalValueVariable, MultiOrSingleValueSelect, MultiValueVariable, NestedScene, NewSceneObjectAddedEvent, PATH_ID_SEPARATOR, 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, SceneRenderProfiler, SceneTimePicker, SceneTimeRange, SceneTimeRangeCompare, SceneTimeRangeTransformerBase, SceneTimeZoneOverride, SceneToolbarButton, SceneToolbarInput, SceneVariableSet, SceneVariableValueChangedEvent, ScopesVariable, SplitLayout, SwitchVariable, TestVariable, TextBoxVariable, UrlSyncContextProvider, UrlSyncManager, UserActionEvent, VariableDependencyConfig, VariableValueControl, VariableValueSelectWrapper, VariableValueSelectors, VizConfigBuilder, VizConfigBuilders, VizPanel, VizPanelBuilder, VizPanelExploreButton, VizPanelMenu, index$1 as behaviors, index as dataLayers, escapeUrlPipeDelimiters, formatRegistry, getExploreURL, isCustomVariableValue, isDataLayer, isDataRequestEnricher, isFiltersRequestEnricher, isSceneObject, loadResources, 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 };

package/dist/index.js

@@ -3603,7 +3603,7 @@ function wrapInSafeSerializableSceneObject(sceneObject) {
 function DefaultGroupByCustomIndicatorContainer(props) {
   const { model } = props;
   const theme = ui.useTheme2();
-  const styles = getStyles$h(theme);
+  const styles = getStyles$i(theme);
   const inputStyles = ui.getInputStyles({ theme, invalid: false });
   const value = lodash.isArray(model.state.value) ? model.state.value : model.state.value ? [model.state.value] : [];
   let buttons = [];
@@ -3685,7 +3685,7 @@ function DefaultGroupByCustomIndicatorContainer(props) {
     buttons
   );
 }
-const getStyles$h = (theme) => ({
+const getStyles$i = (theme) => ({
   clearIcon: css.css({
     color: theme.colors.action.disabledText,
     cursor: "pointer",
@@ -4206,7 +4206,7 @@ function LoadingIndicator(props) {
 }
 
 function ControlsLabel(props) {
-  const styles = ui.useStyles2(getStyles$g);
+  const styles = ui.useStyles2(getStyles$h);
   const theme = ui.useTheme2();
   const isVertical = props.layout === "vertical";
   const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React__default.default.createElement(
@@ -4253,7 +4253,7 @@ function ControlsLabel(props) {
   }
   return labelElement;
 }
-const getStyles$g = (theme) => ({
+const getStyles$h = (theme) => ({
   horizontalLabel: css.css({
     background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
     display: `flex`,
@@ -4306,7 +4306,7 @@ function keyLabelToOption(key, label) {
 const filterNoOp = () => true;
 function AdHocFilterRenderer({ filter, model }) {
   var _a, _b, _c, _d, _e;
-  const styles = ui.useStyles2(getStyles$f);
+  const styles = ui.useStyles2(getStyles$g);
   const [keys, setKeys] = React.useState([]);
   const [values, setValues] = React.useState([]);
   const [isKeysLoading, setIsKeysLoading] = React.useState(false);
@@ -4533,7 +4533,7 @@ function AdHocFilterRenderer({ filter, model }) {
     }
   ));
 }
-const getStyles$f = (theme) => ({
+const getStyles$g = (theme) => ({
   field: css.css({
     marginBottom: 0
   }),
@@ -4733,7 +4733,7 @@ function isFilter(filter) {
 
 const DropdownItem = React.forwardRef(
   function DropdownItem2({ children, active, addGroupBottomBorder, isMultiValueEdit, checked, ...rest }, ref) {
-    const styles = ui.useStyles2(getStyles$e);
+    const styles = ui.useStyles2(getStyles$f);
     const id = React.useId();
     return /* @__PURE__ */ React__default.default.createElement(
       "div",
@@ -4749,7 +4749,7 @@ const DropdownItem = React.forwardRef(
     );
   }
 );
-const getStyles$e = (theme) => ({
+const getStyles$f = (theme) => ({
   option: css.css({
     label: "grafana-select-option",
     top: 0,
@@ -4819,7 +4819,7 @@ const MultiValueApplyButton = ({
   maxOptionWidth,
   menuHeight
 }) => {
-  const styles = ui.useStyles2(getStyles$e);
+  const styles = ui.useStyles2(getStyles$f);
   const floatingElementRect = floatingElement == null ? void 0 : floatingElement.getBoundingClientRect();
   return /* @__PURE__ */ React__default.default.createElement(
     "div",
@@ -5040,7 +5040,7 @@ const MultiValuePill = ({
   handleEditMultiValuePill
 }) => {
   var _a, _b;
-  const styles = ui.useStyles2(getStyles$d);
+  const styles = ui.useStyles2(getStyles$e);
   const editMultiValuePill = React.useCallback(
     (e) => {
       e.stopPropagation();
@@ -5104,7 +5104,7 @@ const MultiValuePill = ({
     )
   );
 };
-const getStyles$d = (theme) => ({
+const getStyles$e = (theme) => ({
   basePill: css.css({
     display: "flex",
     alignItems: "center",
@@ -5143,7 +5143,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
   const [activeIndex, setActiveIndex] = React.useState(null);
   const [filterInputType, setInputType] = React.useState(!isAlwaysWip ? "value" : "key");
   const [preventFiltering, setPreventFiltering] = React.useState(!isAlwaysWip && filterInputType === "value");
-  const styles = ui.useStyles2(getStyles$c);
+  const styles = ui.useStyles2(getStyles$d);
   const [filterMultiValues, setFilterMultiValues] = React.useState([]);
   const [_, setForceRefresh] = React.useState({});
   const allowCustomValue = (_a = model.state.allowCustomValue) != null ? _a : true;
@@ -5752,7 +5752,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     }
   ) : null))));
 });
-const getStyles$c = (theme) => ({
+const getStyles$d = (theme) => ({
   comboboxWrapper: css.css({
     display: "flex",
     flexWrap: "wrap"
@@ -5826,7 +5826,7 @@ const getStyles$c = (theme) => ({
 const LABEL_MAX_VISIBLE_LENGTH = 20;
 function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
   var _a, _b, _c, _d;
-  const styles = ui.useStyles2(getStyles$b);
+  const styles = ui.useStyles2(getStyles$c);
   const [viewMode, setViewMode] = React.useState(true);
   const [shouldFocusOnPillWrapper, setShouldFocusOnPillWrapper] = React.useState(false);
   const pillWrapperRef = React.useRef(null);
@@ -6004,7 +6004,7 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
     }
   );
 }
-const getStyles$b = (theme) => ({
+const getStyles$c = (theme) => ({
   combinedFilterPill: css.css({
     display: "flex",
     alignItems: "center",
@@ -6088,7 +6088,7 @@ const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwa
 
 const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ model }) {
   const { originFilters, filters, readOnly } = model.useState();
-  const styles = ui.useStyles2(getStyles$a);
+  const styles = ui.useStyles2(getStyles$b);
   const focusOnWipInputRef = React.useRef();
   return /* @__PURE__ */ React__default.default.createElement(
     "div",
@@ -6124,7 +6124,7 @@ const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRen
     !readOnly ? /* @__PURE__ */ React__default.default.createElement(AdHocFiltersAlwaysWipCombobox, { model, ref: focusOnWipInputRef }) : null
   );
 });
-const getStyles$a = (theme) => ({
+const getStyles$b = (theme) => ({
   comboboxWrapper: css.css({
     display: "flex",
     flexWrap: "wrap",
@@ -6717,13 +6717,13 @@ function renderExpression(builder, filters) {
 }
 function AdHocFiltersVariableRenderer({ model }) {
   const { filters, readOnly, addFilterButtonText } = model.useState();
-  const styles = ui.useStyles2(getStyles$9);
+  const styles = ui.useStyles2(getStyles$a);
   if (model.state.layout === "combobox") {
     return /* @__PURE__ */ React__default.default.createElement(AdHocFiltersComboboxRenderer, { model });
   }
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.wrapper }, filters.filter((filter) => !filter.hidden).map((filter, index) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, { key: index }, /* @__PURE__ */ React__default.default.createElement(AdHocFilterRenderer, { filter, model }))), !readOnly && /* @__PURE__ */ React__default.default.createElement(AdHocFilterBuilder, { model, key: "'builder", addFilterButtonText }));
 }
-const getStyles$9 = (theme) => ({
+const getStyles$a = (theme) => ({
   wrapper: css.css({
     display: "flex",
     flexWrap: "wrap",
@@ -8615,6 +8615,9 @@ function isTextBoxVariable(variable) {
 function isGroupByVariable(variable) {
   return variable.state.type === "groupby";
 }
+function isSwitchVariable(variable) {
+  return variable.state.type === "switch";
+}
 
 class ActWhenVariableChanged extends SceneObjectBase {
   constructor() {
@@ -8690,7 +8693,7 @@ function getCursorSyncScope(sceneObject) {
 }
 
 function VizPanelSeriesLimit({ data, showAll, seriesLimit, onShowAllSeries }) {
-  const styles = ui.useStyles2(getStyles$8);
+  const styles = ui.useStyles2(getStyles$9);
   const seriesCount = data == null ? void 0 : data.series.length;
   if (seriesCount === void 0 || seriesCount < seriesLimit) {
     return null;
@@ -8720,7 +8723,7 @@ function VizPanelSeriesLimit({ data, showAll, seriesLimit, onShowAllSeries }) {
     /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "secondary", size: "sm", onClick: onShowAllSeries }, buttonText)
   ));
 }
-const getStyles$8 = (theme) => ({
+const getStyles$9 = (theme) => ({
   timeSeriesDisclaimer: css.css({
     label: "time-series-disclaimer",
     display: "flex",
@@ -8745,7 +8748,7 @@ function useUniqueId() {
 const LazyLoader = React__default.default.forwardRef(
   ({ children, onLoad, onChange, className, ...rest }, ref) => {
     const id = useUniqueId();
-    const { hideEmpty } = ui.useStyles2(getStyles$7);
+    const { hideEmpty } = ui.useStyles2(getStyles$8);
     const [loaded, setLoaded] = React.useState(false);
     const [isInView, setIsInView] = React.useState(false);
     const innerRef = React.useRef(null);
@@ -8774,7 +8777,7 @@ const LazyLoader = React__default.default.forwardRef(
     return /* @__PURE__ */ React__default.default.createElement("div", { id, ref: innerRef, className: `${hideEmpty} ${className}`, ...rest }, !loaded ? i18n.t("grafana-scenes.components.lazy-loader.placeholder", "\xA0") : /* @__PURE__ */ React__default.default.createElement(LazyLoaderInViewContext.Provider, { value: isInView }, children));
   }
 );
-function getStyles$7() {
+function getStyles$8() {
   return {
     hideEmpty: css.css({
       "&:empty": {
@@ -11135,6 +11138,104 @@ CustomVariable.Component = ({ model }) => {
   return /* @__PURE__ */ React__default.default.createElement(MultiOrSingleValueSelect, { model });
 };
 
+class SwitchVariable extends SceneObjectBase {
+  constructor(initialState) {
+    super({
+      // TODO: remove this once switch is in the schema @leventebalogh
+      // @ts-expect-error - switch is a valid variable type, but not in the schema yet
+      type: "switch",
+      value: "false",
+      enabledValue: "true",
+      disabledValue: "false",
+      name: "",
+      ...initialState
+    });
+    this._prevValue = "";
+    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: () => this.getKeys() });
+  }
+  /**
+   * 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 rxjs.of({});
+  }
+  setValue(newValue) {
+    if (this.getValue() === newValue) {
+      return;
+    }
+    if ([this.state.enabledValue, this.state.disabledValue].includes(newValue)) {
+      this.setState({ value: newValue });
+      this.publishEvent(new SceneVariableValueChangedEvent(this), true);
+    } else {
+      console.error(
+        `Invalid value for switch variable: "${newValue}". Valid values are: "${this.state.enabledValue}" and "${this.state.disabledValue}".`
+      );
+    }
+  }
+  getValue() {
+    return this.state.value;
+  }
+  isEnabled() {
+    return this.state.value === this.state.enabledValue;
+  }
+  isDisabled() {
+    return this.state.value === this.state.disabledValue;
+  }
+  getKey() {
+    return `var-${this.state.name}`;
+  }
+  getKeys() {
+    if (this.state.skipUrlSync) {
+      return [];
+    }
+    return [this.getKey()];
+  }
+  getUrlState() {
+    if (this.state.skipUrlSync) {
+      return {};
+    }
+    return { [this.getKey()]: this.state.value };
+  }
+  updateFromUrl(values) {
+    const val = values[this.getKey()];
+    if (typeof val === "string") {
+      this.setValue(val);
+    }
+  }
+}
+SwitchVariable.Component = SwitchVariableRenderer;
+function SwitchVariableRenderer({ model }) {
+  const state = model.useState();
+  const styles = ui.useStyles2(getStyles$7);
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.container }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Switch,
+    {
+      value: state.value === state.enabledValue,
+      onChange: (event) => {
+        model.setValue(event.currentTarget.checked ? state.enabledValue : state.disabledValue);
+      }
+    }
+  ));
+}
+function getStyles$7(theme) {
+  return {
+    container: css.css({
+      display: "flex",
+      alignItems: "center",
+      padding: theme.spacing(0, 1),
+      height: theme.spacing(theme.components.height.md),
+      borderRadius: theme.shape.radius.default,
+      border: `1px solid ${theme.components.input.borderColor}`,
+      background: theme.colors.background.primary
+    })
+  };
+}
+
 class DataSourceVariable extends MultiValueVariable {
   constructor(initialState) {
     super({
@@ -15317,6 +15418,7 @@ const sceneUtils = {
   isQueryVariable,
   isTextBoxVariable,
   isGroupByVariable,
+  isSwitchVariable,
   isRepeatCloneOrChildOf,
   buildPathIdFor
 };
@@ -15385,6 +15487,7 @@ exports.SceneVariableSet = SceneVariableSet;
 exports.SceneVariableValueChangedEvent = SceneVariableValueChangedEvent;
 exports.ScopesVariable = ScopesVariable;
 exports.SplitLayout = SplitLayout;
+exports.SwitchVariable = SwitchVariable;
 exports.TestVariable = TestVariable;
 exports.TextBoxVariable = TextBoxVariable;
 exports.UrlSyncContextProvider = UrlSyncContextProvider;