Cherry pick: GroupedListV2 changes

apps/fabric-website/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx

@@ -58,6 +58,8 @@ export const categories: { Other?: ICategory; [name: string]: ICategory } = {
         Compact: {},
         Grouped: {},
         LargeGrouped: { title: 'Large Grouped' },
+        GroupedV2: { title: 'Grouped V2' },
+        LargeGroupedV2: { title: 'Large Grouped V2' },
         CustomColumns: { title: 'Custom Item Columns', url: 'customitemcolumns' },
         CustomRows: { title: 'Custom Item Rows', url: 'customitemrows' },
         CustomFooter: { title: 'Custom Footer' },

apps/fabric-website/src/pages/Controls/DetailsListPage/DetailsListGroupedV2Page.doc.ts

@@ -0,0 +1,10 @@
+import { TFabricPlatformPageProps } from '../../../interfaces/Platforms';
+import { DetailsListSimpleGroupedV2PageProps as ExternalProps } from '@fluentui/react-examples/lib/office-ui-fabric-react/DetailsList/DetailsList.doc';
+
+export const DetailsListGroupedV2PageProps: TFabricPlatformPageProps = {
+  web: {
+    ...(ExternalProps as any),
+    title: 'DetailsList - Grouped V2',
+    isFeedbackVisible: false,
+  },
+};

apps/fabric-website/src/pages/Controls/DetailsListPage/DetailsListGroupedV2Page.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
+import { DetailsListGroupedV2PageProps } from './DetailsListGroupedV2Page.doc';
+
+export const DetailsListGroupedV2Page: React.FunctionComponent<IControlsPageProps> = props => {
+  return <ControlsAreaPage {...props} {...DetailsListGroupedV2PageProps[props.platform]} />;
+};

apps/fabric-website/src/pages/Controls/DetailsListPage/DetailsListLargeGroupedV2Page.doc.ts

@@ -0,0 +1,10 @@
+import { TFabricPlatformPageProps } from '../../../interfaces/Platforms';
+import { DetailsListLargeGroupedPageProps as ExternalProps } from '@fluentui/react-examples/lib/office-ui-fabric-react/DetailsList/DetailsList.doc';
+
+export const DetailsListLargeGroupedV2PageProps: TFabricPlatformPageProps = {
+  web: {
+    ...(ExternalProps as any),
+    title: 'DetailsList - Large Grouped V2',
+    isFeedbackVisible: false,
+  },
+};

apps/fabric-website/src/pages/Controls/DetailsListPage/DetailsListLargeGroupedV2Page.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
+import { DetailsListLargeGroupedV2PageProps } from './DetailsListLargeGroupedV2Page.doc';
+
+export const DetailsListLargeGroupedV2Page: React.FunctionComponent<IControlsPageProps> = props => {
+  return <ControlsAreaPage {...props} {...DetailsListLargeGroupedV2PageProps[props.platform]} />;
+};

apps/perf-test/package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "@uifabric/set-version": "^7.0.24",
     "@uifabric/example-app-base": "^7.22.30",
+    "@uifabric/example-data": "^7.1.6",
     "@uifabric/experiments": "^7.45.18",
     "@microsoft/load-themed-styles": "^1.10.26",
     "office-ui-fabric-react": "^7.201.1",

apps/perf-test/src/scenarioIterations.js

@@ -10,6 +10,11 @@ const scenarioIterations = {
   ComboBox: 1000,
   Persona: 1000,
   ContextualMenu: 1000,
+  /* List performance is generally more influenced by the size
+   * of the list rather than the number of lists on a page.
+   */
+  GroupedList: 2,
+  GroupedListV2: 2,
 };
 
 module.exports = scenarioIterations;

apps/perf-test/src/scenarios/GroupedList.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { createListItems, createGroups, IExampleItem } from '@uifabric/example-data';
+import { GroupedList, Selection, SelectionMode, DetailsRow, IGroup, IColumn } from 'office-ui-fabric-react';
+
+const groupCount = 5;
+const groupDepth = 5;
+const items = createListItems(Math.pow(groupCount, groupDepth + 1));
+const groups = createGroups(groupCount, groupDepth, 0, groupCount);
+
+const columns = Object.keys(items[0])
+  .slice(0, 3)
+  .map(
+    (key: string): IColumn => ({
+      key: key,
+      name: key,
+      fieldName: key,
+      minWidth: 300,
+    }),
+  );
+
+const selection = new Selection();
+selection.setItems(items);
+
+const onRenderCell = (
+  nestingDepth?: number,
+  item?: IExampleItem,
+  itemIndex?: number,
+  group?: IGroup,
+): React.ReactNode => {
+  return item && typeof itemIndex === 'number' && itemIndex > -1 ? (
+    <DetailsRow
+      columns={columns}
+      groupNestingDepth={nestingDepth}
+      item={item}
+      itemIndex={itemIndex}
+      selection={selection}
+      selectionMode={SelectionMode.multiple}
+      group={group}
+    />
+  ) : null;
+};
+
+const Scenario = () => {
+  return (
+    <GroupedList
+      items={items}
+      groups={groups}
+      onRenderCell={onRenderCell}
+      selection={selection}
+      selectionMode={SelectionMode.multiple}
+    />
+  );
+};
+
+export default Scenario;

apps/perf-test/src/scenarios/GroupedListV2.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { createListItems, createGroups, IExampleItem } from '@uifabric/example-data';
+import {
+  GroupedListV2_unstable as GroupedListV2,
+  Selection,
+  SelectionMode,
+  DetailsRow,
+  IGroup,
+  IColumn,
+} from 'office-ui-fabric-react';
+
+const groupCount = 5;
+const groupDepth = 5;
+const items = createListItems(Math.pow(groupCount, groupDepth + 1));
+const groups = createGroups(groupCount, groupDepth, 0, groupCount);
+
+const columns = Object.keys(items[0])
+  .slice(0, 3)
+  .map(
+    (key: string): IColumn => ({
+      key: key,
+      name: key,
+      fieldName: key,
+      minWidth: 300,
+    }),
+  );
+
+const selection = new Selection();
+selection.setItems(items);
+
+const onRenderCell = (
+  nestingDepth?: number,
+  item?: IExampleItem,
+  itemIndex?: number,
+  group?: IGroup,
+): React.ReactNode => {
+  return item && typeof itemIndex === 'number' && itemIndex > -1 ? (
+    <DetailsRow
+      columns={columns}
+      groupNestingDepth={nestingDepth}
+      item={item}
+      itemIndex={itemIndex}
+      selection={selection}
+      selectionMode={SelectionMode.multiple}
+      group={group}
+    />
+  ) : null;
+};
+
+const Scenario = () => {
+  return (
+    <GroupedListV2
+      items={items}
+      groups={groups}
+      onRenderCell={onRenderCell}
+      selection={selection}
+      selectionMode={SelectionMode.multiple}
+    />
+  );
+};
+
+export default Scenario;

change/@fluentui-react-9a7c1082-8e48-4512-8a9d-54462ef4a32b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add GroupedListV2 export",
+  "packageName": "@fluentui/react",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/office-ui-fabric-react-d8bae40a-a915-41d0-82e6-26e408cd1fff.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "cherry-pick: GroupedList: fix virtualization (unstable preview) (#24460)",
+  "packageName": "office-ui-fabric-react",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md

@@ -1563,6 +1563,11 @@ export class GroupedListSection extends React.Component<IGroupedListSectionProps
     render(): JSX.Element;
     }
 
