@grafana/scenes 6.31.0 → 6.31.1--canary.1227.17242704990.0

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

@@ -50,6 +50,14 @@ class SceneGridRow extends SceneObjectBase {
       this.onCollapseToggle();
     }
   }
+  getPanelCount(children) {
+    var _a;
+    let count = 0;
+    for (const child of children) {
+      count = 1 + (((_a = child.state.repeatedPanels) == null ? void 0 : _a.length) || 0);
+    }
+    return count;
+  }
 }
 SceneGridRow.Component = SceneGridRowRenderer;
 function SceneGridRowRenderer({ model }) {
@@ -58,7 +66,7 @@ function SceneGridRowRenderer({ model }) {
   const layout = model.getGridLayout();
   const layoutDragClass = layout.getDragClass();
   const isDraggable = layout.isDraggable() && !isRepeatCloneOrChildOf(model);
-  const count = children ? children.length : 0;
+  const count = model.getPanelCount(children);
   const panels = count === 1 ? "panel" : "panels";
   return /* @__PURE__ */ React.createElement("div", { className: cx(styles.row, isCollapsed && styles.rowCollapsed) }, /* @__PURE__ */ React.createElement("div", { className: styles.rowTitleAndActionsGroup }, /* @__PURE__ */ React.createElement(
     "button",

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

@@ -1 +1 @@
-{"version":3,"file":"SceneGridRow.js","sources":["../../../../../src/components/layout/grid/SceneGridRow.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Icon, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObject, SceneObjectUrlValues } from '../../../core/types';\n\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { GRID_COLUMN_COUNT } from './constants';\nimport { SceneGridItemLike, SceneGridItemStateLike } from './types';\nimport { sceneGraph } from '../../../core/sceneGraph';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { VariableDependencyConfig } from '../../../variables/VariableDependencyConfig';\nimport { t } from '@grafana/i18n';\nimport { isRepeatCloneOrChildOf } from '../../../utils/utils';\n\nexport interface SceneGridRowState extends SceneGridItemStateLike {\n  title: string;\n  isCollapsible?: boolean;\n  isCollapsed?: boolean;\n  actions?: SceneObject;\n  children: SceneGridItemLike[];\n  /** Marks object as a repeated object and a key pointer to source object */\n  repeatSourceKey?: string;\n}\n\nexport class SceneGridRow extends SceneObjectBase<SceneGridRowState> {\n  public static Component = SceneGridRowRenderer;\n\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['title'],\n    handleTimeMacros: true,\n  });\n\n  public constructor(state: Partial<SceneGridRowState>) {\n    super({\n      children: state.children || [],\n      isCollapsible: state.isCollapsible || true,\n      title: state.title || '',\n      ...state,\n      x: 0,\n      height: 1,\n      width: GRID_COLUMN_COUNT,\n    });\n  }\n\n  public getGridLayout(): SceneGridLayout {\n    const layout = this.parent;\n\n    if (!layout || !(layout instanceof SceneGridLayout)) {\n      throw new Error('SceneGridRow must be a child of SceneGridLayout');\n    }\n\n    return layout;\n  }\n\n  public onCollapseToggle = () => {\n    if (!this.state.isCollapsible) {\n      return;\n    }\n\n    this.getGridLayout().toggleRow(this);\n  };\n\n  public getUrlState() {\n    return { rowc: this.state.isCollapsed ? '1' : '0' };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues) {\n    if (values.rowc == null) {\n      return;\n    }\n\n    if (values.rowc !== this.getUrlState().rowc) {\n      this.onCollapseToggle();\n    }\n  }\n}\n\nexport function SceneGridRowRenderer({ model }: SceneComponentProps<SceneGridRow>) {\n  const styles = useStyles2(getSceneGridRowStyles);\n  const { isCollapsible, isCollapsed, title, actions, children } = model.useState();\n  const layout = model.getGridLayout();\n  const layoutDragClass = layout.getDragClass();\n  const isDraggable = layout.isDraggable() && !isRepeatCloneOrChildOf(model);\n\n  const count = children ? children.length : 0;\n  const panels = count === 1 ? 'panel' : 'panels';\n\n  return (\n    <div className={cx(styles.row, isCollapsed && styles.rowCollapsed)}>\n      <div className={styles.rowTitleAndActionsGroup}>\n        <button\n          onClick={model.onCollapseToggle}\n          className={styles.rowTitleButton}\n          aria-label={\n            isCollapsed\n              ? t('grafana-scenes.components.scene-grid-row.expand-row', 'Expand row')\n              : t('grafana-scenes.components.scene-grid-row.collapse-row', 'Collapse row')\n          }\n          data-testid={selectors.components.DashboardRow.title(sceneGraph.interpolate(model, title, undefined, 'text'))}\n        >\n          {isCollapsible && <Icon name={isCollapsed ? 'angle-right' : 'angle-down'} />}\n          <span className={styles.rowTitle} role=\"heading\">\n            {sceneGraph.interpolate(model, title, undefined, 'text')}\n          </span>\n        </button>\n        <span className={cx(styles.panelCount, isCollapsed && styles.panelCountCollapsed)}>\n          ({count} {panels})\n        </span>\n        {actions && (\n          <div className={styles.rowActions}>\n            <actions.Component model={actions} />\n          </div>\n        )}\n      </div>\n      {isDraggable && isCollapsed && (\n        <div className={cx(styles.dragHandle, layoutDragClass)}>\n          <Icon name=\"draggabledots\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const getSceneGridRowStyles = (theme: GrafanaTheme2) => {\n  return {\n    row: css({\n      width: '100%',\n      height: '30px',\n      display: 'flex',\n      justifyContent: 'space-between',\n      gap: theme.spacing(1),\n    }),\n    rowTitleButton: css({\n      display: 'flex',\n      alignItems: 'center',\n      cursor: 'pointer',\n      background: 'transparent',\n      border: 'none',\n      minWidth: 0,\n      gap: theme.spacing(1),\n    }),\n    rowCollapsed: css({\n      borderBottom: `1px solid ${theme.colors.border.weak}`,\n    }),\n    rowTitle: css({\n      fontSize: theme.typography.h5.fontSize,\n      fontWeight: theme.typography.fontWeightMedium,\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      maxWidth: '100%',\n      flexGrow: 1,\n      minWidth: 0,\n    }),\n    collapsedInfo: css({\n      fontSize: theme.typography.bodySmall.fontSize,\n      color: theme.colors.text.secondary,\n      display: 'flex',\n      alignItems: 'center',\n      flexGrow: 1,\n    }),\n    rowTitleAndActionsGroup: css({\n      display: 'flex',\n      minWidth: 0,\n\n      '&:hover, &:focus-within': {\n        '& > div': {\n          opacity: 1,\n        },\n      },\n    }),\n    rowActions: css({\n      display: 'flex',\n      whiteSpace: 'nowrap',\n      opacity: 0,\n      transition: '200ms opacity ease-in 200ms',\n\n      '&:hover, &:focus-within': {\n        opacity: 1,\n      },\n    }),\n    dragHandle: css({\n      display: 'flex',\n      padding: theme.spacing(0, 1),\n      alignItems: 'center',\n      justifyContent: 'flex-end',\n      cursor: 'move',\n      color: theme.colors.text.secondary,\n      '&:hover': {\n        color: theme.colors.text.primary,\n      },\n    }),\n    panelCount: css({\n      whiteSpace: 'nowrap',\n      paddingLeft: theme.spacing(2),\n      color: theme.colors.text.secondary,\n      fontStyle: 'italic',\n      fontSize: theme.typography.size.sm,\n      fontWeight: 'normal',\n      display: 'none',\n      lineHeight: '30px',\n    }),\n    panelCountCollapsed: css({\n      display: 'inline-block',\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SceneGridRow.js","sources":["../../../../../src/components/layout/grid/SceneGridRow.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Icon, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObject, SceneObjectUrlValues } from '../../../core/types';\n\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { GRID_COLUMN_COUNT } from './constants';\nimport { SceneGridItemLike, SceneGridItemStateLike } from './types';\nimport { sceneGraph } from '../../../core/sceneGraph';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { VariableDependencyConfig } from '../../../variables/VariableDependencyConfig';\nimport { t } from '@grafana/i18n';\nimport { isRepeatCloneOrChildOf } from '../../../utils/utils';\n\nexport interface SceneGridRowState extends SceneGridItemStateLike {\n  title: string;\n  isCollapsible?: boolean;\n  isCollapsed?: boolean;\n  actions?: SceneObject;\n  children: SceneGridItemLike[];\n  /** Marks object as a repeated object and a key pointer to source object */\n  repeatSourceKey?: string;\n}\n\nexport class SceneGridRow extends SceneObjectBase<SceneGridRowState> {\n  public static Component = SceneGridRowRenderer;\n\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['title'],\n    handleTimeMacros: true,\n  });\n\n  public constructor(state: Partial<SceneGridRowState>) {\n    super({\n      children: state.children || [],\n      isCollapsible: state.isCollapsible || true,\n      title: state.title || '',\n      ...state,\n      x: 0,\n      height: 1,\n      width: GRID_COLUMN_COUNT,\n    });\n  }\n\n  public getGridLayout(): SceneGridLayout {\n    const layout = this.parent;\n\n    if (!layout || !(layout instanceof SceneGridLayout)) {\n      throw new Error('SceneGridRow must be a child of SceneGridLayout');\n    }\n\n    return layout;\n  }\n\n  public onCollapseToggle = () => {\n    if (!this.state.isCollapsible) {\n      return;\n    }\n\n    this.getGridLayout().toggleRow(this);\n  };\n\n  public getUrlState() {\n    return { rowc: this.state.isCollapsed ? '1' : '0' };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues) {\n    if (values.rowc == null) {\n      return;\n    }\n\n    if (values.rowc !== this.getUrlState().rowc) {\n      this.onCollapseToggle();\n    }\n  }\n\n  public getPanelCount(children: SceneGridItemLike[]) {\n    let count = 0;\n    for (const child of children) {\n      count = 1 + (child.state.repeatedPanels?.length || 0);\n    }\n    return count;\n  }\n}\n\nexport function SceneGridRowRenderer({ model }: SceneComponentProps<SceneGridRow>) {\n  const styles = useStyles2(getSceneGridRowStyles);\n  const { isCollapsible, isCollapsed, title, actions, children } = model.useState();\n  const layout = model.getGridLayout();\n  const layoutDragClass = layout.getDragClass();\n  const isDraggable = layout.isDraggable() && !isRepeatCloneOrChildOf(model);\n\n  const count = model.getPanelCount(children);\n  const panels = count === 1 ? 'panel' : 'panels';\n\n  return (\n    <div className={cx(styles.row, isCollapsed && styles.rowCollapsed)}>\n      <div className={styles.rowTitleAndActionsGroup}>\n        <button\n          onClick={model.onCollapseToggle}\n          className={styles.rowTitleButton}\n          aria-label={\n            isCollapsed\n              ? t('grafana-scenes.components.scene-grid-row.expand-row', 'Expand row')\n              : t('grafana-scenes.components.scene-grid-row.collapse-row', 'Collapse row')\n          }\n          data-testid={selectors.components.DashboardRow.title(sceneGraph.interpolate(model, title, undefined, 'text'))}\n        >\n          {isCollapsible && <Icon name={isCollapsed ? 'angle-right' : 'angle-down'} />}\n          <span className={styles.rowTitle} role=\"heading\">\n            {sceneGraph.interpolate(model, title, undefined, 'text')}\n          </span>\n        </button>\n        <span className={cx(styles.panelCount, isCollapsed && styles.panelCountCollapsed)}>\n          ({count} {panels})\n        </span>\n        {actions && (\n          <div className={styles.rowActions}>\n            <actions.Component model={actions} />\n          </div>\n        )}\n      </div>\n      {isDraggable && isCollapsed && (\n        <div className={cx(styles.dragHandle, layoutDragClass)}>\n          <Icon name=\"draggabledots\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const getSceneGridRowStyles = (theme: GrafanaTheme2) => {\n  return {\n    row: css({\n      width: '100%',\n      height: '30px',\n      display: 'flex',\n      justifyContent: 'space-between',\n      gap: theme.spacing(1),\n    }),\n    rowTitleButton: css({\n      display: 'flex',\n      alignItems: 'center',\n      cursor: 'pointer',\n      background: 'transparent',\n      border: 'none',\n      minWidth: 0,\n      gap: theme.spacing(1),\n    }),\n    rowCollapsed: css({\n      borderBottom: `1px solid ${theme.colors.border.weak}`,\n    }),\n    rowTitle: css({\n      fontSize: theme.typography.h5.fontSize,\n      fontWeight: theme.typography.fontWeightMedium,\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      maxWidth: '100%',\n      flexGrow: 1,\n      minWidth: 0,\n    }),\n    collapsedInfo: css({\n      fontSize: theme.typography.bodySmall.fontSize,\n      color: theme.colors.text.secondary,\n      display: 'flex',\n      alignItems: 'center',\n      flexGrow: 1,\n    }),\n    rowTitleAndActionsGroup: css({\n      display: 'flex',\n      minWidth: 0,\n\n      '&:hover, &:focus-within': {\n        '& > div': {\n          opacity: 1,\n        },\n      },\n    }),\n    rowActions: css({\n      display: 'flex',\n      whiteSpace: 'nowrap',\n      opacity: 0,\n      transition: '200ms opacity ease-in 200ms',\n\n      '&:hover, &:focus-within': {\n        opacity: 1,\n      },\n    }),\n    dragHandle: css({\n      display: 'flex',\n      padding: theme.spacing(0, 1),\n      alignItems: 'center',\n      justifyContent: 'flex-end',\n      cursor: 'move',\n      color: theme.colors.text.secondary,\n      '&:hover': {\n        color: theme.colors.text.primary,\n      },\n    }),\n    panelCount: css({\n      whiteSpace: 'nowrap',\n      paddingLeft: theme.spacing(2),\n      color: theme.colors.text.secondary,\n      fontStyle: 'italic',\n      fontSize: theme.typography.size.sm,\n      fontWeight: 'normal',\n      display: 'none',\n      lineHeight: '30px',\n    }),\n    panelCountCollapsed: css({\n      display: 'inline-block',\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AA4BO,MAAM,qBAAqB,eAAmC,CAAA;AAAA,EAQ5D,YAAY,KAAmC,EAAA;AACpD,IAAM,KAAA,CAAA;AAAA,MACJ,QAAA,EAAU,KAAM,CAAA,QAAA,IAAY,EAAC;AAAA,MAC7B,aAAA,EAAe,MAAM,aAAiB,IAAA,IAAA;AAAA,MACtC,KAAA,EAAO,MAAM,KAAS,IAAA,EAAA;AAAA,MACtB,GAAG,KAAA;AAAA,MACH,CAAG,EAAA,CAAA;AAAA,MACH,MAAQ,EAAA,CAAA;AAAA,MACR,KAAO,EAAA;AAAA,KACR,CAAA;AAdH,IAAU,IAAA,CAAA,mBAAA,GAAsB,IAAI,wBAAA,CAAyB,IAAM,EAAA;AAAA,MACjE,UAAA,EAAY,CAAC,OAAO,CAAA;AAAA,MACpB,gBAAkB,EAAA;AAAA,KACnB,CAAA;AAwBD,IAAA,IAAA,CAAO,mBAAmB,MAAM;AAC9B,MAAI,IAAA,CAAC,IAAK,CAAA,KAAA,CAAM,aAAe,EAAA;AAC7B,QAAA;AAAA;AAGF,MAAK,IAAA,CAAA,aAAA,EAAgB,CAAA,SAAA,CAAU,IAAI,CAAA;AAAA,KACrC;AAAA;AAlBA,EAEO,aAAiC,GAAA;AACtC,IAAA,MAAM,SAAS,IAAK,CAAA,MAAA;AAEpB,IAAA,IAAI,CAAC,MAAA,IAAU,EAAE,MAAA,YAAkB,eAAkB,CAAA,EAAA;AACnD,MAAM,MAAA,IAAI,MAAM,iDAAiD,CAAA;AAAA;AAGnE,IAAO,OAAA,MAAA;AAAA;AACT,EAUO,WAAc,GAAA;AACnB,IAAA,OAAO,EAAE,IAAM,EAAA,IAAA,CAAK,KAAM,CAAA,WAAA,GAAc,MAAM,GAAI,EAAA;AAAA;AACpD,EAEO,cAAc,MAA8B,EAAA;AACjD,IAAI,IAAA,MAAA,CAAO,QAAQ,IAAM,EAAA;AACvB,MAAA;AAAA;AAGF,IAAA,IAAI,MAAO,CAAA,IAAA,KAAS,IAAK,CAAA,WAAA,GAAc,IAAM,EAAA;AAC3C,MAAA,IAAA,CAAK,gBAAiB,EAAA;AAAA;AACxB;AACF,EAEO,cAAc,QAA+B,EAAA;AAhFtD,IAAA,IAAA,EAAA;AAiFI,IAAA,IAAI,KAAQ,GAAA,CAAA;AACZ,IAAA,KAAA,MAAW,SAAS,QAAU,EAAA;AAC5B,MAAA,KAAA,GAAQ,CAAK,IAAA,CAAA,CAAA,EAAA,GAAA,KAAA,CAAM,KAAM,CAAA,cAAA,KAAZ,mBAA4B,MAAU,KAAA,CAAA,CAAA;AAAA;AAErD,IAAO,OAAA,KAAA;AAAA;AAEX;AA3Da,YAAA,CACG,SAAY,GAAA,oBAAA;AA4DZ,SAAA,oBAAA,CAAqB,EAAE,KAAA,EAA4C,EAAA;AACjF,EAAM,MAAA,MAAA,GAAS,WAAW,qBAAqB,CAAA;AAC/C,EAAM,MAAA,EAAE,eAAe,WAAa,EAAA,KAAA,EAAO,SAAS,QAAS,EAAA,GAAI,MAAM,QAAS,EAAA;AAChF,EAAM,MAAA,MAAA,GAAS,MAAM,aAAc,EAAA;AACnC,EAAM,MAAA,eAAA,GAAkB,OAAO,YAAa,EAAA;AAC5C,EAAA,MAAM,cAAc,MAAO,CAAA,WAAA,EAAiB,IAAA,CAAC,uBAAuB,KAAK,CAAA;AAEzE,EAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,aAAA,CAAc,QAAQ,CAAA;AAC1C,EAAM,MAAA,MAAA,GAAS,KAAU,KAAA,CAAA,GAAI,OAAU,GAAA,QAAA;AAEvC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,EAAA,CAAG,OAAO,GAAK,EAAA,WAAA,IAAe,MAAO,CAAA,YAAY,CAC/D,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,uBACrB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAS,KAAM,CAAA,gBAAA;AAAA,MACf,WAAW,MAAO,CAAA,cAAA;AAAA,MAClB,YAAA,EACE,cACI,CAAE,CAAA,qDAAA,EAAuD,YAAY,CACrE,GAAA,CAAA,CAAE,yDAAyD,cAAc,CAAA;AAAA,MAE/E,aAAA,EAAa,SAAU,CAAA,UAAA,CAAW,YAAa,CAAA,KAAA,CAAM,UAAW,CAAA,WAAA,CAAY,KAAO,EAAA,KAAA,EAAO,MAAW,EAAA,MAAM,CAAC;AAAA,KAAA;AAAA,IAE3G,iCAAkB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAM,EAAA,WAAA,GAAc,gBAAgB,YAAc,EAAA,CAAA;AAAA,oBACzE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,MAAA,CAAO,QAAU,EAAA,IAAA,EAAK,SACpC,EAAA,EAAA,UAAA,CAAW,WAAY,CAAA,KAAA,EAAO,KAAO,EAAA,MAAA,EAAW,MAAM,CACzD;AAAA,GACF,sCACC,MAAK,EAAA,EAAA,SAAA,EAAW,GAAG,MAAO,CAAA,UAAA,EAAY,eAAe,MAAO,CAAA,mBAAmB,KAAG,GAC/E,EAAA,KAAA,EAAM,KAAE,MAAO,EAAA,GACnB,GACC,OACC,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,UAAA,EAAA,sCACpB,OAAQ,CAAA,SAAA,EAAR,EAAkB,KAAO,EAAA,OAAA,EAAS,CACrC,CAEJ,CAAA,EACC,WAAe,IAAA,WAAA,oBACb,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,WAAW,EAAG,CAAA,MAAA,CAAO,YAAY,eAAe,CAAA,EAAA,sCAClD,IAAK,EAAA,EAAA,IAAA,EAAK,eAAgB,EAAA,CAC7B,CAEJ,CAAA;AAEJ;AAEa,MAAA,qBAAA,GAAwB,CAAC,KAAyB,KAAA;AAC7D,EAAO,OAAA;AAAA,IACL,KAAK,GAAI,CAAA;AAAA,MACP,KAAO,EAAA,MAAA;AAAA,MACP,MAAQ,EAAA,MAAA;AAAA,MACR,OAAS,EAAA,MAAA;AAAA,MACT,cAAgB,EAAA,eAAA;AAAA,MAChB,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,KACrB,CAAA;AAAA,IACD,gBAAgB,GAAI,CAAA;AAAA,MAClB,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,MAAQ,EAAA,SAAA;AAAA,MACR,UAAY,EAAA,aAAA;AAAA,MACZ,MAAQ,EAAA,MAAA;AAAA,MACR,QAAU,EAAA,CAAA;AAAA,MACV,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,KACrB,CAAA;AAAA,IACD,cAAc,GAAI,CAAA;AAAA,MAChB,YAAc,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,OAAO,IAAI,CAAA;AAAA,KACpD,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,EAAG,CAAA,QAAA;AAAA,MAC9B,UAAA,EAAY,MAAM,UAAW,CAAA,gBAAA;AAAA,MAC7B,UAAY,EAAA,QAAA;AAAA,MACZ,QAAU,EAAA,QAAA;AAAA,MACV,YAAc,EAAA,UAAA;AAAA,MACd,QAAU,EAAA,MAAA;AAAA,MACV,QAAU,EAAA,CAAA;AAAA,MACV,QAAU,EAAA;AAAA,KACX,CAAA;AAAA,IACD,eAAe,GAAI,CAAA;AAAA,MACjB,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,QAAA;AAAA,MACrC,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,QAAU,EAAA;AAAA,KACX,CAAA;AAAA,IACD,yBAAyB,GAAI,CAAA;AAAA,MAC3B,OAAS,EAAA,MAAA;AAAA,MACT,QAAU,EAAA,CAAA;AAAA,MAEV,yBAA2B,EAAA;AAAA,QACzB,SAAW,EAAA;AAAA,UACT,OAAS,EAAA;AAAA;AACX;AACF,KACD,CAAA;AAAA,IACD,YAAY,GAAI,CAAA;AAAA,MACd,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,OAAS,EAAA,CAAA;AAAA,MACT,UAAY,EAAA,6BAAA;AAAA,MAEZ,yBAA2B,EAAA;AAAA,QACzB,OAAS,EAAA;AAAA;AACX,KACD,CAAA;AAAA,IACD,YAAY,GAAI,CAAA;AAAA,MACd,OAAS,EAAA,MAAA;AAAA,MACT,OAAS,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,MAC3B,UAAY,EAAA,QAAA;AAAA,MACZ,cAAgB,EAAA,UAAA;AAAA,MAChB,MAAQ,EAAA,MAAA;AAAA,MACR,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,SAAW,EAAA;AAAA,QACT,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,KACD,CAAA;AAAA,IACD,YAAY,GAAI,CAAA;AAAA,MACd,UAAY,EAAA,QAAA;AAAA,MACZ,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC5B,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,SAAW,EAAA,QAAA;AAAA,MACX,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,IAAK,CAAA,EAAA;AAAA,MAChC,UAAY,EAAA,QAAA;AAAA,MACZ,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA;AAAA,KACb,CAAA;AAAA,IACD,qBAAqB,GAAI,CAAA;AAAA,MACvB,OAAS,EAAA;AAAA,KACV;AAAA,GACH;AACF;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../../src/components/layout/grid/types.ts"],"sourcesContent":["import { PointerEvent } from 'react';\nimport { SceneObject, SceneObjectState } from '../../../core/types';\nimport { BusEventWithPayload } from '@grafana/data';\nimport { VizPanel } from '../../VizPanel/VizPanel';\n\nexport interface SceneGridItemPlacement {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n}\n\nexport interface SceneGridItemStateLike extends SceneGridItemPlacement, SceneObjectState {\n  isResizable?: boolean;\n  isDraggable?: boolean;\n}\n\nexport interface SceneGridItemLike extends SceneObject<SceneGridItemStateLike> {\n  /**\n   * Provide a custom CSS class name for the underlying DOM element when special styling (i.e. for mobile breakpoint) is required.\n   **/\n  getClassName?(): string;\n}\n\nexport class SceneGridLayoutDragStartEvent extends BusEventWithPayload<{ evt: PointerEvent; panel: VizPanel }> {\n  public static readonly type = 'scene-grid-layout-drag-start';\n}\n"],"names":[],"mappings":";;AAwBO,MAAM,sCAAsC,mBAA4D,CAAA;AAE/G;AAFa,6BAAA,CACY,IAAO,GAAA,8BAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../../src/components/layout/grid/types.ts"],"sourcesContent":["import { PointerEvent } from 'react';\nimport { SceneObject, SceneObjectState } from '../../../core/types';\nimport { BusEventWithPayload } from '@grafana/data';\nimport { VizPanel } from '../../VizPanel/VizPanel';\n\nexport interface SceneGridItemPlacement {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n}\n\nexport interface SceneGridItemStateLike extends SceneGridItemPlacement, SceneObjectState {\n  isResizable?: boolean;\n  isDraggable?: boolean;\n  repeatedPanels?: VizPanel[];\n}\n\nexport interface SceneGridItemLike extends SceneObject<SceneGridItemStateLike> {\n  /**\n   * Provide a custom CSS class name for the underlying DOM element when special styling (i.e. for mobile breakpoint) is required.\n   **/\n  getClassName?(): string;\n}\n\nexport class SceneGridLayoutDragStartEvent extends BusEventWithPayload<{ evt: PointerEvent; panel: VizPanel }> {\n  public static readonly type = 'scene-grid-layout-drag-start';\n}\n"],"names":[],"mappings":";;AAyBO,MAAM,sCAAsC,mBAA4D,CAAA;AAE/G;AAFa,6BAAA,CACY,IAAO,GAAA,8BAAA;;;;"}

package/dist/index.d.ts

@@ -2430,6 +2430,7 @@ interface SceneGridItemPlacement {
 interface SceneGridItemStateLike extends SceneGridItemPlacement, SceneObjectState {
     isResizable?: boolean;
     isDraggable?: boolean;
+    repeatedPanels?: VizPanel[];
 }
 interface SceneGridItemLike extends SceneObject<SceneGridItemStateLike> {
     /**
@@ -2463,6 +2464,7 @@ declare class SceneGridRow extends SceneObjectBase<SceneGridRowState> {
         rowc: string;
     };
     updateFromUrl(values: SceneObjectUrlValues): void;
+    getPanelCount(children: SceneGridItemLike[]): number;
 }
 declare function SceneGridRowRenderer({ model }: SceneComponentProps<SceneGridRow>): React__default.JSX.Element;
 

package/dist/index.js

@@ -11868,6 +11868,14 @@ class SceneGridRow extends SceneObjectBase {
       this.onCollapseToggle();
     }
   }
+  getPanelCount(children) {
+    var _a;
+    let count = 0;
+    for (const child of children) {
+      count = 1 + (((_a = child.state.repeatedPanels) == null ? void 0 : _a.length) || 0);
+    }
+    return count;
+  }
 }
 SceneGridRow.Component = SceneGridRowRenderer;
 function SceneGridRowRenderer({ model }) {
@@ -11876,7 +11884,7 @@ function SceneGridRowRenderer({ model }) {
   const layout = model.getGridLayout();
   const layoutDragClass = layout.getDragClass();
   const isDraggable = layout.isDraggable() && !isRepeatCloneOrChildOf(model);
-  const count = children ? children.length : 0;
+  const count = model.getPanelCount(children);
   const panels = count === 1 ? "panel" : "panels";
   return /* @__PURE__ */ React__default.default.createElement("div", { className: css.cx(styles.row, isCollapsed && styles.rowCollapsed) }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.rowTitleAndActionsGroup }, /* @__PURE__ */ React__default.default.createElement(
     "button",