@grafana/scenes 2.6.4 → 2.6.5

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# v2.6.5 (Thu Feb 08 2024)
+
+#### 🐛 Bug Fix
+
+- ResizeHandle: New style [#579](https://github.com/grafana/scenes/pull/579) ([@torkelo](https://github.com/torkelo))
+- ByVariableRepeater: Repeat layout for each variable value [#573](https://github.com/grafana/scenes/pull/573) ([@torkelo](https://github.com/torkelo))
+- QueryVariable: Fixes react testing act errors [#578](https://github.com/grafana/scenes/pull/578) ([@torkelo](https://github.com/torkelo))
+
+#### Authors: 1
+
+- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))
+
+---
+
 # v2.6.4 (Wed Feb 07 2024)
 
 #### 🐛 Bug Fix

package/dist/esm/components/SceneByVariableRepeater.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { SceneObjectBase } from '../core/SceneObjectBase.js';
+import { sceneGraph } from '../core/sceneGraph/index.js';
+import { VariableDependencyConfig } from '../variables/VariableDependencyConfig.js';
+import { MultiValueVariable } from '../variables/variants/MultiValueVariable.js';
+
+class SceneByVariableRepeater extends SceneObjectBase {
+  constructor(state) {
+    super(state);
+    this._variableDependency = new VariableDependencyConfig(
+      this,
+      {
+        variableNames: [this.state.variableName],
+        onVariableUpdateCompleted: () => this.performRepeat()
+      }
+    );
+    this.addActivationHandler(() => this.performRepeat());
+  }
+  performRepeat() {
+    if (this._variableDependency.hasDependencyInLoadingState()) {
+      return;
+    }
+    const variable = sceneGraph.lookupVariable(this.state.variableName, this);
+    if (!(variable instanceof MultiValueVariable)) {
+      console.error("SceneByVariableRepeater: variable is not a MultiValueVariable");
+      return;
+    }
+    const values = getMultiVariableValues(variable);
+    const newChildren = [];
+    for (const option of values) {
+      const layoutChild = this.state.getLayoutChild(option);
+      newChildren.push(layoutChild);
+    }
+    this.state.body.setState({ children: newChildren });
+  }
+}
+SceneByVariableRepeater.Component = ({ model }) => {
+  const { body } = model.useState();
+  return /* @__PURE__ */ React.createElement(body.Component, {
+    model: body
+  });
+};
+function getMultiVariableValues(variable) {
+  const { value, text, options } = variable.state;
+  if (variable.hasAllValue()) {
+    return options;
+  }
+  if (Array.isArray(value) && Array.isArray(text)) {
+    return value.map((v, i) => ({ value: v, label: text[i] }));
+  }
+  return [{ value, label: text }];
+}
+
+export { SceneByVariableRepeater, getMultiVariableValues };
+//# sourceMappingURL=SceneByVariableRepeater.js.map

package/dist/esm/components/SceneByVariableRepeater.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneByVariableRepeater.js","sources":["../../../src/components/SceneByVariableRepeater.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneComponentProps, SceneLayout, SceneObject, SceneObjectState } from '../core/types';\nimport { VariableDependencyConfig } from '../variables/VariableDependencyConfig';\nimport { VariableValueOption } from '../variables/types';\nimport { MultiValueVariable } from '../variables/variants/MultiValueVariable';\n\ninterface SceneByVariableRepeaterState extends SceneObjectState {\n  body: SceneLayout;\n  variableName: string;\n  getLayoutChild(option: VariableValueOption): SceneObject;\n}\n\nexport class SceneByVariableRepeater extends SceneObjectBase<SceneByVariableRepeaterState> {\n  protected _variableDependency: VariableDependencyConfig<SceneByVariableRepeaterState> = new VariableDependencyConfig(\n    this,\n    {\n      variableNames: [this.state.variableName],\n      onVariableUpdateCompleted: () => this.performRepeat(),\n    }\n  );\n\n  public constructor(state: SceneByVariableRepeaterState) {\n    super(state);\n\n    this.addActivationHandler(() => this.performRepeat());\n  }\n\n  private performRepeat() {\n    if (this._variableDependency.hasDependencyInLoadingState()) {\n      return;\n    }\n\n    const variable = sceneGraph.lookupVariable(this.state.variableName, this);\n    if (!(variable instanceof MultiValueVariable)) {\n      console.error('SceneByVariableRepeater: variable is not a MultiValueVariable');\n      return;\n    }\n\n    const values = getMultiVariableValues(variable);\n    const newChildren: SceneObject[] = [];\n\n    for (const option of values) {\n      const layoutChild = this.state.getLayoutChild(option);\n      newChildren.push(layoutChild);\n    }\n\n    this.state.body.setState({ children: newChildren });\n  }\n\n  public static Component = ({ model }: SceneComponentProps<SceneByVariableRepeater>) => {\n    const { body } = model.useState();\n    return <body.Component model={body} />;\n  };\n}\n\nexport function getMultiVariableValues(variable: MultiValueVariable): VariableValueOption[] {\n  const { value, text, options } = variable.state;\n\n  if (variable.hasAllValue()) {\n    return options;\n  }\n\n  if (Array.isArray(value) && Array.isArray(text)) {\n    return value.map((v, i) => ({ value: v, label: text[i] as string }));\n  }\n\n  return [{ value: value as string, label: text as string }];\n}\n"],"names":[],"mappings":";;;;;;AAeO,MAAM,gCAAgC,eAA8C,CAAA;AAAA,EASlF,YAAY,KAAqC,EAAA;AACtD,IAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AATb,IAAA,IAAA,CAAU,sBAA8E,IAAI,wBAAA;AAAA,MAC1F,IAAA;AAAA,MACA;AAAA,QACE,aAAe,EAAA,CAAC,IAAK,CAAA,KAAA,CAAM,YAAY,CAAA;AAAA,QACvC,yBAAA,EAA2B,MAAM,IAAA,CAAK,aAAc,EAAA;AAAA,OACtD;AAAA,KACF,CAAA;AAKE,IAAA,IAAA,CAAK,oBAAqB,CAAA,MAAM,IAAK,CAAA,aAAA,EAAe,CAAA,CAAA;AAAA,GACtD;AAAA,EAEQ,aAAgB,GAAA;AACtB,IAAI,IAAA,IAAA,CAAK,mBAAoB,CAAA,2BAAA,EAA+B,EAAA;AAC1D,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,MAAM,WAAW,UAAW,CAAA,cAAA,CAAe,IAAK,CAAA,KAAA,CAAM,cAAc,IAAI,CAAA,CAAA;AACxE,IAAI,IAAA,EAAE,oBAAoB,kBAAqB,CAAA,EAAA;AAC7C,MAAA,OAAA,CAAQ,MAAM,+DAA+D,CAAA,CAAA;AAC7E,MAAA,OAAA;AAAA,KACF;AAEA,IAAM,MAAA,MAAA,GAAS,uBAAuB,QAAQ,CAAA,CAAA;AAC9C,IAAA,MAAM,cAA6B,EAAC,CAAA;AAEpC,IAAA,KAAA,MAAW,UAAU,MAAQ,EAAA;AAC3B,MAAA,MAAM,WAAc,GAAA,IAAA,CAAK,KAAM,CAAA,cAAA,CAAe,MAAM,CAAA,CAAA;AACpD,MAAA,WAAA,CAAY,KAAK,WAAW,CAAA,CAAA;AAAA,KAC9B;AAEA,IAAA,IAAA,CAAK,MAAM,IAAK,CAAA,QAAA,CAAS,EAAE,QAAA,EAAU,aAAa,CAAA,CAAA;AAAA,GACpD;AAMF,CAAA;AAzCa,uBAAA,CAqCG,SAAY,GAAA,CAAC,EAAE,KAAA,EAA0D,KAAA;AACrF,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAChC,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,SAAL,EAAA;AAAA,IAAe,KAAO,EAAA,IAAA;AAAA,GAAM,CAAA,CAAA;AACtC,CAAA,CAAA;AAGK,SAAS,uBAAuB,QAAqD,EAAA;AAC1F,EAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,OAAA,KAAY,QAAS,CAAA,KAAA,CAAA;AAE1C,EAAI,IAAA,QAAA,CAAS,aAAe,EAAA;AAC1B,IAAO,OAAA,OAAA,CAAA;AAAA,GACT;AAEA,EAAA,IAAI,MAAM,OAAQ,CAAA,KAAK,KAAK,KAAM,CAAA,OAAA,CAAQ,IAAI,CAAG,EAAA;AAC/C,IAAO,OAAA,KAAA,CAAM,GAAI,CAAA,CAAC,CAAG,EAAA,CAAA,MAAO,EAAE,KAAA,EAAO,CAAG,EAAA,KAAA,EAAO,IAAK,CAAA,CAAA,CAAA,EAAe,CAAA,CAAA,CAAA;AAAA,GACrE;AAEA,EAAA,OAAO,CAAC,EAAE,KAAwB,EAAA,KAAA,EAAO,MAAgB,CAAA,CAAA;AAC3D;;;;"}

