feat(List): add proper support for children API (#2207)

* Prototype: Context usage for collections

* revert changes

* add UTs

* fix UTs, create default

* improve UTs, types

* apply review comments

* prettify fixes

* feat(hooks): add useAutoControlled() hook

* add docs

* use autoControlled hook

* fix review comment

* fix deps

* fix version

* add changelog

* fix perf tests

Author: layershifter

CHANGELOG.md

@@ -37,6 +37,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Added sourcemaps to the dist output to simplify debugging @miroslavstastny ([#2329](https://github.com/microsoft/fluent-ui-react/pull/2329))
 - Adding 'expand', 'collapse', 'companion', 'share-to' and 'settings-audio' icons @TanelVari ([#2343](https://github.com/microsoft/fluent-ui-react/pull/2343))
+- Add support for Children API in `List` component @layershifter ([#2207](https://github.com/microsoft/fluent-ui-react/pull/2207))
 
 ### Performance
 - Add styles caching when there aren't inline overrides defined @mnajdova ([#2309](https://github.com/microsoft/fluent-ui-react/pull/2309))

docs/src/examples/components/List/Content/ListExampleContent.tsx

@@ -3,9 +3,15 @@ import { List } from '@fluentui/react'
 
 const ListExample = () => (
   <List>
-    <List.Item header="Program the sensor to the SAS alarm through the haptic SQL card!" />
-    <List.Item header="Use the online FTP application to input the multi-byte application!" />
-    <List.Item header="The GB pixel is down, navigate the virtual interface!" />
+    <List.Item
+      header="Program the sensor to the SAS alarm through the haptic SQL card!"
+      index={0}
+    />
+    <List.Item
+      header="Use the online FTP application to input the multi-byte application!"
+      index={1}
+    />
+    <List.Item header="The GB pixel is down, navigate the virtual interface!" index={2} />
   </List>
 )
 

docs/src/examples/components/List/Content/ListExampleContentMedia.tsx

@@ -6,14 +6,17 @@ const ListExample = () => (
     <List.Item
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
       contentMedia="7:26:56 AM"
+      index={0}
     />
     <List.Item
       content="Use the online FTP application to input the multi-byte application!"
       contentMedia="11:30:17 PM"
+      index={1}
     />
     <List.Item
       content="The GB pixel is down, navigate the virtual interface!"
       contentMedia="5:22:40 PM"
+      index={2}
     />
   </List>
 )

docs/src/examples/components/List/Content/ListExampleEndMedia.tsx

@@ -9,16 +9,19 @@ const ListExample = () => (
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
       endMedia={ellipsis}
       selectable
+      index={0}
     />
     <List.Item
       content="Use the online FTP application to input the multi-byte application!"
       endMedia={ellipsis}
       selectable
+      index={1}
     />
     <List.Item
       content="The GB pixel is down, navigate the virtual interface!"
       endMedia={ellipsis}
       selectable
+      index={2}
     />
   </List>
 )

docs/src/examples/components/List/Content/ListExampleHeader.tsx

@@ -3,9 +3,9 @@ import { List } from '@fluentui/react'
 
 const ListExample = () => (
   <List>
-    <List.Item header="Irving Kuhic" />
-    <List.Item header="Skyler Parks" />
-    <List.Item header="Dante Schneider" />
+    <List.Item header="Irving Kuhic" index={0} />
+    <List.Item header="Skyler Parks" index={1} />
+    <List.Item header="Dante Schneider" index={2} />
   </List>
 )
 

docs/src/examples/components/List/Content/ListExampleHeaderContent.tsx

@@ -6,14 +6,17 @@ const ListExample = () => (
     <List.Item
       header="Irving Kuhic"
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
+      index={0}
     />
     <List.Item
       header="Skyler Parks"
       content="Use the online FTP application to input the multi-byte application!"
+      index={1}
     />
     <List.Item
       header="Dante Schneider"
       content="The GB pixel is down, navigate the virtual interface!"
+      index={2}
     />
   </List>
 )

docs/src/examples/components/List/Content/ListExampleHeaderMedia.tsx

@@ -3,9 +3,9 @@ import { List } from '@fluentui/react'
 
 const ListExample = () => (
   <List>
-    <List.Item header="Irving Kuhic" headerMedia="7:26:56 AM" />
-    <List.Item header="Skyler Parks" headerMedia="11:30:17 PM" />
-    <List.Item header="Dante Schneider" headerMedia="5:22:40 PM" />
+    <List.Item header="Irving Kuhic" headerMedia="7:26:56 AM" index={0} />
+    <List.Item header="Skyler Parks" headerMedia="11:30:17 PM" index={1} />
+    <List.Item header="Dante Schneider" headerMedia="5:22:40 PM" index={2} />
   </List>
 )
 

docs/src/examples/components/List/Content/ListExampleMedia.tsx

@@ -8,18 +8,21 @@ const ListExampleMedia = () => (
       header="Irving Kuhic"
       headerMedia="7:26:56 AM"
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
+      index={0}
     />
     <List.Item
       media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
       header="Skyler Parks"
       headerMedia="11:30:17 PM"
       content="Use the online FTP application to input the multi-byte application!"
+      index={1}
     />
     <List.Item
       media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
       header="Dante Schneider"
       headerMedia="5:22:40 PM"
       content="The GB pixel is down, navigate the virtual interface!"
+      index={2}
     />
   </List>
 )