[composites] Support dom reorder by making use of MutationObserver

Author: chuganzy

packages/react/src/composite/list/CompositeList.tsx

@@ -41,8 +41,27 @@ export function CompositeList<Metadata>(props: CompositeList.Props<Metadata>) {
 
   useIsoLayoutEffect(() => {
     if (!mapDirty) {
-      return;
+      if (typeof MutationObserver !== 'function') {
+        return undefined;
+      }
+
+      const parents = new Set<Element>();
+      const mutationObserver = new MutationObserver(() => {
+        setMapDirty(true);
+      });
+
+      mapRef.current.forEach((_, node) => {
+        if (node.parentElement && !parents.has(node.parentElement)) {
+          parents.add(node.parentElement);
+          mutationObserver.observe(node.parentElement, { childList: true });
+        }
+      });
+
+      return () => {
+        mutationObserver.disconnect();
+      };
     }
+
     const newMap = new Map<Element, CompositeMetadata<Metadata>>();
     const sortedNodes = Array.from(mapRef.current.keys()).sort(sortByDocumentPosition);
 
@@ -52,6 +71,8 @@ export function CompositeList<Metadata>(props: CompositeList.Props<Metadata>) {
     });
     mapRef.current = newMap;
     setMapDirty(false);
+
+    return undefined;
   }, [mapDirty, mapRef]);
 
   const sortedMap = mapRef.current;