dockview-core 6.6.0 → 7.0.2

package/dist/cjs/dockview/accessibilityMessages.js

@@ -0,0 +1,51 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_MESSAGES = void 0;
+exports.resolveMessages = resolveMessages;
+/** Where a drop position lands, phrased for the *edge prompt*. */
+function edgeWhere(position, target) {
+    return position === 'center'
+        ? "Tab into ".concat(target)
+        : "Split ".concat(position, " of ").concat(target);
+}
+/** Where a drop position landed, phrased for the *commit* sentence. */
+function committedWhere(position, target) {
+    return position === 'center'
+        ? "docked into ".concat(target)
+        : "split ".concat(position, " of ").concat(target);
+}
+exports.DEFAULT_MESSAGES = {
+    panelOpened: function (title) { return "".concat(title, " opened"); },
+    panelClosed: function (title) { return "".concat(title, " closed"); },
+    groupMaximized: function (title) { return "".concat(title, " maximized"); },
+    groupRestored: function (title) { return "".concat(title, " restored"); },
+    groupFloated: function (title) { return "".concat(title, " floated"); },
+    groupDocked: function (title) { return "".concat(title, " docked"); },
+    groupPoppedOut: function (title) { return "".concat(title, " opened in a new window"); },
+    movePickTarget: function (source, target, current, total) {
+        return "Moving ".concat(source, ". Target ").concat(target, ", ").concat(current, " of ").concat(total, ". Enter to choose where, Escape to cancel.");
+    },
+    movePickEdge: function (position, target) {
+        return "".concat(edgeWhere(position, target), ". Arrows to change, Enter to confirm, Escape to go back.");
+    },
+    moveCommitted: function (source, target, position) {
+        return "".concat(source, " ").concat(committedWhere(position, target), ".");
+    },
+    moveCancelled: function () { return "Move cancelled."; },
+    moveNotAllowed: function () { return "That move is not allowed."; },
+};
+/** Merge an app's partial overrides over the English defaults. */
+function resolveMessages(overrides) {
+    return overrides ? __assign(__assign({}, exports.DEFAULT_MESSAGES), overrides) : exports.DEFAULT_MESSAGES;
+}

package/dist/cjs/dockview/allModules.d.ts

@@ -0,0 +1,8 @@
+import { DockviewModule } from './modules';
+/**
+ * Internal list of the built-in modules that ship with the core. Registered
+ * automatically by DockviewComponent at construction time; not exported from
+ * the package. Additional modules contributed by sibling packages (via
+ * `registerModules(...)`) are appended at construction.
+ */
+export declare const AllModules: DockviewModule<any>[];

package/dist/cjs/dockview/allModules.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AllModules = void 0;
+var floatingGroupService_1 = require("./floatingGroupService");
+var popoutWindowService_1 = require("./popoutWindowService");
+var watermarkService_1 = require("./watermarkService");
+var edgeGroupService_1 = require("./edgeGroupService");
+var rootDropTargetService_1 = require("./rootDropTargetService");
+var headerActionsService_1 = require("./headerActionsService");
+var liveRegionService_1 = require("./liveRegionService");
+/**
+ * Internal list of the built-in modules that ship with the core. Registered
+ * automatically by DockviewComponent at construction time; not exported from
+ * the package. Additional modules contributed by sibling packages (via
+ * `registerModules(...)`) are appended at construction.
+ */
+exports.AllModules = [
+    floatingGroupService_1.FloatingGroupModule,
+    popoutWindowService_1.PopoutWindowModule,
+    watermarkService_1.WatermarkModule,
+    edgeGroupService_1.EdgeGroupModule,
+    rootDropTargetService_1.RootDropTargetModule,
+    headerActionsService_1.HeaderActionsModule,
+    liveRegionService_1.LiveRegionModule,
+];

package/dist/cjs/dockview/components/panel/content.d.ts

@@ -19,6 +19,7 @@ export interface IContentContainer extends IDisposable {
         asActive: boolean;
     }): void;
     refreshFocusState(): void;
