Fixed styleguide crashing (deephaven#1890)

packages/components/src/spectrum/listView/ListViewWrapper.tsx

@@ -4,6 +4,7 @@ import {
 } from '@adobe/react-spectrum';
 import {
   extractSpectrumHTMLElement,
+  useContentRect,
   useOnScrollRef,
 } from '@deephaven/react-hooks';
 import { EMPTY_FUNCTION } from '@deephaven/utils';
@@ -41,25 +42,46 @@ export function ListViewWrapper<T>(
 
   const scrollRef = useOnScrollRef(onScroll, extractSpectrumHTMLElement);
 
+  // Spectrum ListView crashes when it has zero height. Track the contentRect
+  // of the parent container and only render the ListView when it has a non-zero
+  // height. See https://github.com/adobe/react-spectrum/issues/6213
+  const { ref: contentRectRef, contentRect } = useContentRect(
+    extractSpectrumHTMLElement
+  );
+
   return (
     <Flex
       direction="column"
+      ref={contentRectRef}
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...styleProps}
+      // Set min-height to 1px so that `ListView` is rendered whenever container
+      // is visible. This prevents the height from shrinking to zero as a result
+      // of a parent grid or flex container calculating content sizes. The
+      // container height can still be zero when it is not being displayed such
+      // as when one of its parents have `display: none`.
+      minHeight={styleProps.minHeight ?? 1}
       UNSAFE_className={cl(
         'dh-list-view-wrapper',
         `dh-list-view-wrapper-density-${listViewProps.density ?? 'regular'}`,
         `dh-list-view-wrapper-scale-${scale}`,
         styleProps.UNSAFE_className
       )}
     >
-      <SpectrumListView
-        ref={scrollRef}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...ariaLabelProps}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...listViewProps}
-      />
+      {/**
+       * Only render ListView if parent is visible. Some time in the future we
+       * should consider using `checkVisibility()` once it has better browser
+       * support.
+       */}
+      {contentRect.height === 0 ? null : (
+        <SpectrumListView
+          ref={scrollRef}
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...ariaLabelProps}
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...listViewProps}
+        />
+      )}
     </Flex>
   );
 }

tests/styleguide.spec.ts

@@ -80,6 +80,13 @@ test('UI regression test - Styleguide button section count', async ({
 // Iterate over all sample sections and take a screenshot of each one.
 sampleSectionIds.forEach(id => {
   test(`UI regression test - Styleguide section - ${id}`, async ({ page }) => {
+    // Fail quickly if console errors are detected
+    page.on('console', msg => {
+      if (msg.type() === 'error') {
+        throw new Error(msg.text());
+      }
+    });
+
     // Isolate the section
     await page.goto(`/ide/styleguide?isolateSection=true#${id}`);