fix(file-explorer): sort alpha & overflow scroll (#754)

sandpack-react/src/components/FileExplorer/index.tsx

@@ -1,3 +1,4 @@
+import type { SandpackBundlerFiles } from "@codesandbox/sandpack-client";
 import * as React from "react";
 
 import { useSandpack } from "../../hooks/useSandpack";
@@ -61,24 +62,32 @@ export const SandpackFileExplorer = ({
     [status]
   );
 
+  const orderedFiles = Object.keys(files)
+    .sort()
+    .reduce<SandpackBundlerFiles>((obj, key) => {
+      obj[key] = files[key];
+      return obj;
+    }, {});
+
   return (
     <div
       className={classNames(
         stackClassName,
-        fileExplorerClassName,
         `${THEME_PREFIX}-file-explorer`,
         className
       )}
       {...props}
     >
-      <ModuleList
-        activeFile={activeFile}
-        autoHiddenFiles={autoHiddenFiles}
-        files={files}
-        prefixedPath="/"
-        selectFile={openFile}
-        visibleFiles={visibleFilesFromProps}
-      />
+      <div className={classNames(fileExplorerClassName)}>
+        <ModuleList
+          activeFile={activeFile}
+          autoHiddenFiles={autoHiddenFiles}
+          files={orderedFiles}
+          prefixedPath="/"
+          selectFile={openFile}
+          visibleFiles={visibleFilesFromProps}
+        />
+      </div>
     </div>
   );
 };