@grafana/scenes 5.3.7 → 5.3.8

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v5.3.8 (Wed Jul 10 2024)
+
+#### 🐛 Bug Fix
+
+- LazyLoader: Hide wrapper if child is hidden [#823](https://github.com/grafana/scenes/pull/823) ([@svennergr](https://github.com/svennergr))
+
+#### Authors: 1
+
+- Sven Grossmann ([@svennergr](https://github.com/svennergr))
+
+---
+
 # v5.3.7 (Thu Jul 04 2024)
 
 #### 🐛 Bug Fix

package/dist/esm/components/layout/CSSGrid/SceneCSSGridLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneCSSGridLayout.js","sources":["../../../../../src/components/layout/CSSGrid/SceneCSSGridLayout.tsx"],"sourcesContent":["import { css, CSSObject } from '@emotion/css';\nimport React, { ComponentType, CSSProperties, useMemo } from 'react';\n\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneLayout, SceneObjectState, SceneObject } from '../../../core/types';\nimport { config } from '@grafana/runtime';\nimport { LazyLoader } from '../LazyLoader';\n\nexport interface SceneCSSGridLayoutState extends SceneObjectState, SceneCSSGridLayoutOptions {\n  children: Array<SceneCSSGridItem | SceneObject>;\n  /**\n   * True when the item should rendered but not visible.\n   * Useful for conditional display of layout items\n   */\n  isHidden?: boolean;\n  /**\n   * For media query for sceens smaller than md breakpoint\n   */\n  md?: SceneCSSGridLayoutOptions;\n  /** True when the items should be lazy loaded */\n  isLazy?: boolean;\n}\n\nexport interface SceneCSSGridLayoutOptions {\n  /**\n   * Useful for setting a height on items without specifying how many rows there will be.\n   * Defaults to 320px\n   */\n  autoRows?: CSSProperties['gridAutoRows'];\n  /**\n   * This overrides the autoRows with a specific row template.\n   */\n  templateRows?: CSSProperties['gridTemplateRows'];\n  /**\n   * Defaults to repeat(auto-fit, minmax(400px, 1fr)). This pattern us useful for equally sized items with a min width of 400px\n   * and dynamic max width split equally among columns.\n   */\n  templateColumns: CSSProperties['gridTemplateColumns'];\n  /** In Grafana design system grid units (8px)  */\n  rowGap: number;\n  /** In Grafana design system grid units (8px)  */\n  columnGap: number;\n  justifyItems?: CSSProperties['justifyItems'];\n  alignItems?: CSSProperties['alignItems'];\n  justifyContent?: CSSProperties['justifyContent'];\n}\n\nexport class SceneCSSGridLayout extends SceneObjectBase<SceneCSSGridLayoutState> implements SceneLayout {\n  public static Component = SceneCSSGridLayoutRenderer;\n\n  public constructor(state: Partial<SceneCSSGridLayoutState>) {\n    super({\n      rowGap: 1,\n      columnGap: 1,\n      templateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',\n      autoRows: state.autoRows ?? `320px`,\n      children: state.children ?? [],\n      ...state,\n    });\n  }\n\n  public isDraggable(): boolean {\n    return false;\n  }\n}\n\nfunction SceneCSSGridLayoutRenderer({ model }: SceneCSSGridItemRenderProps<SceneCSSGridLayout>) {\n  const { children, isHidden, isLazy } = model.useState();\n  const style = useLayoutStyle(model.state);\n\n  if (isHidden) {\n    return null;\n  }\n\n  return (\n    <div className={style}>\n      {children.map((item) => {\n        const Component = item.Component as ComponentType<SceneCSSGridItemRenderProps<SceneObject>>;\n        if (isLazy) {\n          return (\n            <LazyLoader key={item.state.key!} className={style}>\n              <Component key={item.state.key} model={item} parentState={model.state} />\n            </LazyLoader>\n          );\n        }\n        return <Component key={item.state.key} model={item} parentState={model.state} />;\n      })}\n    </div>\n  );\n}\n\nexport interface SceneCSSGridItemPlacement {\n  /**\n   * True when the item should rendered but not visible.\n   * Useful for conditional display of layout items\n   */\n  isHidden?: boolean;\n  /**\n   * Useful for making content span across multiple rows or columns\n   */\n  gridColumn?: CSSProperties['gridColumn'];\n  gridRow?: CSSProperties['gridRow'];\n}\n\nexport interface SceneCSSGridItemState extends SceneCSSGridItemPlacement, SceneObjectState {\n  body: SceneObject | undefined;\n}\n\ninterface SceneCSSGridItemRenderProps<T> extends SceneComponentProps<T> {\n  parentState?: SceneCSSGridItemPlacement;\n}\n\nexport class SceneCSSGridItem extends SceneObjectBase<SceneCSSGridItemState> {\n  public static Component = SceneCSSGridItemRenderer;\n}\n\nfunction SceneCSSGridItemRenderer({ model, parentState }: SceneCSSGridItemRenderProps<SceneCSSGridItem>) {\n  if (!parentState) {\n    throw new Error('SceneCSSGridItem must be a child of SceneCSSGridLayout');\n  }\n\n  const { body, isHidden } = model.useState();\n  const style = useItemStyle(model.state);\n\n  if (!body || isHidden) {\n    return null;\n  }\n\n  return (\n    <div className={style}>\n      <body.Component model={body} />\n    </div>\n  );\n}\n\nfunction useLayoutStyle(state: SceneCSSGridLayoutState) {\n  return useMemo(() => {\n    const {} = state;\n    // only need breakpoints so accessing theme from config instead of context is ok\n    const style: CSSObject = {};\n    const theme = config.theme2;\n\n    style.display = 'grid';\n    style.gridTemplateColumns = state.templateColumns;\n    style.gridTemplateRows = state.templateRows || 'unset';\n    style.gridAutoRows = state.autoRows || 'unset';\n    style.rowGap = theme.spacing(state.rowGap ?? 1);\n    style.columnGap = theme.spacing(state.columnGap ?? 1);\n    style.justifyItems = state.justifyItems || 'unset';\n    style.alignItems = state.alignItems || 'unset';\n    style.justifyContent = state.justifyContent || 'unset';\n    style.flexGrow = 1;\n\n    if (state.md) {\n      style[theme.breakpoints.down('md')] = {\n        gridTemplateRows: state.md?.templateRows,\n        gridTemplateColumns: state.md?.templateColumns,\n        rowGap: state.md.rowGap ? theme.spacing(state.md?.rowGap ?? 1) : undefined,\n        columnGap: state.md.columnGap ? theme.spacing(state.md?.rowGap ?? 1) : undefined,\n        justifyItems: state.md?.justifyItems,\n        alignItems: state.md?.alignItems,\n        justifyContent: state.md?.justifyContent,\n      };\n    }\n\n    return css(style);\n  }, [state]);\n}\n\nfunction useItemStyle(state: SceneCSSGridItemState) {\n  return useMemo(() => {\n    const style: CSSObject = {};\n\n    style.gridColumn = state.gridColumn || 'unset';\n    style.gridRow = state.gridRow || 'unset';\n    // Needed for VizPanel\n    style.position = 'relative';\n\n    return css(style);\n  }, [state]);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SceneCSSGridLayout.js","sources":["../../../../../src/components/layout/CSSGrid/SceneCSSGridLayout.tsx"],"sourcesContent":["import { css, CSSObject } from '@emotion/css';\nimport React, { ComponentType, CSSProperties, useMemo } from 'react';\n\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneLayout, SceneObjectState, SceneObject } from '../../../core/types';\nimport { config } from '@grafana/runtime';\nimport { LazyLoader } from '../LazyLoader';\n\nexport interface SceneCSSGridLayoutState extends SceneObjectState, SceneCSSGridLayoutOptions {\n  children: Array<SceneCSSGridItem | SceneObject>;\n  /**\n   * True when the item should rendered but not visible.\n   * Useful for conditional display of layout items\n   */\n  isHidden?: boolean;\n  /**\n   * For media query for sceens smaller than md breakpoint\n   */\n  md?: SceneCSSGridLayoutOptions;\n  /** True when the items should be lazy loaded */\n  isLazy?: boolean;\n}\n\nexport interface SceneCSSGridLayoutOptions {\n  /**\n   * Useful for setting a height on items without specifying how many rows there will be.\n   * Defaults to 320px\n   */\n  autoRows?: CSSProperties['gridAutoRows'];\n  /**\n   * This overrides the autoRows with a specific row template.\n   */\n  templateRows?: CSSProperties['gridTemplateRows'];\n  /**\n   * Defaults to repeat(auto-fit, minmax(400px, 1fr)). This pattern us useful for equally sized items with a min width of 400px\n   * and dynamic max width split equally among columns.\n   */\n  templateColumns: CSSProperties['gridTemplateColumns'];\n  /** In Grafana design system grid units (8px)  */\n  rowGap: number;\n  /** In Grafana design system grid units (8px)  */\n  columnGap: number;\n  justifyItems?: CSSProperties['justifyItems'];\n  alignItems?: CSSProperties['alignItems'];\n  justifyContent?: CSSProperties['justifyContent'];\n}\n\nexport class SceneCSSGridLayout extends SceneObjectBase<SceneCSSGridLayoutState> implements SceneLayout {\n  public static Component = SceneCSSGridLayoutRenderer;\n\n  public constructor(state: Partial<SceneCSSGridLayoutState>) {\n    super({\n      rowGap: 1,\n      columnGap: 1,\n      templateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',\n      autoRows: state.autoRows ?? `320px`,\n      children: state.children ?? [],\n      ...state,\n    });\n  }\n\n  public isDraggable(): boolean {\n    return false;\n  }\n}\n\nfunction SceneCSSGridLayoutRenderer({ model }: SceneCSSGridItemRenderProps<SceneCSSGridLayout>) {\n  const { children, isHidden, isLazy } = model.useState();\n  const style = useLayoutStyle(model.state);\n\n  if (isHidden) {\n    return null;\n  }\n\n  return (\n    <div className={style}>\n      {children.map((item) => {\n        const Component = item.Component as ComponentType<SceneCSSGridItemRenderProps<SceneObject>>;\n        \n        if (isLazy) {\n          return (\n            <LazyLoader key={item.state.key!} className={style}>\n              <Component key={item.state.key} model={item} parentState={model.state} />\n            </LazyLoader>\n          );\n        }\n        return <Component key={item.state.key} model={item} parentState={model.state} />;\n      })}\n    </div>\n  );\n}\n\nexport interface SceneCSSGridItemPlacement {\n  /**\n   * True when the item should rendered but not visible.\n   * Useful for conditional display of layout items\n   */\n  isHidden?: boolean;\n  /**\n   * Useful for making content span across multiple rows or columns\n   */\n  gridColumn?: CSSProperties['gridColumn'];\n  gridRow?: CSSProperties['gridRow'];\n}\n\nexport interface SceneCSSGridItemState extends SceneCSSGridItemPlacement, SceneObjectState {\n  body: SceneObject | undefined;\n}\n\ninterface SceneCSSGridItemRenderProps<T> extends SceneComponentProps<T> {\n  parentState?: SceneCSSGridItemPlacement;\n}\n\nexport class SceneCSSGridItem extends SceneObjectBase<SceneCSSGridItemState> {\n  public static Component = SceneCSSGridItemRenderer;\n}\n\nfunction SceneCSSGridItemRenderer({ model, parentState }: SceneCSSGridItemRenderProps<SceneCSSGridItem>) {\n  if (!parentState) {\n    throw new Error('SceneCSSGridItem must be a child of SceneCSSGridLayout');\n  }\n\n  const { body, isHidden } = model.useState();\n  const style = useItemStyle(model.state);\n\n  if (!body || isHidden) {\n    return null;\n  }\n\n  return (\n    <div className={style}>\n      <body.Component model={body} />\n    </div>\n  );\n}\n\nfunction useLayoutStyle(state: SceneCSSGridLayoutState) {\n  return useMemo(() => {\n    const {} = state;\n    // only need breakpoints so accessing theme from config instead of context is ok\n    const style: CSSObject = {};\n    const theme = config.theme2;\n\n    style.display = 'grid';\n    style.gridTemplateColumns = state.templateColumns;\n    style.gridTemplateRows = state.templateRows || 'unset';\n    style.gridAutoRows = state.autoRows || 'unset';\n    style.rowGap = theme.spacing(state.rowGap ?? 1);\n    style.columnGap = theme.spacing(state.columnGap ?? 1);\n    style.justifyItems = state.justifyItems || 'unset';\n    style.alignItems = state.alignItems || 'unset';\n    style.justifyContent = state.justifyContent || 'unset';\n    style.flexGrow = 1;\n\n    if (state.md) {\n      style[theme.breakpoints.down('md')] = {\n        gridTemplateRows: state.md?.templateRows,\n        gridTemplateColumns: state.md?.templateColumns,\n        rowGap: state.md.rowGap ? theme.spacing(state.md?.rowGap ?? 1) : undefined,\n        columnGap: state.md.columnGap ? theme.spacing(state.md?.rowGap ?? 1) : undefined,\n        justifyItems: state.md?.justifyItems,\n        alignItems: state.md?.alignItems,\n        justifyContent: state.md?.justifyContent,\n      };\n    }\n\n    return css(style);\n  }, [state]);\n}\n\nfunction useItemStyle(state: SceneCSSGridItemState) {\n  return useMemo(() => {\n    const style: CSSObject = {};\n\n    style.gridColumn = state.gridColumn || 'unset';\n    style.gridRow = state.gridRow || 'unset';\n    // Needed for VizPanel\n    style.position = 'relative';\n\n    return css(style);\n  }, [state]);\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useImperativeHandle } from 'react';
 import { useEffectOnce } from 'react-use';
 import { uniqueId } from 'lodash';
+import { css } from '@emotion/css';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -38,8 +39,9 @@ function useUniqueId() {
 }
 const LazyLoader = React.forwardRef(
   (_a, ref) => {
-    var _b = _a, { children, onLoad, onChange } = _b, rest = __objRest(_b, ["children", "onLoad", "onChange"]);
+    var _b = _a, { children, onLoad, onChange, className } = _b, rest = __objRest(_b, ["children", "onLoad", "onChange", "className"]);
     const id = useUniqueId();
+    const style = useStyle();
     const [loaded, setLoaded] = useState(false);
     const [isInView, setIsInView] = useState(false);
     const innerRef = useRef(null);
@@ -67,10 +69,18 @@ const LazyLoader = React.forwardRef(
     });
     return /* @__PURE__ */ React.createElement("div", __spreadValues({
       id,
-      ref: innerRef
+      ref: innerRef,
+      className: `${loaded ? style : ""} ${className}`
     }, rest), loaded && (typeof children === "function" ? children({ isInView }) : children));
   }
 );
+function useStyle() {
+  return css({
+    "&:empty": {
+      display: "none"
+    }
+  });
+}
 LazyLoader.displayName = "LazyLoader";
 LazyLoader.callbacks = {};
 LazyLoader.addCallback = (id, c) => LazyLoader.callbacks[id] = c;

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

@@ -1 +1 @@
-{"version":3,"file":"LazyLoader.js","sources":["../../../../src/components/layout/LazyLoader.tsx"],"sourcesContent":["import React, { ForwardRefExoticComponent, useImperativeHandle, useRef, useState } from 'react';\nimport { useEffectOnce } from 'react-use';\n\nimport { uniqueId } from 'lodash';\n\nexport function useUniqueId(): string {\n  const idRefLazy = useRef<string | undefined>(undefined);\n  idRefLazy.current ??= uniqueId();\n  return idRefLazy.current;\n}\n\nexport interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'children'> {\n  children: React.ReactNode | (({ isInView }: { isInView: boolean }) => React.ReactNode);\n  key: string;\n  onLoad?: () => void;\n  onChange?: (isInView: boolean) => void;\n}\n\nexport interface LazyLoaderType extends ForwardRefExoticComponent<Props> {\n  addCallback: (id: string, c: (e: IntersectionObserverEntry) => void) => void;\n  callbacks: Record<string, (e: IntersectionObserverEntry) => void>;\n  observer: IntersectionObserver;\n}\n\nexport const LazyLoader: LazyLoaderType = React.forwardRef<HTMLDivElement, Props>(\n  ({ children, onLoad, onChange, ...rest }, ref) => {\n    const id = useUniqueId();\n    const [loaded, setLoaded] = useState(false);\n    const [isInView, setIsInView] = useState(false);\n    const innerRef = useRef<HTMLDivElement>(null);\n\n    useImperativeHandle(ref, () => innerRef.current!);\n\n    useEffectOnce(() => {\n      LazyLoader.addCallback(id, (entry) => {\n        if (!loaded && entry.isIntersecting) {\n          setLoaded(true);\n          onLoad?.();\n        }\n\n        setIsInView(entry.isIntersecting);\n        onChange?.(entry.isIntersecting);\n      });\n\n      const wrapperEl = innerRef.current;\n\n      if (wrapperEl) {\n        LazyLoader.observer.observe(wrapperEl);\n      }\n\n      return () => {\n        delete LazyLoader.callbacks[id];\n        wrapperEl && LazyLoader.observer.unobserve(wrapperEl);\n        if (Object.keys(LazyLoader.callbacks).length === 0) {\n          LazyLoader.observer.disconnect();\n        }\n      };\n    });\n\n    return (\n      <div id={id} ref={innerRef} {...rest}>\n        {loaded && (typeof children === 'function' ? children({ isInView }) : children)}\n      </div>\n    );\n  }\n) as LazyLoaderType;\n\nLazyLoader.displayName = 'LazyLoader';\nLazyLoader.callbacks = {} as Record<string, (e: IntersectionObserverEntry) => void>;\nLazyLoader.addCallback = (id: string, c: (e: IntersectionObserverEntry) => void) => (LazyLoader.callbacks[id] = c);\nLazyLoader.observer = new IntersectionObserver(\n  (entries) => {\n    for (const entry of entries) {\n      LazyLoader.callbacks[entry.target.id](entry);\n    }\n  },\n  { rootMargin: '100px' }\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"LazyLoader.js","sources":["../../../../src/components/layout/LazyLoader.tsx"],"sourcesContent":["import React, { ForwardRefExoticComponent, useImperativeHandle, useRef, useState } from 'react';\nimport { useEffectOnce } from 'react-use';\n\nimport { uniqueId } from 'lodash';\nimport { css } from '@emotion/css';\n\nexport function useUniqueId(): string {\n  const idRefLazy = useRef<string | undefined>(undefined);\n  idRefLazy.current ??= uniqueId();\n  return idRefLazy.current;\n}\n\nexport interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'children'> {\n  children: React.ReactNode | (({ isInView }: { isInView: boolean }) => React.ReactNode);\n  key: string;\n  onLoad?: () => void;\n  onChange?: (isInView: boolean) => void;\n}\n\nexport interface LazyLoaderType extends ForwardRefExoticComponent<Props> {\n  addCallback: (id: string, c: (e: IntersectionObserverEntry) => void) => void;\n  callbacks: Record<string, (e: IntersectionObserverEntry) => void>;\n  observer: IntersectionObserver;\n}\n\nexport const LazyLoader: LazyLoaderType = React.forwardRef<HTMLDivElement, Props>(\n  ({ children, onLoad, onChange, className, ...rest }, ref) => {\n    const id = useUniqueId();\n    const style = useStyle();\n    const [loaded, setLoaded] = useState(false);\n    const [isInView, setIsInView] = useState(false);\n    const innerRef = useRef<HTMLDivElement>(null);\n\n    useImperativeHandle(ref, () => innerRef.current!);\n\n    useEffectOnce(() => {\n      LazyLoader.addCallback(id, (entry) => {\n        if (!loaded && entry.isIntersecting) {\n          setLoaded(true);\n          onLoad?.();\n        }\n\n        setIsInView(entry.isIntersecting);\n        onChange?.(entry.isIntersecting);\n      });\n\n      const wrapperEl = innerRef.current;\n\n      if (wrapperEl) {\n        LazyLoader.observer.observe(wrapperEl);\n      }\n\n      return () => {\n        delete LazyLoader.callbacks[id];\n        wrapperEl && LazyLoader.observer.unobserve(wrapperEl);\n        if (Object.keys(LazyLoader.callbacks).length === 0) {\n          LazyLoader.observer.disconnect();\n        }\n      };\n    });\n\n    return (\n      <div id={id} ref={innerRef} className={`${loaded ? style : ''} ${className}`} {...rest}>\n        {loaded && (typeof children === 'function' ? children({ isInView }) : children)}\n      </div>\n    );\n  }\n) as LazyLoaderType;\n\nfunction useStyle() {\n  return css({\n    '&:empty': {\n      display: 'none',\n    },\n  });\n}\n\nLazyLoader.displayName = 'LazyLoader';\nLazyLoader.callbacks = {} as Record<string, (e: IntersectionObserverEntry) => void>;\nLazyLoader.addCallback = (id: string, c: (e: IntersectionObserverEntry) => void) => (LazyLoader.callbacks[id] = c);\nLazyLoader.observer = new IntersectionObserver(\n  (entries) => {\n    for (const entry of entries) {\n      LazyLoader.callbacks[entry.target.id](entry);\n    }\n  },\n  { rootMargin: '100px' }\n);\n"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -8185,8 +8185,9 @@ function useUniqueId() {
 }
 const LazyLoader = React__default["default"].forwardRef(
   (_a, ref) => {
-    var _b = _a, { children, onLoad, onChange } = _b, rest = __objRest$1(_b, ["children", "onLoad", "onChange"]);
+    var _b = _a, { children, onLoad, onChange, className } = _b, rest = __objRest$1(_b, ["children", "onLoad", "onChange", "className"]);
     const id = useUniqueId();
+    const style = useStyle();
     const [loaded, setLoaded] = React.useState(false);
     const [isInView, setIsInView] = React.useState(false);
     const innerRef = React.useRef(null);
@@ -8214,10 +8215,18 @@ const LazyLoader = React__default["default"].forwardRef(
     });
     return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$b({
       id,
-      ref: innerRef
+      ref: innerRef,
+      className: `${loaded ? style : ""} ${className}`
     }, rest), loaded && (typeof children === "function" ? children({ isInView }) : children));
   }
 );
+function useStyle() {
+  return css.css({
+    "&:empty": {
+      display: "none"
+    }
+  });
+}
 LazyLoader.displayName = "LazyLoader";
 LazyLoader.callbacks = {};
 LazyLoader.addCallback = (id, c) => LazyLoader.callbacks[id] = c;