From 254df65e09fb2d600c11abe15a347178f29e2a24 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Wed, 22 Feb 2023 12:26:58 +0000
Subject: [PATCH] fix(file-explorer): sort alpha & overflow scroll (#754)

---
 .../src/components/FileExplorer/index.tsx     | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/sandpack-react/src/components/FileExplorer/index.tsx b/sandpack-react/src/components/FileExplorer/index.tsx
index d2c7192e9..01c85a809 100644
--- a/sandpack-react/src/components/FileExplorer/index.tsx
+++ b/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>
   );
 };