dockview-core 6.6.0 → 7.0.2

package/dist/esm/dockview/components/titlebar/tabs.js

@@ -89,6 +89,7 @@ export class Tabs extends CompositeDisposable {
             return;
         }
         this._direction = value;
+        this._tabsList.setAttribute('aria-orientation', value === 'vertical' ? 'vertical' : 'horizontal');
         if (this._scrollbar) {
             this._scrollbar.orientation = value;
         }
@@ -134,6 +135,9 @@ export class Tabs extends CompositeDisposable {
         this.onOverflowTabsChange = this._onOverflowTabsChange.event;
         this._tabsList = document.createElement('div');
         this._tabsList.className = 'dv-tabs-container';
+        // WAI-ARIA Tabs pattern: the strip of tabs is the tablist.
+        this._tabsList.setAttribute('role', 'tablist');
+        this._tabsList.setAttribute('aria-orientation', this._direction === 'vertical' ? 'vertical' : 'horizontal');
         this.showTabsOverflowControl = options.showTabsOverflowControl;
         if (accessor.options.scrollbars === 'native') {
             this._element = this._tabsList;
@@ -153,7 +157,8 @@ export class Tabs extends CompositeDisposable {
             getDirection: () => this._direction,
         }, {
             onChipContextMenu: (tabGroup, event) => {
-                this.accessor.contextMenuController.showForChip(tabGroup, this.group, event);
+                var _a;
+                (_a = this.accessor.contextMenuService) === null || _a === void 0 ? void 0 : _a.showForChip(tabGroup, this.group, event);
             },
             onChipDragStart: (tabGroup, chip, event) => {
                 this._handleChipDragStart(tabGroup, chip, event);
@@ -246,7 +251,14 @@ export class Tabs extends CompositeDisposable {
             else {
                 this._tabsList.scrollLeft = current + primary;
             }
-        }, { passive: false }), addDisposableListener(this._tabsList, 'dragover', (event) => {
+        }, { passive: false }), 
+        // WAI-ARIA Tabs keyboard pattern: arrow keys move the roving
+        // focus along the strip, Home/End jump to the ends, and
+        // Enter/Space activate the focused tab (manual activation, so
+        // arrowing through tabs doesn't switch panels until committed).
+        addDisposableListener(this._tabsList, 'keydown', (event) => {
+            this._onKeyDown(event);
+        }), addDisposableListener(this._tabsList, 'dragover', (event) => {
             if (this._processDragOver(event.clientX)) {
                 // Allow `drop` to fire on the tabs list container.
                 event.preventDefault();
@@ -325,10 +337,98 @@ export class Tabs extends CompositeDisposable {
     indexOf(id) {
         return this._tabs.findIndex((tab) => tab.value.panel.id === id);
     }
+    /** DOM id of the tab element for a panel — for the tabpanel's `aria-labelledby`. */
+    getTabId(panelId) {
+        var _a;
+        return (_a = this._tabMap.get(panelId)) === null || _a === void 0 ? void 0 : _a.value.element.id;
+    }
     isActive(tab) {
         return (this.selectedIndex > -1 &&
             this._tabs[this.selectedIndex].value === tab);
     }
+    _onKeyDown(event) {
+        // Only handle when a tab element itself is focused — never hijack keys
+        // typed inside a custom tab renderer's own controls (inputs etc.).
+        const index = this._tabs.findIndex((tab) => tab.value.element === event.target);
+        if (index === -1) {
+            return;
+        }
+        const isVertical = this._direction === 'vertical';
+        const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';
+        const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
+        const last = this._tabs.length - 1;
+        switch (event.key) {
+            case nextKey:
+                event.preventDefault();
+                this._focusTab(Math.min(index + 1, last));
+                break;
+            case prevKey:
+                event.preventDefault();
+                this._focusTab(Math.max(index - 1, 0));
+                break;
+            case 'Home':
+                event.preventDefault();
+                this._focusTab(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this._focusTab(last);
+                break;
+            case 'Enter':
+            case ' ':
+                // Manual activation of the focused tab.
+                event.preventDefault();
+                this.accessor.withOrigin('user', () => this._tabs[index].value.panel.api.setActive());
+                break;
+            case 'Delete':
+            case 'Backspace':
+                // Close the focused tab (Backspace covers macOS, where the
+                // primary delete key reports as Backspace).
+                event.preventDefault();
+                this._closeTab(index);
+                break;
+        }
+    }
+    /**
+     * Close the tab at `index` and move roving focus to a neighbouring tab so
+     * keyboard focus stays in the tablist.
+     */
+    _closeTab(index) {
+        var _a, _b, _c, _d, _e;
+        const tab = (_a = this._tabs[index]) === null || _a === void 0 ? void 0 : _a.value;
+        if (!tab) {
+            return;
+        }
+        // Resolve the post-close focus target before closing mutates the list:
+        // prefer the next tab, otherwise the previous.
+        const neighbourId = (_e = ((_c = (_b = this._tabs[index + 1]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : (_d = this._tabs[index - 1]) === null || _d === void 0 ? void 0 : _d.value)) === null || _e === void 0 ? void 0 : _e.panel.id;
+        tab.panel.api.close();
+        if (neighbourId !== undefined) {
+            const nextIndex = this._tabs.findIndex((t) => t.value.panel.id === neighbourId);
+            if (nextIndex > -1) {
+                this._focusTab(nextIndex);
+            }
+        }
+    }
+    /** Move the roving focus to the tab at `index` (updates tabindex + DOM focus). */
+    _focusTab(index) {
+        for (let i = 0; i < this._tabs.length; i++) {
+            this._tabs[i].value.element.tabIndex = i === index ? 0 : -1;
+        }
+        this._tabs[index].value.element.focus();
+    }
+    /** Move DOM focus to the active tab — the entry point into the tablist. */
+    focusActiveTab() {
+        var _a;
+        if (this._tabs.length === 0) {
+            return;
+        }
+        const activeId = (_a = this.group.activePanel) === null || _a === void 0 ? void 0 : _a.id;
+        const activeIndex = activeId
+            ? this._tabs.findIndex((t) => t.value.panel.id === activeId)
+            : -1;
+        this._focusTab(activeIndex > -1 ? activeIndex : 0);
+    }
     setActivePanel(panel) {
         const isVertical = this._direction === 'vertical';
         let running = 0;

package/dist/esm/dockview/components/titlebar/tabsContainer.d.ts

@@ -33,8 +33,10 @@ export interface ITabsContainer extends IDisposable {
     direction: DockviewHeaderDirection;
     delete(id: string): void;
     indexOf(id: string): number;
+    getTabId(panelId: string): string | undefined;
     setActive(isGroupActive: boolean): void;
     setActivePanel(panel: IDockviewPanel): void;
+    focusActiveTab(): void;
     isActive(tab: Tab): boolean;
     closePanel(panel: IDockviewPanel): void;
     openPanel(panel: IDockviewPanel, index?: number): void;
@@ -87,9 +89,11 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     setPrefixActionsElement(element: HTMLElement | undefined): void;
     isActive(tab: Tab): boolean;
     indexOf(id: string): number;
+    getTabId(panelId: string): string | undefined;
     setActive(_isGroupActive: boolean): void;
     delete(id: string): void;
     setActivePanel(panel: IDockviewPanel): void;
+    focusActiveTab(): void;
     openPanel(panel: IDockviewPanel, index?: number): void;
     closePanel(panel: IDockviewPanel): void;
     private updateClassnames;

package/dist/esm/dockview/components/titlebar/tabsContainer.js

@@ -198,6 +198,9 @@ export class TabsContainer extends CompositeDisposable {
     indexOf(id) {
         return this.tabs.indexOf(id);
     }
+    getTabId(panelId) {
+        return this.tabs.getTabId(panelId);
+    }
     setActive(_isGroupActive) {
         // noop
     }
@@ -208,6 +211,9 @@ export class TabsContainer extends CompositeDisposable {
     setActivePanel(panel) {
         this.tabs.setActivePanel(panel);
     }
+    focusActiveTab() {
+        this.tabs.focusActiveTab();
+    }
     openPanel(panel, index = this.tabs.size) {
         this.tabs.openPanel(panel, index);
         this.updateClassnames();
@@ -297,7 +303,7 @@ export class TabsContainer extends CompositeDisposable {
                         const firstPanelId = tg.panelIds[0];
                         if (firstPanelId) {
                             const panel = this.group.panels.find((p) => p.id === firstPanelId);
-                            panel === null || panel === void 0 ? void 0 : panel.api.setActive();
+                            this.accessor.withOrigin('user', () => panel === null || panel === void 0 ? void 0 : panel.api.setActive());
                         }
                     });
                     el.appendChild(groupHeader);
@@ -323,7 +329,7 @@ export class TabsContainer extends CompositeDisposable {
                         tg.expand();
                     }
                     tab.element.scrollIntoView();
-                    tab.panel.api.setActive();
+                    this.accessor.withOrigin('user', () => tab.panel.api.setActive());
                 });
                 wrapper.appendChild(child);
                 el.appendChild(wrapper);

package/dist/esm/dockview/components/titlebar/voidContainer.d.ts

@@ -9,9 +9,7 @@ export declare class VoidContainer extends CompositeDisposable {
     private readonly _element;
     private readonly dropTarget;
     private readonly pointerDropTarget;
-    private readonly html5DragSource;
-    private readonly pointerDragSource;
-    private readonly panelTransfer;
+    private readonly dragSource;
     private readonly _onDrop;
     readonly onDrop: Event<DroptargetEvent>;
     private readonly _onDragStart;
@@ -20,5 +18,4 @@ export declare class VoidContainer extends CompositeDisposable {
     get element(): HTMLElement;
     constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
     updateDragAndDropState(): void;
-    private getFloatingOverlay;
 }

package/dist/esm/dockview/components/titlebar/voidContainer.js

@@ -1,33 +1,24 @@
-import { getPanelData, LocalSelectionTransfer, PanelTransfer, } from '../../../dnd/dataTransfer';
-import { html5Backend, pointerBackend, } from '../../../dnd/backend';
+import { getPanelData } from '../../../dnd/dataTransfer';
+import { html5Backend, pointerBackend } from '../../../dnd/backend';
 import { addDisposableListener, Emitter, Event } from '../../../events';
-import { CompositeDisposable, Disposable, MutableDisposable, } from '../../../lifecycle';
-import { quasiPreventDefault, toggleClass } from '../../../dom';
-import { resolveDndCapabilities } from '../../dndCapabilities';
-// Floating-group redock via touch: require a deliberate long press so the
-// "move the float around" gesture doesn't double-trigger the redock ghost.
-// Infinity pressTolerance disables the pre-arm flick override; any motion
-// during the wait is treated as drag-the-float, not redock intent.
-const FLOATING_REDOCK_INITIATION_DELAY_MS = 500;
+import { CompositeDisposable, Disposable } from '../../../lifecycle';
+import { quasiPreventDefault } from '../../../dom';
+import { GroupDragSource } from './groupDragSource';
 export class VoidContainer extends CompositeDisposable {
     get element() {
         return this._element;
     }
     constructor(accessor, group) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f, _g;
         super();
         this.accessor = accessor;
         this.group = group;
-        this.panelTransfer = LocalSelectionTransfer.getInstance();
         this._onDrop = new Emitter();
         this.onDrop = this._onDrop.event;
         this._onDragStart = new Emitter();
         this.onDragStart = this._onDragStart.event;
-        const caps = resolveDndCapabilities(this.accessor.options);
         this._element = document.createElement('div');
         this._element.className = 'dv-void-container';
-        this._element.draggable = caps.html5;
-        toggleClass(this._element, 'dv-draggable', caps.html5 || caps.pointer);
         this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
             this.accessor.doSetGroupActive(this.group);
         }), 
@@ -41,6 +32,18 @@ export class VoidContainer extends CompositeDisposable {
                 quasiPreventDefault(e);
             }
         }, true));
+        // The drag-source (move-the-float disambiguation, redock ghost and
+        // group-level PanelTransfer) is shared with the floating title bar.
+        this.dragSource = new GroupDragSource({
+            element: this._element,
+            accessor: this.accessor,
+            group: this.group,
+            // The void container is the float's move handle only when there is
+            // no dedicated title bar. When a title bar moves the float (the
+            // overlay is `.dv-resize-container-with-titlebar`), the void
+            // container redocks with a plain drag, like a group in the grid.
+            isFloatingMoveHandle: () => !this._element.closest('.dv-resize-container-with-titlebar'),
+        });
         const canDisplayOverlay = (event, position) => {
             if (this.group.api.locked) {
                 // Dropping on the void/header space adds the panel
@@ -58,147 +61,32 @@ export class VoidContainer extends CompositeDisposable {
             acceptedTargetZones: ['center'],
             canDisplayOverlay,
             getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
+            overlayModel: (_b = (_a = this.accessor).resolveDropOverlayModel) === null || _b === void 0 ? void 0 : _b.call(_a, 'header_space', this.group),
         });
         this.pointerDropTarget = pointerBackend.createDropTarget(this._element, {
             acceptedTargetZones: ['center'],
             canDisplayOverlay,
             getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
+            overlayModel: (_d = (_c = this.accessor).resolveDropOverlayModel) === null || _d === void 0 ? void 0 : _d.call(_c, 'header_space', this.group),
         });
-        const buildMultiPanelsGhost = () => {
-            const ghostEl = document.createElement('div');
-            const style = window.getComputedStyle(this._element);
-            const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
-            const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
-            ghostEl.style.backgroundColor = bgColor;
-            ghostEl.style.color = color;
-            ghostEl.style.padding = '2px 8px';
-            ghostEl.style.height = '24px';
-            ghostEl.style.fontSize = '11px';
-            ghostEl.style.lineHeight = '20px';
-            ghostEl.style.borderRadius = '12px';
-            ghostEl.style.whiteSpace = 'nowrap';
-            ghostEl.style.boxSizing = 'border-box';
-            // HTML5 setDragImage snapshots the element as appended to the
-            // document; a default block-level div would stretch to the
-            // body's width and render as a viewport-wide bar.
-            ghostEl.style.display = 'inline-block';
-            ghostEl.textContent = `Multiple Panels (${this.group.size})`;
-            return ghostEl;
-        };
-        const buildGhostSpec = () => {
-            const createGhost = this.accessor.options.createGroupDragGhostComponent;
-            if (createGhost) {
-                const renderer = createGhost(this.group);
-                renderer.init({
-                    group: this.group,
-                    api: this.accessor.api,
-                });
-                return {
-                    element: renderer.element,
-                    offsetX: 30,
-                    offsetY: -10,
-                    dispose: renderer.dispose
-                        ? () => { var _a; return (_a = renderer.dispose) === null || _a === void 0 ? void 0 : _a.call(renderer); }
-                        : undefined,
-                };
-            }
-            return {
-                element: buildMultiPanelsGhost(),
-                offsetX: 30,
-                offsetY: -10,
-            };
-        };
-        const sharedDragOptions = {
-            getData: () => {
-                this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, null)], PanelTransfer.prototype);
-                return {
-                    dispose: () => {
-                        this.panelTransfer.clearData(PanelTransfer.prototype);
-                    },
-                };
-            },
-            createGhost: buildGhostSpec,
-            onDragStart: (event) => {
-                this._onDragStart.fire(event);
-            },
-        };
-        this.html5DragSource = html5Backend.createDragSource(this._element, Object.assign(Object.assign({}, sharedDragOptions), { disabled: !caps.html5, isCancelled: (event) => {
-                // HTML5: floating groups need shift+drag as the explicit
-                // detach gesture (otherwise click-and-drag conflicts with
-                // moving the floating group itself).
-                if (this.group.api.location.type === 'floating' &&
-                    !event.shiftKey) {
-                    return true;
-                }
-                if (this.group.api.location.type === 'edge' &&
-                    this.group.size === 0) {
-                    return true;
-                }
-                return false;
-            } }));
-        const isFloating = () => { var _a, _b, _c; return ((_c = (_b = (_a = this.group) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.location) === null || _c === void 0 ? void 0 : _c.type) === 'floating'; };
-        this.pointerDragSource = pointerBackend.createDragSource(this._element, Object.assign(Object.assign({}, sharedDragOptions), { disabled: !caps.pointer, touchOnly: !caps.pointerHandlesMouse, 
-            // Floating groups share this element with the overlay's
-            // move-the-float drag. Without a longer hold + tolerance
-            // override, both gestures commit simultaneously and the
-            // user sees the float follow their finger *and* a ghost.
-            touchInitiationDelay: () => isFloating() ? FLOATING_REDOCK_INITIATION_DELAY_MS : 250, pressTolerance: () => (isFloating() ? Infinity : 8), isCancelled: () => {
-                if (!resolveDndCapabilities(this.accessor.options).pointer) {
-                    return true;
-                }
-                // Pointer: long-press IS the deliberate gesture, so
-                // floating groups don't need the shift gate.
-                if (this.group.api.location.type === 'edge' &&
-                    this.group.size === 0) {
-                    return true;
-                }
-                return false;
-            }, onDragStart: (event) => {
-                var _a;
-                // Redock just committed — abort any in-flight overlay
-                // move so the float stops following the finger while
-                // the ghost takes over.
-                (_a = this.getFloatingOverlay()) === null || _a === void 0 ? void 0 : _a.cancelPendingDrag();
-                this._onDragStart.fire(event);
-            } }));
-        // Mirror direction: once the overlay's move-the-float gesture has
-        // actually moved something, cancel the pending redock arm so the
-        // ghost doesn't appear mid-drag if the user holds past 500ms.
-        const overlayMoveSub = new MutableDisposable();
-        const refreshOverlayMoveSub = () => {
-            const overlay = this.getFloatingOverlay();
-            overlayMoveSub.value = overlay
-                ? overlay.onDidStartMoving(() => {
-                    this.pointerDragSource.cancelPending();
-                })
-                : Disposable.NONE;
-        };
-        refreshOverlayMoveSub();
-        this.addDisposables(overlayMoveSub);
-        const locationChange = (_b = (_a = this.group) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.onDidLocationChange;
-        if (locationChange) {
-            this.addDisposables(locationChange(refreshOverlayMoveSub));
-        }
         this.onWillShowOverlay = Event.any(this.dropTarget.onWillShowOverlay, this.pointerDropTarget.onWillShowOverlay);
-        this.addDisposables(this.html5DragSource, this.dropTarget.onDrop((event) => {
+        this.addDisposables(this.dragSource, this.dragSource.onDragStart((event) => {
+            this._onDragStart.fire(event);
+        }), this.dropTarget.onDrop((event) => {
             this._onDrop.fire(event);
         }), this.pointerDropTarget.onDrop((event) => {
             this._onDrop.fire(event);
-        }), this.dropTarget, this.pointerDropTarget, this.pointerDragSource);
+        }), this.dropTarget, this.pointerDropTarget, 
+        // Re-apply the app-supplied overlay model when options change.
+        // `{}` resets to the built-in default (all fields optional).
+        (_g = (_f = (_e = this.accessor).onDidOptionsChange) === null || _f === void 0 ? void 0 : _f.call(_e, () => {
+            var _a, _b, _c;
+            const model = (_c = (_b = (_a = this.accessor).resolveDropOverlayModel) === null || _b === void 0 ? void 0 : _b.call(_a, 'header_space', this.group)) !== null && _c !== void 0 ? _c : {};
+            this.dropTarget.setOverlayModel(model);
+            this.pointerDropTarget.setOverlayModel(model);
+        })) !== null && _g !== void 0 ? _g : Disposable.NONE);
     }
     updateDragAndDropState() {
-        const caps = resolveDndCapabilities(this.accessor.options);
-        this._element.draggable = caps.html5;
-        toggleClass(this._element, 'dv-draggable', caps.html5 || caps.pointer);
-        this.html5DragSource.setDisabled(!caps.html5);
-        this.pointerDragSource.setDisabled(!caps.pointer);
-        this.pointerDragSource.setTouchOnly(!caps.pointerHandlesMouse);
-    }
-    getFloatingOverlay() {
-        var _a, _b;
-        if (!this.group) {
-            return undefined;
-        }
-        return (_b = (_a = this.accessor.floatingGroups) === null || _a === void 0 ? void 0 : _a.find((fg) => fg.group === this.group)) === null || _b === void 0 ? void 0 : _b.overlay;
+        this.dragSource.updateDragAndDropState();
     }
 }