[question] is it okay to use undocumented events such as virtualScrollerContentSizeChange

[bartvde]

Order ID

72801

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

What is the reason some of the events are not documented? Can they still be used? Is it use at your own risk or do not use?

In my specific case I want to check if there are scrollbars and offset an element with the width/height of the vertical/horizontal scrollbars, and I am using a listener for virtualScrollerContentSizeChange to check if there are scrollbars. Thanks in advance for any guidance on undocumented events.

  /**
   * Fired when the content size used by the `GridVirtualScroller` changes.
   * @ignore - do not document.
   */
  virtualScrollerContentSizeChange: {};

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Linux 6.2 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
  Binaries:
    Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node
    Yarn: Not Found
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.0/bin/npm
  Browsers:
    Chrome: 116.0.5845.96
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.11 
    @mui/codemod: ^5.14.5 => 5.14.5 
    @mui/core-downloads-tracker:  5.14.5 
    @mui/icons-material: ^5.14.3 => 5.14.3 
    @mui/lab: ^5.0.0-alpha.140 => 5.0.0-alpha.140 
    @mui/material: ^5.14.5 => 5.14.5 
    @mui/private-theming:  5.14.5 
    @mui/styled-engine:  5.13.2 
    @mui/system: ^5.14.5 => 5.14.5 
    @mui/types:  7.2.4 
    @mui/utils: ^5.14.5 => 5.14.5 
    @mui/x-data-grid:  6.11.1 
    @mui/x-data-grid-pro: ^6.11.1 => 6.11.1 
    @mui/x-date-pickers:  6.11.1 
    @mui/x-date-pickers-pro: ^6.11.1 => 6.11.1 
    @mui/x-license-pro:  6.10.2 
    @types/react: ^18.2.20 => 18.2.20 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^4.9.5 => 4.9.5 

[cherniavskii]

Hi @bartvde
Parts of the API that are not documented are considered internal and could change.
You can use them at your own risk.

Could you tell us more about your use case?
Did you consider using viewportInnerSizeChange event?

[bartvde]

thanks, I just tried with viewportInnerSizeChange but this does not work. So basically we have a small footer and we need to offset it at the bottom / right position in case a scrollbar is visible, see attached. Also a related question, we end up with some cases where apiRef is an empty object, how can we ensure the apiRef is always set?

[bartvde]

For reference this is our listener now:

  const [scrollbarWidth, setScrollbarWidth] = useState<number | null>(null);
  const [scrollbarHeight, setScrollbarHeight] = useState<number | null>(null);

  const handleContentSizeChange = useCallback(() => {
    const containerElement = containerRef.current;
    if (containerElement) {
      const scroller = containerElement.querySelector('.MuiDataGrid-virtualScroller') as HTMLElement;
      if (scroller) {
        setScrollbarWidth(scroller.offsetWidth - scroller.clientWidth);
        setScrollbarHeight(scroller.offsetHeight - scroller.clientHeight);
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useGridApiEventHandler(apiRef, 'virtualScrollerContentSizeChange', handleContentSizeChange);

  return (
    <Typography sx={{...styles.footer, bottom: scrollbarHeight, right: scrollbarWidth}} variant="caption">

Like calling the useGridApiEventHandler when apiRef is an empty object will lead to exceptions

[bartvde]

ok the apiRef being empty seems to be related to having conditional rendering (size.height > 0), otherwise we hit:

console-wrapper.ts:28 MUI: useResizeContainer - The parent DOM element of the data grid has an empty height.
Please make sure that this element has an intrinsic height.
The grid displays with a height of 0px.

[MBilalShafi]

how can we ensure the apiRef is always set?

@bartvde It'd be great if you provided a live example but what I am guessing is, that you have something like this:

function App() {
  return (
    ...starting code
    {size.height > 0 && <DataGrid apiRef={apiRef} {...otherProps} />}
    ...proceeding code
  )
}

The apiRef requires a render to be assigned properly to the respective API object.

otherwise we hit

Instead of conditionally rendering the grid, could you use autoHeight instead?

I just tried with viewportInnerSizeChange but this does not work

For this use-case, I feel virtualScrollerContentSizeChange makes sense, unless we decide to introduce another event viewportOuterSizeChange (which would include scrollbar size) or provide a more generic gridRootDimensionsChange

CC @cherniavskii

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.