revert: rollback List rendering change

apps/ssr-tests/test/test.js

@@ -46,12 +46,6 @@ describe('Utilities', () => {
       assert.equal(library.getDocument(), undefined);
     });
   });
-
-  describe('canUseDOM', () => {
-    it('returns false in server environment', () => {
-      assert.equal(library.canUseDOM(), false);
-    });
-  });
 });
 
 function testRender(componentName, component) {
@@ -62,7 +56,7 @@ function testRender(componentName, component) {
       ReactDOMServer.renderToString(elem);
       done();
     } catch (e) {
-      done(e);
+      done(new Error(e));
     }
   });
 }

change/@fluentui-react-095e69ed-d501-445c-aefa-a2f2ec7f8084.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "revert: rollback List rendering change",
+  "packageName": "@fluentui/react",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react/etc/react.api.md

@@ -6793,8 +6793,6 @@ export interface IListState<T = any> {
     // (undocumented)
     getDerivedStateFromProps(nextProps: IListProps<T>, previousState: IListState<T>): IListState<T>;
     // (undocumented)
-    hasMounted: boolean;
-    // (undocumented)
     isScrolling?: boolean;
     measureVersion?: number;
     // (undocumented)

packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap

@@ -8114,7 +8114,7 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                       flex-shrink: 0;
                                     }
                                 data-automationid="DetailsRow"
-                                data-focuszone-id="FocusZone7"
+                                data-focuszone-id="FocusZone9"
                                 data-is-focusable={true}
                                 data-item-index={0}
                                 data-selection-index={0}
@@ -8396,7 +8396,7 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                       flex-shrink: 0;
                                     }
                                 data-automationid="DetailsRow"
-                                data-focuszone-id="FocusZone9"
+                                data-focuszone-id="FocusZone11"
                                 data-is-focusable={true}
                                 data-item-index={1}
                                 data-selection-index={1}
@@ -8622,7 +8622,7 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                     >
                       <div
                         aria-expanded={true}
-                        aria-labelledby="GroupHeader11"
+                        aria-labelledby="GroupHeader7"
                         aria-rowindex={5}
                         className=
                             ms-GroupHeader
@@ -8814,7 +8814,7 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                   white-space: nowrap;
                                 }
                             data-selection-invoke={true}
-                            id="GroupHeader11"
+                            id="GroupHeader7"
                             onClick={[Function]}
                             role="gridcell"
                           >
@@ -8841,7 +8841,7 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                       <div
                         aria-label="Group 1"
                         className="ms-List"
-                        id="GroupedListSection10"
+                        id="GroupedListSection6"
                         role="rowgroup"
                       >
                         <div

packages/react/src/components/List/List.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   Async,
   EventGroup,
-  canUseDOM,
   css,
   divProperties,
   findIndex,
@@ -47,7 +46,6 @@ export interface IListState<T = any> {
   getDerivedStateFromProps(nextProps: IListProps<T>, previousState: IListState<T>): IListState<T>;
 
   pagesVersion?: {};
-  hasMounted: boolean;
 }
 
 interface IPageCacheItem<T> {
@@ -120,6 +118,7 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
   };
   private _focusedIndex: number;
   private _scrollElement?: HTMLElement;
+  private _hasCompletedFirstRender: boolean;
 
   // surface rect relative to window
   private _surfaceRect: IRectangle | undefined;
@@ -160,7 +159,6 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
       pages: [],
       isScrolling: false,
       getDerivedStateFromProps: this._getDerivedStateFromProps,
-      hasMounted: false,
     };
 
     this._async = new Async(this);
@@ -336,18 +334,9 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
   }
 
   public componentDidMount(): void {
-    this.setState({ hasMounted: true });
     this._scrollElement = findScrollableParent(this._root.current) as HTMLElement;
     this._scrollTop = 0;
-
-    if (!this.props.getPageHeight) {
-      const heightsChanged = this._updatePageMeasurements(this.state.pages!);
-      if (heightsChanged) {
-        this._materializedRect = null;
-        this.setState(this._updatePages(this.props, this.state));
-      }
-    }
-
+    this.setState(this._updatePages(this.props, this.state));
     this._measureVersion++;
 
     this._events.on(window, 'resize', this._onAsyncResize);
@@ -372,9 +361,15 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
         // If measured version is invalid since we've updated the DOM
         const heightsChanged = this._updatePageMeasurements(finalState.pages!);
 
+        // On first render, we should re-measure so that we don't get a visual glitch.
         if (heightsChanged) {
           this._materializedRect = null;
-          this._onAsyncScroll();
+          if (!this._hasCompletedFirstRender) {
+            this._hasCompletedFirstRender = true;
+            this.setState(this._updatePages(finalProps, finalState));
+          } else {
+            this._onAsyncScroll();
+          }
         } else {
           // Enqueue an idle bump.
           this._onAsyncIdle();
@@ -494,12 +489,8 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
       nextProps.items !== this.props.items ||
       nextProps.renderCount !== this.props.renderCount ||
       nextProps.startIndex !== this.props.startIndex ||
-      nextProps.version !== this.props.version ||
-      !previousState.hasMounted
+      nextProps.version !== this.props.version
     ) {
-      if (!canUseDOM()) {
-        return previousState;
-      }
       // We have received new items so we want to make sure that initially we only render a single window to
       // fill the currently visible rect, and then later render additional windows.
       this._resetRequiredWindows();
@@ -543,7 +534,7 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
 
     const pageElement = onRenderPage(
       {
-        page,
+        page: page,
         className: 'ms-List-page',
         key: page.key,
         ref: (newRef: unknown) => {
@@ -561,8 +552,8 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
     // first 30 items did not change, we still re-rendered all of them in this props.items change.
     if (usePageCache && page.startIndex === 0) {
       this._pageCache[page.key] = {
-        page,
-        pageElement,
+        page: page,
+        pageElement: pageElement,
       };
     }
     return pageElement;
@@ -992,7 +983,7 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
     // console.log('materialized: ', materializedRect);
     return {
       ...state,
-      pages,
+      pages: pages,
       measureVersion: this._measureVersion,
     };
   }
@@ -1018,16 +1009,16 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
       const { height = this._getPageHeight(itemIndex, visibleRect, itemCount) } = pageData;
 
       return {
-        itemCount,
-        height,
+        itemCount: itemCount,
+        height: height,
         data: pageData.data,
         key: pageData.key,
       };
     } else {
       const itemCount = this._getItemCountForPage(itemIndex, visibleRect);
 
       return {
-        itemCount,
+        itemCount: itemCount,
         height: this._getPageHeight(itemIndex, visibleRect, itemCount),
       };
     }
@@ -1072,13 +1063,13 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
 
     return {
       key: pageKey,
-      startIndex,
+      startIndex: startIndex,
       itemCount: count,
-      items,
-      style,
+      items: items,
+      style: style,
       top: 0,
       height: 0,
-      data,
+      data: data,
       isSpacer: isSpacer || false,
     };
   }
@@ -1155,9 +1146,9 @@ function _expandRect(rect: IRectangle, pagesBefore: number, pagesAfter: number):
   const height = rect.height + (pagesBefore + pagesAfter) * rect.height;
 
   return {
-    top,
+    top: top,
     bottom: top + height,
-    height,
+    height: height,
     left: rect.left,
     right: rect.right,
     width: rect.width,