@grafana/scenes 4.26.2--canary.770.9388861265.0 → 4.26.3--canary.765.9397990341.0

package/dist/esm/services/UrlSyncManager.js

@@ -2,34 +2,18 @@ import { locationService } from '@grafana/runtime';
 import { SceneObjectStateChangedEvent } from '../core/events.js';
 import { writeSceneLog } from '../utils/writeSceneLog.js';
 import { UniqueUrlKeyMapper } from './UniqueUrlKeyMapper.js';
-import { syncStateFromUrl, isUrlValueEqual, getUrlState } from './utils.js';
+import { isUrlValueEqual, syncStateFromUrl, getUrlState } from './utils.js';
 
 class UrlSyncManager {
   constructor() {
     this._urlKeyMapper = new UniqueUrlKeyMapper();
     this._stateSub = null;
-    this._locationSub = null;
-    this._ignoreNextLocationUpdate = false;
-    this._onLocationUpdate = (location) => {
-      if (this._ignoreNextLocationUpdate) {
-        this._ignoreNextLocationUpdate = false;
-        return;
-      }
-      if (this._lastPath !== location.pathname) {
-        return;
-      }
-      const urlParams = new URLSearchParams(location.search);
-      this._urlKeyMapper.rebuildIndex(this._sceneRoot);
-      syncStateFromUrl(this._sceneRoot, urlParams, this._urlKeyMapper);
-      this._lastPath = location.pathname;
-    };
     this._onStateChanged = ({ payload }) => {
       const changedObject = payload.changedObject;
       if (changedObject.urlSync) {
         const newUrlState = changedObject.urlSync.getUrlState();
         const searchParams = locationService.getSearch();
         const mappedUpdated = {};
-        this._urlKeyMapper.rebuildIndex(this._sceneRoot);
         for (const [key, newUrlValue] of Object.entries(newUrlState)) {
           const uniqueKey = this._urlKeyMapper.getUniqueKey(key, changedObject);
           const currentUrlValue = searchParams.getAll(uniqueKey);
@@ -38,24 +22,26 @@ class UrlSyncManager {
           }
         }
         if (Object.keys(mappedUpdated).length > 0) {
-          this._ignoreNextLocationUpdate = true;
+          writeSceneLog("UrlSyncManager", "onStateChange updating URL");
           locationService.partial(mappedUpdated, true);
+          this._lastLocation = locationService.getLocation();
         }
       }
     };
   }
   initSync(root) {
-    if (!this._locationSub) {
-      writeSceneLog("UrlSyncManager", "New location listen");
-      this._locationSub = locationService.getHistory().listen(this._onLocationUpdate);
-    }
+    var _a;
     if (this._stateSub) {
-      writeSceneLog("UrlSyncManager", "Unregister previous scene state subscription", this._sceneRoot.state.key);
+      writeSceneLog("UrlSyncManager", "Unregister previous scene state subscription", (_a = this._sceneRoot) == null ? void 0 : _a.state.key);
       this._stateSub.unsubscribe();
     }
+    writeSceneLog("UrlSyncManager", "init", root.state.key);
+    const location = locationService.getLocation();
     this._sceneRoot = root;
-    this._lastPath = locationService.getLocation().pathname;
+    this._lastLocation = location;
+    this._urlParams = new URLSearchParams(location.search);
     this._stateSub = root.subscribeToEvent(SceneObjectStateChangedEvent, this._onStateChanged);
+    this._urlKeyMapper.clear();
     this.syncFrom(this._sceneRoot);
   }
   cleanUp(root) {
@@ -63,11 +49,6 @@ class UrlSyncManager {
       return;
     }
     writeSceneLog("UrlSyncManager", "Clean up");
-    if (this._locationSub) {
-      this._locationSub();
-      writeSceneLog("UrlSyncManager", "Unregister history listen");
-      this._locationSub = null;
-    }
     if (this._stateSub) {
       this._stateSub.unsubscribe();
       this._stateSub = null;
@@ -78,12 +59,28 @@ class UrlSyncManager {
         this._sceneRoot.state.key === root.state.key
       );
     }
+    this._sceneRoot = void 0;
+    this._urlParams = void 0;
   }
   syncFrom(sceneObj) {
     const urlParams = locationService.getSearch();
-    this._urlKeyMapper.rebuildIndex(this._sceneRoot);
     syncStateFromUrl(sceneObj, urlParams, this._urlKeyMapper);
   }
+  handleNewLocation(location) {
+    if (!this._sceneRoot || this._lastLocation === location) {
+      return;
+    }
+    writeSceneLog("UrlSyncManager", "handleNewLocation");
+    this._urlParams = new URLSearchParams(location.search);
+    this._lastLocation = location;
+    syncStateFromUrl(this._sceneRoot, this._urlParams, this._urlKeyMapper);
+  }
+  handleNewObject(sceneObj) {
+    if (!this._sceneRoot || !this._urlParams) {
+      return;
+    }
+    syncStateFromUrl(sceneObj, this._urlParams, this._urlKeyMapper);
+  }
   getUrlState(root) {
     return getUrlState(root);
   }

package/dist/esm/services/UrlSyncManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"UrlSyncManager.js","sources":["../../../src/services/UrlSyncManager.ts"],"sourcesContent":["import { Location, UnregisterCallback } from 'history';\n\nimport { locationService } from '@grafana/runtime';\n\nimport { SceneObjectStateChangedEvent } from '../core/events';\nimport { SceneObject, SceneObjectUrlValues } from '../core/types';\nimport { writeSceneLog } from '../utils/writeSceneLog';\nimport { Unsubscribable } from 'rxjs';\nimport { UniqueUrlKeyMapper } from './UniqueUrlKeyMapper';\nimport { getUrlState, isUrlValueEqual, syncStateFromUrl } from './utils';\n\nexport interface UrlSyncManagerLike {\n  initSync(root: SceneObject): void;\n  cleanUp(root: SceneObject): void;\n  getUrlState(root: SceneObject): SceneObjectUrlValues;\n}\n\nexport class UrlSyncManager implements UrlSyncManagerLike {\n  private _urlKeyMapper = new UniqueUrlKeyMapper();\n  private _sceneRoot!: SceneObject;\n  private _stateSub: Unsubscribable | null = null;\n  private _locationSub?: UnregisterCallback | null = null;\n  private _lastPath?: string;\n  private _ignoreNextLocationUpdate = false;\n\n  /**\n   * Updates the current scene state to match URL state.\n   */\n  public initSync(root: SceneObject) {\n    if (!this._locationSub) {\n      writeSceneLog('UrlSyncManager', 'New location listen');\n      this._locationSub = locationService.getHistory().listen(this._onLocationUpdate);\n    }\n\n    if (this._stateSub) {\n      writeSceneLog('UrlSyncManager', 'Unregister previous scene state subscription', this._sceneRoot.state.key);\n      this._stateSub.unsubscribe();\n    }\n\n    this._sceneRoot = root;\n    this._lastPath = locationService.getLocation().pathname;\n    this._stateSub = root.subscribeToEvent(SceneObjectStateChangedEvent, this._onStateChanged);\n\n    this.syncFrom(this._sceneRoot);\n  }\n\n  public cleanUp(root: SceneObject) {\n    // Ignore this if we have a new or different root\n    if (this._sceneRoot !== root) {\n      return;\n    }\n\n    writeSceneLog('UrlSyncManager', 'Clean up');\n\n    if (this._locationSub) {\n      this._locationSub();\n      writeSceneLog('UrlSyncManager', 'Unregister history listen');\n      this._locationSub = null;\n    }\n\n    if (this._stateSub) {\n      this._stateSub.unsubscribe();\n      this._stateSub = null;\n      writeSceneLog(\n        'UrlSyncManager',\n        'Root deactived, unsub to state',\n        'same key',\n        this._sceneRoot.state.key === root.state.key\n      );\n    }\n  }\n\n  public syncFrom(sceneObj: SceneObject) {\n    const urlParams = locationService.getSearch();\n    // The index is always from the root\n    this._urlKeyMapper.rebuildIndex(this._sceneRoot);\n    syncStateFromUrl(sceneObj, urlParams, this._urlKeyMapper);\n  }\n\n  private _onLocationUpdate = (location: Location) => {\n    if (this._ignoreNextLocationUpdate) {\n      this._ignoreNextLocationUpdate = false;\n      return;\n    }\n\n    if (this._lastPath !== location.pathname) {\n      return;\n    }\n\n    const urlParams = new URLSearchParams(location.search);\n    // Rebuild key mapper index before starting sync\n    this._urlKeyMapper.rebuildIndex(this._sceneRoot);\n    // Sync scene state tree from url\n    syncStateFromUrl(this._sceneRoot, urlParams, this._urlKeyMapper);\n    this._lastPath = location.pathname;\n  };\n\n  private _onStateChanged = ({ payload }: SceneObjectStateChangedEvent) => {\n    const changedObject = payload.changedObject;\n\n    if (changedObject.urlSync) {\n      const newUrlState = changedObject.urlSync.getUrlState();\n\n      const searchParams = locationService.getSearch();\n      const mappedUpdated: SceneObjectUrlValues = {};\n\n      this._urlKeyMapper.rebuildIndex(this._sceneRoot);\n\n      for (const [key, newUrlValue] of Object.entries(newUrlState)) {\n        const uniqueKey = this._urlKeyMapper.getUniqueKey(key, changedObject);\n        const currentUrlValue = searchParams.getAll(uniqueKey);\n\n        if (!isUrlValueEqual(currentUrlValue, newUrlValue)) {\n          mappedUpdated[uniqueKey] = newUrlValue;\n        }\n      }\n\n      if (Object.keys(mappedUpdated).length > 0) {\n        this._ignoreNextLocationUpdate = true;\n        locationService.partial(mappedUpdated, true);\n      }\n    }\n  };\n\n  public getUrlState(root: SceneObject): SceneObjectUrlValues {\n    return getUrlState(root);\n  }\n}\n\nlet urlSyncManager: UrlSyncManagerLike | undefined;\n\nexport function getUrlSyncManager(): UrlSyncManagerLike {\n  if (!urlSyncManager) {\n    urlSyncManager = new UrlSyncManager();\n  }\n\n  return urlSyncManager;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"UrlSyncManager.js","sources":["../../../src/services/UrlSyncManager.ts"],"sourcesContent":["import { Location } from 'history';\n\nimport { locationService } from '@grafana/runtime';\n\nimport { SceneObjectStateChangedEvent } from '../core/events';\nimport { SceneObject, SceneObjectUrlValues } from '../core/types';\nimport { writeSceneLog } from '../utils/writeSceneLog';\nimport { Unsubscribable } from 'rxjs';\nimport { UniqueUrlKeyMapper } from './UniqueUrlKeyMapper';\nimport { getUrlState, isUrlValueEqual, syncStateFromUrl } from './utils';\n\nexport interface UrlSyncManagerLike {\n  initSync(root: SceneObject): void;\n  cleanUp(root: SceneObject): void;\n  getUrlState(root: SceneObject): SceneObjectUrlValues;\n  handleNewLocation(location: Location): void;\n  handleNewObject(sceneObj: SceneObject): void;\n}\n\nexport class UrlSyncManager implements UrlSyncManagerLike {\n  private _urlKeyMapper = new UniqueUrlKeyMapper();\n  private _sceneRoot?: SceneObject;\n  private _stateSub: Unsubscribable | null = null;\n  private _lastLocation: Location | undefined;\n  private _urlParams: URLSearchParams | undefined;\n\n  /**\n   * Updates the current scene state to match URL state.\n   */\n  public initSync(root: SceneObject) {\n    if (this._stateSub) {\n      writeSceneLog('UrlSyncManager', 'Unregister previous scene state subscription', this._sceneRoot?.state.key);\n      this._stateSub.unsubscribe();\n    }\n\n    writeSceneLog('UrlSyncManager', 'init', root.state.key);\n\n    const location = locationService.getLocation();\n\n    this._sceneRoot = root;\n    this._lastLocation = location;\n    this._urlParams = new URLSearchParams(location.search);\n    this._stateSub = root.subscribeToEvent(SceneObjectStateChangedEvent, this._onStateChanged);\n\n    this._urlKeyMapper.clear();\n    this.syncFrom(this._sceneRoot);\n  }\n\n  public cleanUp(root: SceneObject) {\n    // Ignore this if we have a new or different root\n    if (this._sceneRoot !== root) {\n      return;\n    }\n\n    writeSceneLog('UrlSyncManager', 'Clean up');\n\n    if (this._stateSub) {\n      this._stateSub.unsubscribe();\n      this._stateSub = null;\n      writeSceneLog(\n        'UrlSyncManager',\n        'Root deactived, unsub to state',\n        'same key',\n        this._sceneRoot.state.key === root.state.key\n      );\n    }\n\n    this._sceneRoot = undefined;\n    this._urlParams = undefined;\n  }\n\n  public syncFrom(sceneObj: SceneObject) {\n    const urlParams = locationService.getSearch();\n    // The index is always from the root\n    syncStateFromUrl(sceneObj, urlParams, this._urlKeyMapper);\n  }\n\n  public handleNewLocation(location: Location) {\n    if (!this._sceneRoot || this._lastLocation === location) {\n      return;\n    }\n\n    writeSceneLog('UrlSyncManager', 'handleNewLocation');\n\n    this._urlParams = new URLSearchParams(location.search);\n    this._lastLocation = location;\n\n    // Sync scene state tree from url\n    syncStateFromUrl(this._sceneRoot!, this._urlParams, this._urlKeyMapper);\n  }\n\n  public handleNewObject(sceneObj: SceneObject) {\n    if (!this._sceneRoot || !this._urlParams) {\n      return;\n    }\n\n    syncStateFromUrl(sceneObj, this._urlParams, this._urlKeyMapper);\n  }\n\n  private _onStateChanged = ({ payload }: SceneObjectStateChangedEvent) => {\n    const changedObject = payload.changedObject;\n\n    if (changedObject.urlSync) {\n      const newUrlState = changedObject.urlSync.getUrlState();\n\n      const searchParams = locationService.getSearch();\n      const mappedUpdated: SceneObjectUrlValues = {};\n\n      for (const [key, newUrlValue] of Object.entries(newUrlState)) {\n        const uniqueKey = this._urlKeyMapper.getUniqueKey(key, changedObject);\n        const currentUrlValue = searchParams.getAll(uniqueKey);\n\n        if (!isUrlValueEqual(currentUrlValue, newUrlValue)) {\n          mappedUpdated[uniqueKey] = newUrlValue;\n        }\n      }\n\n      if (Object.keys(mappedUpdated).length > 0) {\n        writeSceneLog('UrlSyncManager', 'onStateChange updating URL');\n        locationService.partial(mappedUpdated, true);\n        this._lastLocation = locationService.getLocation();\n      }\n    }\n  };\n\n  public getUrlState(root: SceneObject): SceneObjectUrlValues {\n    return getUrlState(root);\n  }\n}\n\nlet urlSyncManager: UrlSyncManagerLike | undefined;\n\nexport function getUrlSyncManager(): UrlSyncManagerLike {\n  if (!urlSyncManager) {\n    urlSyncManager = new UrlSyncManager();\n  }\n\n  return urlSyncManager;\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/services/useUrlSync.js

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { getUrlSyncManager } from './UrlSyncManager.js';
+
+function useUrlSync(sceneRoot) {
+  const urlSyncManager = getUrlSyncManager();
+  const location = useLocation();
+  const [isInitialized, setIsInitialized] = useState(false);
+  useEffect(() => {
+    urlSyncManager.initSync(sceneRoot);
+    setIsInitialized(true);
+    return () => urlSyncManager.cleanUp(sceneRoot);
+  }, [sceneRoot, urlSyncManager]);
+  useEffect(() => {
+    urlSyncManager.handleNewLocation(location);
+  }, [sceneRoot, urlSyncManager, location]);
+  return isInitialized;
+}
+
+export { useUrlSync };
+//# sourceMappingURL=useUrlSync.js.map

package/dist/esm/services/useUrlSync.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUrlSync.js","sources":["../../../src/services/useUrlSync.ts"],"sourcesContent":["import { SceneObject } from '../core/types';\nimport { useEffect, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { getUrlSyncManager } from './UrlSyncManager';\n\nexport function useUrlSync(sceneRoot: SceneObject): boolean {\n  const urlSyncManager = getUrlSyncManager();\n  const location = useLocation();\n  const [isInitialized, setIsInitialized] = useState(false);\n\n  useEffect(() => {\n    urlSyncManager.initSync(sceneRoot);\n    setIsInitialized(true);\n    return () => urlSyncManager.cleanUp(sceneRoot);\n  }, [sceneRoot, urlSyncManager]);\n\n  useEffect(() => {\n    urlSyncManager.handleNewLocation(location);\n  }, [sceneRoot, urlSyncManager, location]);\n\n  return isInitialized;\n}\n\nexport interface UrlSyncContextProviderProps {\n  scene: SceneObject;\n  children: React.ReactNode;\n}\n"],"names":[],"mappings":";;;;AAKO,SAAS,WAAW,SAAiC,EAAA;AAC1D,EAAA,MAAM,iBAAiB,iBAAkB,EAAA,CAAA;AACzC,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAExD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,cAAA,CAAe,SAAS,SAAS,CAAA,CAAA;AACjC,IAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AACrB,IAAO,OAAA,MAAM,cAAe,CAAA,OAAA,CAAQ,SAAS,CAAA,CAAA;AAAA,GAC5C,EAAA,CAAC,SAAW,EAAA,cAAc,CAAC,CAAA,CAAA;AAE9B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,cAAA,CAAe,kBAAkB,QAAQ,CAAA,CAAA;AAAA,GACxC,EAAA,CAAC,SAAW,EAAA,cAAA,EAAgB,QAAQ,CAAC,CAAA,CAAA;AAExC,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}

package/dist/esm/services/utils.js

@@ -3,7 +3,6 @@ import { UniqueUrlKeyMapper } from './UniqueUrlKeyMapper.js';
 
 function getUrlState(root) {
   const urlKeyMapper = new UniqueUrlKeyMapper();
-  urlKeyMapper.rebuildIndex(root);
   const result = {};
   const visitNode = (obj) => {
     if (obj.urlSync) {
@@ -22,10 +21,18 @@ function getUrlState(root) {
 }
 function syncStateFromSearchParams(root, urlParams) {
   const urlKeyMapper = new UniqueUrlKeyMapper();
-  urlKeyMapper.rebuildIndex(root);
   syncStateFromUrl(root, urlParams, urlKeyMapper);
 }
-function syncStateFromUrl(sceneObject, urlParams, urlKeyMapper) {
+function syncStateFromUrl(root, urlParams, urlKeyMapper) {
+  if (!root.parent) {
+    syncUrlStateToObject(root, urlParams, urlKeyMapper);
+  }
+  root.forEachChild((child) => {
+    syncUrlStateToObject(child, urlParams, urlKeyMapper);
+  });
+  root.forEachChild((child) => syncStateFromUrl(child, urlParams, urlKeyMapper));
+}
+function syncUrlStateToObject(sceneObject, urlParams, urlKeyMapper) {
   if (sceneObject.urlSync) {
     const urlState = {};
     const currentState = sceneObject.urlSync.getUrlState();
@@ -50,7 +57,6 @@ function syncStateFromUrl(sceneObject, urlParams, urlKeyMapper) {
       sceneObject.urlSync.updateFromUrl(urlState);
     }
   }
-  sceneObject.forEachChild((child) => syncStateFromUrl(child, urlParams, urlKeyMapper));
 }
 function isUrlValueEqual(currentUrlValue, newUrlValue) {
   if (currentUrlValue.length === 0 && newUrlValue == null) {

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/services/utils.ts"],"sourcesContent":["import { isEqual } from 'lodash';\n\nimport { SceneObject, SceneObjectUrlValue, SceneObjectUrlValues } from '../core/types';\nimport { UniqueUrlKeyMapper } from './UniqueUrlKeyMapper';\n\n/**\n * @param root\n * @returns the full scene url state as a object with keys and values\n */\nexport function getUrlState(root: SceneObject): SceneObjectUrlValues {\n  const urlKeyMapper = new UniqueUrlKeyMapper();\n  urlKeyMapper.rebuildIndex(root);\n\n  const result: SceneObjectUrlValues = {};\n\n  const visitNode = (obj: SceneObject) => {\n    if (obj.urlSync) {\n      const newUrlState = obj.urlSync.getUrlState();\n\n      for (const [key, value] of Object.entries(newUrlState)) {\n        if (value != null) {\n          const uniqueKey = urlKeyMapper.getUniqueKey(key, obj);\n          result[uniqueKey] = value;\n        }\n      }\n    }\n\n    obj.forEachChild(visitNode);\n  };\n\n  visitNode(root);\n  return result;\n}\n\n/**\n * Exported util function to sync state from an initial url state.\n * Useful for initializing an embedded scenes with a url state string.\n */\nexport function syncStateFromSearchParams(root: SceneObject, urlParams: URLSearchParams) {\n  const urlKeyMapper = new UniqueUrlKeyMapper();\n  urlKeyMapper.rebuildIndex(root);\n  syncStateFromUrl(root, urlParams, urlKeyMapper);\n}\n\nexport function syncStateFromUrl(\n  sceneObject: SceneObject,\n  urlParams: URLSearchParams,\n  urlKeyMapper: UniqueUrlKeyMapper\n) {\n  if (sceneObject.urlSync) {\n    const urlState: SceneObjectUrlValues = {};\n    const currentState = sceneObject.urlSync.getUrlState();\n\n    for (const key of sceneObject.urlSync.getKeys()) {\n      const uniqueKey = urlKeyMapper.getUniqueKey(key, sceneObject);\n      const newValue = urlParams.getAll(uniqueKey);\n      const currentValue = currentState[key];\n\n      if (isUrlValueEqual(newValue, currentValue)) {\n        continue;\n      }\n\n      if (newValue.length > 0) {\n        if (Array.isArray(currentValue)) {\n          urlState[key] = newValue;\n        } else {\n          urlState[key] = newValue[0];\n        }\n      } else {\n        // mark this key as having no url state\n        urlState[key] = null;\n      }\n    }\n\n    if (Object.keys(urlState).length > 0) {\n      sceneObject.urlSync.updateFromUrl(urlState);\n    }\n  }\n\n  sceneObject.forEachChild((child) => syncStateFromUrl(child, urlParams, urlKeyMapper));\n}\n\nexport function isUrlValueEqual(currentUrlValue: string[], newUrlValue: SceneObjectUrlValue): boolean {\n  if (currentUrlValue.length === 0 && newUrlValue == null) {\n    return true;\n  }\n\n  if (!Array.isArray(newUrlValue) && currentUrlValue?.length === 1) {\n    return newUrlValue === currentUrlValue[0];\n  }\n\n  if (newUrlValue?.length === 0 && currentUrlValue === null) {\n    return true;\n  }\n\n  // We have two arrays, lets compare them\n  return isEqual(currentUrlValue, newUrlValue);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../src/services/utils.ts"],"sourcesContent":["import { isEqual } from 'lodash';\n\nimport { SceneObject, SceneObjectUrlValue, SceneObjectUrlValues } from '../core/types';\nimport { UniqueUrlKeyMapper } from './UniqueUrlKeyMapper';\n\n/**\n * @param root\n * @returns the full scene url state as a object with keys and values\n */\nexport function getUrlState(root: SceneObject): SceneObjectUrlValues {\n  const urlKeyMapper = new UniqueUrlKeyMapper();\n  const result: SceneObjectUrlValues = {};\n\n  const visitNode = (obj: SceneObject) => {\n    if (obj.urlSync) {\n      const newUrlState = obj.urlSync.getUrlState();\n\n      for (const [key, value] of Object.entries(newUrlState)) {\n        if (value != null) {\n          const uniqueKey = urlKeyMapper.getUniqueKey(key, obj);\n          result[uniqueKey] = value;\n        }\n      }\n    }\n\n    obj.forEachChild(visitNode);\n  };\n\n  visitNode(root);\n  return result;\n}\n\n/**\n * Exported util function to sync state from an initial url state.\n * Useful for initializing an embedded scenes with a url state string.\n */\nexport function syncStateFromSearchParams(root: SceneObject, urlParams: URLSearchParams) {\n  const urlKeyMapper = new UniqueUrlKeyMapper();\n  syncStateFromUrl(root, urlParams, urlKeyMapper);\n}\n\nexport function syncStateFromUrl(root: SceneObject, urlParams: URLSearchParams, urlKeyMapper: UniqueUrlKeyMapper) {\n  if (!root.parent) {\n    // If top level object we need to sync here\n    syncUrlStateToObject(root, urlParams, urlKeyMapper);\n  }\n\n  // These two forEachChild loops might look strange but it's to make sure we walk through the scene graph one level at a time as url key conflicts depend depth in the scene tree\n  root.forEachChild((child) => {\n    syncUrlStateToObject(child, urlParams, urlKeyMapper);\n  });\n\n  root.forEachChild((child) => syncStateFromUrl(child, urlParams, urlKeyMapper));\n}\n\nfunction syncUrlStateToObject(sceneObject: SceneObject, urlParams: URLSearchParams, urlKeyMapper: UniqueUrlKeyMapper) {\n  if (sceneObject.urlSync) {\n    const urlState: SceneObjectUrlValues = {};\n    const currentState = sceneObject.urlSync.getUrlState();\n\n    for (const key of sceneObject.urlSync.getKeys()) {\n      const uniqueKey = urlKeyMapper.getUniqueKey(key, sceneObject);\n      const newValue = urlParams.getAll(uniqueKey);\n      const currentValue = currentState[key];\n\n      if (isUrlValueEqual(newValue, currentValue)) {\n        continue;\n      }\n\n      if (newValue.length > 0) {\n        if (Array.isArray(currentValue)) {\n          urlState[key] = newValue;\n        } else {\n          urlState[key] = newValue[0];\n        }\n      } else {\n        // mark this key as having no url state\n        urlState[key] = null;\n      }\n    }\n\n    if (Object.keys(urlState).length > 0) {\n      sceneObject.urlSync.updateFromUrl(urlState);\n    }\n  }\n}\n\nexport function isUrlValueEqual(currentUrlValue: string[], newUrlValue: SceneObjectUrlValue): boolean {\n  if (currentUrlValue.length === 0 && newUrlValue == null) {\n    return true;\n  }\n\n  if (!Array.isArray(newUrlValue) && currentUrlValue?.length === 1) {\n    return newUrlValue === currentUrlValue[0];\n  }\n\n  if (newUrlValue?.length === 0 && currentUrlValue === null) {\n    return true;\n  }\n\n  // We have two arrays, lets compare them\n  return isEqual(currentUrlValue, newUrlValue);\n}\n"],"names":[],"mappings":";;;AASO,SAAS,YAAY,IAAyC,EAAA;AACnE,EAAM,MAAA,YAAA,GAAe,IAAI,kBAAmB,EAAA,CAAA;AAC5C,EAAA,MAAM,SAA+B,EAAC,CAAA;AAEtC,EAAM,MAAA,SAAA,GAAY,CAAC,GAAqB,KAAA;AACtC,IAAA,IAAI,IAAI,OAAS,EAAA;AACf,MAAM,MAAA,WAAA,GAAc,GAAI,CAAA,OAAA,CAAQ,WAAY,EAAA,CAAA;AAE5C,MAAA,KAAA,MAAW,CAAC,GAAK,EAAA,KAAK,KAAK,MAAO,CAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACtD,QAAA,IAAI,SAAS,IAAM,EAAA;AACjB,UAAA,MAAM,SAAY,GAAA,YAAA,CAAa,YAAa,CAAA,GAAA,EAAK,GAAG,CAAA,CAAA;AACpD,UAAA,MAAA,CAAO,SAAa,CAAA,GAAA,KAAA,CAAA;AAAA,SACtB;AAAA,OACF;AAAA,KACF;AAEA,IAAA,GAAA,CAAI,aAAa,SAAS,CAAA,CAAA;AAAA,GAC5B,CAAA;AAEA,EAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AACd,EAAO,OAAA,MAAA,CAAA;AACT,CAAA;AAMgB,SAAA,yBAAA,CAA0B,MAAmB,SAA4B,EAAA;AACvF,EAAM,MAAA,YAAA,GAAe,IAAI,kBAAmB,EAAA,CAAA;AAC5C,EAAiB,gBAAA,CAAA,IAAA,EAAM,WAAW,YAAY,CAAA,CAAA;AAChD,CAAA;AAEgB,SAAA,gBAAA,CAAiB,IAAmB,EAAA,SAAA,EAA4B,YAAkC,EAAA;AAChH,EAAI,IAAA,CAAC,KAAK,MAAQ,EAAA;AAEhB,IAAqB,oBAAA,CAAA,IAAA,EAAM,WAAW,YAAY,CAAA,CAAA;AAAA,GACpD;AAGA,EAAK,IAAA,CAAA,YAAA,CAAa,CAAC,KAAU,KAAA;AAC3B,IAAqB,oBAAA,CAAA,KAAA,EAAO,WAAW,YAAY,CAAA,CAAA;AAAA,GACpD,CAAA,CAAA;AAED,EAAA,IAAA,CAAK,aAAa,CAAC,KAAA,KAAU,iBAAiB,KAAO,EAAA,SAAA,EAAW,YAAY,CAAC,CAAA,CAAA;AAC/E,CAAA;AAEA,SAAS,oBAAA,CAAqB,WAA0B,EAAA,SAAA,EAA4B,YAAkC,EAAA;AACpH,EAAA,IAAI,YAAY,OAAS,EAAA;AACvB,IAAA,MAAM,WAAiC,EAAC,CAAA;AACxC,IAAM,MAAA,YAAA,GAAe,WAAY,CAAA,OAAA,CAAQ,WAAY,EAAA,CAAA;AAErD,IAAA,KAAA,MAAW,GAAO,IAAA,WAAA,CAAY,OAAQ,CAAA,OAAA,EAAW,EAAA;AAC/C,MAAA,MAAM,SAAY,GAAA,YAAA,CAAa,YAAa,CAAA,GAAA,EAAK,WAAW,CAAA,CAAA;AAC5D,MAAM,MAAA,QAAA,GAAW,SAAU,CAAA,MAAA,CAAO,SAAS,CAAA,CAAA;AAC3C,MAAA,MAAM,eAAe,YAAa,CAAA,GAAA,CAAA,CAAA;AAElC,MAAI,IAAA,eAAA,CAAgB,QAAU,EAAA,YAAY,CAAG,EAAA;AAC3C,QAAA,SAAA;AAAA,OACF;AAEA,MAAI,IAAA,QAAA,CAAS,SAAS,CAAG,EAAA;AACvB,QAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,YAAY,CAAG,EAAA;AAC/B,UAAA,QAAA,CAAS,GAAO,CAAA,GAAA,QAAA,CAAA;AAAA,SACX,MAAA;AACL,UAAA,QAAA,CAAS,OAAO,QAAS,CAAA,CAAA,CAAA,CAAA;AAAA,SAC3B;AAAA,OACK,MAAA;AAEL,QAAA,QAAA,CAAS,GAAO,CAAA,GAAA,IAAA,CAAA;AAAA,OAClB;AAAA,KACF;AAEA,IAAA,IAAI,MAAO,CAAA,IAAA,CAAK,QAAQ,CAAA,CAAE,SAAS,CAAG,EAAA;AACpC,MAAY,WAAA,CAAA,OAAA,CAAQ,cAAc,QAAQ,CAAA,CAAA;AAAA,KAC5C;AAAA,GACF;AACF,CAAA;AAEgB,SAAA,eAAA,CAAgB,iBAA2B,WAA2C,EAAA;AACpG,EAAA,IAAI,eAAgB,CAAA,MAAA,KAAW,CAAK,IAAA,WAAA,IAAe,IAAM,EAAA;AACvD,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,IAAI,CAAC,KAAM,CAAA,OAAA,CAAQ,WAAW,CAAK,IAAA,CAAA,eAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,eAAA,CAAiB,YAAW,CAAG,EAAA;AAChE,IAAA,OAAO,gBAAgB,eAAgB,CAAA,CAAA,CAAA,CAAA;AAAA,GACzC;AAEA,EAAA,IAAA,CAAI,WAAa,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,MAAA,MAAW,CAAK,IAAA,eAAA,KAAoB,IAAM,EAAA;AACzD,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAGA,EAAO,OAAA,OAAA,CAAQ,iBAAiB,WAAW,CAAA,CAAA;AAC7C;;;;"}

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

@@ -154,7 +154,6 @@ const OptionWithCheckbox = ({
   isSelected,
   renderOptionLabel
 }) => {
-  var _b;
   const _a = innerProps, rest = __objRest(_a, ["onMouseMove", "onMouseOver"]);
   const theme = useTheme2();
   const selectStyles = getSelectStyles(theme);
@@ -163,17 +162,17 @@ const OptionWithCheckbox = ({
     ref: innerRef,
     className: cx(selectStyles.option, isFocused && selectStyles.optionFocused)
   }, rest), {
-    "data-testid": selectors.components.Select.option,
+    "aria-label": "Select option",
+    "data-testid": selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts(
+      data.label || String(data.value)
+    ),
     title: data.title
   }), /* @__PURE__ */ React.createElement("div", {
     className: optionStyles.checkbox
   }, /* @__PURE__ */ React.createElement(Checkbox, {
     value: isSelected
   })), /* @__PURE__ */ React.createElement("div", {
-    className: selectStyles.optionBody,
-    "data-testid": selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts(
-      (_b = data.label) != null ? _b : String(data.value)
-    )
+    className: selectStyles.optionBody
   }, /* @__PURE__ */ React.createElement("span", null, children)));
 };
 OptionWithCheckbox.displayName = "SelectMenuOptions";

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';\n\nimport { Checkbox, InputActionMeta, MultiSelect, Select, getSelectStyles, useStyles2, useTheme2 } 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';\n\nconst filterNoOp = () => true;\n\nexport function VariableValueSelect({ model }: SceneComponentProps<MultiValueVariable>) {\n  const { value, text, key, options, includeAll } = model.useState();\n  const [inputValue, setInputValue] = useState('');\n  const [hasCustomValue, setHasCustomValue] = useState(false);\n\n  const optionSearcher = useMemo(\n    () => getOptionSearcher(options, includeAll, value, text),\n    [options, includeAll, value, text]\n  );\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      placeholder=\"Select value\"\n      width=\"auto\"\n      value={value}\n      inputValue={inputValue}\n      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!);\n\n        if (hasCustomValue !== newValue.__isNew__) {\n          setHasCustomValue(newValue.__isNew__);\n        }\n      }}\n    />\n  );\n}\n\nexport function VariableValueSelectMulti({ model }: SceneComponentProps<MultiValueVariable>) {\n  const { value, text, options, key, maxVisibleValues, noValueOnClear, includeAll } = 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\n  const optionSearcher = useMemo(\n    () => getOptionSearcher(options, includeAll, value, text),\n    [options, includeAll, value, text]\n  );\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      value={uncommittedValue}\n      noMultiValueWrap={true}\n      maxVisibleValues={maxVisibleValues ?? 5}\n      tabSelectsValue={false}\n      virtualized\n      allowCustomValue\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);\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([]);\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}\n\nexport const OptionWithCheckbox = ({\n  children,\n  data,\n  innerProps,\n  innerRef,\n  isFocused,\n  isSelected,\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      data-testid={selectors.components.Select.option}\n      title={data.title}\n    >\n      <div className={optionStyles.checkbox}>\n        <Checkbox 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"],"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';\n\nimport { Checkbox, InputActionMeta, MultiSelect, Select, getSelectStyles, useStyles2, useTheme2 } 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';\n\nconst filterNoOp = () => true;\n\nexport function VariableValueSelect({ model }: SceneComponentProps<MultiValueVariable>) {\n  const { value, text, key, options, includeAll } = model.useState();\n  const [inputValue, setInputValue] = useState('');\n  const [hasCustomValue, setHasCustomValue] = useState(false);\n\n  const optionSearcher = useMemo(\n    () => getOptionSearcher(options, includeAll, value, text),\n    [options, includeAll, value, text]\n  );\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      placeholder=\"Select value\"\n      width=\"auto\"\n      value={value}\n      inputValue={inputValue}\n      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!);\n\n        if (hasCustomValue !== newValue.__isNew__) {\n          setHasCustomValue(newValue.__isNew__);\n        }\n      }}\n    />\n  );\n}\n\nexport function VariableValueSelectMulti({ model }: SceneComponentProps<MultiValueVariable>) {\n  const { value, text, options, key, maxVisibleValues, noValueOnClear, includeAll } = 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\n  const optionSearcher = useMemo(\n    () => getOptionSearcher(options, includeAll, value, text),\n    [options, includeAll, value, text]\n  );\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      value={uncommittedValue}\n      noMultiValueWrap={true}\n      maxVisibleValues={maxVisibleValues ?? 5}\n      tabSelectsValue={false}\n      virtualized\n      allowCustomValue\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);\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([]);\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}\n\nexport const OptionWithCheckbox = ({\n  children,\n  data,\n  innerProps,\n  innerRef,\n  isFocused,\n  isSelected,\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      aria-label=\"Select option\"\n      data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts(\n        data.label || String(data.value)\n      )}\n      title={data.title}\n    >\n      <div className={optionStyles.checkbox}>\n        <Checkbox value={isSelected} />\n      </div>\n      <div className={selectStyles.optionBody}>\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"],"mappings":"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"}

package/dist/esm/variables/interpolation/sceneInterpolator.js

@@ -21,7 +21,7 @@ function sceneInterpolator(sceneObject, target, scopedVars, format, interpolatio
       }
       return match;
     }
-    const value = formatValue(variable, variable.getValue(fieldPath), fmt);
+    const value = formatValue(sceneObject, variable, variable.getValue(fieldPath), fmt);
     if (interpolations) {
       interpolations.push({ match, variableName, fieldPath, format: fmt, value, found: value !== match });
     }
@@ -42,12 +42,12 @@ function lookupFormatVariable(name, match, scopedVars, sceneObject) {
   }
   return null;
 }
-function formatValue(variable, value, formatNameOrFn) {
+function formatValue(context, variable, value, formatNameOrFn) {
   if (value === null || value === void 0) {
     return "";
   }
   if (isCustomVariableValue(value)) {
-    return value.formatter(formatNameOrFn);
+    return sceneInterpolator(context, value.formatter(formatNameOrFn));
   }
   if (!Array.isArray(value) && typeof value === "object") {
     value = `${value}`;

package/dist/esm/variables/interpolation/sceneInterpolator.js.map

@@ -1 +1 @@
-{"version":3,"file":"sceneInterpolator.js","sources":["../../../../src/variables/interpolation/sceneInterpolator.ts"],"sourcesContent":["import { ScopedVars } from '@grafana/data';\nimport { VariableInterpolation } from '@grafana/runtime';\nimport { VariableType, VariableFormatID } from '@grafana/schema';\n\nimport { SceneObject } from '../../core/types';\nimport { InterpolationFormatParameter, isCustomVariableValue, VariableValue } from '../types';\n\nimport { getSceneVariableForScopedVar } from './ScopedVarsVariable';\nimport { formatRegistry, FormatVariable } from './formatRegistry';\nimport { VARIABLE_REGEX } from '../constants';\nimport { lookupVariable } from '../lookupVariable';\nimport { macrosIndex } from '../macros';\n\n/**\n * This function will try to parse and replace any variable expression found in the target string. The sceneObject will be used as the source of variables. It will\n * use the scene graph and walk up the parent tree until it finds the closest variable.\n *\n * ScopedVars should not really be needed much in the new scene architecture as they can be added to the local scene node instead of passed in interpolate function.\n * It is supported here for backward compatibility and some edge cases where adding scoped vars to local scene node is not practical.\n */\nexport function sceneInterpolator(\n  sceneObject: SceneObject,\n  target: string | undefined | null,\n  scopedVars?: ScopedVars,\n  format?: InterpolationFormatParameter,\n  interpolations?: VariableInterpolation[],\n): string {\n  if (!target) {\n    return target ?? '';\n  }\n\n  VARIABLE_REGEX.lastIndex = 0;\n\n  return target.replace(VARIABLE_REGEX, (match, var1, var2, fmt2, var3, fieldPath, fmt3) => {\n    const variableName = var1 || var2 || var3;\n    const fmt = fmt2 || fmt3 || format;\n    const variable = lookupFormatVariable(variableName, match, scopedVars, sceneObject);\n\n    if (!variable) {\n      if (interpolations) {\n        // Set `value` equal to `match` as documented in the `VariableInterpolation` interface.\n        interpolations.push({ match, variableName, fieldPath, format: fmt, value: match, found: false });\n      }\n      return match;\n    }\n    const value = formatValue(variable, variable.getValue(fieldPath), fmt);\n    if (interpolations) {\n      interpolations.push({ match, variableName, fieldPath, format: fmt, value, found: value !== match });\n    }\n    return value;\n  });\n}\n\nfunction lookupFormatVariable(\n  name: string,\n  match: string,\n  scopedVars: ScopedVars | undefined,\n  sceneObject: SceneObject\n): FormatVariable | null {\n  const scopedVar = scopedVars?.[name];\n\n  if (scopedVar) {\n    return getSceneVariableForScopedVar(name, scopedVar);\n  }\n\n  const variable = lookupVariable(name, sceneObject);\n  if (variable) {\n    return variable;\n  }\n\n  if (macrosIndex[name]) {\n    return new macrosIndex[name](name, sceneObject, match, scopedVars);\n  }\n\n  return null;\n}\n\nfunction formatValue(\n  variable: FormatVariable,\n  value: VariableValue | undefined | null,\n  formatNameOrFn?: InterpolationFormatParameter\n): string {\n  if (value === null || value === undefined) {\n    return '';\n  }\n\n  // Variable can return a custom value that handles formatting\n  // This is useful for customAllValue and macros that return values that are already formatted or need special formatting\n  if (isCustomVariableValue(value)) {\n    return value.formatter(formatNameOrFn);\n  }\n\n  // if it's an object transform value to string\n  if (!Array.isArray(value) && typeof value === 'object') {\n    value = `${value}`;\n  }\n\n  if (typeof formatNameOrFn === 'function') {\n    return formatNameOrFn(value, {\n      name: variable.state.name,\n      type: variable.state.type as VariableType,\n      multi: variable.state.isMulti,\n      includeAll: variable.state.includeAll,\n    });\n  }\n\n  let args: string[] = [];\n\n  if (!formatNameOrFn) {\n    formatNameOrFn = VariableFormatID.Glob;\n  } else {\n    // some formats have arguments that come after ':' character\n    args = formatNameOrFn.split(':');\n    if (args.length > 1) {\n      formatNameOrFn = args[0];\n      args = args.slice(1);\n    } else {\n      args = [];\n    }\n  }\n\n  let formatter = formatRegistry.getIfExists(formatNameOrFn);\n\n  if (!formatter) {\n    console.error(`Variable format ${formatNameOrFn} not found. Using glob format as fallback.`);\n    formatter = formatRegistry.get(VariableFormatID.Glob);\n  }\n\n  return formatter.formatter(value, args, variable);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sceneInterpolator.js","sources":["../../../../src/variables/interpolation/sceneInterpolator.ts"],"sourcesContent":["import { ScopedVars } from '@grafana/data';\nimport { VariableInterpolation } from '@grafana/runtime';\nimport { VariableType, VariableFormatID } from '@grafana/schema';\n\nimport { SceneObject } from '../../core/types';\nimport { InterpolationFormatParameter, isCustomVariableValue, VariableValue } from '../types';\n\nimport { getSceneVariableForScopedVar } from './ScopedVarsVariable';\nimport { formatRegistry, FormatVariable } from './formatRegistry';\nimport { VARIABLE_REGEX } from '../constants';\nimport { lookupVariable } from '../lookupVariable';\nimport { macrosIndex } from '../macros';\n\n/**\n * This function will try to parse and replace any variable expression found in the target string. The sceneObject will be used as the source of variables. It will\n * use the scene graph and walk up the parent tree until it finds the closest variable.\n *\n * ScopedVars should not really be needed much in the new scene architecture as they can be added to the local scene node instead of passed in interpolate function.\n * It is supported here for backward compatibility and some edge cases where adding scoped vars to local scene node is not practical.\n */\nexport function sceneInterpolator(\n  sceneObject: SceneObject,\n  target: string | undefined | null,\n  scopedVars?: ScopedVars,\n  format?: InterpolationFormatParameter,\n  interpolations?: VariableInterpolation[]\n): string {\n  if (!target) {\n    return target ?? '';\n  }\n\n  VARIABLE_REGEX.lastIndex = 0;\n\n  return target.replace(VARIABLE_REGEX, (match, var1, var2, fmt2, var3, fieldPath, fmt3) => {\n    const variableName = var1 || var2 || var3;\n    const fmt = fmt2 || fmt3 || format;\n    const variable = lookupFormatVariable(variableName, match, scopedVars, sceneObject);\n\n    if (!variable) {\n      if (interpolations) {\n        // Set `value` equal to `match` as documented in the `VariableInterpolation` interface.\n        interpolations.push({ match, variableName, fieldPath, format: fmt, value: match, found: false });\n      }\n      return match;\n    }\n\n    const value = formatValue(sceneObject, variable, variable.getValue(fieldPath), fmt);\n\n    if (interpolations) {\n      interpolations.push({ match, variableName, fieldPath, format: fmt, value, found: value !== match });\n    }\n\n    return value;\n  });\n}\n\nfunction lookupFormatVariable(\n  name: string,\n  match: string,\n  scopedVars: ScopedVars | undefined,\n  sceneObject: SceneObject\n): FormatVariable | null {\n  const scopedVar = scopedVars?.[name];\n\n  if (scopedVar) {\n    return getSceneVariableForScopedVar(name, scopedVar);\n  }\n\n  const variable = lookupVariable(name, sceneObject);\n  if (variable) {\n    return variable;\n  }\n\n  if (macrosIndex[name]) {\n    return new macrosIndex[name](name, sceneObject, match, scopedVars);\n  }\n\n  return null;\n}\n\nfunction formatValue(\n  context: SceneObject,\n  variable: FormatVariable,\n  value: VariableValue | undefined | null,\n  formatNameOrFn?: InterpolationFormatParameter\n): string {\n  if (value === null || value === undefined) {\n    return '';\n  }\n\n  // Variable can return a custom value that handles formatting\n  // This is useful for customAllValue and macros that return values that are already formatted or need special formatting\n  if (isCustomVariableValue(value)) {\n    return sceneInterpolator(context, value.formatter(formatNameOrFn));\n  }\n\n  // if it's an object transform value to string\n  if (!Array.isArray(value) && typeof value === 'object') {\n    value = `${value}`;\n  }\n\n  if (typeof formatNameOrFn === 'function') {\n    return formatNameOrFn(value, {\n      name: variable.state.name,\n      type: variable.state.type as VariableType,\n      multi: variable.state.isMulti,\n      includeAll: variable.state.includeAll,\n    });\n  }\n\n  let args: string[] = [];\n\n  if (!formatNameOrFn) {\n    formatNameOrFn = VariableFormatID.Glob;\n  } else {\n    // some formats have arguments that come after ':' character\n    args = formatNameOrFn.split(':');\n    if (args.length > 1) {\n      formatNameOrFn = args[0];\n      args = args.slice(1);\n    } else {\n      args = [];\n    }\n  }\n\n  let formatter = formatRegistry.getIfExists(formatNameOrFn);\n\n  if (!formatter) {\n    console.error(`Variable format ${formatNameOrFn} not found. Using glob format as fallback.`);\n    formatter = formatRegistry.get(VariableFormatID.Glob);\n  }\n\n  return formatter.formatter(value, args, variable);\n}\n"],"names":[],"mappings":";;;;;;;;AAoBO,SAAS,iBACd,CAAA,WAAA,EACA,MACA,EAAA,UAAA,EACA,QACA,cACQ,EAAA;AACR,EAAA,IAAI,CAAC,MAAQ,EAAA;AACX,IAAA,OAAO,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAA,CAAA;AAAA,GACnB;AAEA,EAAA,cAAA,CAAe,SAAY,GAAA,CAAA,CAAA;AAE3B,EAAO,OAAA,MAAA,CAAO,OAAQ,CAAA,cAAA,EAAgB,CAAC,KAAA,EAAO,MAAM,IAAM,EAAA,IAAA,EAAM,IAAM,EAAA,SAAA,EAAW,IAAS,KAAA;AACxF,IAAM,MAAA,YAAA,GAAe,QAAQ,IAAQ,IAAA,IAAA,CAAA;AACrC,IAAM,MAAA,GAAA,GAAM,QAAQ,IAAQ,IAAA,MAAA,CAAA;AAC5B,IAAA,MAAM,QAAW,GAAA,oBAAA,CAAqB,YAAc,EAAA,KAAA,EAAO,YAAY,WAAW,CAAA,CAAA;AAElF,IAAA,IAAI,CAAC,QAAU,EAAA;AACb,MAAA,IAAI,cAAgB,EAAA;AAElB,QAAe,cAAA,CAAA,IAAA,CAAK,EAAE,KAAA,EAAO,YAAc,EAAA,SAAA,EAAW,MAAQ,EAAA,GAAA,EAAK,KAAO,EAAA,KAAA,EAAO,KAAO,EAAA,KAAA,EAAO,CAAA,CAAA;AAAA,OACjG;AACA,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,KAAA,GAAQ,YAAY,WAAa,EAAA,QAAA,EAAU,SAAS,QAAS,CAAA,SAAS,GAAG,GAAG,CAAA,CAAA;AAElF,IAAA,IAAI,cAAgB,EAAA;AAClB,MAAe,cAAA,CAAA,IAAA,CAAK,EAAE,KAAA,EAAO,YAAc,EAAA,SAAA,EAAW,MAAQ,EAAA,GAAA,EAAK,KAAO,EAAA,KAAA,EAAO,KAAU,KAAA,KAAA,EAAO,CAAA,CAAA;AAAA,KACpG;AAEA,IAAO,OAAA,KAAA,CAAA;AAAA,GACR,CAAA,CAAA;AACH,CAAA;AAEA,SAAS,oBACP,CAAA,IAAA,EACA,KACA,EAAA,UAAA,EACA,WACuB,EAAA;AACvB,EAAA,MAAM,YAAY,UAAa,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,IAAA,CAAA,CAAA;AAE/B,EAAA,IAAI,SAAW,EAAA;AACb,IAAO,OAAA,4BAAA,CAA6B,MAAM,SAAS,CAAA,CAAA;AAAA,GACrD;AAEA,EAAM,MAAA,QAAA,GAAW,cAAe,CAAA,IAAA,EAAM,WAAW,CAAA,CAAA;AACjD,EAAA,IAAI,QAAU,EAAA;AACZ,IAAO,OAAA,QAAA,CAAA;AAAA,GACT;AAEA,EAAA,IAAI,YAAY,IAAO,CAAA,EAAA;AACrB,IAAA,OAAO,IAAI,WAAY,CAAA,IAAA,CAAA,CAAM,IAAM,EAAA,WAAA,EAAa,OAAO,UAAU,CAAA,CAAA;AAAA,GACnE;AAEA,EAAO,OAAA,IAAA,CAAA;AACT,CAAA;AAEA,SAAS,WACP,CAAA,OAAA,EACA,QACA,EAAA,KAAA,EACA,cACQ,EAAA;AACR,EAAI,IAAA,KAAA,KAAU,IAAQ,IAAA,KAAA,KAAU,KAAW,CAAA,EAAA;AACzC,IAAO,OAAA,EAAA,CAAA;AAAA,GACT;AAIA,EAAI,IAAA,qBAAA,CAAsB,KAAK,CAAG,EAAA;AAChC,IAAA,OAAO,iBAAkB,CAAA,OAAA,EAAS,KAAM,CAAA,SAAA,CAAU,cAAc,CAAC,CAAA,CAAA;AAAA,GACnE;AAGA,EAAA,IAAI,CAAC,KAAM,CAAA,OAAA,CAAQ,KAAK,CAAK,IAAA,OAAO,UAAU,QAAU,EAAA;AACtD,IAAA,KAAA,GAAQ,CAAG,EAAA,KAAA,CAAA,CAAA,CAAA;AAAA,GACb;AAEA,EAAI,IAAA,OAAO,mBAAmB,UAAY,EAAA;AACxC,IAAA,OAAO,eAAe,KAAO,EAAA;AAAA,MAC3B,IAAA,EAAM,SAAS,KAAM,CAAA,IAAA;AAAA,MACrB,IAAA,EAAM,SAAS,KAAM,CAAA,IAAA;AAAA,MACrB,KAAA,EAAO,SAAS,KAAM,CAAA,OAAA;AAAA,MACtB,UAAA,EAAY,SAAS,KAAM,CAAA,UAAA;AAAA,KAC5B,CAAA,CAAA;AAAA,GACH;AAEA,EAAA,IAAI,OAAiB,EAAC,CAAA;AAEtB,EAAA,IAAI,CAAC,cAAgB,EAAA;AACnB,IAAA,cAAA,GAAiB,gBAAiB,CAAA,IAAA,CAAA;AAAA,GAC7B,MAAA;AAEL,IAAO,IAAA,GAAA,cAAA,CAAe,MAAM,GAAG,CAAA,CAAA;AAC/B,IAAI,IAAA,IAAA,CAAK,SAAS,CAAG,EAAA;AACnB,MAAA,cAAA,GAAiB,IAAK,CAAA,CAAA,CAAA,CAAA;AACtB,MAAO,IAAA,GAAA,IAAA,CAAK,MAAM,CAAC,CAAA,CAAA;AAAA,KACd,MAAA;AACL,MAAA,IAAA,GAAO,EAAC,CAAA;AAAA,KACV;AAAA,GACF;AAEA,EAAI,IAAA,SAAA,GAAY,cAAe,CAAA,WAAA,CAAY,cAAc,CAAA,CAAA;AAEzD,EAAA,IAAI,CAAC,SAAW,EAAA;AACd,IAAQ,OAAA,CAAA,KAAA,CAAM,mBAAmB,cAA0D,CAAA,0CAAA,CAAA,CAAA,CAAA;AAC3F,IAAY,SAAA,GAAA,cAAA,CAAe,GAAI,CAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,GACtD;AAEA,EAAA,OAAO,SAAU,CAAA,SAAA,CAAU,KAAO,EAAA,IAAA,EAAM,QAAQ,CAAA,CAAA;AAClD;;;;"}

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import { Observable, Unsubscribable, MonoTypeOperatorFunction, Subscription, Rep
 import * as _grafana_schema from '@grafana/schema';
 import { VariableType, VariableHide, TimeZone, DataTopic, DataQuery, DataSourceRef, VariableRefresh, LoadingState, DashboardCursorSync, MatcherConfig, TableFieldOptions } from '@grafana/schema';
 import { VariableInterpolation } from '@grafana/runtime';
+import { Location } from 'history';
 import { PanelContext, IconName } from '@grafana/ui';
 import ReactGridLayout from 'react-grid-layout';
 import { RouteComponentProps } from 'react-router-dom';
@@ -1559,26 +1560,39 @@ interface UrlSyncManagerLike {
     initSync(root: SceneObject): void;
     cleanUp(root: SceneObject): void;
     getUrlState(root: SceneObject): SceneObjectUrlValues;
+    handleNewLocation(location: Location): void;
+    handleNewObject(sceneObj: SceneObject): void;
 }
 declare class UrlSyncManager implements UrlSyncManagerLike {
     private _urlKeyMapper;
-    private _sceneRoot;
+    private _sceneRoot?;
     private _stateSub;
-    private _locationSub?;
-    private _lastPath?;
-    private _ignoreNextLocationUpdate;
+    private _lastLocation;
+    private _urlParams;
     /**
      * Updates the current scene state to match URL state.
      */
     initSync(root: SceneObject): void;
     cleanUp(root: SceneObject): void;
     syncFrom(sceneObj: SceneObject): void;
-    private _onLocationUpdate;
+    handleNewLocation(location: Location): void;
+    handleNewObject(sceneObj: SceneObject): void;
     private _onStateChanged;
     getUrlState(root: SceneObject): SceneObjectUrlValues;
 }
 declare function getUrlSyncManager(): UrlSyncManagerLike;
 
+declare function useUrlSync(sceneRoot: SceneObject): boolean;
+
+interface UrlSyncContextProviderProps {
+    scene: SceneObject;
+    children: React.ReactNode;
+}
+/**
+ * Right now this is actually not defining a context, but think it might in the future (with UrlSyncManager as the context value)
+ */
+declare function UrlSyncContextProvider({ children, scene }: UrlSyncContextProviderProps): React$1.ReactNode;
+
 interface EmbeddedSceneState extends SceneObjectState {
     /**
      * The main content of the scene (usually a SceneFlexLayout)
@@ -1592,13 +1606,6 @@ interface EmbeddedSceneState extends SceneObjectState {
 declare class EmbeddedScene extends SceneObjectBase<EmbeddedSceneState> {
     static Component: typeof EmbeddedSceneRenderer;
     constructor(state: EmbeddedSceneState);
-    /**
-     * initUrlSync should be called before the scene is rendered to ensure that objects are in sync
-     * before they get activated. This saves some unnecessary re-renders and makes sure variables
-     * queries are issued as needed. If your using SceneAppPage you will not need to call this as
-     * url sync is handled on the SceneAppPage level not this level.
-     */
-    initUrlSync(): void;
 }
 declare function EmbeddedSceneRenderer({ model }: SceneComponentProps<EmbeddedScene>): React__default.JSX.Element;
 
@@ -2633,4 +2640,4 @@ declare const sceneUtils: {
     isGroupByVariable: typeof isGroupByVariable;
 };
 
-export { AdHocFiltersVariable, CancelActivationHandler, ConstantVariable, ControlsLayout, CustomFormatterVariable, CustomTransformOperator, CustomTransformerDefinition, CustomVariable, CustomVariableValue, DataLayerFilter, DataRequestEnricher, DataSourceVariable, DeepPartial, EmbeddedScene, EmbeddedSceneState, ExtraQueryDataProcessor, ExtraQueryDescriptor, ExtraQueryProvider, FieldConfigBuilder, FieldConfigBuilders, FieldConfigOverridesBuilder, FormatVariable, GroupByVariable, InterpolationFormatParameter, IntervalVariable, LocalValueVariable, MacroVariableConstructor, MultiValueVariable, NestedScene, PanelBuilders, PanelOptionsBuilders, QueryRunnerState, QueryVariable, RuntimeDataSource, SceneActivationHandler, SceneApp, SceneAppDrilldownView, SceneAppPage, SceneAppPageLike, SceneAppPageState, SceneAppRoute, SceneByFrameRepeater, SceneByVariableRepeater, SceneCSSGridItem, SceneCSSGridLayout, SceneCanvasText, SceneComponent, SceneComponentProps, SceneControlsSpacer, SceneDataLayerBase, SceneDataLayerControls, SceneDataLayerProvider, SceneDataLayerProviderState, SceneDataLayerSet, SceneDataLayerSetBase, SceneDataNode, SceneDataProvider, SceneDataProviderResult, SceneDataQuery, SceneDataState, SceneDataTransformer, SceneDeactivationHandler, SceneDebugger, SceneFlexItem, SceneFlexItemLike, SceneFlexItemState, SceneFlexLayout, SceneGridItem, SceneGridItemLike, SceneGridItemStateLike, SceneGridLayout, SceneGridRow, SceneLayout, SceneLayoutChildOptions, SceneLayoutState, SceneObject, SceneObjectBase, SceneObjectRef, SceneObjectState, SceneObjectStateChangedEvent, SceneObjectStateChangedPayload, SceneObjectUrlSyncConfig, SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues, SceneObjectWithUrlSync, SceneQueryControllerEntry, SceneQueryControllerEntryType, SceneQueryControllerLike, SceneQueryRunner, SceneReactObject, SceneRefreshPicker, SceneRefreshPickerState, SceneRouteMatch, SceneStateChangedHandler, SceneStatelessBehavior, SceneTimePicker, SceneTimeRange, SceneTimeRangeCompare, SceneTimeRangeLike, SceneTimeRangeState, SceneTimeRangeTransformerBase, SceneTimeZoneOverride, SceneToolbarButton, SceneToolbarInput, SceneVariable, SceneVariableDependencyConfigLike, SceneVariableSet, SceneVariableSetState, SceneVariableState, SceneVariableValueChangedEvent, SceneVariables, SplitLayout, TestVariable, TextBoxVariable, UrlSyncManager, UrlSyncManagerLike, UseStateHookOptions, UserActionEvent, ValidateAndUpdateResult, VariableCustomFormatterFn, VariableDependencyConfig, VariableValue, VariableValueControl, VariableValueOption, VariableValueSelectWrapper, VariableValueSelectors, VariableValueSingle, VizConfig, VizConfigBuilder, VizConfigBuilders, VizPanel, VizPanelBuilder, VizPanelMenu, VizPanelState, index$1 as behaviors, index as dataLayers, formatRegistry, getUrlSyncManager, isCustomVariableValue, isDataLayer, isDataRequestEnricher, isSceneObject, registerQueryWithController, registerRuntimeDataSource, sceneGraph, sceneUtils, useSceneApp, useSceneObjectState };
+export { AdHocFiltersVariable, CancelActivationHandler, ConstantVariable, ControlsLayout, CustomFormatterVariable, CustomTransformOperator, CustomTransformerDefinition, CustomVariable, CustomVariableValue, DataLayerFilter, DataRequestEnricher, DataSourceVariable, DeepPartial, EmbeddedScene, EmbeddedSceneState, ExtraQueryDataProcessor, ExtraQueryDescriptor, ExtraQueryProvider, FieldConfigBuilder, FieldConfigBuilders, FieldConfigOverridesBuilder, FormatVariable, GroupByVariable, InterpolationFormatParameter, IntervalVariable, LocalValueVariable, MacroVariableConstructor, MultiValueVariable, NestedScene, PanelBuilders, PanelOptionsBuilders, QueryRunnerState, QueryVariable, RuntimeDataSource, SceneActivationHandler, SceneApp, SceneAppDrilldownView, SceneAppPage, SceneAppPageLike, SceneAppPageState, SceneAppRoute, SceneByFrameRepeater, SceneByVariableRepeater, SceneCSSGridItem, SceneCSSGridLayout, SceneCanvasText, SceneComponent, SceneComponentProps, SceneControlsSpacer, SceneDataLayerBase, SceneDataLayerControls, SceneDataLayerProvider, SceneDataLayerProviderState, SceneDataLayerSet, SceneDataLayerSetBase, SceneDataNode, SceneDataProvider, SceneDataProviderResult, SceneDataQuery, SceneDataState, SceneDataTransformer, SceneDeactivationHandler, SceneDebugger, SceneFlexItem, SceneFlexItemLike, SceneFlexItemState, SceneFlexLayout, SceneGridItem, SceneGridItemLike, SceneGridItemStateLike, SceneGridLayout, SceneGridRow, SceneLayout, SceneLayoutChildOptions, SceneLayoutState, SceneObject, SceneObjectBase, SceneObjectRef, SceneObjectState, SceneObjectStateChangedEvent, SceneObjectStateChangedPayload, SceneObjectUrlSyncConfig, SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues, SceneObjectWithUrlSync, SceneQueryControllerEntry, SceneQueryControllerEntryType, SceneQueryControllerLike, SceneQueryRunner, SceneReactObject, SceneRefreshPicker, SceneRefreshPickerState, SceneRouteMatch, SceneStateChangedHandler, SceneStatelessBehavior, SceneTimePicker, SceneTimeRange, SceneTimeRangeCompare, SceneTimeRangeLike, SceneTimeRangeState, SceneTimeRangeTransformerBase, SceneTimeZoneOverride, SceneToolbarButton, SceneToolbarInput, SceneVariable, SceneVariableDependencyConfigLike, SceneVariableSet, SceneVariableSetState, SceneVariableState, SceneVariableValueChangedEvent, SceneVariables, SplitLayout, TestVariable, TextBoxVariable, UrlSyncContextProvider, UrlSyncManager, UrlSyncManagerLike, UseStateHookOptions, UserActionEvent, ValidateAndUpdateResult, VariableCustomFormatterFn, VariableDependencyConfig, VariableValue, VariableValueControl, VariableValueOption, VariableValueSelectWrapper, VariableValueSelectors, VariableValueSingle, VizConfig, VizConfigBuilder, VizConfigBuilders, VizPanel, VizPanelBuilder, VizPanelMenu, VizPanelState, index$1 as behaviors, index as dataLayers, formatRegistry, getUrlSyncManager, isCustomVariableValue, isDataLayer, isDataRequestEnricher, isSceneObject, registerQueryWithController, registerRuntimeDataSource, sceneGraph, sceneUtils, useSceneApp, useSceneObjectState, useUrlSync };