@grafana/scenes 6.16.0 → 6.17.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# v6.17.0 (Thu May 29 2025)
+
+#### 🚀 Enhancement
+
+- AdHocFiltersVariableUrlSyncHandler: fix url state containing `#` char [#1139](https://github.com/grafana/scenes/pull/1139) ([@gtk-grafana](https://github.com/gtk-grafana))
+
+#### 🐛 Bug Fix
+
+- SceneFlexItem: respect `wrap` property [#1111](https://github.com/grafana/scenes/pull/1111) ([@domasx2](https://github.com/domasx2))
+
+#### Authors: 2
+
+- Domas ([@domasx2](https://github.com/domasx2))
+- Galen Kistler ([@gtk-grafana](https://github.com/gtk-grafana))
+
+---
+
 # v6.16.0 (Wed May 28 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/adhoc/AdHocFiltersVariableUrlSyncHandler.js

@@ -1,5 +1,5 @@
 import { isFilterComplete, isMatchAllFilter, isMultiValueOperator } from './AdHocFiltersVariable.js';
-import { escapeUrlPipeDelimiters, escapeInjectedFilterUrlDelimiters, toUrlCommaDelimitedString, unescapeUrlDelimiters } from '../utils.js';
+import { escapeInjectedFilterUrlDelimiters, toUrlCommaDelimitedString, unescapeUrlDelimiters } from '../utils.js';
 
 class AdHocFiltersVariableUrlSyncHandler {
   constructor(_variable) {
@@ -20,7 +20,7 @@ class AdHocFiltersVariableUrlSyncHandler {
     }
     if (filters.length) {
       value.push(
-        ...filters.filter(isFilterComplete).filter((filter) => !filter.hidden).map((filter) => toArray(filter).map(escapeUrlPipeDelimiters).join("|"))
+        ...filters.filter(isFilterComplete).filter((filter) => !filter.hidden).map((filter) => toArray(filter).map(escapeInjectedFilterUrlDelimiters).join("|"))
       );
     }
     if (baseFilters == null ? void 0 : baseFilters.length) {

package/dist/esm/variables/adhoc/AdHocFiltersVariableUrlSyncHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdHocFiltersVariableUrlSyncHandler.js","sources":["../../../../src/variables/adhoc/AdHocFiltersVariableUrlSyncHandler.ts"],"sourcesContent":["import { SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues } from '../../core/types';\nimport {\n  AdHocFiltersVariable,\n  AdHocFilterWithLabels,\n  FilterOrigin,\n  isFilterComplete,\n  isMatchAllFilter,\n  isMultiValueOperator,\n} from './AdHocFiltersVariable';\nimport {\n  escapeInjectedFilterUrlDelimiters,\n  escapeUrlPipeDelimiters,\n  toUrlCommaDelimitedString,\n  unescapeUrlDelimiters,\n} from '../utils';\n\nexport class AdHocFiltersVariableUrlSyncHandler implements SceneObjectUrlSyncHandler {\n  public constructor(private _variable: AdHocFiltersVariable) {}\n\n  private getKey(): string {\n    return `var-${this._variable.state.name}`;\n  }\n\n  public getKeys(): string[] {\n    return [this.getKey()];\n  }\n\n  public getUrlState(): SceneObjectUrlValues {\n    const filters = this._variable.state.filters;\n    const baseFilters = this._variable.state.baseFilters;\n\n    let value = [];\n\n    if (filters.length === 0 && baseFilters?.length === 0) {\n      return { [this.getKey()]: [''] };\n    }\n\n    if (filters.length) {\n      value.push(\n        ...filters\n          .filter(isFilterComplete)\n          .filter((filter) => !filter.hidden)\n          .map((filter) => toArray(filter).map(escapeUrlPipeDelimiters).join('|'))\n      );\n    }\n\n    if (baseFilters?.length) {\n      // injected filters stored in the following format: normal|adhoc|values#filterOrigin#restorable\n      value.push(\n        ...baseFilters\n          ?.filter(isFilterComplete)\n          .filter((filter) => !filter.hidden && filter.origin && filter.restorable)\n          .map((filter) =>\n            toArray(filter).map(escapeInjectedFilterUrlDelimiters).join('|').concat(`#${filter.origin}#restorable`)\n          )\n      );\n    }\n\n    return {\n      [this.getKey()]: value.length ? value : [''],\n    };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues): void {\n    const urlValue = values[this.getKey()];\n\n    if (urlValue == null) {\n      return;\n    }\n\n    const filters = deserializeUrlToFilters(urlValue);\n    const baseFilters = [...(this._variable.state.baseFilters || [])];\n\n    for (let i = 0; i < filters.length; i++) {\n      const foundBaseFilterIndex = baseFilters.findIndex((f) => f.key === filters[i].key);\n\n      // if we find a match we update baseFilter with what's in the URL.\n      // If there is a normal filter without an origin that matches keys with\n      // some dashboard lvl filter we maintain it as dashboard lvl filter in the\n      // new dashboard\n      if (foundBaseFilterIndex > -1) {\n        if (!filters[i].origin && baseFilters[foundBaseFilterIndex].origin === 'dashboard') {\n          filters[i].origin = 'dashboard';\n          filters[i].restorable = true;\n        }\n\n        if (isMatchAllFilter(filters[i])) {\n          filters[i].matchAllFilter = true;\n        }\n\n        baseFilters[foundBaseFilterIndex] = filters[i];\n      } else if (filters[i].origin === 'dashboard') {\n        // if it was originating from a dashoard but has no match in the new dashboard\n        // remove it's origin, turn it into a normal filter to be set below\n        delete filters[i].origin;\n        delete filters[i].restorable;\n      } else if (foundBaseFilterIndex === -1 && filters[i].origin === 'scope' && filters[i].restorable) {\n        // scopes are being set sometimes (when the observable emits actual filters) after urlSync\n        // so we maintain all modified scopes in the adhoc\n        // and leave the scopes update to reconciliate on what filters will actually show up\n        baseFilters.push(filters[i]);\n      }\n    }\n\n    this._variable.setState({\n      filters: filters.filter((f) => !f.origin),\n      baseFilters,\n    });\n  }\n}\n\nfunction deserializeUrlToFilters(value: SceneObjectUrlValue): AdHocFilterWithLabels[] {\n  if (Array.isArray(value)) {\n    const values = value;\n    return values.map(toFilter).filter(isFilter);\n  }\n\n  const filter = toFilter(value);\n  return filter === null ? [] : [filter];\n}\n\nfunction toArray(filter: AdHocFilterWithLabels): string[] {\n  const result = [toUrlCommaDelimitedString(filter.key, filter.keyLabel), filter.operator];\n  if (isMultiValueOperator(filter.operator)) {\n    // TODO remove expect-error when we're on the latest version of @grafana/data\n    // @ts-expect-error\n    filter.values.forEach((value, index) => {\n      result.push(toUrlCommaDelimitedString(value, filter.valueLabels?.[index]));\n    });\n  } else {\n    result.push(toUrlCommaDelimitedString(filter.value, filter.valueLabels?.[0]));\n  }\n  return result;\n}\n\nfunction toFilter(urlValue: string | number | boolean | undefined | null): AdHocFilterWithLabels | null {\n  if (typeof urlValue !== 'string' || urlValue.length === 0) {\n    return null;\n  }\n\n  const [filter, origin, restorable] = urlValue.split('#');\n  const [key, keyLabel, operator, _operatorLabel, ...values] = filter\n    .split('|')\n    .reduce<string[]>((acc, v) => {\n      const [key, label] = v.split(',');\n\n      acc.push(key, label ?? key);\n\n      return acc;\n    }, [])\n    .map(unescapeUrlDelimiters);\n\n  return {\n    key,\n    keyLabel,\n    operator,\n    value: values[0],\n    values: isMultiValueOperator(operator) ? values.filter((_, index) => index % 2 === 0) : undefined,\n    valueLabels: values.filter((_, index) => index % 2 === 1),\n    condition: '',\n    ...(isFilterOrigin(origin) && { origin }),\n    ...(!!restorable && { restorable: true }),\n  };\n}\n\nfunction isFilterOrigin(value: string): value is FilterOrigin {\n  return value === 'scope' || value === 'dashboard';\n}\n\nfunction isFilter(filter: AdHocFilterWithLabels | null): filter is AdHocFilterWithLabels {\n  return filter !== null && typeof filter.key === 'string' && typeof filter.value === 'string';\n}\n"],"names":["_a","key"],"mappings":"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"}
+{"version":3,"file":"AdHocFiltersVariableUrlSyncHandler.js","sources":["../../../../src/variables/adhoc/AdHocFiltersVariableUrlSyncHandler.ts"],"sourcesContent":["import { SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues } from '../../core/types';\nimport {\n  AdHocFiltersVariable,\n  AdHocFilterWithLabels,\n  FilterOrigin,\n  isFilterComplete,\n  isMatchAllFilter,\n  isMultiValueOperator,\n} from './AdHocFiltersVariable';\nimport { escapeInjectedFilterUrlDelimiters, toUrlCommaDelimitedString, unescapeUrlDelimiters } from '../utils';\n\nexport class AdHocFiltersVariableUrlSyncHandler implements SceneObjectUrlSyncHandler {\n  public constructor(private _variable: AdHocFiltersVariable) {}\n\n  private getKey(): string {\n    return `var-${this._variable.state.name}`;\n  }\n\n  public getKeys(): string[] {\n    return [this.getKey()];\n  }\n\n  public getUrlState(): SceneObjectUrlValues {\n    const filters = this._variable.state.filters;\n    const baseFilters = this._variable.state.baseFilters;\n\n    let value = [];\n\n    if (filters.length === 0 && baseFilters?.length === 0) {\n      return { [this.getKey()]: [''] };\n    }\n\n    if (filters.length) {\n      value.push(\n        ...filters\n          .filter(isFilterComplete)\n          .filter((filter) => !filter.hidden)\n          .map((filter) => toArray(filter).map(escapeInjectedFilterUrlDelimiters).join('|'))\n      );\n    }\n\n    if (baseFilters?.length) {\n      // injected filters stored in the following format: normal|adhoc|values#filterOrigin#restorable\n      value.push(\n        ...baseFilters\n          ?.filter(isFilterComplete)\n          .filter((filter) => !filter.hidden && filter.origin && filter.restorable)\n          .map((filter) =>\n            toArray(filter).map(escapeInjectedFilterUrlDelimiters).join('|').concat(`#${filter.origin}#restorable`)\n          )\n      );\n    }\n\n    return {\n      [this.getKey()]: value.length ? value : [''],\n    };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues): void {\n    const urlValue = values[this.getKey()];\n\n    if (urlValue == null) {\n      return;\n    }\n\n    const filters = deserializeUrlToFilters(urlValue);\n    const baseFilters = [...(this._variable.state.baseFilters || [])];\n\n    for (let i = 0; i < filters.length; i++) {\n      const foundBaseFilterIndex = baseFilters.findIndex((f) => f.key === filters[i].key);\n\n      // if we find a match we update baseFilter with what's in the URL.\n      // If there is a normal filter without an origin that matches keys with\n      // some dashboard lvl filter we maintain it as dashboard lvl filter in the\n      // new dashboard\n      if (foundBaseFilterIndex > -1) {\n        if (!filters[i].origin && baseFilters[foundBaseFilterIndex].origin === 'dashboard') {\n          filters[i].origin = 'dashboard';\n          filters[i].restorable = true;\n        }\n\n        if (isMatchAllFilter(filters[i])) {\n          filters[i].matchAllFilter = true;\n        }\n\n        baseFilters[foundBaseFilterIndex] = filters[i];\n      } else if (filters[i].origin === 'dashboard') {\n        // if it was originating from a dashoard but has no match in the new dashboard\n        // remove it's origin, turn it into a normal filter to be set below\n        delete filters[i].origin;\n        delete filters[i].restorable;\n      } else if (foundBaseFilterIndex === -1 && filters[i].origin === 'scope' && filters[i].restorable) {\n        // scopes are being set sometimes (when the observable emits actual filters) after urlSync\n        // so we maintain all modified scopes in the adhoc\n        // and leave the scopes update to reconciliate on what filters will actually show up\n        baseFilters.push(filters[i]);\n      }\n    }\n\n    this._variable.setState({\n      filters: filters.filter((f) => !f.origin),\n      baseFilters,\n    });\n  }\n}\n\nfunction deserializeUrlToFilters(value: SceneObjectUrlValue): AdHocFilterWithLabels[] {\n  if (Array.isArray(value)) {\n    const values = value;\n    return values.map(toFilter).filter(isFilter);\n  }\n\n  const filter = toFilter(value);\n  return filter === null ? [] : [filter];\n}\n\nfunction toArray(filter: AdHocFilterWithLabels): string[] {\n  const result = [toUrlCommaDelimitedString(filter.key, filter.keyLabel), filter.operator];\n  if (isMultiValueOperator(filter.operator)) {\n    // TODO remove expect-error when we're on the latest version of @grafana/data\n    // @ts-expect-error\n    filter.values.forEach((value, index) => {\n      result.push(toUrlCommaDelimitedString(value, filter.valueLabels?.[index]));\n    });\n  } else {\n    result.push(toUrlCommaDelimitedString(filter.value, filter.valueLabels?.[0]));\n  }\n  return result;\n}\n\nfunction toFilter(urlValue: string | number | boolean | undefined | null): AdHocFilterWithLabels | null {\n  if (typeof urlValue !== 'string' || urlValue.length === 0) {\n    return null;\n  }\n\n  const [filter, origin, restorable] = urlValue.split('#');\n  const [key, keyLabel, operator, _operatorLabel, ...values] = filter\n    .split('|')\n    .reduce<string[]>((acc, v) => {\n      const [key, label] = v.split(',');\n\n      acc.push(key, label ?? key);\n\n      return acc;\n    }, [])\n    .map(unescapeUrlDelimiters);\n\n  return {\n    key,\n    keyLabel,\n    operator,\n    value: values[0],\n    values: isMultiValueOperator(operator) ? values.filter((_, index) => index % 2 === 0) : undefined,\n    valueLabels: values.filter((_, index) => index % 2 === 1),\n    condition: '',\n    ...(isFilterOrigin(origin) && { origin }),\n    ...(!!restorable && { restorable: true }),\n  };\n}\n\nfunction isFilterOrigin(value: string): value is FilterOrigin {\n  return value === 'scope' || value === 'dashboard';\n}\n\nfunction isFilter(filter: AdHocFilterWithLabels | null): filter is AdHocFilterWithLabels {\n  return filter !== null && typeof filter.key === 'string' && typeof filter.value === 'string';\n}\n"],"names":["_a","key"],"mappings":"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"}

package/dist/index.js

@@ -3945,7 +3945,7 @@ class AdHocFiltersVariableUrlSyncHandler {
     }
     if (filters.length) {
       value.push(
-        ...filters.filter(isFilterComplete).filter((filter) => !filter.hidden).map((filter) => toArray(filter).map(escapeUrlPipeDelimiters).join("|"))
+        ...filters.filter(isFilterComplete).filter((filter) => !filter.hidden).map((filter) => toArray(filter).map(escapeInjectedFilterUrlDelimiters).join("|"))
       );
     }
     if (baseFilters == null ? void 0 : baseFilters.length) {
@@ -12231,6 +12231,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;