@grafana/scenes 0.0.32 → 0.2.0

package/CHANGELOG.md

@@ -1,47 +1,94 @@
-# v0.0.32 (Mon Mar 27 2023)
+# v0.2.0 (Wed Mar 29 2023)
+
+### Release Notes
+
+#### Layout: Create atomic, layout specific objects ([#97](https://github.com/grafana/scenes/pull/97))
+
+The interface of `SceneFlexLayout` and `SceneGridLayout` has changed. These scene objects now accept only dedicated layout item objects as children:
+- `SceneFlexItem` for `SceneFlexLayout`
+- `SceneGridItem` and `SceneGridRow` for `SceneGridLayout`
+
+`placement` property has been replaced by those layout-specific objects. 
+
+Example
+```tsx
+// BEFORE
+const layout = new SceneFlexLayout({
+  direction: 'column',
+  children: [
+    new VizPanel({
+      placement: {
+        width: '50%',
+        height: '400',
+     },
+     ...
+    })
+  ],
+  ...
+})
+
+
+// AFTER
+const layout = new SceneFlexLayout({
+  direction: 'column',
+  children: [ 
+    new SceneFlexItem({ 
+      width: '50%',
+      height: '400',
+      body: new VizPanel({ ... }),
+    }),
+  ],
+  ...
+})
+
+```
+
+---
+
+#### 🚀 Enhancement
+
+- Layout: Create atomic, layout specific objects [#97](https://github.com/grafana/scenes/pull/97) ([@dprokop](https://github.com/dprokop) [@torkelo](https://github.com/torkelo))
+- Interpolation: FormatRegistryID is now replaced by VariableFormatID from schema package [#112](https://github.com/grafana/scenes/pull/112) ([@ryantxu](https://github.com/ryantxu) [@torkelo](https://github.com/torkelo))
+
+#### Authors: 3
+
+- Dominik Prokop ([@dprokop](https://github.com/dprokop))
+- Ryan McKinley ([@ryantxu](https://github.com/ryantxu))
+- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))
+
+---
+
+# v0.1.0 (Mon Mar 27 2023)
+
+### Release Notes
+
+#### UrlSync: Simplify url sync interface ([#100](https://github.com/grafana/scenes/pull/100))
+
+The  SceneObjectUrlSyncHandler interface has changed. The function `getUrlState` no longer takes state as parameter. The implementation needs to use the current scene object state instead.
+
+---
+
+#### 🚀 Enhancement
+
+- UrlSync: Simplify url sync interface [#100](https://github.com/grafana/scenes/pull/100) ([@torkelo](https://github.com/torkelo))
 
 #### 🐛 Bug Fix
 
-- Enable auto [#107](https://github.com/grafana/scenes/pull/107) ([@torkelo](https://github.com/torkelo))
-- Fix type import [#104](https://github.com/grafana/scenes/pull/104) ([@torkelo](https://github.com/torkelo))
-- my bad ([@torkelo](https://github.com/torkelo))
-- Fix type import ([@torkelo](https://github.com/torkelo))
-- Macros: Share SkipFormattingValue value between AllUrlVariablesMacro and UrlTimeRangeMacro [#101](https://github.com/grafana/scenes/pull/101) ([@torkelo](https://github.com/torkelo))
-- Share skip formatting ([@torkelo](https://github.com/torkelo))
-- Scene: Support for new types of "macro" variables starting with __all_variables [#98](https://github.com/grafana/scenes/pull/98) ([@domasx2](https://github.com/domasx2) [@torkelo](https://github.com/torkelo))
-- Removed some old code ([@torkelo](https://github.com/torkelo))
-- Updates ([@torkelo](https://github.com/torkelo))
-- More refactoring ([@torkelo](https://github.com/torkelo))
-- Refactoring and added time range macro ([@torkelo](https://github.com/torkelo))
-- Refactoring ([@torkelo](https://github.com/torkelo))
-- fix ([@torkelo](https://github.com/torkelo))
-- Fixed ts issues ([@torkelo](https://github.com/torkelo))
-- Merge branch 'main' of github.com:grafana/scenes into scene-url-variables ([@torkelo](https://github.com/torkelo))
-- ScenesApp: Change to workspace dependency [#99](https://github.com/grafana/scenes/pull/99) ([@torkelo](https://github.com/torkelo))
-- UrlSyncManager: Improvements and fixes [#96](https://github.com/grafana/scenes/pull/96) ([@torkelo](https://github.com/torkelo))
-- remove unused arg ([@torkelo](https://github.com/torkelo))
-- Add skipUrlSync support ([@torkelo](https://github.com/torkelo))
-- Variables: Add support for macro variables like __all_variables ([@torkelo](https://github.com/torkelo))
-- Merge branch 'scene-interpolate-all-variables' into domas-interpolate-all-variables ([@torkelo](https://github.com/torkelo))
-- Simplify logic ([@torkelo](https://github.com/torkelo))
-- minor fix ([@torkelo](https://github.com/torkelo))
-- Made tests a bit clear on what scenario they where testing ([@torkelo](https://github.com/torkelo))
-- remove unnessary cleanup in EmbeddedScene ([@torkelo](https://github.com/torkelo))
-- UrlSyncManager: Improvements and fixes ([@torkelo](https://github.com/torkelo))
-- Update ([@torkelo](https://github.com/torkelo))
-- Changelog: Clean up auto crap [#94](https://github.com/grafana/scenes/pull/94) ([@torkelo](https://github.com/torkelo))
-- Fixing changelog ([@torkelo](https://github.com/torkelo))
-- test ([@torkelo](https://github.com/torkelo))
-- Yarn: Caching should work [#93](https://github.com/grafana/scenes/pull/93) ([@torkelo](https://github.com/torkelo))
-- interpolate all variables ([@domasx2](https://github.com/domasx2))
-
-#### Authors: 2
-
-- Domas ([@domasx2](https://github.com/domasx2))
+- Clean up changelog [#108](https://github.com/grafana/scenes/pull/108) ([@torkelo](https://github.com/torkelo))
+
+#### Authors: 1
+
 - Torkel Ödegaard ([@torkelo](https://github.com/torkelo))
 
 ---
 
+# v0.0.32 (Mon Mar 27 2023)
+
+- Scene: Support for new types of "macro" variables starting with \_\_all_variables [#98](https://github.com/grafana/scenes/pull/98) ([@domasx2](https://github.com/domasx2) [@torkelo](https://github.com/torkelo))
+- UrlSyncManager: Improvements and fixes [#96](https://github.com/grafana/scenes/pull/96) ([@torkelo](https://github.com/torkelo))
+
+* UrlSync: SceneObject that implement url sync \_urlSync property will now see a change to how updateFromUrl is called. It is now called with null values when url query parameters are removed. Before the UrlSyncManager would remember the initial state and pass that to updateFromUrl, but now if you want to preserve your current state or set to some initial state you have to handle that logic inside updateFromUrl.
+
 # v0.0.28 (Tue Mar 21 2023)
 
 - Removal of isEditing from SceneComponentProps (also $editor from SceneObjectState, and sceneGraph.getSceneEditor)

package/dist/esm/components/NestedScene.js

@@ -41,6 +41,11 @@ class NestedScene extends SceneObjectBase {
           children: parent.state.children.filter((x) => x !== this)
         });
       }
+      if (isSceneLayoutItem(parent)) {
+        parent.setState({
+          body: void 0
+        });
+      }
     };
   }
 }
@@ -113,6 +118,9 @@ const getStyles = (theme) => ({
     flexGrow: 1
   })
 });
+function isSceneLayoutItem(x) {
+  return "body" in x.state;
+}
 
 export { NestedScene, NestedSceneRenderer };
 //# sourceMappingURL=NestedScene.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NestedScene.js","sources":["../../../src/components/NestedScene.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Stack } from '@grafana/experimental';\nimport { Button, ToolbarButton, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { SceneObject, SceneLayoutChildState, SceneComponentProps, SceneLayout } from '../core/types';\n\ninterface NestedSceneState extends SceneLayoutChildState {\n  title: string;\n  isCollapsed?: boolean;\n  canCollapse?: boolean;\n  canRemove?: boolean;\n  body: SceneLayout;\n  actions?: SceneObject[];\n}\n\n/**\n * @internal\n * POC status, don't use this yet\n */\nexport class NestedScene extends SceneObjectBase<NestedSceneState> {\n  public static Component = NestedSceneRenderer;\n\n  public onToggle = () => {\n    this.setState({\n      isCollapsed: !this.state.isCollapsed,\n      placement: {\n        ...this.state.placement,\n        ySizing: this.state.isCollapsed ? 'fill' : 'content',\n      },\n    });\n  };\n\n  /** Removes itself from its parent's children array */\n  public onRemove = () => {\n    const parent = this.parent!;\n    if ('children' in parent.state) {\n      parent.setState({\n        children: parent.state.children.filter((x) => x !== this),\n      });\n    }\n  };\n}\n\nexport function NestedSceneRenderer({ model }: SceneComponentProps<NestedScene>) {\n  const { title, isCollapsed, canCollapse, canRemove, body, actions } = model.useState();\n  const styles = useStyles2(getStyles);\n\n  const toolbarActions = (actions ?? []).map((action) => <action.Component key={action.state.key} model={action} />);\n\n  if (canRemove) {\n    toolbarActions.push(\n      <ToolbarButton\n        icon=\"times\"\n        variant={'default'}\n        onClick={model.onRemove}\n        key=\"remove-button\"\n        aria-label=\"Remove scene\"\n      />\n    );\n  }\n\n  return (\n    <div className={styles.row}>\n      <div className={styles.rowHeader}>\n        <Stack gap={0}>\n          <div className={styles.title} role=\"heading\" aria-level={1}>\n            {title}\n          </div>\n          {canCollapse && (\n            <div className={styles.toggle}>\n              <Button\n                size=\"sm\"\n                icon={isCollapsed ? 'angle-down' : 'angle-up'}\n                fill=\"text\"\n                variant=\"secondary\"\n                aria-label={isCollapsed ? 'Expand scene' : 'Collapse scene'}\n                onClick={model.onToggle}\n              />\n            </div>\n          )}\n        </Stack>\n        <div className={styles.actions}>{toolbarActions}</div>\n      </div>\n      {!isCollapsed && <body.Component model={body} />}\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  row: css({\n    display: 'flex',\n    flexDirection: 'column',\n    flexGrow: 1,\n    gap: theme.spacing(1),\n    cursor: 'pointer',\n  }),\n  toggle: css({}),\n  title: css({\n    fontSize: theme.typography.h5.fontSize,\n  }),\n  rowHeader: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n  }),\n  actions: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n    justifyContent: 'flex-end',\n    flexGrow: 1,\n  }),\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"NestedScene.js","sources":["../../../src/components/NestedScene.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Stack } from '@grafana/experimental';\nimport { Button, ToolbarButton, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport {\n  SceneObject,\n  SceneLayoutChildState,\n  SceneComponentProps,\n  SceneLayout,\n  SceneLayoutItemState,\n} from '../core/types';\n\ninterface NestedSceneState extends SceneLayoutChildState {\n  title: string;\n  isCollapsed?: boolean;\n  canCollapse?: boolean;\n  canRemove?: boolean;\n  body: SceneLayout;\n  actions?: SceneObject[];\n}\n\n/**\n * @internal\n * POC status, don't use this yet\n */\nexport class NestedScene extends SceneObjectBase<NestedSceneState> {\n  public static Component = NestedSceneRenderer;\n\n  public onToggle = () => {\n    this.setState({\n      isCollapsed: !this.state.isCollapsed,\n      placement: {\n        ...this.state.placement,\n        ySizing: this.state.isCollapsed ? 'fill' : 'content',\n      },\n    });\n  };\n\n  /** Removes itself from its parent's children array */\n  public onRemove = () => {\n    const parent = this.parent!;\n    if ('children' in parent.state) {\n      parent.setState({\n        children: parent.state.children.filter((x) => x !== this),\n      });\n    }\n\n    if (isSceneLayoutItem(parent)) {\n      parent.setState({\n        body: undefined,\n      });\n    }\n  };\n}\n\nexport function NestedSceneRenderer({ model }: SceneComponentProps<NestedScene>) {\n  const { title, isCollapsed, canCollapse, canRemove, body, actions } = model.useState();\n  const styles = useStyles2(getStyles);\n\n  const toolbarActions = (actions ?? []).map((action) => <action.Component key={action.state.key} model={action} />);\n\n  if (canRemove) {\n    toolbarActions.push(\n      <ToolbarButton\n        icon=\"times\"\n        variant={'default'}\n        onClick={model.onRemove}\n        key=\"remove-button\"\n        aria-label=\"Remove scene\"\n      />\n    );\n  }\n\n  return (\n    <div className={styles.row}>\n      <div className={styles.rowHeader}>\n        <Stack gap={0}>\n          <div className={styles.title} role=\"heading\" aria-level={1}>\n            {title}\n          </div>\n          {canCollapse && (\n            <div className={styles.toggle}>\n              <Button\n                size=\"sm\"\n                icon={isCollapsed ? 'angle-down' : 'angle-up'}\n                fill=\"text\"\n                variant=\"secondary\"\n                aria-label={isCollapsed ? 'Expand scene' : 'Collapse scene'}\n                onClick={model.onToggle}\n              />\n            </div>\n          )}\n        </Stack>\n        <div className={styles.actions}>{toolbarActions}</div>\n      </div>\n      {!isCollapsed && <body.Component model={body} />}\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  row: css({\n    display: 'flex',\n    flexDirection: 'column',\n    flexGrow: 1,\n    gap: theme.spacing(1),\n    cursor: 'pointer',\n  }),\n  toggle: css({}),\n  title: css({\n    fontSize: theme.typography.h5.fontSize,\n  }),\n  rowHeader: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n  }),\n  actions: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n    justifyContent: 'flex-end',\n    flexGrow: 1,\n  }),\n});\n\nfunction isSceneLayoutItem(x: SceneObject): x is SceneObject<SceneLayoutItemState> {\n  return 'body' in x.state;\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6BO,MAAM,oBAAoB,eAAkC,CAAA;AAAA,EAA5D,WAAA,GAAA;AAAA,IAAA,KAAA,CAAA,GAAA,SAAA,CAAA,CAAA;AAGL,IAAA,IAAA,CAAO,WAAW,MAAM;AACtB,MAAA,IAAA,CAAK,QAAS,CAAA;AAAA,QACZ,WAAA,EAAa,CAAC,IAAA,CAAK,KAAM,CAAA,WAAA;AAAA,QACzB,SAAW,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACN,IAAK,CAAA,KAAA,CAAM,SADL,CAAA,EAAA;AAAA,UAET,OAAS,EAAA,IAAA,CAAK,KAAM,CAAA,WAAA,GAAc,MAAS,GAAA,SAAA;AAAA,SAC7C,CAAA;AAAA,OACD,CAAA,CAAA;AAAA,KACH,CAAA;AAGA,IAAA,IAAA,CAAO,WAAW,MAAM;AACtB,MAAA,MAAM,SAAS,IAAK,CAAA,MAAA,CAAA;AACpB,MAAI,IAAA,UAAA,IAAc,OAAO,KAAO,EAAA;AAC9B,QAAA,MAAA,CAAO,QAAS,CAAA;AAAA,UACd,QAAA,EAAU,OAAO,KAAM,CAAA,QAAA,CAAS,OAAO,CAAC,CAAA,KAAM,MAAM,IAAI,CAAA;AAAA,SACzD,CAAA,CAAA;AAAA,OACH;AAEA,MAAI,IAAA,iBAAA,CAAkB,MAAM,CAAG,EAAA;AAC7B,QAAA,MAAA,CAAO,QAAS,CAAA;AAAA,UACd,IAAM,EAAA,KAAA,CAAA;AAAA,SACP,CAAA,CAAA;AAAA,OACH;AAAA,KACF,CAAA;AAAA,GAAA;AACF,CAAA;AA5Ba,WAAA,CACG,SAAY,GAAA,mBAAA,CAAA;AA6BZ,SAAA,mBAAA,CAAoB,EAAE,KAAA,EAA2C,EAAA;AAC/E,EAAM,MAAA,EAAE,OAAO,WAAa,EAAA,WAAA,EAAa,WAAW,IAAM,EAAA,OAAA,EAAY,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AACrF,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA,CAAA;AAEnC,EAAM,MAAA,cAAA,GAAA,CAAkB,4BAAW,EAAC,EAAG,IAAI,CAAC,MAAA,qBAAY,KAAA,CAAA,aAAA,CAAA,MAAA,CAAO,SAAP,EAAA;AAAA,IAAiB,GAAA,EAAK,OAAO,KAAM,CAAA,GAAA;AAAA,IAAK,KAAO,EAAA,MAAA;AAAA,GAAQ,CAAE,CAAA,CAAA;AAEjH,EAAA,IAAI,SAAW,EAAA;AACb,IAAe,cAAA,CAAA,IAAA;AAAA,sBACZ,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,QACC,IAAK,EAAA,OAAA;AAAA,QACL,OAAS,EAAA,SAAA;AAAA,QACT,SAAS,KAAM,CAAA,QAAA;AAAA,QACf,GAAI,EAAA,eAAA;AAAA,QACJ,YAAW,EAAA,cAAA;AAAA,OACb,CAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,GAAA;AAAA,GAAA,kBACpB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,SAAA;AAAA,GAAA,kBACpB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAM,GAAK,EAAA,CAAA;AAAA,GAAA,kBACT,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,KAAA;AAAA,IAAO,IAAK,EAAA,SAAA;AAAA,IAAU,YAAY,EAAA,CAAA;AAAA,GACtD,EAAA,KACH,CACC,EAAA,WAAA,oBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,MAAA;AAAA,GAAA,kBACpB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACC,IAAK,EAAA,IAAA;AAAA,IACL,IAAA,EAAM,cAAc,YAAe,GAAA,UAAA;AAAA,IACnC,IAAK,EAAA,MAAA;AAAA,IACL,OAAQ,EAAA,WAAA;AAAA,IACR,YAAA,EAAY,cAAc,cAAiB,GAAA,gBAAA;AAAA,IAC3C,SAAS,KAAM,CAAA,QAAA;AAAA,GACjB,CACF,CAEJ,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,OAAA;AAAA,GAAA,EAAU,cAAe,CAClD,CAAA,EACC,CAAC,WAAe,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,SAAL,EAAA;AAAA,IAAe,KAAO,EAAA,IAAA;AAAA,GAAM,CAChD,CAAA,CAAA;AAEJ,CAAA;AAEA,MAAM,SAAA,GAAY,CAAC,KAA0B,MAAA;AAAA,EAC3C,KAAK,GAAI,CAAA;AAAA,IACP,OAAS,EAAA,MAAA;AAAA,IACT,aAAe,EAAA,QAAA;AAAA,IACf,QAAU,EAAA,CAAA;AAAA,IACV,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,MAAQ,EAAA,SAAA;AAAA,GACT,CAAA;AAAA,EACD,MAAA,EAAQ,GAAI,CAAA,EAAE,CAAA;AAAA,EACd,OAAO,GAAI,CAAA;AAAA,IACT,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,EAAG,CAAA,QAAA;AAAA,GAC/B,CAAA;AAAA,EACD,WAAW,GAAI,CAAA;AAAA,IACb,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,GACrB,CAAA;AAAA,EACD,SAAS,GAAI,CAAA;AAAA,IACX,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,cAAgB,EAAA,UAAA;AAAA,IAChB,QAAU,EAAA,CAAA;AAAA,GACX,CAAA;AACH,CAAA,CAAA,CAAA;AAEA,SAAS,kBAAkB,CAAwD,EAAA;AACjF,EAAA,OAAO,UAAU,CAAE,CAAA,KAAA,CAAA;AACrB;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"VizPanel.js","sources":["../../../../src/components/VizPanel/VizPanel.tsx"],"sourcesContent":["import {\n  AbsoluteTimeRange,\n  FieldConfigSource,\n  PanelModel,\n  PanelPlugin,\n  toUtc,\n  getPanelOptionsWithDefaults,\n  ScopedVars,\n  InterpolateFunction,\n} from '@grafana/data';\nimport { config, getPluginImportUtils } from '@grafana/runtime';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { DeepPartial, SceneLayoutChildState } from '../../core/types';\n\nimport { VizPanelRenderer } from './VizPanelRenderer';\nimport { VizPanelMenu } from './VizPanelMenu';\nimport { VariableDependencyConfig } from '../../variables/VariableDependencyConfig';\nimport { VariableCustomFormatterFn } from '../../variables/types';\n\nexport interface VizPanelState<TOptions = {}, TFieldConfig = {}> extends SceneLayoutChildState {\n  title: string;\n  description?: string;\n  pluginId: string;\n  options: DeepPartial<TOptions>;\n  fieldConfig: FieldConfigSource<DeepPartial<TFieldConfig>>;\n  pluginVersion?: string;\n  displayMode?: 'default' | 'transparent';\n  hoverHeader?: boolean;\n  menu?: VizPanelMenu;\n  // internal state\n  pluginLoadError?: string;\n}\n\nexport class VizPanel<TOptions = {}, TFieldConfig = {}> extends SceneObjectBase<VizPanelState<TOptions, TFieldConfig>> {\n  public static Component = VizPanelRenderer;\n\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['title', 'options', 'fieldConfig'],\n  });\n\n  // Not part of state as this is not serializable\n  private _plugin?: PanelPlugin;\n\n  public constructor(state: Partial<VizPanelState<TOptions, TFieldConfig>>) {\n    super({\n      options: {},\n      fieldConfig: { defaults: {}, overrides: [] },\n      title: 'Title',\n      pluginId: 'timeseries',\n      ...state,\n    });\n  }\n\n  public activate() {\n    super.activate();\n    const { getPanelPluginFromCache, importPanelPlugin } = getPluginImportUtils();\n    const plugin = getPanelPluginFromCache(this.state.pluginId);\n\n    if (plugin) {\n      this.pluginLoaded(plugin);\n    } else {\n      importPanelPlugin(this.state.pluginId)\n        .then((result) => this.pluginLoaded(result))\n        .catch((err: Error) => {\n          this.setState({ pluginLoadError: err.message });\n        });\n    }\n  }\n\n  private pluginLoaded(plugin: PanelPlugin) {\n    const { options, fieldConfig, title, pluginId, pluginVersion } = this.state;\n\n    const panel: PanelModel = { title, options, fieldConfig, id: 1, type: pluginId, pluginVersion: pluginVersion };\n    const currentVersion = this.getPluginVersion(plugin);\n\n    if (plugin.onPanelMigration) {\n      if (currentVersion !== this.state.pluginVersion) {\n        // These migration handlers also mutate panel.fieldConfig to migrate fieldConfig\n        panel.options = plugin.onPanelMigration(panel);\n      }\n    }\n\n    const withDefaults = getPanelOptionsWithDefaults({\n      plugin,\n      currentOptions: panel.options,\n      currentFieldConfig: panel.fieldConfig,\n      isAfterPluginChange: false,\n    });\n\n    this._plugin = plugin;\n\n    this.setState({\n      options: withDefaults.options,\n      fieldConfig: withDefaults.fieldConfig,\n      pluginVersion: currentVersion,\n    });\n  }\n\n  private getPluginVersion(plugin: PanelPlugin): string {\n    return plugin && plugin.meta.info.version ? plugin.meta.info.version : config.buildInfo.version;\n  }\n\n  public getPlugin(): PanelPlugin | undefined {\n    return this._plugin;\n  }\n\n  public onChangeTimeRange = (timeRange: AbsoluteTimeRange) => {\n    const sceneTimeRange = sceneGraph.getTimeRange(this);\n    sceneTimeRange.onTimeRangeChange({\n      raw: {\n        from: toUtc(timeRange.from),\n        to: toUtc(timeRange.to),\n      },\n      from: toUtc(timeRange.from),\n      to: toUtc(timeRange.to),\n    });\n  };\n\n  public onOptionsChange = (options: TOptions) => {\n    this.setState({ options });\n  };\n\n  public onFieldConfigChange = (fieldConfig: FieldConfigSource<TFieldConfig>) => {\n    this.setState({ fieldConfig });\n  };\n\n  public interpolate = ((value: string, scoped?: ScopedVars, format?: string | VariableCustomFormatterFn) => {\n    return sceneGraph.interpolate(this, value, scoped, format);\n  }) as InterpolateFunction;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"VizPanel.js","sources":["../../../../src/components/VizPanel/VizPanel.tsx"],"sourcesContent":["import {\n  AbsoluteTimeRange,\n  FieldConfigSource,\n  PanelModel,\n  PanelPlugin,\n  toUtc,\n  getPanelOptionsWithDefaults,\n  ScopedVars,\n  InterpolateFunction,\n} from '@grafana/data';\nimport { config, getPluginImportUtils } from '@grafana/runtime';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { DeepPartial, SceneObjectStatePlain } from '../../core/types';\n\nimport { VizPanelRenderer } from './VizPanelRenderer';\nimport { VizPanelMenu } from './VizPanelMenu';\nimport { VariableDependencyConfig } from '../../variables/VariableDependencyConfig';\nimport { VariableCustomFormatterFn } from '../../variables/types';\n\nexport interface VizPanelState<TOptions = {}, TFieldConfig = {}> extends SceneObjectStatePlain {\n  title: string;\n  description?: string;\n  pluginId: string;\n  options: DeepPartial<TOptions>;\n  fieldConfig: FieldConfigSource<DeepPartial<TFieldConfig>>;\n  pluginVersion?: string;\n  displayMode?: 'default' | 'transparent';\n  hoverHeader?: boolean;\n  menu?: VizPanelMenu;\n  // internal state\n  pluginLoadError?: string;\n  isDraggable?: boolean;\n  isResizable?: boolean;\n}\n\nexport class VizPanel<TOptions = {}, TFieldConfig = {}> extends SceneObjectBase<VizPanelState<TOptions, TFieldConfig>> {\n  public static Component = VizPanelRenderer;\n\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['title', 'options', 'fieldConfig'],\n  });\n\n  // Not part of state as this is not serializable\n  private _plugin?: PanelPlugin;\n\n  public constructor(state: Partial<VizPanelState<TOptions, TFieldConfig>>) {\n    super({\n      options: {},\n      fieldConfig: { defaults: {}, overrides: [] },\n      title: 'Title',\n      pluginId: 'timeseries',\n      ...state,\n    });\n  }\n\n  public activate() {\n    super.activate();\n    const { getPanelPluginFromCache, importPanelPlugin } = getPluginImportUtils();\n    const plugin = getPanelPluginFromCache(this.state.pluginId);\n\n    if (plugin) {\n      this.pluginLoaded(plugin);\n    } else {\n      importPanelPlugin(this.state.pluginId)\n        .then((result) => this.pluginLoaded(result))\n        .catch((err: Error) => {\n          this.setState({ pluginLoadError: err.message });\n        });\n    }\n  }\n\n  private pluginLoaded(plugin: PanelPlugin) {\n    const { options, fieldConfig, title, pluginId, pluginVersion } = this.state;\n\n    const panel: PanelModel = { title, options, fieldConfig, id: 1, type: pluginId, pluginVersion: pluginVersion };\n    const currentVersion = this.getPluginVersion(plugin);\n\n    if (plugin.onPanelMigration) {\n      if (currentVersion !== this.state.pluginVersion) {\n        // These migration handlers also mutate panel.fieldConfig to migrate fieldConfig\n        panel.options = plugin.onPanelMigration(panel);\n      }\n    }\n\n    const withDefaults = getPanelOptionsWithDefaults({\n      plugin,\n      currentOptions: panel.options,\n      currentFieldConfig: panel.fieldConfig,\n      isAfterPluginChange: false,\n    });\n\n    this._plugin = plugin;\n\n    this.setState({\n      options: withDefaults.options,\n      fieldConfig: withDefaults.fieldConfig,\n      pluginVersion: currentVersion,\n    });\n  }\n\n  private getPluginVersion(plugin: PanelPlugin): string {\n    return plugin && plugin.meta.info.version ? plugin.meta.info.version : config.buildInfo.version;\n  }\n\n  public getPlugin(): PanelPlugin | undefined {\n    return this._plugin;\n  }\n\n  public onChangeTimeRange = (timeRange: AbsoluteTimeRange) => {\n    const sceneTimeRange = sceneGraph.getTimeRange(this);\n    sceneTimeRange.onTimeRangeChange({\n      raw: {\n        from: toUtc(timeRange.from),\n        to: toUtc(timeRange.to),\n      },\n      from: toUtc(timeRange.from),\n      to: toUtc(timeRange.to),\n    });\n  };\n\n  public onOptionsChange = (options: TOptions) => {\n    this.setState({ options });\n  };\n\n  public onFieldConfigChange = (fieldConfig: FieldConfigSource<TFieldConfig>) => {\n    this.setState({ fieldConfig });\n  };\n\n  public interpolate = ((value: string, scoped?: ScopedVars, format?: string | VariableCustomFormatterFn) => {\n    return sceneGraph.interpolate(this, value, scoped, format);\n  }) as InterpolateFunction;\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/VizPanel/VizPanelRenderer.js

@@ -5,10 +5,25 @@ import { getAppEvents } from '@grafana/runtime';
 import { useTheme2, PanelChrome, ErrorBoundaryAlert } from '@grafana/ui';
 import { sceneGraph } from '../../core/sceneGraph.js';
 
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 function VizPanelRenderer({ model }) {
-  var _a;
+  var _b;
   const theme = useTheme2();
-  const {
+  const _a = model.useState(), {
     title,
     description,
     options,
@@ -16,15 +31,25 @@ function VizPanelRenderer({ model }) {
     pluginId,
     pluginLoadError,
     $data,
-    placement,
     displayMode,
     hoverHeader,
     menu
-  } = model.useState();
+  } = _a, state = __objRest(_a, [
+    "title",
+    "description",
+    "options",
+    "fieldConfig",
+    "pluginId",
+    "pluginLoadError",
+    "$data",
+    "displayMode",
+    "hoverHeader",
+    "menu"
+  ]);
   const [ref, { width, height }] = useMeasure();
   const plugin = model.getPlugin();
   const parentLayout = sceneGraph.getLayout(model);
-  const isDraggable = parentLayout.isDraggable() && ((_a = placement == null ? void 0 : placement.isDraggable) != null ? _a : true);
+  const isDraggable = parentLayout.isDraggable() && ((_b = state.isDraggable) != null ? _b : true);
   const dragClass = isDraggable && parentLayout.getDragClass ? parentLayout.getDragClass() : "";
   const dragClassCancel = isDraggable && parentLayout.getDragClassCancel ? parentLayout.getDragClassCancel() : "";
   const titleInterpolated = model.interpolate(title, void 0, "text");

package/dist/esm/components/VizPanel/VizPanelRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"VizPanelRenderer.js","sources":["../../../../src/components/VizPanel/VizPanelRenderer.tsx"],"sourcesContent":["import React, { RefCallback } from 'react';\nimport { useMeasure } from 'react-use';\n\nimport { PluginContextProvider, useFieldOverrides } from '@grafana/data';\nimport { getAppEvents } from '@grafana/runtime';\nimport { PanelChrome, ErrorBoundaryAlert, useTheme2 } from '@grafana/ui';\n\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneComponentProps } from '../../core/types';\n\nimport { VizPanel } from './VizPanel';\n\nexport function VizPanelRenderer({ model }: SceneComponentProps<VizPanel>) {\n  const theme = useTheme2();\n  const {\n    title,\n    description,\n    options,\n    fieldConfig,\n    pluginId,\n    pluginLoadError,\n    $data,\n    placement,\n    displayMode,\n    hoverHeader,\n    menu,\n  } = model.useState();\n  const [ref, { width, height }] = useMeasure();\n  const plugin = model.getPlugin();\n  const parentLayout = sceneGraph.getLayout(model);\n\n  // If parent has enabled dragging and we have not explicitly disabled it then dragging is enabled\n  const isDraggable = parentLayout.isDraggable() && (placement?.isDraggable ?? true);\n  const dragClass = isDraggable && parentLayout.getDragClass ? parentLayout.getDragClass() : '';\n  const dragClassCancel = isDraggable && parentLayout.getDragClassCancel ? parentLayout.getDragClassCancel() : '';\n\n  // Interpolate title\n  const titleInterpolated = model.interpolate(title, undefined, 'text');\n\n  // Not sure we need to subscribe to this state\n  const timeZone = sceneGraph.getTimeRange(model).state.timeZone;\n\n  // Subscribe to data and apply field overrides\n  const { data } = sceneGraph.getData(model).useState();\n  const dataWithOverrides = useFieldOverrides(plugin, fieldConfig, data, timeZone, theme, model.interpolate);\n\n  if (pluginLoadError) {\n    return <div>Failed to load plugin: {pluginLoadError}</div>;\n  }\n\n  if (!plugin || !plugin.hasPluginId(pluginId)) {\n    return <div>Loading plugin panel...</div>;\n  }\n\n  if (!plugin.panel) {\n    return <div>Panel plugin has no panel component</div>;\n  }\n\n  const PanelComponent = plugin.panel;\n\n  // If we have a query runner on our level inform it of the container width (used to set auto max data points)\n  if ($data && $data.setContainerWidth) {\n    $data.setContainerWidth(width);\n  }\n\n  const titleItems: React.ReactNode[] = [];\n\n  // If we have local time range show that in panel header\n  if (model.state.$timeRange) {\n    titleItems.push(<model.state.$timeRange.Component model={model.state.$timeRange} />);\n  }\n\n  let panelMenu;\n  if (menu) {\n    panelMenu = <menu.Component model={menu} />;\n  }\n\n  return (\n    <div ref={ref as RefCallback<HTMLDivElement>} style={{ position: 'absolute', width: '100%', height: '100%' }}>\n      <PanelChrome\n        title={titleInterpolated}\n        description={description ? () => model.interpolate(description) : ''}\n        loadingState={dataWithOverrides?.state}\n        statusMessage={dataWithOverrides?.error ? dataWithOverrides.error.message : ''}\n        width={width}\n        height={height}\n        displayMode={displayMode}\n        hoverHeader={hoverHeader}\n        titleItems={titleItems}\n        dragClass={dragClass}\n        dragClassCancel={dragClassCancel}\n        menu={panelMenu}\n      >\n        {(innerWidth, innerHeight) => (\n          <>\n            {!dataWithOverrides && <div>No data...</div>}\n            {dataWithOverrides && (\n              <ErrorBoundaryAlert dependencies={[plugin, data]}>\n                <PluginContextProvider meta={plugin.meta}>\n                  <PanelComponent\n                    id={1}\n                    data={dataWithOverrides}\n                    title={title}\n                    timeRange={dataWithOverrides.timeRange}\n                    timeZone={timeZone}\n                    options={options}\n                    fieldConfig={fieldConfig}\n                    transparent={false}\n                    width={innerWidth}\n                    height={innerHeight}\n                    renderCounter={0}\n                    replaceVariables={model.interpolate}\n                    onOptionsChange={model.onOptionsChange}\n                    onFieldConfigChange={model.onFieldConfigChange}\n                    onChangeTimeRange={model.onChangeTimeRange}\n                    eventBus={getAppEvents()}\n                  />\n                </PluginContextProvider>\n              </ErrorBoundaryAlert>\n            )}\n          </>\n        )}\n      </PanelChrome>\n    </div>\n  );\n}\n\nVizPanelRenderer.displayName = 'ScenePanelRenderer';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"VizPanelRenderer.js","sources":["../../../../src/components/VizPanel/VizPanelRenderer.tsx"],"sourcesContent":["import React, { RefCallback } from 'react';\nimport { useMeasure } from 'react-use';\n\nimport { PluginContextProvider, useFieldOverrides } from '@grafana/data';\nimport { getAppEvents } from '@grafana/runtime';\nimport { PanelChrome, ErrorBoundaryAlert, useTheme2 } from '@grafana/ui';\n\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneComponentProps } from '../../core/types';\n\nimport { VizPanel } from './VizPanel';\n\nexport function VizPanelRenderer({ model }: SceneComponentProps<VizPanel>) {\n  const theme = useTheme2();\n  const {\n    title,\n    description,\n    options,\n    fieldConfig,\n    pluginId,\n    pluginLoadError,\n    $data,\n    displayMode,\n    hoverHeader,\n    menu,\n    ...state\n  } = model.useState();\n  const [ref, { width, height }] = useMeasure();\n  const plugin = model.getPlugin();\n  const parentLayout = sceneGraph.getLayout(model);\n\n  // If parent has enabled dragging and we have not explicitly disabled it then dragging is enabled\n  const isDraggable = parentLayout.isDraggable() && (state.isDraggable ?? true);\n  const dragClass = isDraggable && parentLayout.getDragClass ? parentLayout.getDragClass() : '';\n  const dragClassCancel = isDraggable && parentLayout.getDragClassCancel ? parentLayout.getDragClassCancel() : '';\n\n  // Interpolate title\n  const titleInterpolated = model.interpolate(title, undefined, 'text');\n\n  // Not sure we need to subscribe to this state\n  const timeZone = sceneGraph.getTimeRange(model).state.timeZone;\n\n  // Subscribe to data and apply field overrides\n  const { data } = sceneGraph.getData(model).useState();\n  const dataWithOverrides = useFieldOverrides(plugin, fieldConfig, data, timeZone, theme, model.interpolate);\n\n  if (pluginLoadError) {\n    return <div>Failed to load plugin: {pluginLoadError}</div>;\n  }\n\n  if (!plugin || !plugin.hasPluginId(pluginId)) {\n    return <div>Loading plugin panel...</div>;\n  }\n\n  if (!plugin.panel) {\n    return <div>Panel plugin has no panel component</div>;\n  }\n\n  const PanelComponent = plugin.panel;\n\n  // If we have a query runner on our level inform it of the container width (used to set auto max data points)\n  if ($data && $data.setContainerWidth) {\n    $data.setContainerWidth(width);\n  }\n\n  const titleItems: React.ReactNode[] = [];\n\n  // If we have local time range show that in panel header\n  if (model.state.$timeRange) {\n    titleItems.push(<model.state.$timeRange.Component model={model.state.$timeRange} />);\n  }\n\n  let panelMenu;\n  if (menu) {\n    panelMenu = <menu.Component model={menu} />;\n  }\n\n  return (\n    <div ref={ref as RefCallback<HTMLDivElement>} style={{ position: 'absolute', width: '100%', height: '100%' }}>\n      <PanelChrome\n        title={titleInterpolated}\n        description={description ? () => model.interpolate(description) : ''}\n        loadingState={dataWithOverrides?.state}\n        statusMessage={dataWithOverrides?.error ? dataWithOverrides.error.message : ''}\n        width={width}\n        height={height}\n        displayMode={displayMode}\n        hoverHeader={hoverHeader}\n        titleItems={titleItems}\n        dragClass={dragClass}\n        dragClassCancel={dragClassCancel}\n        menu={panelMenu}\n      >\n        {(innerWidth, innerHeight) => (\n          <>\n            {!dataWithOverrides && <div>No data...</div>}\n            {dataWithOverrides && (\n              <ErrorBoundaryAlert dependencies={[plugin, data]}>\n                <PluginContextProvider meta={plugin.meta}>\n                  <PanelComponent\n                    id={1}\n                    data={dataWithOverrides}\n                    title={title}\n                    timeRange={dataWithOverrides.timeRange}\n                    timeZone={timeZone}\n                    options={options}\n                    fieldConfig={fieldConfig}\n                    transparent={false}\n                    width={innerWidth}\n                    height={innerHeight}\n                    renderCounter={0}\n                    replaceVariables={model.interpolate}\n                    onOptionsChange={model.onOptionsChange}\n                    onFieldConfigChange={model.onFieldConfigChange}\n                    onChangeTimeRange={model.onChangeTimeRange}\n                    eventBus={getAppEvents()}\n                  />\n                </PluginContextProvider>\n              </ErrorBoundaryAlert>\n            )}\n          </>\n        )}\n      </PanelChrome>\n    </div>\n  );\n}\n\nVizPanelRenderer.displayName = 'ScenePanelRenderer';\n"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Field, RadioButtonGroup } from '@grafana/ui';
 import { SceneObjectBase } from '../../core/SceneObjectBase.js';
 
 class SceneFlexLayout extends SceneObjectBase {
@@ -12,87 +11,85 @@ class SceneFlexLayout extends SceneObjectBase {
     return false;
   }
 }
-SceneFlexLayout.Component = FlexLayoutRenderer;
-SceneFlexLayout.Editor = FlexLayoutEditor;
-function FlexLayoutRenderer({ model }) {
+SceneFlexLayout.Component = SceneFlexLayoutRenderer;
+function SceneFlexLayoutRenderer({ model }) {
   const { direction = "row", children, wrap } = model.useState();
   const style = {
+    display: "flex",
     flexGrow: 1,
     flexDirection: direction,
-    display: "flex",
     gap: "8px",
-    flexWrap: wrap,
+    flexWrap: wrap || "nowrap",
     alignContent: "baseline",
     minHeight: 0
   };
   return /* @__PURE__ */ React.createElement("div", {
     style
-  }, children.map((item) => /* @__PURE__ */ React.createElement(FlexLayoutChildComponent, {
+  }, children.map((item) => /* @__PURE__ */ React.createElement(item.Component, {
     key: item.state.key,
-    item,
-    direction
+    model: item
   })));
 }
-function FlexLayoutChildComponent({
-  item,
-  direction,
-  isEditing
-}) {
-  const { placement } = item.useState();
+class SceneFlexItem extends SceneObjectBase {
+}
+SceneFlexItem.Component = SceneFlexItemRenderer;
+function SceneFlexItemRenderer({ model }) {
+  const { body } = model.useState();
+  const parent = model.parent;
+  let style = {};
+  if (parent && isSceneFlexLayout(parent)) {
+    style = getFlexItemItemStyles(parent.state.direction || "row", model);
+  } else {
+    throw new Error("SceneFlexItem must be a child of SceneFlexLayout");
+  }
+  if (!body) {
+    return null;
+  }
   return /* @__PURE__ */ React.createElement("div", {
-    style: getItemStyles(direction, placement)
-  }, /* @__PURE__ */ React.createElement(item.Component, {
-    model: item
+    style
+  }, /* @__PURE__ */ React.createElement(body.Component, {
+    model: body
   }));
 }
-function getItemStyles(direction, layout = {}) {
-  const { xSizing = "fill", ySizing = "fill" } = layout;
+function getFlexItemItemStyles(direction, item) {
+  const { xSizing = "fill", ySizing = "fill" } = item.state;
   const style = {
     display: "flex",
+    position: "relative",
     flexDirection: direction,
-    minWidth: layout.minWidth,
-    minHeight: layout.minHeight,
-    position: "relative"
+    minWidth: item.state.minWidth,
+    minHeight: item.state.minHeight,
+    maxWidth: item.state.maxWidth,
+    maxHeight: item.state.maxHeight
   };
   if (direction === "column") {
-    if (layout.height) {
-      style.height = layout.height;
+    if (item.state.height) {
+      style.height = item.state.height;
     } else {
       style.flexGrow = ySizing === "fill" ? 1 : 0;
     }
-    if (layout.width) {
-      style.width = layout.width;
+    if (item.state.width) {
+      style.width = item.state.width;
     } else {
       style.alignSelf = xSizing === "fill" ? "stretch" : "flex-start";
     }
   } else {
-    if (layout.height) {
-      style.height = layout.height;
+    if (item.state.height) {
+      style.height = item.state.height;
     } else {
       style.alignSelf = ySizing === "fill" ? "stretch" : "flex-start";
     }
-    if (layout.width) {
-      style.width = layout.width;
+    if (item.state.width) {
+      style.width = item.state.width;
     } else {
       style.flexGrow = xSizing === "fill" ? 1 : 0;
     }
   }
   return style;
 }
-function FlexLayoutEditor({ model }) {
-  const { direction = "row" } = model.useState();
-  const options = [
-    { icon: "arrow-right", value: "row" },
-    { icon: "arrow-down", value: "column" }
-  ];
-  return /* @__PURE__ */ React.createElement(Field, {
-    label: "Direction"
-  }, /* @__PURE__ */ React.createElement(RadioButtonGroup, {
-    options,
-    value: direction,
-    onChange: (value) => model.setState({ direction: value })
-  }));
+function isSceneFlexLayout(model) {
+  return model instanceof SceneFlexLayout;
 }
 
-export { SceneFlexLayout };
+export { SceneFlexItem, SceneFlexLayout };
 //# sourceMappingURL=SceneFlexLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SceneFlexLayout.js","sources":["../../../../src/components/layout/SceneFlexLayout.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { Field, RadioButtonGroup } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport {\n  SceneComponentProps,\n  SceneLayoutChild,\n  SceneLayoutState,\n  SceneLayoutChildOptions,\n  SceneLayout,\n} from '../../core/types';\n\nexport type FlexLayoutDirection = 'column' | 'row';\n\ninterface SceneFlexLayoutState extends SceneLayoutState {\n  direction?: FlexLayoutDirection;\n  wrap?: CSSProperties['flexWrap'];\n}\n\nexport class SceneFlexLayout extends SceneObjectBase<SceneFlexLayoutState> implements SceneLayout {\n  public static Component = FlexLayoutRenderer;\n  public static Editor = FlexLayoutEditor;\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 FlexLayoutRenderer({ model }: SceneComponentProps<SceneFlexLayout>) {\n  const { direction = 'row', children, wrap } = model.useState();\n  const style: CSSProperties = {\n    flexGrow: 1,\n    flexDirection: direction,\n    display: 'flex',\n    gap: '8px',\n    flexWrap: wrap,\n    alignContent: 'baseline',\n    minHeight: 0,\n  };\n\n  return (\n    <div style={style}>\n      {children.map((item) => (\n        <FlexLayoutChildComponent key={item.state.key} item={item} direction={direction} />\n      ))}\n    </div>\n  );\n}\n\nfunction FlexLayoutChildComponent({\n  item,\n  direction,\n  isEditing,\n}: {\n  item: SceneLayoutChild;\n  direction: FlexLayoutDirection;\n  isEditing?: boolean;\n}) {\n  const { placement } = item.useState();\n\n  return (\n    <div style={getItemStyles(direction, placement)}>\n      <item.Component model={item} />\n    </div>\n  );\n}\n\nfunction getItemStyles(direction: FlexLayoutDirection, layout: SceneLayoutChildOptions = {}) {\n  const { xSizing = 'fill', ySizing = 'fill' } = layout;\n\n  const style: CSSProperties = {\n    display: 'flex',\n    flexDirection: direction,\n    minWidth: layout.minWidth,\n    minHeight: layout.minHeight,\n    position: 'relative',\n  };\n\n  if (direction === 'column') {\n    if (layout.height) {\n      style.height = layout.height;\n    } else {\n      style.flexGrow = ySizing === 'fill' ? 1 : 0;\n    }\n\n    if (layout.width) {\n      style.width = layout.width;\n    } else {\n      style.alignSelf = xSizing === 'fill' ? 'stretch' : 'flex-start';\n    }\n  } else {\n    if (layout.height) {\n      style.height = layout.height;\n    } else {\n      style.alignSelf = ySizing === 'fill' ? 'stretch' : 'flex-start';\n    }\n\n    if (layout.width) {\n      style.width = layout.width;\n    } else {\n      style.flexGrow = xSizing === 'fill' ? 1 : 0;\n    }\n  }\n\n  return style;\n}\n\nfunction FlexLayoutEditor({ model }: SceneComponentProps<SceneFlexLayout>) {\n  const { direction = 'row' } = model.useState();\n  const options = [\n    { icon: 'arrow-right', value: 'row' },\n    { icon: 'arrow-down', value: 'column' },\n  ];\n\n  return (\n    <Field label=\"Direction\">\n      <RadioButtonGroup\n        options={options}\n        value={direction}\n        onChange={(value) => model.setState({ direction: value as FlexLayoutDirection })}\n      />\n    </Field>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SceneFlexLayout.js","sources":["../../../../src/components/layout/SceneFlexLayout.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport {\n  SceneComponentProps,\n  SceneLayout,\n  SceneObjectStatePlain,\n  SceneObject,\n  SceneLayoutItemState,\n} from '../../core/types';\n\nexport interface SceneFlexItemLike extends SceneObject<SceneFlexItemState> {}\n\ninterface SceneFlexLayoutState extends SceneObjectStatePlain {\n  direction?: CSSProperties['flexDirection'];\n  wrap?: CSSProperties['flexWrap'];\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 }: SceneComponentProps<SceneFlexLayout>) {\n  const { direction = 'row', children, wrap } = model.useState();\n  const style: CSSProperties = {\n    display: 'flex',\n    flexGrow: 1,\n    flexDirection: direction,\n    gap: '8px',\n    flexWrap: wrap || 'nowrap',\n    alignContent: 'baseline',\n    minHeight: 0,\n  };\n\n  return (\n    <div style={style}>\n      {children.map((item) => (\n        <item.Component key={item.state.key} model={item} />\n      ))}\n    </div>\n  );\n}\n\ninterface SceneFlexItemState extends SceneLayoutItemState {\n  flexGrow?: CSSProperties['flexGrow'];\n  alignSelf?: CSSProperties['alignSelf'];\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\nexport class SceneFlexItem extends SceneObjectBase<SceneFlexItemState> {\n  public static Component = SceneFlexItemRenderer;\n}\n\nfunction SceneFlexItemRenderer({ model }: SceneComponentProps<SceneFlexItem>) {\n  const { body } = model.useState();\n  const parent = model.parent;\n  let style: CSSProperties = {};\n\n  if (parent && isSceneFlexLayout(parent)) {\n    style = getFlexItemItemStyles(parent.state.direction || 'row', model);\n  } else {\n    throw new Error('SceneFlexItem must be a child of SceneFlexLayout');\n  }\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <div style={style}>\n      <body.Component model={body} />\n    </div>\n  );\n}\nfunction getFlexItemItemStyles(direction: CSSProperties['flexDirection'], item: SceneFlexItem) {\n  const { xSizing = 'fill', ySizing = 'fill' } = item.state;\n\n  const style: CSSProperties = {\n    display: 'flex',\n    position: 'relative',\n    flexDirection: direction,\n    minWidth: item.state.minWidth,\n    minHeight: item.state.minHeight,\n    maxWidth: item.state.maxWidth,\n    maxHeight: item.state.maxHeight,\n  };\n\n  if (direction === 'column') {\n    if (item.state.height) {\n      style.height = item.state.height;\n    } else {\n      style.flexGrow = ySizing === 'fill' ? 1 : 0;\n    }\n\n    if (item.state.width) {\n      style.width = item.state.width;\n    } else {\n      style.alignSelf = xSizing === 'fill' ? 'stretch' : 'flex-start';\n    }\n  } else {\n    if (item.state.height) {\n      style.height = item.state.height;\n    } else {\n      style.alignSelf = ySizing === 'fill' ? 'stretch' : 'flex-start';\n    }\n\n    if (item.state.width) {\n      style.width = item.state.width;\n    } else {\n      style.flexGrow = xSizing === 'fill' ? 1 : 0;\n    }\n  }\n\n  return style;\n}\n\nfunction isSceneFlexLayout(model: SceneObject): model is SceneFlexLayout {\n  return model instanceof SceneFlexLayout;\n}\n"],"names":[],"mappings":"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"}