refactor(dockview-core): rename tabReorderMode option to smoothTabReorder boolean

Flavien VACCARETTI · Flavien VACCARETTI · commit 1034e93d02e0 · 2026-03-05T16:37:58.000+01:00
diff --git a/packages/dockview-angular/src/lib/dockview/dockview-angular.component.ts b/packages/dockview-angular/src/lib/dockview/dockview-angular.component.ts
@@ -85,7 +85,7 @@ export class DockviewAngularComponent implements OnInit, OnDestroy, OnChanges {
     @Input() locked?: boolean;
     @Input() disableAutoResizing?: boolean;
     @Input() singleTabMode?: 'fullwidth' | 'default';
-    @Input() tabReorderMode?: 'swap' | 'slide';
+    @Input() smoothTabReorder?: boolean;
 
     @Output() ready = new EventEmitter<DockviewReadyEvent>();
     @Output() didDrop = new EventEmitter<DockviewDidDropEvent>();
diff --git a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsAnimation.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsAnimation.spec.ts
@@ -45,14 +45,14 @@ function createMockPanel(id: string): IDockviewPanel {
 
 function createTabs(
     options: {
-        tabReorderMode?: 'swap' | 'slide';
+        smoothTabReorder?: boolean;
         disableDnd?: boolean;
     } = {}
 ): { tabs: Tabs; accessor: DockviewComponent; group: DockviewGroupPanel } {
     const accessor = fromPartial<DockviewComponent>({
         id: 'test-accessor',
         options: {
-            tabReorderMode: options.tabReorderMode,
+            smoothTabReorder: options.smoothTabReorder,
             disableDnd: options.disableDnd,
         },
     });
@@ -117,7 +117,7 @@ describe('tabs - animation', () => {
 
     describe('animation state initialization', () => {
         test('dragstart initializes animation state when animation enabled', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
 
@@ -139,8 +139,8 @@ describe('tabs - animation', () => {
             expect(state.currentInsertionIndex).toBeNull();
         });
 
-        test('dragstart does not initialize state when tabReorderMode is swap', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'swap' });
+        test('dragstart does not initialize state when smoothTabReorder is false', () => {
+            const { tabs } = createTabs({ smoothTabReorder: false });
             const panel = createMockPanel('panel-a');
 
             tabs.openPanel(panel, 0);
@@ -168,7 +168,7 @@ describe('tabs - animation', () => {
 
     describe('source tab collapse', () => {
         test('dragstart adds dv-tab--dragging class when animation enabled', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panel = createMockPanel('panel-a');
 
             tabs.openPanel(panel, 0);
@@ -186,8 +186,8 @@ describe('tabs - animation', () => {
             ).toBeTruthy();
         });
 
-        test('dragstart does not add dv-tab--dragging class when tabReorderMode is swap', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'swap' });
+        test('dragstart does not add dv-tab--dragging class when smoothTabReorder is false', () => {
+            const { tabs } = createTabs({ smoothTabReorder: false });
             const panel = createMockPanel('panel-a');
 
             tabs.openPanel(panel, 0);
@@ -203,7 +203,7 @@ describe('tabs - animation', () => {
 
     describe('drag cancellation', () => {
         test('dragend resets animation state and removes dragging class', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
 
@@ -231,7 +231,7 @@ describe('tabs - animation', () => {
         });
 
         test('dragend removes shifting classes and transforms from all tabs', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
 
@@ -271,7 +271,7 @@ describe('tabs - animation', () => {
 
     describe('FLIP animation', () => {
         test('runFlipAnimation applies inverse transforms for moved tabs', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
             const panelC = createMockPanel('panel-c');
@@ -313,7 +313,7 @@ describe('tabs - animation', () => {
         });
 
         test('runFlipAnimation removes transforms in requestAnimationFrame', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
 
@@ -343,7 +343,7 @@ describe('tabs - animation', () => {
         });
 
         test('no animation when no tabs moved (drop at original position)', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
 
@@ -373,7 +373,7 @@ describe('tabs - animation', () => {
 
     describe('resetTabTransforms', () => {
         test('clears all transforms and shifting classes', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
 
@@ -403,7 +403,7 @@ describe('tabs - animation', () => {
 
     describe('dispose cleanup', () => {
         test('dispose during active drag clears animation state', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
 
@@ -425,7 +425,7 @@ describe('tabs - animation', () => {
 
     describe('delete cleanup', () => {
         test('deleting source tab during cross-group move clears animation state', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
 
@@ -446,7 +446,7 @@ describe('tabs - animation', () => {
         });
 
         test('deleting non-source tab does not clear animation state', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
             const panelC = createMockPanel('panel-c');
@@ -472,7 +472,7 @@ describe('tabs - animation', () => {
 
     describe('handleDragOver', () => {
         test('updates currentInsertionIndex based on cursor position', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
             const panelC = createMockPanel('panel-c');
@@ -505,7 +505,7 @@ describe('tabs - animation', () => {
 
     describe('dragover gap transforms', () => {
         test('tabs after insertion index shift right by source tab width', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
             const panelC = createMockPanel('panel-c');
@@ -555,7 +555,7 @@ describe('tabs - animation', () => {
         });
 
         test('gap moves when cursor moves to different position', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
             const panelC = createMockPanel('panel-c');
@@ -597,7 +597,7 @@ describe('tabs - animation', () => {
         });
 
         test('same insertion index skips transform update', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
 
@@ -631,7 +631,7 @@ describe('tabs - animation', () => {
 
     describe('cross-group animation (US3)', () => {
         test('external dragover initializes animation state with sourceIndex -1', () => {
-            const { tabs, group } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs, group } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
 
@@ -665,8 +665,8 @@ describe('tabs - animation', () => {
             spy.mockRestore();
         });
 
-        test('external dragover does not initialize state when tabReorderMode is swap', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'swap' });
+        test('external dragover does not initialize state when smoothTabReorder is false', () => {
+            const { tabs } = createTabs({ smoothTabReorder: false });
             const panel = createMockPanel('panel-a');
             tabs.openPanel(panel, 0);
 
@@ -689,7 +689,7 @@ describe('tabs - animation', () => {
         });
 
         test('external dragover uses average tab width for gap', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
 
@@ -719,7 +719,7 @@ describe('tabs - animation', () => {
         });
 
         test('dragleave fully clears state for external drags', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             tabs.openPanel(panelA, 0);
 
@@ -751,7 +751,7 @@ describe('tabs - animation', () => {
         });
 
         test('same-group dragover does not trigger external detection', () => {
-            const { tabs, group } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs, group } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             tabs.openPanel(panelA, 0);
 
@@ -776,7 +776,7 @@ describe('tabs - animation', () => {
         });
 
         test('cross-group FLIP animates newly inserted tab with slide-in', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
             const panelC = createMockPanel('panel-c');
@@ -813,7 +813,7 @@ describe('tabs - animation', () => {
         });
 
         test('cross-group FLIP does NOT animate source tab for same-group drops', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
 
@@ -842,7 +842,7 @@ describe('tabs - animation', () => {
 
     describe('dragleave', () => {
         test('resets transforms and insertion index when cursor leaves container', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
 
@@ -875,7 +875,7 @@ describe('tabs - animation', () => {
         });
 
         test('does not reset when moving between child elements', () => {
-            const { tabs } = createTabs({ tabReorderMode: 'slide' });
+            const { tabs } = createTabs({ smoothTabReorder: true });
             const panelA = createMockPanel('panel-a');
             const panelB = createMockPanel('panel-b');
 
diff --git a/packages/dockview-core/src/dockview/components/tab/tab.ts b/packages/dockview-core/src/dockview/components/tab/tab.ts
@@ -104,7 +104,7 @@ export class Tab extends CompositeDisposable {
 
                 if (data && this.accessor.id === data.viewId) {
                     if (
-                        this.accessor.options.tabReorderMode === 'slide' &&
+                        this.accessor.options.smoothTabReorder &&
                         data.groupId === this.group.id
                     ) {
                         return false;
@@ -149,7 +149,7 @@ export class Tab extends CompositeDisposable {
 
                 this._onDragStart.fire(event);
 
-                if (this.accessor.options.tabReorderMode === 'slide') {
+                if (this.accessor.options.smoothTabReorder) {
                     // Delay collapse to next frame so the browser
                     // captures the full drag image first
                     requestAnimationFrame(() => {
diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabs.ts b/packages/dockview-core/src/dockview/components/titlebar/tabs.ts
@@ -171,7 +171,7 @@ export class Tabs extends CompositeDisposable {
                 if (!this._animState) {
                     // Check for external drag from another group
                     if (
-                        this.accessor.options.tabReorderMode !== 'slide' ||
+                        !this.accessor.options.smoothTabReorder ||
                         this.accessor.options.disableDnd
                     ) {
                         return;
@@ -226,7 +226,7 @@ export class Tabs extends CompositeDisposable {
                 'drop',
                 (event) => {
                     if (
-                        this.accessor.options.tabReorderMode !== 'slide' ||
+                        !this.accessor.options.smoothTabReorder ||
                         !this._animState ||
                         this._animState.currentInsertionIndex === null
                     ) {
@@ -333,7 +333,7 @@ export class Tabs extends CompositeDisposable {
             tab.onDragStart((event) => {
                 this._onTabDragStart.fire({ nativeEvent: event, panel });
 
-                if (this.accessor.options.tabReorderMode === 'slide') {
+                if (this.accessor.options.smoothTabReorder) {
                     this._animState = {
                         sourceTabId: panel.id,
                         sourceIndex: this._tabs.findIndex(
diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts
@@ -79,12 +79,13 @@ export interface DockviewOptions {
      */
     scrollbars?: 'native' | 'custom';
     /**
-     * Controls tab reorder behavior during drag-and-drop.
+     * When `true`, tabs animate smoothly during drag-and-drop reorder:
+     * tabs slide apart to reveal the insertion gap, then animate to their
+     * final positions on drop (Chrome-like behavior).
      *
-     * - `'swap'` (default): Tabs swap positions instantly on drop (classic behavior).
-     * - `'slide'`: Tabs slide smoothly to make room for the dragged tab (Chrome-like).
+     * Defaults to `false`.
      */
-    tabReorderMode?: 'swap' | 'slide';
+    smoothTabReorder?: boolean;
 }
 
 export interface DockviewDndOverlayEvent extends IAcceptableEvent {
@@ -134,7 +135,7 @@ export const PROPERTY_KEYS_DOCKVIEW: (keyof DockviewOptions)[] = (() => {
         theme: undefined,
         disableTabsOverflowList: undefined,
         scrollbars: undefined,
-        tabReorderMode: undefined,
+        smoothTabReorder: undefined,
     };
 
     return Object.keys(properties) as (keyof DockviewOptions)[];
diff --git a/packages/docs/docs/core/panels/tabs.mdx b/packages/docs/docs/core/panels/tabs.mdx
@@ -451,47 +451,47 @@ Controls how tabs animate when reordered via drag-and-drop.
 <CodeRunner id="dockview/tabview" height={300}/>
 
 <FrameworkSpecific framework='React'>
-  <DocRef declaration="IDockviewReactProps" methods={['tabReorderMode']} />
+  <DocRef declaration="IDockviewReactProps" methods={['smoothTabReorder']} />
 </FrameworkSpecific>
 
 <FrameworkSpecific framework='Vue'>
-  <DocRef declaration="IDockviewVueProps" methods={['tabReorderMode']} />
+  <DocRef declaration="IDockviewVueProps" methods={['smoothTabReorder']} />
 </FrameworkSpecific>
 
 <FrameworkSpecific framework='Angular'>
-  <DocRef declaration="IDockviewAngularProps" methods={['tabReorderMode']} />
+  <DocRef declaration="IDockviewAngularProps" methods={['smoothTabReorder']} />
 </FrameworkSpecific>
 
 <FrameworkSpecific framework='JavaScript'>
-  <DocRef declaration="DockviewComponentOptions" methods={['tabReorderMode']} />
+  <DocRef declaration="DockviewComponentOptions" methods={['smoothTabReorder']} />
 </FrameworkSpecific>
 
 <FrameworkSpecific framework='React'>
 ```tsx
-return <DockviewReactComponent tabReorderMode="slide" />
+return <DockviewReactComponent smoothTabReorder={true} />
 ```
 </FrameworkSpecific>
 
 <FrameworkSpecific framework='Vue'>
 ```html
-<dockview-vue tabReorderMode="slide" />
+<dockview-vue :smoothTabReorder="true" />
 ```
 </FrameworkSpecific>
 
 <FrameworkSpecific framework='Angular'>
 ```html
-<dv-dockview [tabReorderMode]="'slide'"></dv-dockview>
+<dv-dockview [smoothTabReorder]="true"></dv-dockview>
 ```
 </FrameworkSpecific>
 
 <FrameworkSpecific framework='JavaScript'>
 ```ts
 const api = createDockview(parentElement, {
-    tabReorderMode: 'slide',
+    smoothTabReorder: true,
 });
 
 // or toggle at runtime
-api.updateOptions({ tabReorderMode: 'slide' });
+api.updateOptions({ smoothTabReorder: true });
 ```
 </FrameworkSpecific>
 
diff --git a/packages/docs/sandboxes/react/dockview/tabview/src/app.tsx b/packages/docs/sandboxes/react/dockview/tabview/src/app.tsx
diff --git a/packages/docs/src/generated/api.output.json b/packages/docs/src/generated/api.output.json
diff --git a/packages/docs/templates/dockview/tabview/react/src/app.tsx b/packages/docs/templates/dockview/tabview/react/src/app.tsx
