@grafana/scenes 6.16.0--canary.1134.15292050561.0 → 6.17.0--canary.1136.15305220090.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v6.16.0 (Wed May 28 2025)
+
+#### 🚀 Enhancement
+
+- ScopesVariable: Fixes diff check issue [#1134](https://github.com/grafana/scenes/pull/1134) ([@torkelo](https://github.com/torkelo))
+
+#### Authors: 1
+
+- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))
+
+---
+
 # v6.15.0 (Tue May 27 2025)
 
 #### 🚀 Enhancement

package/dist/esm/components/layout/SceneFlexLayout.js

@@ -68,6 +68,16 @@ function applyItemStyles(style, state, parentState) {
     } else {
       style.flexGrow = xSizing === "fill" ? 1 : 0;
     }
+    if (state.wrap) {
+      style.flexWrap = state.wrap;
+      if (state.wrap !== "nowrap") {
+        if (parentDirection === "row") {
+          style.rowGap = "8px";
+        } else {
+          style.columnGap = "8px";
+        }
+      }
+    }
   }
   style.minWidth = state.minWidth;
   style.maxWidth = state.maxWidth;

package/dist/esm/components/layout/SceneFlexLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneFlexLayout.js","sources":["../../../../src/components/layout/SceneFlexLayout.tsx"],"sourcesContent":["import { css, CSSObject } from '@emotion/css';\nimport { config } from '@grafana/runtime';\nimport React, { ComponentType, CSSProperties, useMemo } from 'react';\n\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneLayout, SceneObjectState, SceneObject } from '../../core/types';\n\nexport interface SceneFlexItemStateLike extends SceneFlexItemPlacement, SceneObjectState {}\n\nexport interface SceneFlexItemLike extends SceneObject<SceneFlexItemStateLike> {}\n\ninterface SceneFlexLayoutState extends SceneObjectState, SceneFlexItemPlacement {\n  children: SceneFlexItemLike[];\n}\n\nexport class SceneFlexLayout extends SceneObjectBase<SceneFlexLayoutState> implements SceneLayout {\n  public static Component = SceneFlexLayoutRenderer;\n\n  public toggleDirection() {\n    this.setState({\n      direction: this.state.direction === 'row' ? 'column' : 'row',\n    });\n  }\n\n  public isDraggable(): boolean {\n    return false;\n  }\n}\n\nfunction SceneFlexLayoutRenderer({ model, parentState }: SceneFlexItemRenderProps<SceneFlexLayout>) {\n  const { children, isHidden } = model.useState();\n  const style = useLayoutStyle(model.state, parentState);\n\n  if (isHidden) {\n    return null;\n  }\n\n  return (\n    <div className={style}>\n      {children.map((item) => {\n        const Component = item.Component as ComponentType<SceneFlexItemRenderProps<SceneObject>>;\n        return <Component key={item.state.key} model={item} parentState={model.state} />;\n      })}\n    </div>\n  );\n}\n\nexport interface SceneFlexItemPlacement {\n  wrap?: CSSProperties['flexWrap'];\n  direction?: CSSProperties['flexDirection'];\n  width?: CSSProperties['width'];\n  height?: CSSProperties['height'];\n  minWidth?: CSSProperties['minWidth'];\n  minHeight?: CSSProperties['minHeight'];\n  maxWidth?: CSSProperties['maxWidth'];\n  maxHeight?: CSSProperties['maxHeight'];\n  xSizing?: 'fill' | 'content';\n  ySizing?: 'fill' | 'content';\n  /**\n   * True when the item should rendered but not visible.\n   * Useful for conditional display of layout items\n   */\n  isHidden?: boolean;\n\n  /**\n   * Set direction for smaller screens. This defaults to column.\n   * This equals media query theme.breakpoints.down('md')\n   */\n  md?: SceneFlexItemPlacement;\n}\n\nexport interface SceneFlexItemState extends SceneFlexItemPlacement, SceneObjectState {\n  body: SceneObject | undefined;\n}\n\ninterface SceneFlexItemRenderProps<T> extends SceneComponentProps<T> {\n  parentState?: SceneFlexItemPlacement;\n}\n\nexport class SceneFlexItem extends SceneObjectBase<SceneFlexItemState> {\n  public static Component = SceneFlexItemRenderer;\n}\n\nfunction SceneFlexItemRenderer({ model, parentState }: SceneFlexItemRenderProps<SceneFlexItem>) {\n  if (!parentState) {\n    throw new Error('SceneFlexItem must be a child of SceneFlexLayout');\n  }\n\n  const { body, isHidden } = model.useState();\n  const style = useLayoutItemStyle(model.state, parentState);\n\n  if (!body || isHidden) {\n    return null;\n  }\n\n  return (\n    <div className={style}>\n      <body.Component model={body} />\n    </div>\n  );\n}\nfunction applyItemStyles(style: CSSObject, state: SceneFlexItemPlacement, parentState: SceneFlexItemPlacement) {\n  const parentDirection = parentState.direction ?? 'row';\n  const { xSizing = 'fill', ySizing = 'fill' } = state;\n\n  style.display = 'flex';\n  style.position = 'relative';\n  style.flexDirection = parentDirection;\n\n  if (parentDirection === 'column') {\n    if (state.height) {\n      style.height = state.height;\n    } else {\n      style.flexGrow = ySizing === 'fill' ? 1 : 0;\n    }\n\n    if (state.width) {\n      style.width = state.width;\n    } else {\n      style.alignSelf = xSizing === 'fill' ? 'stretch' : 'flex-start';\n    }\n  } else {\n    if (state.height) {\n      style.height = state.height;\n    } else {\n      style.alignSelf = ySizing === 'fill' ? 'stretch' : 'flex-start';\n    }\n\n    if (state.width) {\n      style.width = state.width;\n    } else {\n      style.flexGrow = xSizing === 'fill' ? 1 : 0;\n    }\n  }\n\n  style.minWidth = state.minWidth;\n  style.maxWidth = state.maxWidth;\n  style.maxHeight = state.maxHeight;\n\n  // For responsive layouts to work we default use the minHeight or height of the parent\n  style.minHeight = state.minHeight ?? parentState.minHeight;\n  style.height = state.height ?? parentState.height;\n\n  return style;\n}\n\nfunction useLayoutItemStyle(state: SceneFlexItemState, parentState: SceneFlexItemPlacement) {\n  return useMemo(() => {\n    const theme = config.theme2;\n    const style = applyItemStyles({}, state, parentState);\n\n    // Unset maxWidth for small screens by default\n    style[theme.breakpoints.down('md')] = {\n      maxWidth: state.md?.maxWidth ?? 'unset',\n      maxHeight: state.md?.maxHeight ?? 'unset',\n      height: state.md?.height ?? parentState.md?.height,\n      width: state.md?.width ?? parentState.md?.width,\n    };\n\n    return css(style);\n  }, [state, parentState]);\n}\n\nfunction useLayoutStyle(state: SceneFlexLayoutState, parentState?: SceneFlexItemPlacement) {\n  return useMemo(() => {\n    const { direction = 'row', wrap } = state;\n    // only need breakpoints so accessing theme from config instead of context is ok\n    const theme = config.theme2;\n\n    const style: CSSObject = {};\n\n    if (parentState) {\n      applyItemStyles(style, state, parentState);\n    } else {\n      style.display = 'flex';\n      style.flexGrow = 1;\n      style.minWidth = state.minWidth;\n      style.minHeight = state.minHeight;\n    }\n\n    style.flexDirection = direction;\n    style.gap = '8px';\n    style.flexWrap = wrap || 'nowrap';\n    style.alignContent = 'baseline';\n    style.minWidth = style.minWidth || 0;\n    style.minHeight = style.minHeight || 0;\n\n    style[theme.breakpoints.down('md')] = {\n      flexDirection: state.md?.direction ?? 'column',\n      maxWidth: state.md?.maxWidth ?? 'unset',\n      maxHeight: state.md?.maxHeight ?? 'unset',\n      height: state.md?.height ?? 'unset',\n      width: state.md?.width ?? 'unset',\n    };\n\n    return css(style);\n  }, [parentState, state]);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SceneFlexLayout.js","sources":["../../../../src/components/layout/SceneFlexLayout.tsx"],"sourcesContent":["import { css, CSSObject } from '@emotion/css';\nimport { config } from '@grafana/runtime';\nimport React, { ComponentType, CSSProperties, useMemo } from 'react';\n\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneLayout, SceneObjectState, SceneObject } from '../../core/types';\n\nexport interface SceneFlexItemStateLike extends SceneFlexItemPlacement, SceneObjectState {}\n\nexport interface SceneFlexItemLike extends SceneObject<SceneFlexItemStateLike> {}\n\ninterface SceneFlexLayoutState extends SceneObjectState, SceneFlexItemPlacement {\n  children: SceneFlexItemLike[];\n}\n\nexport class SceneFlexLayout extends SceneObjectBase<SceneFlexLayoutState> implements SceneLayout {\n  public static Component = SceneFlexLayoutRenderer;\n\n  public toggleDirection() {\n    this.setState({\n      direction: this.state.direction === 'row' ? 'column' : 'row',\n    });\n  }\n\n  public isDraggable(): boolean {\n    return false;\n  }\n}\n\nfunction SceneFlexLayoutRenderer({ model, parentState }: SceneFlexItemRenderProps<SceneFlexLayout>) {\n  const { children, isHidden } = model.useState();\n  const style = useLayoutStyle(model.state, parentState);\n\n  if (isHidden) {\n    return null;\n  }\n\n  return (\n    <div className={style}>\n      {children.map((item) => {\n        const Component = item.Component as ComponentType<SceneFlexItemRenderProps<SceneObject>>;\n        return <Component key={item.state.key} model={item} parentState={model.state} />;\n      })}\n    </div>\n  );\n}\n\nexport interface SceneFlexItemPlacement {\n  wrap?: CSSProperties['flexWrap'];\n  direction?: CSSProperties['flexDirection'];\n  width?: CSSProperties['width'];\n  height?: CSSProperties['height'];\n  minWidth?: CSSProperties['minWidth'];\n  minHeight?: CSSProperties['minHeight'];\n  maxWidth?: CSSProperties['maxWidth'];\n  maxHeight?: CSSProperties['maxHeight'];\n  xSizing?: 'fill' | 'content';\n  ySizing?: 'fill' | 'content';\n  /**\n   * True when the item should rendered but not visible.\n   * Useful for conditional display of layout items\n   */\n  isHidden?: boolean;\n\n  /**\n   * Set direction for smaller screens. This defaults to column.\n   * This equals media query theme.breakpoints.down('md')\n   */\n  md?: SceneFlexItemPlacement;\n}\n\nexport interface SceneFlexItemState extends SceneFlexItemPlacement, SceneObjectState {\n  body: SceneObject | undefined;\n}\n\ninterface SceneFlexItemRenderProps<T> extends SceneComponentProps<T> {\n  parentState?: SceneFlexItemPlacement;\n}\n\nexport class SceneFlexItem extends SceneObjectBase<SceneFlexItemState> {\n  public static Component = SceneFlexItemRenderer;\n}\n\nfunction SceneFlexItemRenderer({ model, parentState }: SceneFlexItemRenderProps<SceneFlexItem>) {\n  if (!parentState) {\n    throw new Error('SceneFlexItem must be a child of SceneFlexLayout');\n  }\n\n  const { body, isHidden } = model.useState();\n  const style = useLayoutItemStyle(model.state, parentState);\n\n  if (!body || isHidden) {\n    return null;\n  }\n\n  return (\n    <div className={style}>\n      <body.Component model={body} />\n    </div>\n  );\n}\nfunction applyItemStyles(style: CSSObject, state: SceneFlexItemPlacement, parentState: SceneFlexItemPlacement) {\n  const parentDirection = parentState.direction ?? 'row';\n  const { xSizing = 'fill', ySizing = 'fill' } = state;\n\n  style.display = 'flex';\n  style.position = 'relative';\n  style.flexDirection = parentDirection;\n\n  if (parentDirection === 'column') {\n    if (state.height) {\n      style.height = state.height;\n    } else {\n      style.flexGrow = ySizing === 'fill' ? 1 : 0;\n    }\n\n    if (state.width) {\n      style.width = state.width;\n    } else {\n      style.alignSelf = xSizing === 'fill' ? 'stretch' : 'flex-start';\n    }\n  } else {\n    if (state.height) {\n      style.height = state.height;\n    } else {\n      style.alignSelf = ySizing === 'fill' ? 'stretch' : 'flex-start';\n    }\n\n    if (state.width) {\n      style.width = state.width;\n    } else {\n      style.flexGrow = xSizing === 'fill' ? 1 : 0;\n    }\n\n    if (state.wrap) {\n      style.flexWrap = state.wrap;\n      if (state.wrap !== 'nowrap') {\n        if (parentDirection === 'row') {\n          style.rowGap = '8px';\n        } else {\n          style.columnGap = '8px';\n        }\n      }\n    }\n  }\n\n  style.minWidth = state.minWidth;\n  style.maxWidth = state.maxWidth;\n  style.maxHeight = state.maxHeight;\n\n  // For responsive layouts to work we default use the minHeight or height of the parent\n  style.minHeight = state.minHeight ?? parentState.minHeight;\n  style.height = state.height ?? parentState.height;\n\n  return style;\n}\n\nfunction useLayoutItemStyle(state: SceneFlexItemState, parentState: SceneFlexItemPlacement) {\n  return useMemo(() => {\n    const theme = config.theme2;\n    const style = applyItemStyles({}, state, parentState);\n\n    // Unset maxWidth for small screens by default\n    style[theme.breakpoints.down('md')] = {\n      maxWidth: state.md?.maxWidth ?? 'unset',\n      maxHeight: state.md?.maxHeight ?? 'unset',\n      height: state.md?.height ?? parentState.md?.height,\n      width: state.md?.width ?? parentState.md?.width,\n    };\n\n    return css(style);\n  }, [state, parentState]);\n}\n\nfunction useLayoutStyle(state: SceneFlexLayoutState, parentState?: SceneFlexItemPlacement) {\n  return useMemo(() => {\n    const { direction = 'row', wrap } = state;\n    // only need breakpoints so accessing theme from config instead of context is ok\n    const theme = config.theme2;\n\n    const style: CSSObject = {};\n\n    if (parentState) {\n      applyItemStyles(style, state, parentState);\n    } else {\n      style.display = 'flex';\n      style.flexGrow = 1;\n      style.minWidth = state.minWidth;\n      style.minHeight = state.minHeight;\n    }\n\n    style.flexDirection = direction;\n    style.gap = '8px';\n    style.flexWrap = wrap || 'nowrap';\n    style.alignContent = 'baseline';\n    style.minWidth = style.minWidth || 0;\n    style.minHeight = style.minHeight || 0;\n\n    style[theme.breakpoints.down('md')] = {\n      flexDirection: state.md?.direction ?? 'column',\n      maxWidth: state.md?.maxWidth ?? 'unset',\n      maxHeight: state.md?.maxHeight ?? 'unset',\n      height: state.md?.height ?? 'unset',\n      width: state.md?.width ?? 'unset',\n    };\n\n    return css(style);\n  }, [parentState, state]);\n}\n"],"names":[],"mappings":"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"}

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

@@ -60,7 +60,8 @@ class ScopesVariable extends SceneObjectBase {
     const loading = state.value.length === 0 ? false : state.loading;
     const oldScopes = this.state.scopes.map((scope) => scope.metadata.name);
     const newScopes = state.value.map((scope) => scope.metadata.name);
-    if (!loading && !isEqual(oldScopes, newScopes)) {
+    const scopesHaveChanged = !isEqual(oldScopes, newScopes);
+    if (!loading && (scopesHaveChanged || newScopes.length === 0)) {
       this.setState({ scopes: state.value, loading });
       this.publishEvent(new SceneVariableValueChangedEvent(this), true);
     } else {

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

@@ -1 +1 @@
-{"version":3,"file":"ScopesVariable.js","sources":["../../../../src/variables/variants/ScopesVariable.tsx"],"sourcesContent":["import { SceneObjectBase } from '../../core/SceneObjectBase';\nimport {\n  CustomVariableValue,\n  SceneVariable,\n  SceneVariableState,\n  SceneVariableValueChangedEvent,\n  VariableValue,\n} from '../types';\nimport { Scope } from '@grafana/data';\nimport { SceneComponentProps } from '../../core/types';\nimport { ScopesContext, ScopesContextValue } from '@grafana/runtime';\nimport { useContext, useEffect } from 'react';\nimport { VariableFormatID, VariableHide } from '@grafana/schema';\nimport { SCOPES_VARIABLE_NAME } from '../constants';\nimport { isEqual } from 'lodash';\n\nexport interface ScopesVariableState extends SceneVariableState {\n  /**\n   * Last captured state from ScopesContext\n   */\n  scopes: Scope[];\n  /**\n   * Set to true if you want to the variable to enable / disable scopes when activated / deactivated\n   */\n  enable?: boolean;\n}\n\nexport class ScopesVariable extends SceneObjectBase<ScopesVariableState> implements SceneVariable<ScopesVariableState> {\n  protected _renderBeforeActivation = true;\n  protected _context: ScopesContextValue | undefined;\n\n  // Special options that enables variables to be hidden but still render to access react contexts\n  public UNSAFE_renderAsHidden = true;\n  public static Component = ScopesVariableRenderer;\n\n  public constructor(state: Partial<ScopesVariableState>) {\n    super({\n      skipUrlSync: true,\n      loading: true,\n      scopes: [],\n      ...state,\n      type: 'system',\n      name: SCOPES_VARIABLE_NAME,\n      hide: VariableHide.hideVariable,\n    });\n  }\n\n  /**\n   * Temporary simple implementation to stringify the scopes.\n   */\n  public getValue(): VariableValue {\n    const scopes = this.state.scopes ?? [];\n    return new ScopesVariableFormatter(scopes.map((scope) => scope.metadata.name));\n  }\n\n  public getScopes(): Scope[] | undefined {\n    return this.state.scopes;\n  }\n\n  /**\n   * This method is used to keep the context up to date with the scopes context received from React\n   * 1) Subscribes to ScopesContext state changes and synchronizes it with the variable state\n   * 2) Handles enable / disabling of scopes based on variable enable option.\n   */\n  public setContext(context: ScopesContextValue | undefined) {\n    if (!context) {\n      return;\n    }\n\n    this._context = context;\n\n    const oldState = context.state;\n\n    // Update scopes enable state if state.enable is defined\n    if (this.state.enable != null) {\n      context.setEnabled(this.state.enable);\n    }\n\n    // Subscribe to context state changes\n    const sub = context.stateObservable.subscribe((state) => {\n      this.updateStateFromContext(state);\n    });\n\n    return () => {\n      sub.unsubscribe();\n\n      if (this.state.enable != null) {\n        context.setEnabled(oldState.enabled);\n      }\n    };\n  }\n\n  public updateStateFromContext(state: { loading: boolean; value: Scope[] }) {\n    // There was logic in SceneQueryRunner that said if there are no scopes then loading state should not block query execution\n    const loading = state.value.length === 0 ? false : state.loading;\n    const oldScopes = this.state.scopes.map((scope) => scope.metadata.name);\n    const newScopes = state.value.map((scope) => scope.metadata.name);\n\n    // Only update scopes value state when loading is false and the scopes have changed\n    if (!loading && !isEqual(oldScopes, newScopes)) {\n      this.setState({ scopes: state.value, loading });\n      this.publishEvent(new SceneVariableValueChangedEvent(this), true);\n    } else {\n      this.setState({ loading });\n    }\n  }\n}\n\nfunction ScopesVariableRenderer({ model }: SceneComponentProps<ScopesVariable>) {\n  const context = useContext(ScopesContext);\n\n  useEffect(() => {\n    return model.setContext(context);\n  }, [context, model]);\n\n  return null;\n}\n\nexport class ScopesVariableFormatter implements CustomVariableValue {\n  public constructor(private _value: string[]) {}\n\n  public formatter(formatNameOrFn?: string): string {\n    if (formatNameOrFn === VariableFormatID.QueryParam) {\n      return this._value.map((scope) => `scope=${encodeURIComponent(scope)}`).join('&');\n    }\n\n    return this._value.join(', ');\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ScopesVariable.js","sources":["../../../../src/variables/variants/ScopesVariable.tsx"],"sourcesContent":["import { SceneObjectBase } from '../../core/SceneObjectBase';\nimport {\n  CustomVariableValue,\n  SceneVariable,\n  SceneVariableState,\n  SceneVariableValueChangedEvent,\n  VariableValue,\n} from '../types';\nimport { Scope } from '@grafana/data';\nimport { SceneComponentProps } from '../../core/types';\nimport { ScopesContext, ScopesContextValue } from '@grafana/runtime';\nimport { useContext, useEffect } from 'react';\nimport { VariableFormatID, VariableHide } from '@grafana/schema';\nimport { SCOPES_VARIABLE_NAME } from '../constants';\nimport { isEqual } from 'lodash';\n\nexport interface ScopesVariableState extends SceneVariableState {\n  /**\n   * Last captured state from ScopesContext\n   */\n  scopes: Scope[];\n  /**\n   * Set to true if you want to the variable to enable / disable scopes when activated / deactivated\n   */\n  enable?: boolean;\n}\n\nexport class ScopesVariable extends SceneObjectBase<ScopesVariableState> implements SceneVariable<ScopesVariableState> {\n  protected _renderBeforeActivation = true;\n  protected _context: ScopesContextValue | undefined;\n\n  // Special options that enables variables to be hidden but still render to access react contexts\n  public UNSAFE_renderAsHidden = true;\n  public static Component = ScopesVariableRenderer;\n\n  public constructor(state: Partial<ScopesVariableState>) {\n    super({\n      skipUrlSync: true,\n      loading: true,\n      scopes: [],\n      ...state,\n      type: 'system',\n      name: SCOPES_VARIABLE_NAME,\n      hide: VariableHide.hideVariable,\n    });\n  }\n\n  /**\n   * Temporary simple implementation to stringify the scopes.\n   */\n  public getValue(): VariableValue {\n    const scopes = this.state.scopes ?? [];\n    return new ScopesVariableFormatter(scopes.map((scope) => scope.metadata.name));\n  }\n\n  public getScopes(): Scope[] | undefined {\n    return this.state.scopes;\n  }\n\n  /**\n   * This method is used to keep the context up to date with the scopes context received from React\n   * 1) Subscribes to ScopesContext state changes and synchronizes it with the variable state\n   * 2) Handles enable / disabling of scopes based on variable enable option.\n   */\n  public setContext(context: ScopesContextValue | undefined) {\n    if (!context) {\n      return;\n    }\n\n    this._context = context;\n\n    const oldState = context.state;\n\n    // Update scopes enable state if state.enable is defined\n    if (this.state.enable != null) {\n      context.setEnabled(this.state.enable);\n    }\n\n    // Subscribe to context state changes\n    const sub = context.stateObservable.subscribe((state) => {\n      this.updateStateFromContext(state);\n    });\n\n    return () => {\n      sub.unsubscribe();\n\n      if (this.state.enable != null) {\n        context.setEnabled(oldState.enabled);\n      }\n    };\n  }\n\n  public updateStateFromContext(state: { loading: boolean; value: Scope[] }) {\n    // There was logic in SceneQueryRunner that said if there are no scopes then loading state should not block query execution\n    const loading = state.value.length === 0 ? false : state.loading;\n    const oldScopes = this.state.scopes.map((scope) => scope.metadata.name);\n    const newScopes = state.value.map((scope) => scope.metadata.name);\n    const scopesHaveChanged = !isEqual(oldScopes, newScopes);\n\n    // Only update scopes value state when loading is false and the scopes have changed\n    if (!loading && (scopesHaveChanged || newScopes.length === 0)) {\n      this.setState({ scopes: state.value, loading });\n      this.publishEvent(new SceneVariableValueChangedEvent(this), true);\n    } else {\n      this.setState({ loading });\n    }\n  }\n}\n\nfunction ScopesVariableRenderer({ model }: SceneComponentProps<ScopesVariable>) {\n  const context = useContext(ScopesContext);\n\n  useEffect(() => {\n    return model.setContext(context);\n  }, [context, model]);\n\n  return null;\n}\n\nexport class ScopesVariableFormatter implements CustomVariableValue {\n  public constructor(private _value: string[]) {}\n\n  public formatter(formatNameOrFn?: string): string {\n    if (formatNameOrFn === VariableFormatID.QueryParam) {\n      return this._value.map((scope) => `scope=${encodeURIComponent(scope)}`).join('&');\n    }\n\n    return this._value.join(', ');\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -7291,7 +7291,8 @@ class ScopesVariable extends SceneObjectBase {
     const loading = state.value.length === 0 ? false : state.loading;
     const oldScopes = this.state.scopes.map((scope) => scope.metadata.name);
     const newScopes = state.value.map((scope) => scope.metadata.name);
-    if (!loading && !lodash.isEqual(oldScopes, newScopes)) {
+    const scopesHaveChanged = !lodash.isEqual(oldScopes, newScopes);
+    if (!loading && (scopesHaveChanged || newScopes.length === 0)) {
       this.setState({ scopes: state.value, loading });
       this.publishEvent(new SceneVariableValueChangedEvent(this), true);
     } else {
@@ -12231,6 +12232,16 @@ function applyItemStyles(style, state, parentState) {
     } else {
       style.flexGrow = xSizing === "fill" ? 1 : 0;
     }
+    if (state.wrap) {
+      style.flexWrap = state.wrap;
+      if (state.wrap !== "nowrap") {
+        if (parentDirection === "row") {
+          style.rowGap = "8px";
+        } else {
+          style.columnGap = "8px";
+        }
+      }
+    }
   }
   style.minWidth = state.minWidth;
   style.maxWidth = state.maxWidth;