package/dist/esm/components/layout/grid/SceneGridLayoutRenderer.js

@@ -3,8 +3,8 @@ import ReactGridLayout from 'react-grid-layout';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { GRID_CELL_VMARGIN, GRID_COLUMN_COUNT, GRID_CELL_HEIGHT } from './constants.js';
 import { LazyLoader } from '../LazyLoader.js';
-import { useTheme2, LayoutItemContext } from '@grafana/ui';
-import { cx } from '@emotion/css';
+import { useTheme2, LayoutItemContext, useStyles2 } from '@grafana/ui';
+import { cx, css } from '@emotion/css';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -65,7 +65,8 @@ function SceneGridLayoutRenderer({ model }) {
       onDragStop: model.onDragStop,
       onResizeStop: model.onResizeStop,
       onLayoutChange: model.onLayoutChange,
-      isBounded: false
+      isBounded: false,
+      resizeHandle: /* @__PURE__ */ React.createElement(ResizeHandle, null)
     }, layout.map((gridItem, index) => /* @__PURE__ */ React.createElement(GridItemWrapper, {
       key: gridItem.i,
       grid: model,
@@ -119,7 +120,7 @@ const GridItemWrapper = React.forwardRef((props, ref) => {
     "data-griditem-key": sceneChild.state.key,
     className: cx(className, props.className),
     style: newStyle
-  }), children, innerContentWithContext);
+  }), innerContentWithContext, children);
 });
 GridItemWrapper.displayName = "GridItemWrapper";
 function validateChildrenSize(children) {
@@ -129,6 +130,48 @@ function validateChildrenSize(children) {
     throw new Error("All children must have a size specified");
   }
 }
