@grafana/scenes 3.13.1--canary.643.8277858909.0 → 3.13.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/esm/components/layout/grid/SceneGridLayoutRenderer.js +2 -2
  3. package/dist/esm/components/layout/grid/SceneGridLayoutRenderer.js.map +1 -1
  4. package/dist/index.js +2 -2
  5. package/dist/index.js.map +1 -1
  6. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,27 @@
1
+ # v3.13.2 (Fri Mar 15 2024)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - SceneGridLayout: Fixes moving panels when opening dashboards [#644](https://github.com/grafana/scenes/pull/644) ([@torkelo](https://github.com/torkelo))
6
+
7
+ #### Authors: 1
8
+
9
+ - Torkel Ödegaard ([@torkelo](https://github.com/torkelo))
10
+
11
+ ---
12
+
13
+ # v3.13.1 (Thu Mar 14 2024)
14
+
15
+ #### 🐛 Bug Fix
16
+
17
+ - VizPanel: Fixes incrementing structureRev [#643](https://github.com/grafana/scenes/pull/643) ([@torkelo](https://github.com/torkelo))
18
+
19
+ #### Authors: 1
20
+
21
+ - Torkel Ödegaard ([@torkelo](https://github.com/torkelo))
22
+
23
+ ---
24
+
1
25
  # v3.13.0 (Wed Mar 13 2024)
2
26
 
3
27
  #### 🚀 Enhancement
package/dist/esm/components/layout/grid/SceneGridLayoutRenderer.js CHANGED
@@ -49,13 +49,13 @@ function SceneGridLayoutRenderer({ model }) {
49
49
  const layout = model.buildGridLayout(width);
50
50
  return /* @__PURE__ */ React.createElement("div", {
51
51
  style: { width: `${width}px`, height: "100%", position: "relative", zIndex: 1 },
52
- className: "scene-grid-layout"
52
+ className: cx("react-grid-layout", isDraggable && "react-grid-layout--enable-move-animations")
53
53
  }, /* @__PURE__ */ React.createElement(ReactGridLayout, {
54
54
  width,
55
55
  isDraggable: isDraggable && width > 768,
56
56
  isResizable: isResizable != null ? isResizable : false,
57
57
  containerPadding: [0, 0],
58
- useCSSTransforms: false,
58
+ useCSSTransforms: true,
59
59
  margin: [GRID_CELL_VMARGIN, GRID_CELL_VMARGIN],
60
60
  cols: GRID_COLUMN_COUNT,
61
61
  rowHeight: GRID_CELL_HEIGHT,
package/dist/esm/components/layout/grid/SceneGridLayoutRenderer.js.map CHANGED
@@ -1 +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, 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=\"16px\" 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,MAAA;AAAA,IAAO,OAAQ,EAAA,WAAA;AAAA,IAAY,IAAK,EAAA,MAAA;AAAA,IAAO,KAAM,EAAA,4BAAA;AAAA,GAAA,kBACnE,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;;;;"}
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, 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={cx('react-grid-layout', isDraggable && 'react-grid-layout--enable-move-animations')}\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={true}\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=\"16px\" 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":"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"}
package/dist/index.js CHANGED
@@ -7567,13 +7567,13 @@ function SceneGridLayoutRenderer({ model }) {
7567
7567
  const layout = model.buildGridLayout(width);
7568
7568
  return /* @__PURE__ */ React__default["default"].createElement("div", {
7569
7569
  style: { width: `${width}px`, height: "100%", position: "relative", zIndex: 1 },
7570
- className: "scene-grid-layout"
7570
+ className: css.cx("react-grid-layout", isDraggable && "react-grid-layout--enable-move-animations")
7571
7571
  }, /* @__PURE__ */ React__default["default"].createElement(ReactGridLayout__default["default"], {
7572
7572
  width,
7573
7573
  isDraggable: isDraggable && width > 768,
7574
7574
  isResizable: isResizable != null ? isResizable : false,
7575
7575
  containerPadding: [0, 0],
7576
- useCSSTransforms: false,
7576
+ useCSSTransforms: true,
7577
7577
  margin: [GRID_CELL_VMARGIN, GRID_CELL_VMARGIN],
7578
7578
  cols: GRID_COLUMN_COUNT,
7579
7579
  rowHeight: GRID_CELL_HEIGHT,