fix(file-tab): close button (#1198)

* fix(file-tab): close button

* fix

* fix

Author: danilowoz

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>
   );
 };

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