+const ResizeHandle = React.forwardRef((_a, ref) => {
+  var _b = _a, divProps = __objRest(_b, ["handleAxis"]);
+  const customCssClass = useStyles2(getResizeHandleStyles);
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({
+    ref
+  }, divProps), {
+    className: `${customCssClass} scene-resize-handle`
+  }), /* @__PURE__ */ React.createElement("svg", {
+    width: "16px",
+    height: "16x",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /* @__PURE__ */ React.createElement("path", {
+    d: "M21 15L15 21M21 8L8 21",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+});
+ResizeHandle.displayName = "ResizeHandle";
+function getResizeHandleStyles(theme) {
+  return css({
+    position: "absolute",
+    bottom: 0,
+    right: 0,
+    zIndex: 999,
+    padding: theme.spacing(1.5, 0, 0, 1.5),
+    color: theme.colors.border.strong,
+    cursor: "se-resize",
+    "&:hover": {
+      color: theme.colors.text.link
+    },
+    svg: {
+      display: "block"
+    },
+    ".react-resizable-hide &": {
+      display: "none"
+    }
+  });
+}
 
 export { SceneGridLayoutRenderer };
 //# sourceMappingURL=SceneGridLayoutRenderer.js.map

package/dist/esm/components/layout/grid/SceneGridLayoutRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneGridLayoutRenderer.js","sources":["../../../../../src/components/layout/grid/SceneGridLayoutRenderer.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useReducer, useRef } from 'react';\nimport ReactGridLayout from 'react-grid-layout';\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { SceneComponentProps } from '../../../core/types';\nimport { GRID_CELL_VMARGIN, GRID_COLUMN_COUNT, GRID_CELL_HEIGHT } from './constants';\nimport { LazyLoader } from '../LazyLoader';\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { SceneGridItemLike } from './types';\n// @ts-expect-error TODO remove when @grafana/ui is upgraded to 10.4\nimport { LayoutItemContext, useTheme2 } from '@grafana/ui';\nimport { cx } from '@emotion/css';\n\nexport function SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGridLayout>) {\n  const { children, isLazy, isDraggable, isResizable } = model.useState();\n  validateChildrenSize(children);\n\n  return (\n    <AutoSizer disableHeight>\n      {({ width }) => {\n        if (width === 0) {\n          return null;\n        }\n\n        const layout = model.buildGridLayout(width);\n\n        return (\n          /**\n           * The children is using a width of 100% so we need to guarantee that it is wrapped\n           * in an element that has the calculated size given by the AutoSizer. The AutoSizer\n           * has a width of 0 and will let its content overflow its div.\n           */\n          <div\n            style={{ width: `${width}px`, height: '100%', position: 'relative', zIndex: 1 }}\n            className=\"scene-grid-layout\"\n          >\n            <ReactGridLayout\n              width={width}\n              /**\n                Disable draggable if mobile device, solving an issue with unintentionally\n                moving panels. https://github.com/grafana/grafana/issues/18497\n                theme.breakpoints.md = 769\n               */\n              isDraggable={isDraggable && width > 768}\n              isResizable={isResizable ?? false}\n              containerPadding={[0, 0]}\n              useCSSTransforms={false}\n              margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}\n              cols={GRID_COLUMN_COUNT}\n              rowHeight={GRID_CELL_HEIGHT}\n              draggableHandle={`.grid-drag-handle-${model.state.key}`}\n              draggableCancel=\".grid-drag-cancel\"\n              // @ts-ignore: ignoring for now until we make the size type numbers-only\n              layout={layout}\n              onDragStop={model.onDragStop}\n              onResizeStop={model.onResizeStop}\n              onLayoutChange={model.onLayoutChange}\n              isBounded={false}\n            >\n              {layout.map((gridItem, index) => (\n                <GridItemWrapper\n                  key={gridItem.i}\n                  grid={model}\n                  layoutItem={gridItem}\n                  index={index}\n                  isLazy={isLazy}\n                  totalCount={layout.length}\n                />\n              ))}\n            </ReactGridLayout>\n          </div>\n        );\n      }}\n    </AutoSizer>\n  );\n}\n\ninterface GridItemWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  grid: SceneGridLayout;\n  layoutItem: ReactGridLayout.Layout;\n  index: number;\n  totalCount: number;\n  isLazy?: boolean;\n}\n\nconst GridItemWrapper = React.forwardRef<HTMLDivElement, GridItemWrapperProps>((props, ref) => {\n  const { grid, layoutItem, index, totalCount, isLazy, style, onLoad, onChange, children, ...divProps } = props;\n  const sceneChild = grid.getSceneLayoutChild(layoutItem.i)!;\n  const className = sceneChild.getClassName?.();\n  const theme = useTheme2();\n\n  const boostedCount = useRef(0);\n  const [_, forceUpdate] = useReducer((x) => x + 1, 0);\n\n  const boostZIndex = useCallback(() => {\n    boostedCount.current += 1;\n    forceUpdate();\n\n    return () => {\n      boostedCount.current -= 1;\n      forceUpdate();\n    };\n  }, [forceUpdate]);\n\n  const ctxValue = useMemo(() => ({ boostZIndex }), [boostZIndex]);\n  const descIndex = totalCount - index;\n  const innerContent = <sceneChild.Component model={sceneChild} key={sceneChild.state.key} />;\n  const innerContentWithContext = LayoutItemContext ? (\n    <LayoutItemContext.Provider value={ctxValue}>{innerContent}</LayoutItemContext.Provider>\n  ) : (\n    innerContent\n  );\n\n  const newStyle = {\n    ...style,\n    zIndex: boostedCount.current === 0 ? descIndex : theme.zIndex.dropdown,\n  };\n\n  if (isLazy) {\n    return (\n      <LazyLoader\n        {...divProps}\n        key={sceneChild.state.key!}\n        data-griditem-key={sceneChild.state.key}\n        className={cx(className, props.className)}\n        style={newStyle}\n        ref={ref}\n      >\n        {innerContentWithContext}\n        {children}\n      </LazyLoader>\n    );\n  }\n\n  return (\n    <div\n      {...divProps}\n      ref={ref}\n      key={sceneChild.state.key}\n      data-griditem-key={sceneChild.state.key}\n      className={cx(className, props.className)}\n      style={newStyle}\n    >\n      {children}\n      {innerContentWithContext}\n    </div>\n  );\n});\n\nGridItemWrapper.displayName = 'GridItemWrapper';\n\nfunction validateChildrenSize(children: SceneGridItemLike[]) {\n  if (\n    children.some(\n      (c) =>\n        c.state.height === undefined ||\n        c.state.width === undefined ||\n        c.state.x === undefined ||\n        c.state.y === undefined\n    )\n  ) {\n    throw new Error('All children must have a size specified');\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SceneGridLayoutRenderer.js","sources":["../../../../../src/components/layout/grid/SceneGridLayoutRenderer.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useReducer, useRef } from 'react';\nimport ReactGridLayout from 'react-grid-layout';\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { SceneComponentProps } from '../../../core/types';\nimport { GRID_CELL_VMARGIN, GRID_COLUMN_COUNT, GRID_CELL_HEIGHT } from './constants';\nimport { LazyLoader } from '../LazyLoader';\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { SceneGridItemLike } from './types';\n// @ts-expect-error TODO remove when @grafana/ui is upgraded to 10.4\nimport { LayoutItemContext, useStyles2, useTheme2 } from '@grafana/ui';\nimport { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\n\nexport function SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGridLayout>) {\n  const { children, isLazy, isDraggable, isResizable } = model.useState();\n\n  validateChildrenSize(children);\n\n  return (\n    <AutoSizer disableHeight>\n      {({ width }) => {\n        if (width === 0) {\n          return null;\n        }\n\n        const layout = model.buildGridLayout(width);\n\n        return (\n          /**\n           * The children is using a width of 100% so we need to guarantee that it is wrapped\n           * in an element that has the calculated size given by the AutoSizer. The AutoSizer\n           * has a width of 0 and will let its content overflow its div.\n           */\n          <div\n            style={{ width: `${width}px`, height: '100%', position: 'relative', zIndex: 1 }}\n            className=\"scene-grid-layout\"\n          >\n            <ReactGridLayout\n              width={width}\n              /**\n                Disable draggable if mobile device, solving an issue with unintentionally\n                moving panels. https://github.com/grafana/grafana/issues/18497\n                theme.breakpoints.md = 769\n               */\n              isDraggable={isDraggable && width > 768}\n              isResizable={isResizable ?? false}\n              containerPadding={[0, 0]}\n              useCSSTransforms={false}\n              margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}\n              cols={GRID_COLUMN_COUNT}\n              rowHeight={GRID_CELL_HEIGHT}\n              draggableHandle={`.grid-drag-handle-${model.state.key}`}\n              draggableCancel=\".grid-drag-cancel\"\n              // @ts-ignore: ignoring for now until we make the size type numbers-only\n              layout={layout}\n              onDragStop={model.onDragStop}\n              onResizeStop={model.onResizeStop}\n              onLayoutChange={model.onLayoutChange}\n              isBounded={false}\n              resizeHandle={<ResizeHandle />}\n            >\n              {layout.map((gridItem, index) => (\n                <GridItemWrapper\n                  key={gridItem.i}\n                  grid={model}\n                  layoutItem={gridItem}\n                  index={index}\n                  isLazy={isLazy}\n                  totalCount={layout.length}\n                />\n              ))}\n            </ReactGridLayout>\n          </div>\n        );\n      }}\n    </AutoSizer>\n  );\n}\n\ninterface GridItemWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  grid: SceneGridLayout;\n  layoutItem: ReactGridLayout.Layout;\n  index: number;\n  totalCount: number;\n  isLazy?: boolean;\n}\n\nconst GridItemWrapper = React.forwardRef<HTMLDivElement, GridItemWrapperProps>((props, ref) => {\n  const { grid, layoutItem, index, totalCount, isLazy, style, onLoad, onChange, children, ...divProps } = props;\n  const sceneChild = grid.getSceneLayoutChild(layoutItem.i)!;\n  const className = sceneChild.getClassName?.();\n  const theme = useTheme2();\n\n  const boostedCount = useRef(0);\n  const [_, forceUpdate] = useReducer((x) => x + 1, 0);\n\n  const boostZIndex = useCallback(() => {\n    boostedCount.current += 1;\n    forceUpdate();\n\n    return () => {\n      boostedCount.current -= 1;\n      forceUpdate();\n    };\n  }, [forceUpdate]);\n\n  const ctxValue = useMemo(() => ({ boostZIndex }), [boostZIndex]);\n  const descIndex = totalCount - index;\n  const innerContent = <sceneChild.Component model={sceneChild} key={sceneChild.state.key} />;\n  const innerContentWithContext = LayoutItemContext ? (\n    <LayoutItemContext.Provider value={ctxValue}>{innerContent}</LayoutItemContext.Provider>\n  ) : (\n    innerContent\n  );\n\n  const newStyle = {\n    ...style,\n    zIndex: boostedCount.current === 0 ? descIndex : theme.zIndex.dropdown,\n  };\n\n  if (isLazy) {\n    return (\n      <LazyLoader\n        {...divProps}\n        key={sceneChild.state.key!}\n        data-griditem-key={sceneChild.state.key}\n        className={cx(className, props.className)}\n        style={newStyle}\n        ref={ref}\n      >\n        {innerContentWithContext}\n        {children}\n      </LazyLoader>\n    );\n  }\n\n  return (\n    <div\n      {...divProps}\n      ref={ref}\n      key={sceneChild.state.key}\n      data-griditem-key={sceneChild.state.key}\n      className={cx(className, props.className)}\n      style={newStyle}\n    >\n      {innerContentWithContext}\n      {children}\n    </div>\n  );\n});\n\nGridItemWrapper.displayName = 'GridItemWrapper';\n\nfunction validateChildrenSize(children: SceneGridItemLike[]) {\n  if (\n    children.some(\n      (c) =>\n        c.state.height === undefined ||\n        c.state.width === undefined ||\n        c.state.x === undefined ||\n        c.state.y === undefined\n    )\n  ) {\n    throw new Error('All children must have a size specified');\n  }\n}\n\ninterface ResizeHandleProps extends React.HTMLAttributes<HTMLDivElement> {\n  handleAxis?: string;\n}\n\nconst ResizeHandle = React.forwardRef<HTMLDivElement, ResizeHandleProps>(({ handleAxis, ...divProps }, ref) => {\n  const customCssClass = useStyles2(getResizeHandleStyles);\n\n  return (\n    <div ref={ref} {...divProps} className={`${customCssClass} scene-resize-handle`}>\n      <svg width=\"16px\" height=\"16x\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M21 15L15 21M21 8L8 21\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </div>\n  );\n});\n\nResizeHandle.displayName = 'ResizeHandle';\n\nfunction getResizeHandleStyles(theme: GrafanaTheme2) {\n  return css({\n    position: 'absolute',\n    bottom: 0,\n    right: 0,\n    zIndex: 999,\n    padding: theme.spacing(1.5, 0, 0, 1.5),\n    color: theme.colors.border.strong,\n    cursor: 'se-resize',\n    '&:hover': {\n      color: theme.colors.text.link,\n    },\n    svg: {\n      display: 'block',\n    },\n    '.react-resizable-hide &': {\n      display: 'none',\n    },\n  });\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAagB,SAAA,uBAAA,CAAwB,EAAE,KAAA,EAA+C,EAAA;AACvF,EAAA,MAAM,EAAE,QAAU,EAAA,MAAA,EAAQ,aAAa,WAAY,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAEtE,EAAA,oBAAA,CAAqB,QAAQ,CAAA,CAAA;AAE7B,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAU,aAAa,EAAA,IAAA;AAAA,GACrB,EAAA,CAAC,EAAE,KAAA,EAAY,KAAA;AACd,IAAA,IAAI,UAAU,CAAG,EAAA;AACf,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,MAAA,GAAS,KAAM,CAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AAE1C,IAAA,uBAMG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MACC,KAAA,EAAO,EAAE,KAAA,EAAO,CAAG,EAAA,KAAA,CAAA,EAAA,CAAA,EAAW,QAAQ,MAAQ,EAAA,QAAA,EAAU,UAAY,EAAA,MAAA,EAAQ,CAAE,EAAA;AAAA,MAC9E,SAAU,EAAA,mBAAA;AAAA,KAAA,kBAET,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,MACC,KAAA;AAAA,MAMA,WAAA,EAAa,eAAe,KAAQ,GAAA,GAAA;AAAA,MACpC,aAAa,WAAe,IAAA,IAAA,GAAA,WAAA,GAAA,KAAA;AAAA,MAC5B,gBAAA,EAAkB,CAAC,CAAA,EAAG,CAAC,CAAA;AAAA,MACvB,gBAAkB,EAAA,KAAA;AAAA,MAClB,MAAA,EAAQ,CAAC,iBAAA,EAAmB,iBAAiB,CAAA;AAAA,MAC7C,IAAM,EAAA,iBAAA;AAAA,MACN,SAAW,EAAA,gBAAA;AAAA,MACX,eAAA,EAAiB,CAAqB,kBAAA,EAAA,KAAA,CAAM,KAAM,CAAA,GAAA,CAAA,CAAA;AAAA,MAClD,eAAgB,EAAA,mBAAA;AAAA,MAEhB,MAAA;AAAA,MACA,YAAY,KAAM,CAAA,UAAA;AAAA,MAClB,cAAc,KAAM,CAAA,YAAA;AAAA,MACpB,gBAAgB,KAAM,CAAA,cAAA;AAAA,MACtB,SAAW,EAAA,KAAA;AAAA,MACX,YAAA,sCAAe,YAAa,EAAA,IAAA,CAAA;AAAA,KAAA,EAE3B,MAAO,CAAA,GAAA,CAAI,CAAC,QAAA,EAAU,0BACpB,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,MACC,KAAK,QAAS,CAAA,CAAA;AAAA,MACd,IAAM,EAAA,KAAA;AAAA,MACN,UAAY,EAAA,QAAA;AAAA,MACZ,KAAA;AAAA,MACA,MAAA;AAAA,MACA,YAAY,MAAO,CAAA,MAAA;AAAA,KACrB,CACD,CACH,CACF,CAAA,CAAA;AAAA,GAGN,CAAA,CAAA;AAEJ,CAAA;AAUA,MAAM,eAAkB,GAAA,KAAA,CAAM,UAAiD,CAAA,CAAC,OAAO,GAAQ,KAAA;AAvF/F,EAAA,IAAA,EAAA,CAAA;AAwFE,EAAwG,MAAA,EAAA,GAAA,KAAA,EAAhG,QAAM,UAAY,EAAA,KAAA,EAAO,YAAY,MAAQ,EAAA,KAAA,EAAO,MAAQ,EAAA,QAAA,EAAU,QAxFhF,EAAA,GAwF0G,IAAb,QAAa,GAAA,SAAA,CAAA,EAAA,EAAb,CAAnF,MAAM,EAAA,YAAA,EAAY,SAAO,YAAY,EAAA,QAAA,EAAQ,OAAO,EAAA,QAAA,EAAQ,UAAU,EAAA,UAAA,CAAA,CAAA,CAAA;AAC9E,EAAA,MAAM,UAAa,GAAA,IAAA,CAAK,mBAAoB,CAAA,UAAA,CAAW,CAAC,CAAA,CAAA;AACxD,EAAM,MAAA,SAAA,GAAA,CAAY,gBAAW,YAAX,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,UAAA,CAAA,CAAA;AAClB,EAAA,MAAM,QAAQ,SAAU,EAAA,CAAA;AAExB,EAAM,MAAA,YAAA,GAAe,OAAO,CAAC,CAAA,CAAA;AAC7B,EAAM,MAAA,CAAC,GAAG,WAAW,CAAA,GAAI,WAAW,CAAC,CAAA,KAAM,CAAI,GAAA,CAAA,EAAG,CAAC,CAAA,CAAA;AAEnD,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,YAAA,CAAa,OAAW,IAAA,CAAA,CAAA;AACxB,IAAY,WAAA,EAAA,CAAA;AAEZ,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,OAAW,IAAA,CAAA,CAAA;AACxB,MAAY,WAAA,EAAA,CAAA;AAAA,KACd,CAAA;AAAA,GACF,EAAG,CAAC,WAAW,CAAC,CAAA,CAAA;AAEhB,EAAM,MAAA,QAAA,GAAW,QAAQ,OAAO,EAAE,aAAgB,CAAA,EAAA,CAAC,WAAW,CAAC,CAAA,CAAA;AAC/D,EAAA,MAAM,YAAY,UAAa,GAAA,KAAA,CAAA;AAC/B,EAAM,MAAA,YAAA,mBAAgB,KAAA,CAAA,aAAA,CAAA,UAAA,CAAW,SAAX,EAAA;AAAA,IAAqB,KAAO,EAAA,UAAA;AAAA,IAAY,GAAA,EAAK,WAAW,KAAM,CAAA,GAAA;AAAA,GAAK,CAAA,CAAA;AACzF,EAAA,MAAM,uBAA0B,GAAA,iBAAA,mBAC7B,KAAA,CAAA,aAAA,CAAA,iBAAA,CAAkB,QAAlB,EAAA;AAAA,IAA2B,KAAO,EAAA,QAAA;AAAA,GAAA,EAAW,YAAa,CAE3D,GAAA,YAAA,CAAA;AAGF,EAAM,MAAA,QAAA,GAAW,iCACZ,KADY,CAAA,EAAA;AAAA,IAEf,QAAQ,YAAa,CAAA,OAAA,KAAY,CAAI,GAAA,SAAA,GAAY,MAAM,MAAO,CAAA,QAAA;AAAA,GAChE,CAAA,CAAA;AAEA,EAAA,IAAI,MAAQ,EAAA;AACV,IACE,uBAAA,KAAA,CAAA,aAAA,CAAC,6CACK,QADL,CAAA,EAAA;AAAA,MAEC,GAAA,EAAK,WAAW,KAAM,CAAA,GAAA;AAAA,MACtB,mBAAA,EAAmB,WAAW,KAAM,CAAA,GAAA;AAAA,MACpC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,KAAA,CAAM,SAAS,CAAA;AAAA,MACxC,KAAO,EAAA,QAAA;AAAA,MACP,GAAA;AAAA,KAAA,CAAA,EAEC,yBACA,QACH,CAAA,CAAA;AAAA,GAEJ;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,wCACK,QADL,CAAA,EAAA;AAAA,IAEC,GAAA;AAAA,IACA,GAAA,EAAK,WAAW,KAAM,CAAA,GAAA;AAAA,IACtB,mBAAA,EAAmB,WAAW,KAAM,CAAA,GAAA;AAAA,IACpC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,KAAA,CAAM,SAAS,CAAA;AAAA,IACxC,KAAO,EAAA,QAAA;AAAA,GAAA,CAAA,EAEN,yBACA,QACH,CAAA,CAAA;AAEJ,CAAC,CAAA,CAAA;AAED,eAAA,CAAgB,WAAc,GAAA,iBAAA,CAAA;AAE9B,SAAS,qBAAqB,QAA+B,EAAA;AAC3D,EAAA,IACE,QAAS,CAAA,IAAA;AAAA,IACP,CAAC,CACC,KAAA,CAAA,CAAE,KAAM,CAAA,MAAA,KAAW,UACnB,CAAE,CAAA,KAAA,CAAM,KAAU,KAAA,KAAA,CAAA,IAClB,EAAE,KAAM,CAAA,CAAA,KAAM,KACd,CAAA,IAAA,CAAA,CAAE,MAAM,CAAM,KAAA,KAAA,CAAA;AAAA,GAElB,EAAA;AACA,IAAM,MAAA,IAAI,MAAM,yCAAyC,CAAA,CAAA;AAAA,GAC3D;AACF,CAAA;AAMA,MAAM,YAAe,GAAA,KAAA,CAAM,UAA8C,CAAA,CAAC,IAA6B,GAAQ,KAAA;AAArC,EAAA,IAAA,EAAA,GAAA,EAAA,CAAA,CAAiB,QAAA,GAAA,SAAA,CAAjB,IAAiB,CAAf,YAAA,CAAA,EAAA;AAC1E,EAAM,MAAA,cAAA,GAAiB,WAAW,qBAAqB,CAAA,CAAA;AAEvD,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IAAI,GAAA;AAAA,GAAA,EAAc,QAAlB,CAAA,EAAA;AAAA,IAA4B,WAAW,CAAG,EAAA,cAAA,CAAA,oBAAA,CAAA;AAAA,GAAA,CAAA,kBACxC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,KAAM,EAAA,MAAA;AAAA,IAAO,MAAO,EAAA,KAAA;AAAA,IAAM,OAAQ,EAAA,WAAA;AAAA,IAAY,IAAK,EAAA,MAAA;AAAA,IAAO,KAAM,EAAA,4BAAA;AAAA,GAAA,kBAClE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACC,CAAE,EAAA,wBAAA;AAAA,IACF,MAAO,EAAA,cAAA;AAAA,IACP,WAAY,EAAA,GAAA;AAAA,IACZ,aAAc,EAAA,OAAA;AAAA,IACd,cAAe,EAAA,OAAA;AAAA,GACjB,CACF,CACF,CAAA,CAAA;AAEJ,CAAC,CAAA,CAAA;AAED,YAAA,CAAa,WAAc,GAAA,cAAA,CAAA;AAE3B,SAAS,sBAAsB,KAAsB,EAAA;AACnD,EAAA,OAAO,GAAI,CAAA;AAAA,IACT,QAAU,EAAA,UAAA;AAAA,IACV,MAAQ,EAAA,CAAA;AAAA,IACR,KAAO,EAAA,CAAA;AAAA,IACP,MAAQ,EAAA,GAAA;AAAA,IACR,SAAS,KAAM,CAAA,OAAA,CAAQ,GAAK,EAAA,CAAA,EAAG,GAAG,GAAG,CAAA;AAAA,IACrC,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,MAAA;AAAA,IAC3B,MAAQ,EAAA,WAAA;AAAA,IACR,SAAW,EAAA;AAAA,MACT,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,IAAA;AAAA,KAC3B;AAAA,IACA,GAAK,EAAA;AAAA,MACH,OAAS,EAAA,OAAA;AAAA,KACX;AAAA,IACA,yBAA2B,EAAA;AAAA,MACzB,OAAS,EAAA,MAAA;AAAA,KACX;AAAA,GACD,CAAA,CAAA;AACH;;;;"}

package/dist/esm/index.js

@@ -54,6 +54,7 @@ export { SceneRefreshPicker } from './components/SceneRefreshPicker.js';
 export { SceneTimeRangeTransformerBase } from './core/SceneTimeRangeTransformerBase.js';
 export { SceneTimeRangeCompare } from './components/SceneTimeRangeCompare.js';
 export { SceneByFrameRepeater } from './components/SceneByFrameRepeater.js';
+export { SceneByVariableRepeater } from './components/SceneByVariableRepeater.js';
 export { SceneControlsSpacer } from './components/SceneControlsSpacer.js';
 export { SceneFlexItem, SceneFlexLayout } from './components/layout/SceneFlexLayout.js';
 export { SceneCSSGridItem, SceneCSSGridLayout } from './components/layout/CSSGrid/SceneCSSGridLayout.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import { getUrlWithAppState } from './components/SceneApp/utils';\nimport { registerRuntimePanelPlugin } from './components/VizPanel/registerRuntimePanelPlugin';\nimport { cloneSceneObjectState } from './core/sceneGraph/utils';\nimport { registerRuntimeDataSource } from './querying/RuntimeDataSource';\nimport { getUrlState, syncStateFromSearchParams } from './services/utils';\nimport { registerVariableMacro } from './variables/macros';\nimport { renderPrometheusLabelFilters } from './variables/utils';\nimport {\n  isAdHocVariable,\n  isQueryVariable,\n  isTextBoxVariable,\n  isCustomVariable,\n  isDataSourceVariable,\n  isConstantVariable,\n  isIntervalVariable,\n} from './variables/variants/guards';\n\nexport * from './core/types';\nexport * from './core/events';\nexport { sceneGraph } from './core/sceneGraph';\nexport * as behaviors from './behaviors';\nexport * as dataLayers from './querying/layers';\n\nexport { SceneObjectBase } from './core/SceneObjectBase';\nexport { SceneDataNode } from './core/SceneDataNode';\nexport { SceneTimeRange } from './core/SceneTimeRange';\nexport { SceneTimeZoneOverride } from './core/SceneTimeZoneOverride';\n\nexport { SceneQueryRunner, type QueryRunnerState } from './querying/SceneQueryRunner';\nexport { SceneDataLayers } from './querying/SceneDataLayers';\nexport { SceneDataLayerBase } from './querying/layers/SceneDataLayerBase';\nexport { SceneDataLayerControls } from './querying/layers/SceneDataLayerControls';\nexport { SceneDataTransformer } from './querying/SceneDataTransformer';\nexport { registerQueryWithController } from './querying/registerQueryWithController';\nexport { registerRuntimeDataSource, RuntimeDataSource } from './querying/RuntimeDataSource';\nexport type {\n  SceneQueryControllerLike,\n  SceneQueryControllerEntryType,\n  SceneQueryControllerEntry,\n} from './behaviors/SceneQueryController';\n\nexport * from './variables/types';\nexport { VariableDependencyConfig } from './variables/VariableDependencyConfig';\nexport { formatRegistry, type FormatVariable } from './variables/interpolation/formatRegistry';\nexport { VariableValueSelectors } from './variables/components/VariableValueSelectors';\nexport { SceneVariableSet } from './variables/sets/SceneVariableSet';\nexport { ConstantVariable } from './variables/variants/ConstantVariable';\nexport { CustomVariable } from './variables/variants/CustomVariable';\nexport { DataSourceVariable } from './variables/variants/DataSourceVariable';\nexport { QueryVariable } from './variables/variants/query/QueryVariable';\nexport { TestVariable } from './variables/variants/TestVariable';\nexport { TextBoxVariable } from './variables/variants/TextBoxVariable';\nexport { MultiValueVariable } from './variables/variants/MultiValueVariable';\nexport { LocalValueVariable } from './variables/variants/LocalValueVariable';\nexport { IntervalVariable } from './variables/variants/IntervalVariable';\nexport { AdHocFilterSet } from './variables/adhoc/AdHocFiltersSet';\nexport { AdHocFiltersVariable } from './variables/adhoc/AdHocFiltersVariable';\nexport { GroupByVariable } from './variables/groupby/GroupByVariable';\nexport { type MacroVariableConstructor } from './variables/macros/types';\n\nexport { type UrlSyncManagerLike, UrlSyncManager, getUrlSyncManager } from './services/UrlSyncManager';\nexport { SceneObjectUrlSyncConfig } from './services/SceneObjectUrlSyncConfig';\n\nexport { EmbeddedScene, type EmbeddedSceneState } from './components/EmbeddedScene';\nexport { VizPanel, type VizPanelState } from './components/VizPanel/VizPanel';\nexport { VizPanelMenu } from './components/VizPanel/VizPanelMenu';\nexport { NestedScene } from './components/NestedScene';\nexport { SceneCanvasText } from './components/SceneCanvasText';\nexport { SceneToolbarButton, SceneToolbarInput } from './components/SceneToolbarButton';\nexport { SceneTimePicker } from './components/SceneTimePicker';\nexport { SceneRefreshPicker } from './components/SceneRefreshPicker';\nexport { SceneTimeRangeTransformerBase } from './core/SceneTimeRangeTransformerBase';\nexport { SceneTimeRangeCompare } from './components/SceneTimeRangeCompare';\nexport { SceneByFrameRepeater } from './components/SceneByFrameRepeater';\nexport { SceneControlsSpacer } from './components/SceneControlsSpacer';\nexport {\n  SceneFlexLayout,\n  SceneFlexItem,\n  type SceneFlexItemState,\n  type SceneFlexItemLike,\n} from './components/layout/SceneFlexLayout';\nexport { SceneCSSGridLayout, SceneCSSGridItem } from './components/layout/CSSGrid/SceneCSSGridLayout';\nexport { SceneGridLayout } from './components/layout/grid/SceneGridLayout';\nexport { SceneGridItem } from './components/layout/grid/SceneGridItem';\nexport { SceneGridRow } from './components/layout/grid/SceneGridRow';\nexport { type SceneGridItemStateLike, type SceneGridItemLike } from './components/layout/grid/types';\nexport { SplitLayout } from './components/layout/split/SplitLayout';\nexport {\n  type SceneAppPageLike,\n  type SceneRouteMatch,\n  type SceneAppPageState,\n  type SceneAppDrilldownView,\n  type SceneAppRoute,\n} from './components/SceneApp/types';\nexport { SceneApp, useSceneApp } from './components/SceneApp/SceneApp';\nexport { SceneAppPage } from './components/SceneApp/SceneAppPage';\nexport { SceneReactObject } from './components/SceneReactObject';\nexport { SceneObjectRef } from './core/SceneObjectRef';\nexport { PanelBuilders, PanelOptionsBuilders, FieldConfigBuilders } from './core/PanelBuilders';\nexport { VizPanelBuilder } from './core/PanelBuilders/VizPanelBuilder';\nexport { SceneDebugger } from './components/SceneDebugger/SceneDebugger';\n\nexport const sceneUtils = {\n  getUrlWithAppState,\n  registerRuntimePanelPlugin,\n  registerRuntimeDataSource,\n  registerVariableMacro,\n  cloneSceneObjectState,\n  syncStateFromSearchParams,\n  getUrlState,\n  renderPrometheusLabelFilters,\n\n  // Variable guards\n  isAdHocVariable,\n  isConstantVariable,\n  isCustomVariable,\n  isDataSourceVariable,\n  isIntervalVariable,\n  isQueryVariable,\n  isTextBoxVariable,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsGO,MAAM,UAAa,GAAA;AAAA,EACxB,kBAAA;AAAA,EACA,0BAAA;AAAA,EACA,yBAAA;AAAA,EACA,qBAAA;AAAA,EACA,qBAAA;AAAA,EACA,yBAAA;AAAA,EACA,WAAA;AAAA,EACA,4BAAA;AAAA,EAGA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,gBAAA;AAAA,EACA,oBAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,iBAAA;AACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import { getUrlWithAppState } from './components/SceneApp/utils';\nimport { registerRuntimePanelPlugin } from './components/VizPanel/registerRuntimePanelPlugin';\nimport { cloneSceneObjectState } from './core/sceneGraph/utils';\nimport { registerRuntimeDataSource } from './querying/RuntimeDataSource';\nimport { getUrlState, syncStateFromSearchParams } from './services/utils';\nimport { registerVariableMacro } from './variables/macros';\nimport { renderPrometheusLabelFilters } from './variables/utils';\nimport {\n  isAdHocVariable,\n  isQueryVariable,\n  isTextBoxVariable,\n  isCustomVariable,\n  isDataSourceVariable,\n  isConstantVariable,\n  isIntervalVariable,\n} from './variables/variants/guards';\n\nexport * from './core/types';\nexport * from './core/events';\nexport { sceneGraph } from './core/sceneGraph';\nexport * as behaviors from './behaviors';\nexport * as dataLayers from './querying/layers';\n\nexport { SceneObjectBase } from './core/SceneObjectBase';\nexport { SceneDataNode } from './core/SceneDataNode';\nexport { SceneTimeRange } from './core/SceneTimeRange';\nexport { SceneTimeZoneOverride } from './core/SceneTimeZoneOverride';\n\nexport { SceneQueryRunner, type QueryRunnerState } from './querying/SceneQueryRunner';\nexport { SceneDataLayers } from './querying/SceneDataLayers';\nexport { SceneDataLayerBase } from './querying/layers/SceneDataLayerBase';\nexport { SceneDataLayerControls } from './querying/layers/SceneDataLayerControls';\nexport { SceneDataTransformer } from './querying/SceneDataTransformer';\nexport { registerQueryWithController } from './querying/registerQueryWithController';\nexport { registerRuntimeDataSource, RuntimeDataSource } from './querying/RuntimeDataSource';\nexport type {\n  SceneQueryControllerLike,\n  SceneQueryControllerEntryType,\n  SceneQueryControllerEntry,\n} from './behaviors/SceneQueryController';\n\nexport * from './variables/types';\nexport { VariableDependencyConfig } from './variables/VariableDependencyConfig';\nexport { formatRegistry, type FormatVariable } from './variables/interpolation/formatRegistry';\nexport { VariableValueSelectors } from './variables/components/VariableValueSelectors';\nexport { SceneVariableSet } from './variables/sets/SceneVariableSet';\nexport { ConstantVariable } from './variables/variants/ConstantVariable';\nexport { CustomVariable } from './variables/variants/CustomVariable';\nexport { DataSourceVariable } from './variables/variants/DataSourceVariable';\nexport { QueryVariable } from './variables/variants/query/QueryVariable';\nexport { TestVariable } from './variables/variants/TestVariable';\nexport { TextBoxVariable } from './variables/variants/TextBoxVariable';\nexport { MultiValueVariable } from './variables/variants/MultiValueVariable';\nexport { LocalValueVariable } from './variables/variants/LocalValueVariable';\nexport { IntervalVariable } from './variables/variants/IntervalVariable';\nexport { AdHocFilterSet } from './variables/adhoc/AdHocFiltersSet';\nexport { AdHocFiltersVariable } from './variables/adhoc/AdHocFiltersVariable';\nexport { GroupByVariable } from './variables/groupby/GroupByVariable';\nexport { type MacroVariableConstructor } from './variables/macros/types';\n\nexport { type UrlSyncManagerLike, UrlSyncManager, getUrlSyncManager } from './services/UrlSyncManager';\nexport { SceneObjectUrlSyncConfig } from './services/SceneObjectUrlSyncConfig';\n\nexport { EmbeddedScene, type EmbeddedSceneState } from './components/EmbeddedScene';\nexport { VizPanel, type VizPanelState } from './components/VizPanel/VizPanel';\nexport { VizPanelMenu } from './components/VizPanel/VizPanelMenu';\nexport { NestedScene } from './components/NestedScene';\nexport { SceneCanvasText } from './components/SceneCanvasText';\nexport { SceneToolbarButton, SceneToolbarInput } from './components/SceneToolbarButton';\nexport { SceneTimePicker } from './components/SceneTimePicker';\nexport { SceneRefreshPicker } from './components/SceneRefreshPicker';\nexport { SceneTimeRangeTransformerBase } from './core/SceneTimeRangeTransformerBase';\nexport { SceneTimeRangeCompare } from './components/SceneTimeRangeCompare';\nexport { SceneByFrameRepeater } from './components/SceneByFrameRepeater';\nexport { SceneByVariableRepeater } from './components/SceneByVariableRepeater';\nexport { SceneControlsSpacer } from './components/SceneControlsSpacer';\nexport {\n  SceneFlexLayout,\n  SceneFlexItem,\n  type SceneFlexItemState,\n  type SceneFlexItemLike,\n} from './components/layout/SceneFlexLayout';\nexport { SceneCSSGridLayout, SceneCSSGridItem } from './components/layout/CSSGrid/SceneCSSGridLayout';\nexport { SceneGridLayout } from './components/layout/grid/SceneGridLayout';\nexport { SceneGridItem } from './components/layout/grid/SceneGridItem';\nexport { SceneGridRow } from './components/layout/grid/SceneGridRow';\nexport { type SceneGridItemStateLike, type SceneGridItemLike } from './components/layout/grid/types';\nexport { SplitLayout } from './components/layout/split/SplitLayout';\nexport {\n  type SceneAppPageLike,\n  type SceneRouteMatch,\n  type SceneAppPageState,\n  type SceneAppDrilldownView,\n  type SceneAppRoute,\n} from './components/SceneApp/types';\nexport { SceneApp, useSceneApp } from './components/SceneApp/SceneApp';\nexport { SceneAppPage } from './components/SceneApp/SceneAppPage';\nexport { SceneReactObject } from './components/SceneReactObject';\nexport { SceneObjectRef } from './core/SceneObjectRef';\nexport { PanelBuilders, PanelOptionsBuilders, FieldConfigBuilders } from './core/PanelBuilders';\nexport { VizPanelBuilder } from './core/PanelBuilders/VizPanelBuilder';\nexport { SceneDebugger } from './components/SceneDebugger/SceneDebugger';\n\nexport const sceneUtils = {\n  getUrlWithAppState,\n  registerRuntimePanelPlugin,\n  registerRuntimeDataSource,\n  registerVariableMacro,\n  cloneSceneObjectState,\n  syncStateFromSearchParams,\n  getUrlState,\n  renderPrometheusLabelFilters,\n\n  // Variable guards\n  isAdHocVariable,\n  isConstantVariable,\n  isCustomVariable,\n  isDataSourceVariable,\n  isIntervalVariable,\n  isQueryVariable,\n  isTextBoxVariable,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuGO,MAAM,UAAa,GAAA;AAAA,EACxB,kBAAA;AAAA,EACA,0BAAA;AAAA,EACA,yBAAA;AAAA,EACA,qBAAA;AAAA,EACA,qBAAA;AAAA,EACA,yBAAA;AAAA,EACA,WAAA;AAAA,EACA,4BAAA;AAAA,EAGA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,gBAAA;AAAA,EACA,oBAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,iBAAA;AACF;;;;"}

package/dist/index.d.ts

@@ -1672,6 +1672,18 @@ declare class SceneByFrameRepeater extends SceneObjectBase<SceneByFrameRepeaterS
     static Component: ({ model }: SceneComponentProps<SceneByFrameRepeater>) => JSX.Element;
 }
 
+interface SceneByVariableRepeaterState extends SceneObjectState {
+    body: SceneLayout;
+    variableName: string;
+    getLayoutChild(option: VariableValueOption): SceneObject;
+}
+declare class SceneByVariableRepeater extends SceneObjectBase<SceneByVariableRepeaterState> {
+    protected _variableDependency: VariableDependencyConfig<SceneByVariableRepeaterState>;
+    constructor(state: SceneByVariableRepeaterState);
+    private performRepeat;
+    static Component: ({ model }: SceneComponentProps<SceneByVariableRepeater>) => JSX.Element;
+}
+
 declare class SceneControlsSpacer extends SceneObjectBase {
     constructor();
     get Component(): (_props: SceneComponentProps<SceneControlsSpacer>) => JSX.Element;
@@ -2356,4 +2368,4 @@ declare const sceneUtils: {
     isTextBoxVariable: typeof isTextBoxVariable;
 };
 
-export { AdHocFilterSet, AdHocFiltersVariable, CancelActivationHandler, ConstantVariable, ControlsLayout, CustomFormatterVariable, CustomTransformOperator, CustomVariable, CustomVariableValue, DataLayerFilter, DataRequestEnricher, DataSourceVariable, DeepPartial, EmbeddedScene, EmbeddedSceneState, FieldConfigBuilders, FormatVariable, GroupByVariable, InterpolationFormatParameter, IntervalVariable, LocalValueVariable, MacroVariableConstructor, MultiValueVariable, NestedScene, PanelBuilders, PanelOptionsBuilders, QueryRunnerState, QueryVariable, RuntimeDataSource, SceneActivationHandler, SceneApp, SceneAppDrilldownView, SceneAppPage, SceneAppPageLike, SceneAppPageState, SceneAppRoute, SceneByFrameRepeater, SceneCSSGridItem, SceneCSSGridLayout, SceneCanvasText, SceneComponent, SceneComponentProps, SceneControlsSpacer, SceneDataLayerBase, SceneDataLayerControls, SceneDataLayerProvider, SceneDataLayerProviderResult, SceneDataLayerProviderState, SceneDataLayers, SceneDataNode, SceneDataProvider, SceneDataProviderResult, SceneDataProviderResultLike, 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, SceneRouteMatch, SceneStateChangedHandler, SceneStatelessBehavior, SceneTimePicker, SceneTimeRange, SceneTimeRangeCompare, SceneTimeRangeLike, SceneTimeRangeState, SceneTimeRangeTransformerBase, SceneTimeZoneOverride, SceneToolbarButton, SceneToolbarInput, SceneVariable, SceneVariableDependencyConfigLike, SceneVariableSet, SceneVariableSetState, SceneVariableState, SceneVariableValueChangedEvent, SceneVariables, SplitLayout, TestVariable, TextBoxVariable, UrlSyncManager, UrlSyncManagerLike, UserActionEvent, ValidateAndUpdateResult, VariableCustomFormatterFn, VariableDependencyConfig, VariableValue, VariableValueOption, VariableValueSelectors, VariableValueSingle, VizPanel, VizPanelBuilder, VizPanelMenu, VizPanelState, index$1 as behaviors, index as dataLayers, formatRegistry, getUrlSyncManager, isCustomVariableValue, isDataRequestEnricher, isSceneObject, registerQueryWithController, registerRuntimeDataSource, sceneGraph, sceneUtils, useSceneApp };
+export { AdHocFilterSet, AdHocFiltersVariable, CancelActivationHandler, ConstantVariable, ControlsLayout, CustomFormatterVariable, CustomTransformOperator, CustomVariable, CustomVariableValue, DataLayerFilter, DataRequestEnricher, DataSourceVariable, DeepPartial, EmbeddedScene, EmbeddedSceneState, FieldConfigBuilders, 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, SceneDataLayerProviderResult, SceneDataLayerProviderState, SceneDataLayers, SceneDataNode, SceneDataProvider, SceneDataProviderResult, SceneDataProviderResultLike, 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, SceneRouteMatch, SceneStateChangedHandler, SceneStatelessBehavior, SceneTimePicker, SceneTimeRange, SceneTimeRangeCompare, SceneTimeRangeLike, SceneTimeRangeState, SceneTimeRangeTransformerBase, SceneTimeZoneOverride, SceneToolbarButton, SceneToolbarInput, SceneVariable, SceneVariableDependencyConfigLike, SceneVariableSet, SceneVariableSetState, SceneVariableState, SceneVariableValueChangedEvent, SceneVariables, SplitLayout, TestVariable, TextBoxVariable, UrlSyncManager, UrlSyncManagerLike, UserActionEvent, ValidateAndUpdateResult, VariableCustomFormatterFn, VariableDependencyConfig, VariableValue, VariableValueOption, VariableValueSelectors, VariableValueSingle, VizPanel, VizPanelBuilder, VizPanelMenu, VizPanelState, index$1 as behaviors, index as dataLayers, formatRegistry, getUrlSyncManager, isCustomVariableValue, isDataRequestEnricher, isSceneObject, registerQueryWithController, registerRuntimeDataSource, sceneGraph, sceneUtils, useSceneApp };

package/dist/index.js

@@ -7460,7 +7460,8 @@ function SceneGridLayoutRenderer({ model }) {
       onDragStop: model.onDragStop,
       onResizeStop: model.onResizeStop,
       onLayoutChange: model.onLayoutChange,
-      isBounded: false
+      isBounded: false,
+      resizeHandle: /* @__PURE__ */ React__default["default"].createElement(ResizeHandle, null)
     }, layout.map((gridItem, index) => /* @__PURE__ */ React__default["default"].createElement(GridItemWrapper, {
       key: gridItem.i,
       grid: model,
@@ -7514,7 +7515,7 @@ const GridItemWrapper = React__default["default"].forwardRef((props, ref) => {
     "data-griditem-key": sceneChild.state.key,
     className: css.cx(className, props.className),
     style: newStyle
-  }), children, innerContentWithContext);
+  }), innerContentWithContext, children);
 });
 GridItemWrapper.displayName = "GridItemWrapper";
 function validateChildrenSize(children) {
@@ -7524,6 +7525,48 @@ function validateChildrenSize(children) {
     throw new Error("All children must have a size specified");
   }
 }