+    setLabelledBy(tabElementId: string | undefined): void;
 }
 export declare class ContentContainer extends CompositeDisposable implements IContentContainer {
     private readonly accessor;
@@ -37,6 +38,7 @@ export declare class ContentContainer extends CompositeDisposable implements ICo
     constructor(accessor: DockviewComponent, group: DockviewGroupPanelModel);
     show(): void;
     hide(): void;
+    setLabelledBy(tabElementId: string | undefined): void;
     renderPanel(panel: IDockviewPanel, options?: {
         asActive: boolean;
     }): void;

package/dist/cjs/dockview/components/panel/content.js

@@ -22,9 +22,13 @@ var dom_1 = require("../../../dom");
 var droptarget_1 = require("../../../dnd/droptarget");
 var backend_1 = require("../../../dnd/backend");
 var dataTransfer_1 = require("../../../dnd/dataTransfer");
+var _contentId = 0;
+/** Stable DOM id so each tab's `aria-controls` can reference its tabpanel. */
+var nextContentId = function () { return "dv-tabpanel-".concat(_contentId++); };
 var ContentContainer = /** @class */ (function (_super) {
     __extends(ContentContainer, _super);
     function ContentContainer(accessor, group) {
+        var _a, _b, _c, _d, _e, _f, _g;
         var _this = _super.call(this) || this;
         _this.accessor = accessor;
         _this.group = group;
@@ -36,8 +40,17 @@ var ContentContainer = /** @class */ (function (_super) {
         _this._element = document.createElement('div');
         _this._element.className = 'dv-content-container';
         _this._element.tabIndex = -1;
+        // WAI-ARIA Tabs pattern: the single content area per group is the
+        // tabpanel; `aria-labelledby` is pointed at the active tab in
+        // `setLabelledBy` (driven from the group model on activation).
+        _this._element.id = nextContentId();
+        _this._element.setAttribute('role', 'tabpanel');
         _this.addDisposables(_this._onDidFocus, _this._onDidBlur);
-        var target = group.dropTargetContainer;
+        // Resolve the override anchor dynamically: a group can be relocated
+        // between roots (grid / floating / popout) after construction, and the
+        // popout anchor in particular lives in another window — a value
+        // captured here would mount overlays in the wrong window.
+        var getOverrideTarget = function () { var _a; return (_a = group.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; };
         var canDisplayOverlay = function (event, position) {
             if (_this.group.locked === 'no-drop-target' ||
                 (_this.group.locked && position === 'center')) {
@@ -67,7 +80,8 @@ var ContentContainer = /** @class */ (function (_super) {
             className: 'dv-drop-target-content',
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             canDisplayOverlay: canDisplayOverlay,
-            getOverrideTarget: target ? function () { return target.model; } : undefined,
+            getOverrideTarget: getOverrideTarget,
+            overlayModel: (_b = (_a = _this.accessor).resolveDropOverlayModel) === null || _b === void 0 ? void 0 : _b.call(_a, 'content'),
         });
         _this.pointerDropTarget = backend_1.pointerBackend.createDropTarget(_this.element, {
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
@@ -79,9 +93,18 @@ var ContentContainer = /** @class */ (function (_super) {
                     : null;
             },
             className: 'dv-drop-target-content',
-            getOverrideTarget: target ? function () { return target.model; } : undefined,
+            getOverrideTarget: getOverrideTarget,
+            overlayModel: (_d = (_c = _this.accessor).resolveDropOverlayModel) === null || _d === void 0 ? void 0 : _d.call(_c, 'content'),
         });
-        _this.addDisposables(_this.dropTarget, _this.pointerDropTarget);
+        _this.addDisposables(_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, function () {
+            var _a, _b, _c;
+            var model = (_c = (_b = (_a = _this.accessor).resolveDropOverlayModel) === null || _b === void 0 ? void 0 : _b.call(_a, 'content')) !== null && _c !== void 0 ? _c : {};
+            _this.dropTarget.setOverlayModel(model);
+            _this.pointerDropTarget.setOverlayModel(model);
+        })) !== null && _g !== void 0 ? _g : lifecycle_1.Disposable.NONE);
         return _this;
     }
     Object.defineProperty(ContentContainer.prototype, "element", {
@@ -97,6 +120,14 @@ var ContentContainer = /** @class */ (function (_super) {
     ContentContainer.prototype.hide = function () {
         this.element.style.display = 'none';
     };
+    ContentContainer.prototype.setLabelledBy = function (tabElementId) {
+        if (tabElementId) {
+            this._element.setAttribute('aria-labelledby', tabElementId);
+        }
+        else {
+            this._element.removeAttribute('aria-labelledby');
+        }
+    };
     ContentContainer.prototype.renderPanel = function (panel, options) {
         var _this = this;
         var _a, _b, _c, _d;

package/dist/cjs/dockview/components/tab/tab.js

@@ -34,9 +34,13 @@ var dom_1 = require("../../../dom");
 var backend_1 = require("../../../dnd/backend");
 var longPress_1 = require("../../../dnd/pointer/longPress");
 var dndCapabilities_1 = require("../../dndCapabilities");
+var _tabId = 0;
+/** Stable DOM id referenced by the tabpanel's `aria-labelledby`. */
+var nextTabId = function () { return "dv-tab-".concat(_tabId++); };
 var Tab = /** @class */ (function (_super) {
     __extends(Tab, _super);
     function Tab(panel, accessor, group) {
+        var _a, _b;
         var _this = _super.call(this) || this;
         _this.panel = panel;
         _this.accessor = accessor;
@@ -57,8 +61,20 @@ var Tab = /** @class */ (function (_super) {
         var caps = (0, dndCapabilities_1.resolveDndCapabilities)(_this.accessor.options);
         _this._element = document.createElement('div');
         _this._element.className = 'dv-tab';
-        _this._element.tabIndex = 0;
+        // Roving tabindex (WAI-ARIA Tabs pattern): only the active tab is in
+        // the tab order; `setActive` flips this. Inactive tabs are reachable
+        // via arrow keys, handled by the tab strip.
+        _this._element.tabIndex = -1;
         _this._element.draggable = caps.html5;
+        // WAI-ARIA Tabs pattern. `aria-controls` points at the group's single
+        // tabpanel (the content container); `aria-selected` tracks activation.
+        _this._element.id = nextTabId();
+        _this._element.setAttribute('role', 'tab');
+        _this._element.setAttribute('aria-selected', 'false');
+        var contentContainerId = (_b = (_a = _this.group) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.contentContainerId;
+        if (contentContainerId) {
+            _this._element.setAttribute('aria-controls', contentContainerId);
+        }
         (0, dom_1.toggleClass)(_this.element, 'dv-inactive-tab', true);
         var canDisplayOverlay = function (event, position) {
             var _a;
@@ -143,13 +159,15 @@ var Tab = /** @class */ (function (_super) {
         }), (0, events_1.addDisposableListener)(_this._element, 'click', function (event) {
             _this._onTabClick.fire(event);
         }), (0, events_1.addDisposableListener)(_this._element, 'contextmenu', function (event) {
-            _this.accessor.contextMenuController.show(_this.panel, _this.group, event);
+            var _a;
+            (_a = _this.accessor.contextMenuService) === null || _a === void 0 ? void 0 : _a.show(_this.panel, _this.group, event);
         }), new longPress_1.LongPressDetector(_this._element, {
             onLongPress: function (event) {
+                var _a;
                 // Don't let a subsequent finger move arm a drag on top
                 // of the just-opened menu.
                 _this.pointerDragSource.cancelPending();
-                _this.accessor.contextMenuController.show(_this.panel, _this.group, event);
+                (_a = _this.accessor.contextMenuService) === null || _a === void 0 ? void 0 : _a.show(_this.panel, _this.group, event);
             },
         }), _this.dropTarget.onDrop(function (event) {
             _this._onDropped.fire(event);
@@ -168,6 +186,10 @@ var Tab = /** @class */ (function (_super) {
     Tab.prototype.setActive = function (isActive) {
         (0, dom_1.toggleClass)(this.element, 'dv-active-tab', isActive);
         (0, dom_1.toggleClass)(this.element, 'dv-inactive-tab', !isActive);
+        this._element.setAttribute('aria-selected', isActive ? 'true' : 'false');
+        // Roving tabindex anchors to the active tab; arrow-key navigation in
+        // the tab strip moves the rover from there.
+        this._element.tabIndex = isActive ? 0 : -1;
     };
     Tab.prototype.setContent = function (part) {
         if (this.content) {
@@ -177,12 +199,18 @@ var Tab = /** @class */ (function (_super) {
         this._element.appendChild(this.content.element);
     };
     Tab.prototype._buildOverlayModel = function () {
-        var _a;
+        var _a, _b, _c;
+        // An app-supplied model (the dropOverlayModel option) takes precedence
+        // over the theme-derived default for this tab.
+        var custom = (_b = (_a = this.accessor).resolveDropOverlayModel) === null || _b === void 0 ? void 0 : _b.call(_a, 'tab', this.group);
+        if (custom) {
+            return custom;
+        }
         // 'line' themes render a 4px insertion strip at the tab edge via the
         // anchor container's small-boundary path.  'fill' themes render a
         // half-width highlighted area, so we disable the small-boundary path
         // entirely (boundary = 0 ⟹ isSmall always false).
-        var smallBoundary = ((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.dndTabIndicator) === 'line'
+        var smallBoundary = ((_c = this.accessor.options.theme) === null || _c === void 0 ? void 0 : _c.dndTabIndicator) === 'line'
             ? Number.POSITIVE_INFINITY
             : 0;
         return {

package/dist/cjs/dockview/components/titlebar/floatingTitleBar.d.ts

@@ -0,0 +1,35 @@
+import { DockviewComponent } from '../../dockviewComponent';
+import { Event } from '../../../events';
+import { CompositeDisposable } from '../../../lifecycle';
+import { DockviewGroupPanel } from '../../dockviewGroupPanel';
+/**
+ * A dedicated, blank drag handle rendered above a floating group's tab bar.
+ *
+ * It plays the same dual role the tab-bar void container plays today: a plain
+ * pointer-drag moves the floating window (wired by the overlay via
+ * `setupDrag`), while a shift+drag (mouse) or long-press (touch) detaches the
+ * group to redock it into the grid. The redock half is provided by the shared
+ * {@link GroupDragSource}; the move half is owned by the overlay.
+ *
+ * The bar is intentionally contentless — styling is driven entirely through
+ * the `--dv-floating-titlebar-*` theme variables.
+ */
+export declare class FloatingTitleBar extends CompositeDisposable {
+    private readonly accessor;
+    private readonly _element;
+    private readonly dragSource;
+    private _group;
+    private readonly _onDragStart;
+    readonly onDragStart: Event<PointerEvent | DragEvent>;
+    get element(): HTMLElement;
+    /** The window's current anchor group — the one this bar drags/activates. */
+    get group(): DockviewGroupPanel;
+    /**
+     * Retarget the bar at a new anchor group. Called when the original anchor
+     * leaves a multi-group floating window and another member is promoted, so
+     * the bar keeps activating/redocking a group that actually lives here.
+     */
+    setGroup(group: DockviewGroupPanel): void;
+    constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
+    updateDragAndDropState(): void;
+}

package/dist/cjs/dockview/components/titlebar/floatingTitleBar.js

@@ -0,0 +1,95 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingTitleBar = void 0;
+var events_1 = require("../../../events");
+var lifecycle_1 = require("../../../lifecycle");
+var dom_1 = require("../../../dom");
+var groupDragSource_1 = require("./groupDragSource");
+/**
+ * A dedicated, blank drag handle rendered above a floating group's tab bar.
+ *
+ * It plays the same dual role the tab-bar void container plays today: a plain
+ * pointer-drag moves the floating window (wired by the overlay via
+ * `setupDrag`), while a shift+drag (mouse) or long-press (touch) detaches the
+ * group to redock it into the grid. The redock half is provided by the shared
+ * {@link GroupDragSource}; the move half is owned by the overlay.
+ *
+ * The bar is intentionally contentless — styling is driven entirely through
+ * the `--dv-floating-titlebar-*` theme variables.
+ */
+var FloatingTitleBar = /** @class */ (function (_super) {
+    __extends(FloatingTitleBar, _super);
+    function FloatingTitleBar(accessor, group) {
+        var _this = _super.call(this) || this;
+        _this.accessor = accessor;
+        _this._onDragStart = new events_1.Emitter();
+        _this.onDragStart = _this._onDragStart.event;
+        _this._group = group;
+        _this._element = document.createElement('div');
+        _this._element.className = 'dv-floating-titlebar';
+        _this.addDisposables(_this._onDragStart, (0, events_1.addDisposableListener)(_this._element, 'pointerdown', function () {
+            _this.accessor.doSetGroupActive(_this._group);
+        }), 
+        // Shift+pointerdown marks the event so the overlay's
+        // move-the-float drag doesn't fire alongside the HTML5 redock
+        // drag. See VoidContainer for the same disambiguation.
+        (0, events_1.addDisposableListener)(_this._element, 'pointerdown', function (e) {
+            if (e.shiftKey) {
+                (0, dom_1.quasiPreventDefault)(e);
+            }
+        }, true));
+        _this.dragSource = new groupDragSource_1.GroupDragSource({
+            element: _this._element,
+            accessor: _this.accessor,
+            // resolve lazily so the drag source follows anchor reassignment
+            group: function () { return _this._group; },
+        });
+        _this.addDisposables(_this.dragSource, _this.dragSource.onDragStart(function (event) {
+            _this._onDragStart.fire(event);
+        }));
+        return _this;
+    }
+    Object.defineProperty(FloatingTitleBar.prototype, "element", {
+        get: function () {
+            return this._element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(FloatingTitleBar.prototype, "group", {
+        /** The window's current anchor group — the one this bar drags/activates. */
+        get: function () {
+            return this._group;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Retarget the bar at a new anchor group. Called when the original anchor
+     * leaves a multi-group floating window and another member is promoted, so
+     * the bar keeps activating/redocking a group that actually lives here.
+     */
+    FloatingTitleBar.prototype.setGroup = function (group) {
+        this._group = group;
+    };
+    FloatingTitleBar.prototype.updateDragAndDropState = function () {
+        this.dragSource.updateDragAndDropState();
+    };
+    return FloatingTitleBar;
+}(lifecycle_1.CompositeDisposable));
+exports.FloatingTitleBar = FloatingTitleBar;

package/dist/cjs/dockview/components/titlebar/groupDragSource.d.ts

@@ -0,0 +1,52 @@
+import { DockviewComponent } from '../../dockviewComponent';
+import { Event } from '../../../events';
+import { CompositeDisposable } from '../../../lifecycle';
+import { DockviewGroupPanel } from '../../dockviewGroupPanel';
+declare const FLOATING_REDOCK_INITIATION_DELAY_MS = 500;
+export interface GroupDragSourceOptions {
+    readonly element: HTMLElement;
+    readonly accessor: DockviewComponent;
+    /**
+     * The group this handle drags. Pass a function when the handle outlives the
+     * group it represents and can be retargeted — e.g. a floating window's
+     * dedicated title bar, whose anchor group is reassigned when the original
+     * anchor leaves a multi-group window. A fixed reference (the tab-bar void
+     * container, which lives inside its own group's DOM) is also accepted.
+     */
+    readonly group: DockviewGroupPanel | (() => DockviewGroupPanel);
+    /**
+     * Whether this element is the floating window's move handle. Only the move
+     * handle needs the floating disambiguation (shift for mouse / long-press
+     * for touch) that keeps the redock gesture from firing alongside the
+     * move-the-float gesture. Other handles on a floating group (e.g. the tab
+     * bar's void container when a dedicated title bar is the move handle) drag
+     * to redock with a plain drag, exactly like a group in the main grid.
+     * Defaults to `() => true`.
+     */
+    readonly isFloatingMoveHandle?: () => boolean;
+}
+/**
+ * The drag-source half of a group drag handle: html5 + pointer drag sources
+ * that publish a group-level `PanelTransfer`, the "Multiple Panels (N)" ghost,
+ * and the floating-group disambiguation that keeps the redock gesture from
+ * firing alongside the overlay's move-the-float gesture.
+ *
+ * Shared by the tab-bar void container and the dedicated floating title bar so
+ * both grab handles redock identically.
+ */
+export declare class GroupDragSource extends CompositeDisposable {
+    private readonly _element;
+    private readonly accessor;
+    private readonly groupAccessor;
+    private readonly html5DragSource;
+    private readonly pointerDragSource;
+    private readonly panelTransfer;
+    private readonly _onDragStart;
+    readonly onDragStart: Event<PointerEvent | DragEvent>;
+    private readonly isFloatingMoveHandle;
+    private get group();
+    constructor(options: GroupDragSourceOptions);
+    updateDragAndDropState(): void;
+    private getFloatingOverlay;
+}
+export { FLOATING_REDOCK_INITIATION_DELAY_MS };