From 58d1f54a1f18fb917b54510976f5ab87c4d16ae7 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Wed, 11 Sep 2024 09:13:08 +0100
Subject: [PATCH] fix(file-tab): close button (#1198)

* fix(file-tab): close button

* fix

* fix
---
 sandpack-react/src/Playground.stories.tsx     | 35 +++++++------------
 .../src/components/FileTabs/index.tsx         | 18 +++-------
 2 files changed, 17 insertions(+), 36 deletions(-)

diff --git a/sandpack-react/src/Playground.stories.tsx b/sandpack-react/src/Playground.stories.tsx
index 96aa90ff..1cbb2b56 100644
--- a/sandpack-react/src/Playground.stories.tsx
+++ b/sandpack-react/src/Playground.stories.tsx
@@ -1,7 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from "react";
 
-import { Sandpack } from "./";
+import {
+  SandpackCodeEditor,
+  SandpackFileExplorer,
+  SandpackLayout,
+  SandpackProvider,
+} from "./";
 
 export default {
   title: "Intro/Playground",
@@ -10,28 +15,12 @@ export default {
 export const Basic: React.FC = () => {
   return (
     <div style={{ height: "400vh" }}>
-      <Sandpack
-        options={{
-          showTabs: true,
-          closableTabs: true,
-          experimental_enableServiceWorker: true,
-          experimental_enableStableServiceWorkerId: true,
-        }}
-        // customSetup={{
-        //   dependencies: {
-        //     "react-content-loader": "latest",
-        //     "radix-ui": "latest",
-        //     "styled-components": "latest",
-        //     "react-dom": "latest",
-        //     react: "latest",
-        //     "react-table": "latest",
-        //   },
-        // }}
-        // options={{
-        //   bundlerURL: "https://ymxnqs-3000.csb.app",
-        // }}
-        template="react"
-      />
+      <SandpackProvider>
+        <SandpackLayout>
+          <SandpackFileExplorer />
+          <SandpackCodeEditor closableTabs showTabs />
+        </SandpackLayout>
+      </SandpackProvider>
     </div>
   );
 };
diff --git a/sandpack-react/src/components/FileTabs/index.tsx b/sandpack-react/src/components/FileTabs/index.tsx
index 0118e264..a8feb863 100644
--- a/sandpack-react/src/components/FileTabs/index.tsx
+++ b/sandpack-react/src/components/FileTabs/index.tsx
@@ -96,18 +96,6 @@ export const FileTabs = ({
   const { activeFile, visibleFiles, setActiveFile } = sandpack;
   const [hoveredIndex, setIsHoveredIndex] = React.useState<null | number>(null);
 
-  const handleCloseFile = (ev: React.MouseEvent<HTMLDivElement>): void => {
-    ev.stopPropagation();
-    const tabElm = (ev.target as HTMLElement).closest(
-      "[data-active]"
-    ) as HTMLElement;
-    const pathToClose = tabElm?.getAttribute("title");
-    if (!pathToClose) {
-      return;
-    }
-    sandpack.closeFile(pathToClose);
-  };
-
   const getTriggerText = (currentPath: string): string => {
     const documentFileName = getFileName(currentPath);
 
@@ -224,7 +212,11 @@ export const FileTabs = ({
             {closableTabs && visibleFiles.length > 1 && (
               <span
                 className={classNames("close-button", [closeButtonClassName])}
-                onClick={handleCloseFile}
+                onClick={(ev) => {
+                  ev.stopPropagation();
+
+                  sandpack.closeFile(filePath);
+                }}
                 style={{
                   visibility:
                     filePath === activeFile || hoveredIndex === index