+// Warning: (ae-forgotten-export) The symbol "IGroupedListV2Props" needs to be exported by the entry point index.d.ts
+//
+// @public
+export const GroupedListV2_unstable: React.FunctionComponent<IGroupedListV2Props>;
+
 // @public (undocumented)
 export const GroupFooter: React.FunctionComponent<IGroupFooterProps>;
 
@@ -3788,6 +3793,8 @@ export interface IDetailsGroupDividerProps extends IGroupDividerProps, IDetailsI
 
 // @public (undocumented)
 export interface IDetailsGroupRenderProps extends IGroupRenderProps {
+    // (undocumented)
+    groupedListAs?: IComponentAs<IGroupedListProps>;
     // (undocumented)
     onRenderFooter?: IRenderFunction<IDetailsGroupDividerProps>;
     // (undocumented)
@@ -4065,6 +4072,7 @@ export interface IDetailsRowBaseProps extends Pick<IDetailsListProps, 'onRenderI
     getRowAriaDescribedBy?: (item: any) => string;
     getRowAriaDescription?: (item: any) => string;
     getRowAriaLabel?: (item: any) => string;
+    group?: IGroup;
     id?: string;
     item: any;
     itemIndex: number;
@@ -5968,6 +5976,7 @@ export interface IListProps<T = any> extends React.HTMLAttributes<List<T> | HTML
     onPageRemoved?: (page: IPage<T>) => void;
     onPagesUpdated?: (pages: IPage<T>[]) => void;
     onRenderCell?: (item?: T, index?: number, isScrolling?: boolean) => React.ReactNode;
+    onRenderCellConditional?: (item?: T, index?: number, isScrolling?: boolean) => React.ReactNode | null;
     onRenderPage?: IRenderFunction<IPageProps<T>>;
     onRenderRoot?: IRenderFunction<IListOnRenderRootProps<T>>;
     onRenderSurface?: IRenderFunction<IListOnRenderSurfaceProps<T>>;
@@ -5986,6 +5995,8 @@ export interface IListState<T = any> {
     // (undocumented)
     getDerivedStateFromProps(nextProps: IListProps<T>, previousState: IListState<T>): IListState<T>;
     // (undocumented)
+    hasMounted: boolean;
+    // (undocumented)
     isScrolling?: boolean;
     measureVersion?: number;
     // (undocumented)
@@ -8964,13 +8975,14 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
     static defaultProps: {
         startIndex: number;
         onRenderCell: (item: any, index: number, containsFocus: boolean) => JSX.Element;
+        onRenderCellConditional: undefined;
         renderedWindowsAhead: number;
         renderedWindowsBehind: number;
     };
     // (undocumented)
     forceUpdate(): void;
     // (undocumented)
-    static getDerivedStateFromProps<T = any>(nextProps: IListProps<T>, previousState: IListState<T>): IListState<T>;
+    static getDerivedStateFromProps<U = any>(nextProps: IListProps<U>, previousState: IListState<U>): IListState<U>;
     // (undocumented)
     getStartItemIndexInView(measureItem?: (itemIndex: number) => number): number;
     getTotalListHeight(): number;

packages/office-ui-fabric-react/src/GroupedListV2.ts

@@ -0,0 +1 @@
+export * from './components/GroupedList/GroupedListV2';