feat: hideClose on DockviewDefaultTab

package.json

@@ -36,6 +36,7 @@
   "devDependencies": {
     "@testing-library/dom": "^8.20.0",
     "@testing-library/jest-dom": "^5.16.5",
+    "@total-typescript/shoehorn": "^0.1.1",
     "@types/jest": "^29.4.0",
     "@typescript-eslint/eslint-plugin": "^5.52.0",
     "@typescript-eslint/parser": "^5.52.0",

packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react';
+import { DockviewDefaultTab } from '../../dockview/defaultTab';
+import * as React from 'react';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { DockviewApi, DockviewPanelApi } from 'dockview-core';
+
+describe('defaultTab', () => {
+    test('has close button by default', async () => {
+        const api = fromPartial<DockviewPanelApi>({});
+        const containerApi = fromPartial<DockviewApi>({});
+        const params = {};
+
+        render(
+            <DockviewDefaultTab
+                api={api}
+                containerApi={containerApi}
+                params={params}
+            />
+        );
+
+        const element = await screen.getByTestId('dockview-default-tab');
+        expect(element.querySelector('.dv-react-tab-close-btn')).toBeTruthy();
+    });
+
+    test('has no close button when hideClose=true', async () => {
+        const api = fromPartial<DockviewPanelApi>({});
+        const containerApi = fromPartial<DockviewApi>({});
+        const params = {};
+
+        render(
+            <DockviewDefaultTab
+                api={api}
+                containerApi={containerApi}
+                params={params}
+                hideClose={true}
+            />
+        );
+
+        const element = await screen.getByTestId('dockview-default-tab');
+        expect(element.querySelector('.dv-react-tab-close-btn')).toBeNull();
+    });
+
+    test('has close button when hideClose=false', async () => {
+        const api = fromPartial<DockviewPanelApi>({});
+        const containerApi = fromPartial<DockviewApi>({});
+        const params = {};
+
+        render(
+            <DockviewDefaultTab
+                api={api}
+                containerApi={containerApi}
+                params={params}
+                hideClose={false}
+            />
+        );
+
+        const element = await screen.getByTestId('dockview-default-tab');
+        expect(element.querySelector('.dv-react-tab-close-btn')).toBeTruthy();
+    });
+});

packages/dockview/src/dockview/defaultTab.scss

@@ -10,7 +10,7 @@
             flex-grow: 1;
         }
 
-        .dockview-react-tab-action {
+        .dv-react-tab-close-btn {
             padding: 4px;
             display: flex;
             align-items: center;
@@ -25,7 +25,7 @@
     }
 
     &.inactive-tab:not(:hover) {
-        .dockview-react-tab-action {
+        .dv-react-tab-close-btn {
             visibility: hidden;
         }
     }

packages/dockview/src/dockview/defaultTab.tsx

@@ -3,40 +3,49 @@ import * as React from 'react';
 import { CloseButton } from '../svg';
 
 export type IDockviewDefaultTabProps = IDockviewPanelHeaderProps &
-    React.DOMAttributes<HTMLDivElement>;
+    React.DOMAttributes<HTMLDivElement> & { hideClose?: boolean };
 
-export const DockviewDefaultTab: React.FunctionComponent<IDockviewDefaultTabProps> =
+export const DockviewDefaultTab: React.FunctionComponent<
-    ({ api, containerApi: _containerApi, params: _params, ...rest }) => {
+    IDockviewDefaultTabProps
-        const onClose = React.useCallback(
+> = ({
-            (event: React.MouseEvent<HTMLSpanElement>) => {
+    api,
-                event.stopPropagation();
+    containerApi: _containerApi,
-                api.close();
+    params: _params,
-            },
+    hideClose,
-            [api]
+    ...rest
-        );
+}) => {
+    const onClose = React.useCallback(
+        (event: React.MouseEvent<HTMLSpanElement>) => {
+            event.stopPropagation();
+            api.close();
+        },
+        [api]
+    );
 
-        const onClick = React.useCallback(
+    const onClick = React.useCallback(
-            (event: React.MouseEvent<HTMLDivElement>) => {
+        (event: React.MouseEvent<HTMLDivElement>) => {
-                api.setActive();
+            api.setActive();
 
-                if (rest.onClick) {
+            if (rest.onClick) {
-                    rest.onClick(event);
+                rest.onClick(event);
-                }
+            }
-            },
+        },
-            [api, rest.onClick]
+        [api, rest.onClick]
-        );
+    );
 
-        const iconClassname = React.useMemo(() => {
+    return (
-            const cn = ['dockview-react-tab-action'];
+        <div
-            return cn.join(',');
+            data-testid="dockview-default-tab"
-        }, []);
+            {...rest}
-
+            onClick={onClick}
-        return (
+            className="dockview-react-tab"
-            <div {...rest} onClick={onClick} className="dockview-react-tab">
+        >
-                <span className="dockview-react-tab-title">{api.title}</span>
+            <span className="dockview-react-tab-title">{api.title}</span>
-                <div className={iconClassname} onClick={onClose}>
+            {!hideClose && (
+                <div className="dv-react-tab-close-btn" onClick={onClose}>
                     <CloseButton />
                 </div>
-            </div>
+            )}
-        );
+        </div>
-    };
+    );
+};

yarn.lock

@@ -2961,6 +2961,11 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
   integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
 
+"@total-typescript/shoehorn@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@total-typescript/shoehorn/-/shoehorn-0.1.1.tgz#72d3ba9364faa4f6b8e66c57b7a9094457e3652b"
+  integrity sha512-XSPcazQsC2Cr7eCiAI+M2bTmMziBvFWYTYMgUDKLbU6i+7m3I2BF5gXF5vKDO8577fONs9CvmTvVa7+nMHMfxg==
+
 "@trysound/sax@0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"