feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-motion/lib/utils/groups/getNextChildMapping.js

@@ -0,0 +1,30 @@
+import { mergeChildMappings } from './mergeChildMappings';
+export function getNextChildMapping(prevChildMapping, nextChildMapping) {
+    const childrenMapping = mergeChildMappings(prevChildMapping, nextChildMapping);
+    Object.entries(childrenMapping).forEach(([key, childDefinition])=>{
+        const hasPrev = key in prevChildMapping;
+        const hasNext = key in nextChildMapping;
+        if (hasNext) {
+            // Case 1: item hasn't changed transition states
+            if (hasPrev) {
+                childrenMapping[key] = {
+                    ...childDefinition
+                };
+                return;
+            }
+            // Case 2: item is new (entering)
+            childrenMapping[key] = {
+                ...childDefinition,
+                appear: true,
+                visible: true
+            };
+            return;
+        }
+        // Case 3: item is leaving
+        childrenMapping[key] = {
+            ...childDefinition,
+            visible: false
+        };
+    });
+    return childrenMapping;
+}