+const ResizeHandle = React__default["default"].forwardRef((_a, ref) => {
+  var _b = _a, divProps = __objRest(_b, ["handleAxis"]);
+  const customCssClass = ui.useStyles2(getResizeHandleStyles);
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$5(__spreadValues$8({
+    ref
+  }, divProps), {
+    className: `${customCssClass} scene-resize-handle`
+  }), /* @__PURE__ */ React__default["default"].createElement("svg", {
+    width: "16px",
+    height: "16x",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /* @__PURE__ */ React__default["default"].createElement("path", {
+    d: "M21 15L15 21M21 8L8 21",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+});
+ResizeHandle.displayName = "ResizeHandle";
+function getResizeHandleStyles(theme) {
+  return css.css({
+    position: "absolute",
+    bottom: 0,
+    right: 0,
+    zIndex: 999,
+    padding: theme.spacing(1.5, 0, 0, 1.5),
+    color: theme.colors.border.strong,
+    cursor: "se-resize",
+    "&:hover": {
+      color: theme.colors.text.link
+    },
+    svg: {
+      display: "block"
+    },
+    ".react-resizable-hide &": {
+      display: "none"
+    }
+  });
+}
 
 var __defProp$7 = Object.defineProperty;
 var __defProps$4 = Object.defineProperties;
@@ -8260,6 +8303,53 @@ SceneByFrameRepeater.Component = ({ model }) => {
   });
 };
 
+class SceneByVariableRepeater extends SceneObjectBase {
+  constructor(state) {
+    super(state);
+    this._variableDependency = new VariableDependencyConfig(
+      this,
+      {
+        variableNames: [this.state.variableName],
+        onVariableUpdateCompleted: () => this.performRepeat()
+      }
+    );
+    this.addActivationHandler(() => this.performRepeat());
+  }
+  performRepeat() {
+    if (this._variableDependency.hasDependencyInLoadingState()) {
+      return;
+    }
+    const variable = sceneGraph.lookupVariable(this.state.variableName, this);
+    if (!(variable instanceof MultiValueVariable)) {
+      console.error("SceneByVariableRepeater: variable is not a MultiValueVariable");
+      return;
+    }
+    const values = getMultiVariableValues(variable);
+    const newChildren = [];
+    for (const option of values) {
+      const layoutChild = this.state.getLayoutChild(option);
+      newChildren.push(layoutChild);
+    }
+    this.state.body.setState({ children: newChildren });
+  }
+}
+SceneByVariableRepeater.Component = ({ model }) => {
+  const { body } = model.useState();
+  return /* @__PURE__ */ React__default["default"].createElement(body.Component, {
+    model: body
+  });
+};
+function getMultiVariableValues(variable) {
+  const { value, text, options } = variable.state;
+  if (variable.hasAllValue()) {
+    return options;
+  }
+  if (Array.isArray(value) && Array.isArray(text)) {
+    return value.map((v, i) => ({ value: v, label: text[i] }));
+  }
+  return [{ value, label: text }];
+}
+
 const _SceneControlsSpacer = class extends SceneObjectBase {
   constructor() {
     super({});
@@ -10077,6 +10167,7 @@ exports.RuntimeDataSource = RuntimeDataSource;
 exports.SceneApp = SceneApp;
 exports.SceneAppPage = SceneAppPage;
 exports.SceneByFrameRepeater = SceneByFrameRepeater;
+exports.SceneByVariableRepeater = SceneByVariableRepeater;
 exports.SceneCSSGridItem = SceneCSSGridItem;
 exports.SceneCSSGridLayout = SceneCSSGridLayout;
 exports.SceneCanvasText = SceneCanvasText;