@grafana/scenes 6.49.0 → 6.49.1--canary.1313.20102090431.0

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

@@ -1,13 +1,12 @@
 import React, { useRef, useEffect } from 'react';
 import ReactGridLayout from 'react-grid-layout';
 import { GRID_CELL_HEIGHT, GRID_COLUMN_COUNT, GRID_CELL_VMARGIN } from './constants.js';
-import { LazyLoader } from '../LazyLoader.js';
 import { useStyles2 } from '@grafana/ui';
 import { css, cx } from '@emotion/css';
 import { useMeasure } from 'react-use';
 
 function SceneGridLayoutRenderer({ model }) {
-  const { children, isLazy, isDraggable, isResizable } = model.useState();
+  const { children, isDraggable, isResizable } = model.useState();
   const [outerDivRef, { width, height }] = useMeasure();
   const ref = useRef(null);
   useEffect(() => {
@@ -53,7 +52,6 @@ function SceneGridLayoutRenderer({ model }) {
             grid: model,
             layoutItem: gridItem,
             index,
-            isLazy,
             totalCount: layout.length
           }
         ))
@@ -70,25 +68,10 @@ const gridWrapperClass = css({
 });
 const GridItemWrapper = React.forwardRef((props, ref) => {
   var _a;
-  const { grid, layoutItem, index, totalCount, isLazy, style, onLoad, onChange, children, ...divProps } = props;
+  const { grid, layoutItem, index, totalCount, style, onLoad, onChange, children, ...divProps } = props;
   const sceneChild = grid.getSceneLayoutChild(layoutItem.i);
   const className = (_a = sceneChild.getClassName) == null ? void 0 : _a.call(sceneChild);
   const innerContent = /* @__PURE__ */ React.createElement(sceneChild.Component, { model: sceneChild, key: sceneChild.state.key });
-  if (isLazy) {
-    return /* @__PURE__ */ React.createElement(
-      LazyLoader,
-      {
-        ...divProps,
-        key: sceneChild.state.key,
-        "data-griditem-key": sceneChild.state.key,
-        className: cx(className, props.className),
-        style,
-        ref
-      },
-      innerContent,
-      children
-    );
-  }
   return /* @__PURE__ */ React.createElement(
     "div",
     {

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

@@ -1 +1 @@
-{"version":3,"file":"SceneGridLayoutRenderer.js","sources":["../../../../../src/components/layout/grid/SceneGridLayoutRenderer.tsx"],"sourcesContent":["import React, { RefCallback, useEffect, useRef } from 'react';\nimport ReactGridLayout from 'react-grid-layout';\nimport { SceneComponentProps } from '../../../core/types';\nimport { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from './constants';\nimport { LazyLoader } from '../LazyLoader';\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { SceneGridItemLike } from './types';\nimport { useStyles2 } from '@grafana/ui';\nimport { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useMeasure } from 'react-use';\n\nexport function SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGridLayout>) {\n  const { children, isLazy, isDraggable, isResizable } = model.useState();\n  const [outerDivRef, { width, height }] = useMeasure();\n  const ref = useRef<HTMLDivElement | null>(null);\n\n  /**\n   * The class that enables drag animations needs to be added after mount otherwise panels move on mount to their set positions which is annoying\n   */\n  useEffect(() => {\n    updateAnimationClass(ref, !!isDraggable);\n  }, [isDraggable]);\n\n  validateChildrenSize(children);\n\n  const renderGrid = (width: number, height: number) => {\n    if (!width || !height) {\n      return null;\n    }\n\n    const layout = model.buildGridLayout(width, height);\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 ref={ref} style={{ width: `${width}px`, height: '100%' }} className=\"react-grid-layout\">\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          layout={layout}\n          onDragStart={model.onDragStart}\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\n  return (\n    <div ref={outerDivRef as RefCallback<HTMLDivElement>} className={gridWrapperClass}>\n      {renderGrid(width, height)}\n    </div>\n  );\n}\n\nconst gridWrapperClass = css({\n  flex: '1 1 auto',\n  position: 'relative',\n  zIndex: 1,\n  width: '100%',\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\n  const innerContent = <sceneChild.Component model={sceneChild} key={sceneChild.state.key} />;\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={style}\n        ref={ref}\n      >\n        {innerContent}\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={style}\n    >\n      {innerContent}\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\nfunction updateAnimationClass(\n  ref: React.MutableRefObject<HTMLDivElement | null>,\n  isDraggable: boolean,\n  retry?: boolean\n) {\n  if (ref.current) {\n    if (isDraggable) {\n      ref.current.classList.add('react-grid-layout--enable-move-animations');\n    } else {\n      ref.current.classList.remove('react-grid-layout--enable-move-animations');\n    }\n  } else if (!retry) {\n    setTimeout(() => updateAnimationClass(ref, isDraggable, true), 50);\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":["width","height"],"mappings":"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"}
+{"version":3,"file":"SceneGridLayoutRenderer.js","sources":["../../../../../src/components/layout/grid/SceneGridLayoutRenderer.tsx"],"sourcesContent":["import React, { RefCallback, useEffect, useRef } from 'react';\nimport ReactGridLayout from 'react-grid-layout';\nimport { SceneComponentProps } from '../../../core/types';\nimport { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from './constants';\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { SceneGridItemLike } from './types';\nimport { useStyles2 } from '@grafana/ui';\nimport { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useMeasure } from 'react-use';\n\nexport function SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGridLayout>) {\n  const { children, isDraggable, isResizable } = model.useState();\n  const [outerDivRef, { width, height }] = useMeasure();\n  const ref = useRef<HTMLDivElement | null>(null);\n\n  /**\n   * The class that enables drag animations needs to be added after mount otherwise panels move on mount to their set positions which is annoying\n   */\n  useEffect(() => {\n    updateAnimationClass(ref, !!isDraggable);\n  }, [isDraggable]);\n\n  validateChildrenSize(children);\n\n  const renderGrid = (width: number, height: number) => {\n    if (!width || !height) {\n      return null;\n    }\n\n    const layout = model.buildGridLayout(width, height);\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 ref={ref} style={{ width: `${width}px`, height: '100%' }} className=\"react-grid-layout\">\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          layout={layout}\n          onDragStart={model.onDragStart}\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              totalCount={layout.length}\n            />\n          ))}\n        </ReactGridLayout>\n      </div>\n    );\n  };\n\n  return (\n    <div ref={outerDivRef as RefCallback<HTMLDivElement>} className={gridWrapperClass}>\n      {renderGrid(width, height)}\n    </div>\n  );\n}\n\nconst gridWrapperClass = css({\n  flex: '1 1 auto',\n  position: 'relative',\n  zIndex: 1,\n  width: '100%',\n});\n\ninterface GridItemWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  grid: SceneGridLayout;\n  layoutItem: ReactGridLayout.Layout;\n  index: number;\n  totalCount: number;\n}\n\nconst GridItemWrapper = React.forwardRef<HTMLDivElement, GridItemWrapperProps>((props, ref) => {\n  const { grid, layoutItem, index, totalCount, style, onLoad, onChange, children, ...divProps } = props;\n  const sceneChild = grid.getSceneLayoutChild(layoutItem.i)!;\n  const className = sceneChild.getClassName?.();\n\n  const innerContent = <sceneChild.Component model={sceneChild} key={sceneChild.state.key} />;\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={style}\n    >\n      {innerContent}\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\nfunction updateAnimationClass(\n  ref: React.MutableRefObject<HTMLDivElement | null>,\n  isDraggable: boolean,\n  retry?: boolean\n) {\n  if (ref.current) {\n    if (isDraggable) {\n      ref.current.classList.add('react-grid-layout--enable-move-animations');\n    } else {\n      ref.current.classList.remove('react-grid-layout--enable-move-animations');\n    }\n  } else if (!retry) {\n    setTimeout(() => updateAnimationClass(ref, isDraggable, true), 50);\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":["width","height"],"mappings":"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"}

package/dist/index.js

@@ -12837,7 +12837,7 @@ function isSceneGridLayout(child) {
 }
 
 function SceneGridLayoutRenderer({ model }) {
-  const { children, isLazy, isDraggable, isResizable } = model.useState();
+  const { children, isDraggable, isResizable } = model.useState();
   const [outerDivRef, { width, height }] = reactUse.useMeasure();
   const ref = React.useRef(null);
   React.useEffect(() => {
@@ -12883,7 +12883,6 @@ function SceneGridLayoutRenderer({ model }) {
             grid: model,
             layoutItem: gridItem,
             index,
-            isLazy,
             totalCount: layout.length
           }
         ))
@@ -12900,25 +12899,10 @@ const gridWrapperClass = css.css({
 });
 const GridItemWrapper = React__default.default.forwardRef((props, ref) => {
   var _a;
-  const { grid, layoutItem, index, totalCount, isLazy, style, onLoad, onChange, children, ...divProps } = props;
+  const { grid, layoutItem, index, totalCount, style, onLoad, onChange, children, ...divProps } = props;
   const sceneChild = grid.getSceneLayoutChild(layoutItem.i);
   const className = (_a = sceneChild.getClassName) == null ? void 0 : _a.call(sceneChild);
   const innerContent = /* @__PURE__ */ React__default.default.createElement(sceneChild.Component, { model: sceneChild, key: sceneChild.state.key });
-  if (isLazy) {
-    return /* @__PURE__ */ React__default.default.createElement(
-      LazyLoader,
-      {
-        ...divProps,
-        key: sceneChild.state.key,
-        "data-griditem-key": sceneChild.state.key,
-        className: css.cx(className, props.className),
-        style,
-        ref
-      },
-      innerContent,
-      children
-    );
-  }
   return /* @__PURE__ */ React__default.default.createElement(
     "div",
     {