igniteui-dockmanager 2.0.1 → 2.0.2-alpha.2

package/{dist/CHANGELOG.md → CHANGELOG.md}

@@ -2,6 +2,14 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 2.1.0
+
+### New features
+- Added `paneFlyoutToggle` event that fires when an unpinned pane's flyout opens or closes (distinct from pin/unpin operations).
+
+### Bug Fixes
+- The hover area for showing pane headers when `showPaneHeaders` is set to `onHoverOnly` now correctly accounts for the actual pane header height, including custom heights set via `::part(pane-header)` styles. Note that when customizing the header height, the `min-height` property should also be overridden, as it defaults to 40px to ensure header elements are properly displayed.
+
 ## 2.0.0
 
 ### Breaking Changes
@@ -44,7 +52,8 @@ All notable changes for each version of this project will be documented in this
       ]
     }
   };
-  
+  ```
+
 ## 1.18.0
 
 ### New features
@@ -84,12 +93,12 @@ All notable changes for each version of this project will be documented in this
    -  `useFixedSizeOnDock`, which specifies which docking orientations should apply the `FixedSize` sizing mode when split panes are dynamically created via docking.
    - `allowRootDock`, which defaults to true, and enables or disables docking into the root-level container.
 - Adding automatic scrolling of the root container during drag-and-drop operations.
-  -  Introduced a new `autoScrollConfig` property for finer control over scroll behavior. 
+  -  Introduced a new `autoScrollConfig` property for finer control over scroll behavior.
 
 ### Bug fixes
 - Placeholder panes are no longer present in Pane Navigator
 - Dark theme is now properly applied to scrollbars
-  
+
 ## 1.16.1
 
 ### Bug fixes
@@ -99,7 +108,7 @@ All notable changes for each version of this project will be documented in this
 
 ### New features
 - Introduced a new docking behavior that allows docking directly in a split pane by dragging a pane over one of its splitters. It can be switched on via the new `allowSplitterDock` property of the `IgcDockManagerComponent`.
-- Introduced the `useFixedSize` property of Split Panes - a new resizing behavior where child panes are sized in pixels and can be resized beyond the viewport, allowing scrollable overflow within the container. 
+- Introduced the `useFixedSize` property of Split Panes - a new resizing behavior where child panes are sized in pixels and can be resized beyond the viewport, allowing scrollable overflow within the container.
 
 ### Bug fixes
 - The `showHeaderIconOnHover` property now defaults to `'none'` instead of `undefined` and has correct type
@@ -157,7 +166,7 @@ All notable changes for each version of this project will be documented in this
 - Add `containedInBoundaries` property [#68](https://github.com/IgniteUI/igniteui-dockmanager/issues/68)
 
 ### Enhancements
-- Add `contentId` of elements as CSS parts [#32](https://github.com/IgniteUI/igniteui-dockmanager/issues/32) 
+- Add `contentId` of elements as CSS parts [#32](https://github.com/IgniteUI/igniteui-dockmanager/issues/32)
 
 ### Bug fixes
 - Maximizing and unpinning panes leads to unclickable panes [#72](https://github.com/IgniteUI/igniteui-dockmanager/issues/72)
@@ -178,7 +187,7 @@ All notable changes for each version of this project will be documented in this
 ## 1.12.5
 
 ### New features
-- Add `paneScroll` event [#51](https://github.com/IgniteUI/igniteui-dockmanager/issues/51) 
+- Add `paneScroll` event [#51](https://github.com/IgniteUI/igniteui-dockmanager/issues/51)
 
 ### Bug fixes
 - ТabGroupPane: Pinning one of several unpinned panes results in all the panes getting pinned [#62](https://github.com/IgniteUI/igniteui-dockmanager/issues/62)

package/{dist/components → components}/dockmanager/dockmanager-component.d.ts

@@ -1,7 +1,7 @@
 import { LitElement, type TemplateResult } from 'lit';
 import type { Constructor } from '../../common/mixins/constructor.js';
 import type { ContextMenuPosition, PaneActionBehavior } from './backfill-types-dockmanager.js';
-import { type IgcActivePaneEventArgs, type IgcContentPane, type IgcContextMenuMetadata, type IgcDockManagerComponentBase, type IgcDockManagerLayout, type IgcDockManagerPane, type IgcDockManagerPoint, type IgcDockManagerResourceStrings, type IgcDropTargetPaneInfo, type IgcFloatingPaneResizeEventArgs, type IgcFloatingPaneResizeMoveEventArgs, type IgcPaneCloseEventArgs, type IgcPaneDragEndEventArgs, type IgcPaneDragOverEventArgs, type IgcPaneDragStartEventArgs, type IgcPaneHeaderConnectionEventArgs, type IgcPaneNavigatorMetadata, type IgcPanePinnedEventArgs, type IgcPaneScrollEventArgs, type IgcSplitPane, type IgcSplitterResizeEventArgs, type IgcTabGroupPane, type IgcTabHeaderConnectionEventArgs } from './dockmanager.interfaces.js';
+import { type IgcActivePaneEventArgs, type IgcContentPane, type IgcContextMenuMetadata, type IgcDockManagerComponentBase, type IgcDockManagerLayout, type IgcDockManagerPane, type IgcDockManagerPoint, type IgcDockManagerResourceStrings, type IgcDropTargetPaneInfo, type IgcFloatingPaneResizeEventArgs, type IgcFloatingPaneResizeMoveEventArgs, type IgcPaneCloseEventArgs, type IgcPaneDragEndEventArgs, type IgcPaneDragOverEventArgs, type IgcPaneDragStartEventArgs, type IgcPaneFlyoutEventArgs, type IgcPaneHeaderConnectionEventArgs, type IgcPaneNavigatorMetadata, type IgcPanePinnedEventArgs, type IgcPaneScrollEventArgs, type IgcSplitPane, type IgcSplitterResizeEventArgs, type IgcTabGroupPane, type IgcTabHeaderConnectionEventArgs } from './dockmanager.interfaces.js';
 export interface IgcDockManagerEventMap {
     activePaneChanged: CustomEvent<IgcActivePaneEventArgs>;
     floatingPaneResizeEnd: CustomEvent<IgcFloatingPaneResizeEventArgs>;
@@ -15,6 +15,7 @@ export interface IgcDockManagerEventMap {
     paneHeaderDisconnected: CustomEvent<IgcPaneHeaderConnectionEventArgs>;
     paneClose: CustomEvent<IgcPaneCloseEventArgs>;
     panePinnedToggle: CustomEvent<IgcPanePinnedEventArgs>;
+    paneFlyoutToggle: CustomEvent<IgcPaneFlyoutEventArgs>;
     paneScroll: CustomEvent<IgcPaneScrollEventArgs>;
     splitterResizeStart: CustomEvent<IgcSplitterResizeEventArgs>;
     splitterResizeEnd: CustomEvent<IgcSplitterResizeEventArgs>;
@@ -56,6 +57,7 @@ declare const IgcDockManagerComponent_base: Constructor<import("../../common/mix
  * @fires splitterResizeEnd - Emitted when a splitter resize ends
  * @fires tabHeaderConnected - Emitted when an `<igc-tab-header>` is connected
  * @fires tabHeaderDisconnected - Emitted when an `<igc-tab-header>` is disconnected
+ * @fires paneFlyoutToggle - Emitted when an unpinned pane's flyout state changes (opens or closes).
  */
 export default class IgcDockManagerComponent extends IgcDockManagerComponent_base implements IgcDockManagerComponentBase {
     static readonly tagName = "igc-dockmanager";
@@ -100,6 +102,7 @@ export default class IgcDockManagerComponent extends IgcDockManagerComponent_bas
     private loaded;
     private _isValidDrop;
     private draggedTab;
+    private cachedHeaderHeight;
     private templatableComponents;
     private readonly _resourceChangeHandler;
     documentOnlyDrag: boolean;
@@ -353,6 +356,8 @@ export default class IgcDockManagerComponent extends IgcDockManagerComponent_bas
     private splitterResizeAndScroll;
     private processTemplates;
     private removeCustomContentEventListeners;
+    private restoreDraggedPanes;
+    private clearDragState;
     private handleCustomContentFocusIn;
     private mutationCallback;
     private handleShadowRootFocusOut;
@@ -374,6 +379,45 @@ export default class IgcDockManagerComponent extends IgcDockManagerComponent_bas
     private renderDocumentHost;
     private renderSplitter;
     private removeHoveredPane;
+    /**
+     * Gets the actual pane header height, using a cached value when available.
+     * All pane headers share the same height so the result is cached globally.
+     *
+     * Resolution order:
+     *  1. Cached value
+     *  2. Any currently visible header's offsetHeight
+     *  3. Stand-in measurement (handles hidden headers and ::part overrides)
+     *  4. PANE_HEADER_HEIGHT constant (40 px)
+     *
+     * @param pane - The content pane to get header height for
+     * @returns The header height in pixels
+     * @internal
+     */
+    private getPaneHeaderHeight;
+    /**
+     * Measures the intended header height by creating a lightweight stand-in element
+     * that replicates the pane header's styling without instantiating a Lit component.
+     *
+     * The stand-in is placed off-screen inside the dock manager's shadow root and
+     * measured, then immediately removed.
+     *
+     * @returns The measured height in pixels, or 0 when measurement is not possible.
+     * @internal
+     */
+    private measureHeaderHeight;
+    /**
+     * Determines if the header should be shown based on pointer position within the pane.
+     * Used only when showPaneHeaders is set to 'onHoverOnly'.
+     *
+     * Detection logic:
+     * - Shows header if pointer Y is within the pane's top edge and header height
+     * - When header is already visible, adds a 25% buffer zone to prevent flickering
+     *   at the boundary (the "leave" threshold is larger than the "enter" threshold)
+     *
+     * @param pane - The content pane being hovered
+     * @param event - The pointer move event
+     * @internal
+     */
     private togglePaneHeaderVisibility;
     private handleContentPaneFocus;
     private resolveAllowMaximize;
@@ -426,6 +470,35 @@ export default class IgcDockManagerComponent extends IgcDockManagerComponent_bas
     paneClose(args: IgcPaneCloseEventArgs): CustomEvent<IgcPaneCloseEventArgs>;
     paneScroll(args: IgcPaneScrollEventArgs): CustomEvent<IgcPaneScrollEventArgs>;
     panePinnedToggle(args: IgcPanePinnedEventArgs): CustomEvent<IgcPanePinnedEventArgs>;
+    /**
+     * Emitted when an unpinned pane's flyout state changes (opens or closes).
+     *
+     * This event fires when:
+     * - An unpinned pane is clicked and its flyout opens to display content
+     * - An unpinned pane's flyout closes (user clicks elsewhere, switches to another unpinned pane, etc.)
+     * - Switching between unpinned panes (fires twice: close event for old pane, open event for new pane)
+     *
+     * This event does NOT fire when:
+     * - A pane is pinned or unpinned using the pin button (use panePinnedToggle for that)
+     * - A pane is initially unpinned (only subsequent flyout open/close actions)
+     *
+     * Use this event to show/hide auxiliary UI, update summary views, or respond to unpinned pane visibility changes.
+     *
+     * @example
+     * ```typescript
+     * dockManager.addEventListener('paneFlyoutToggle', (event) => {
+     *   const { pane, isOpen } = event.detail;
+     *   if (isOpen) {
+     *     // Unpinned pane opened - show related UI
+     *     summaryPanel.style.display = 'none';
+     *   } else {
+     *     // Unpinned pane closed - hide related UI
+     *     summaryPanel.style.display = 'block';
+     *   }
+     * });
+     * ```
+     */
+    paneFlyoutToggle(args: IgcPaneFlyoutEventArgs): CustomEvent<IgcPaneFlyoutEventArgs>;
     paneDragStart(args: IgcPaneDragStartEventArgs): CustomEvent<IgcPaneDragStartEventArgs>;
     paneDragOver(args: IgcPaneDragOverEventArgs): CustomEvent<IgcPaneDragOverEventArgs>;
     paneDragEnd(args: IgcPaneDragEndEventArgs): CustomEvent<IgcPaneDragEndEventArgs>;

package/{dist/components → components}/dockmanager/dockmanager-component.js

@@ -143,6 +143,7 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
             this.updateLayout();
         }
         this.service.processLayout();
+        this.restoreDraggedPanes();
         if (!this.isDragging) {
             this.emitEvent('layoutChange');
         }
@@ -186,6 +187,7 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
         this.loaded = false;
         this._isValidDrop = true;
         this.draggedTab = null;
+        this.cachedHeaderHeight = null;
         this.templatableComponents = [
             {
                 slot: 'paneHeaderCloseButton',
@@ -417,6 +419,7 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
         this.removeCustomContentEventListeners();
         this.domObserver.disconnect();
         this.resizeObserver.disconnect();
+        this.cachedHeaderHeight = null;
     }
     focusElement() {
         this.focus();
@@ -650,6 +653,43 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
             child.removeEventListener('focusin', this.handleCustomContentFocusIn);
         }
     }
+    restoreDraggedPanes() {
+        const draggedPaneId = this.isDragging && this.draggedPane ? this.draggedPane.id : null;
+        const draggedTabId = this.isDragging && this.draggedTab ? this.draggedTab.id : null;
+        let paneRestored = true;
+        let tabRestored = true;
+        if (draggedPaneId) {
+            const restoredPane = this.service.findPaneById(draggedPaneId);
+            if (restoredPane) {
+                this.draggedPane = restoredPane;
+            }
+            else {
+                paneRestored = false;
+            }
+        }
+        if (draggedTabId) {
+            const restoredTab = this.service.findPaneById(draggedTabId);
+            if (restoredTab && restoredTab.type === 'contentPane') {
+                this.draggedTab = restoredTab;
+            }
+            else {
+                tabRestored = false;
+            }
+        }
+        const paneNotFound = draggedPaneId && !paneRestored;
+        const tabNotFound = draggedTabId && !tabRestored;
+        if (paneNotFound || tabNotFound) {
+            this.clearDragState();
+        }
+    }
+    clearDragState() {
+        this.isDragging = false;
+        this.draggedPane = null;
+        this.draggedTab = null;
+        this.dropTargetPaneInfo = null;
+        this.dropShadowRect = null;
+        this.setSplitterDockingIndicatorVisibility('hidden');
+    }
     mutationCallback(records) {
         const filteredRecords = records.filter((rec) => rec.type === 'childList');
         for (const child of filteredRecords) {
@@ -1022,15 +1062,94 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
     removeHoveredPane() {
         this.hoveredPane = null;
     }
+    getPaneHeaderHeight(pane) {
+        if (this.cachedHeaderHeight !== null && this.cachedHeaderHeight > 0) {
+            return this.cachedHeaderHeight;
+        }
+        if (!this.contentPanesElementMap) {
+            return PANE_HEADER_HEIGHT;
+        }
+        const preferred = this.contentPanesElementMap.get(pane);
+        const elements = preferred
+            ? [
+                preferred,
+                ...Array.from(this.contentPanesElementMap.values()).filter((el) => el !== preferred),
+            ]
+            : Array.from(this.contentPanesElementMap.values());
+        for (const el of elements) {
+            const header = el.querySelector('igc-pane-header');
+            if (header &&
+                !header.classList.contains('hidden') &&
+                header.offsetHeight > 0) {
+                this.cachedHeaderHeight = header.offsetHeight;
+                return header.offsetHeight;
+            }
+        }
+        const measured = this.measureHeaderHeight();
+        if (measured > 0) {
+            this.cachedHeaderHeight = measured;
+            return measured;
+        }
+        return PANE_HEADER_HEIGHT;
+    }
+    measureHeaderHeight() {
+        if (!this.shadowRoot || !this.contentPanesElementMap)
+            return 0;
+        let header = null;
+        for (const [, el] of this.contentPanesElementMap) {
+            header = el.querySelector('igc-pane-header');
+            if (header)
+                break;
+        }
+        if (!header?.shadowRoot)
+            return 0;
+        const standin = document.createElement('div');
+        const partAttr = header.getAttribute('part');
+        if (partAttr) {
+            standin.setAttribute('part', partAttr);
+        }
+        const shadow = standin.attachShadow({ mode: 'open' });
+        for (const node of Array.from(header.shadowRoot.childNodes)) {
+            shadow.appendChild(node.cloneNode(true));
+        }
+        if (header.shadowRoot.adoptedStyleSheets?.length) {
+            shadow.adoptedStyleSheets = [...header.shadowRoot.adoptedStyleSheets];
+        }
+        const wrapper = document.createElement('div');
+        wrapper.style.position = 'absolute';
+        wrapper.style.left = '-9999px';
+        wrapper.style.top = '0';
+        wrapper.style.visibility = 'hidden';
+        const sourceRect = header.getBoundingClientRect();
+        const sourceWidth = sourceRect?.width || header.offsetWidth;
+        if (sourceWidth > 0) {
+            wrapper.style.width = `${sourceWidth}px`;
+        }
+        wrapper.appendChild(standin);
+        this.shadowRoot.appendChild(wrapper);
+        try {
+            const offsetHeight = standin.offsetHeight;
+            const computedStyle = getComputedStyle(standin);
+            const maxHeight = Number.parseFloat(computedStyle.maxHeight);
+            const effectiveHeight = Math.max(offsetHeight, !Number.isNaN(maxHeight) ? maxHeight : 0);
+            return effectiveHeight > 0 ? effectiveHeight : 0;
+        }
+        finally {
+            wrapper.remove();
+        }
+    }
     togglePaneHeaderVisibility(pane, event) {
         if (!this.contentPanesElementMap)
             return;
         const paneRect = this.contentPanesElementMap
             .get(pane)
             ?.getBoundingClientRect();
-        const withinPane = paneRect &&
-            event.clientY >= paneRect.top &&
-            event.clientY < paneRect.top + PANE_HEADER_HEIGHT;
+        if (!paneRect)
+            return;
+        const paneHeaderHeight = this.getPaneHeaderHeight(pane);
+        const buffer = this.hoveredPane === pane ? paneHeaderHeight * 0.25 : 0;
+        const withinPane = event.clientY >= paneRect.top &&
+            event.clientY < paneRect.top + paneHeaderHeight + buffer;
         if (withinPane) {
             this.hoveredPane = pane;
         }
@@ -1048,7 +1167,13 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
         const isPinned = this.service.getActualIsPinned(pane);
         const unpinBehavior = !isPinned ? 'selectedPane' : this.unpinBehavior;
         this.shouldClearActivePane = false;
-        this.service.togglePin(pane, unpinBehavior);
+        this.service.isPinToggling = true;
+        try {
+            this.service.togglePin(pane, unpinBehavior);
+        }
+        finally {
+            this.service.isPinToggling = false;
+        }
         this.scheduleAfterRender(() => {
             this.shouldClearActivePane = true;
             this.setFocus(pane);
@@ -1310,6 +1435,17 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
                     ? this.layout.floatingPanes.indexOf(dropPaneRoot) !== -1 &&
                         !this.service.getChildDocHostRecursive(dropPaneRoot)
                     : false;
+                const draggedPanes = this.draggedPane?.type === 'contentPane'
+                    ? [this.draggedPane]
+                    : this.service.getChildContentPanes(this.draggedPane);
+                const disableFloatingDrop = draggedPanes.some((pane) => pane.allowFloating === false) &&
+                    (this.layout.floatingPanes
+                        ? this.layout.floatingPanes.indexOf(dropPaneRoot) !== -1
+                        : false);
+                if (disableFloatingDrop) {
+                    this.dropTargetPaneInfo = null;
+                    return;
+                }
                 if (!this.documentOnlyDrag ||
                     docHost ||
                     floatingPaneWithoutDocHost ||
@@ -2131,6 +2267,11 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
             cancelable: true,
         });
     }
+    paneFlyoutToggle(args) {
+        return this.createAndDispatchEvent('paneFlyoutToggle', args, {
+            cancelable: true,
+        });
+    }
     paneDragStart(args) {
         return this.createAndDispatchEvent('paneDragStart', args, {
             cancelable: true,
@@ -2530,12 +2671,10 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
             }
         })}
       >
-        ${isSingleTab
-            ? this.renderTabPanel(tabs[0], false, isFloating)
-            : tabs.map((p) => html `
-                ${this.renderTabHeader(p, position, isFloating)}
-                ${this.renderTabPanel(p, isInDocumentHost, isFloating)}
-              `)}
+        ${tabs.map((p) => html `
+            ${this.renderTabHeader(p, position, isFloating)}
+            ${this.renderTabPanel(p, isInDocumentHost, isFloating)}
+          `)}
       </igc-tabs-component>
     `;
     }

package/{dist/components → components}/dockmanager/dockmanager.interfaces.d.ts

@@ -84,6 +84,7 @@ export interface IgcDockManagerComponentBase {
     paneClose(eventArgs: IgcPaneCloseEventArgs): CustomEvent<IgcPaneCloseEventArgs>;
     paneScroll(eventArgs: IgcPaneScrollEventArgs): CustomEvent<IgcPaneScrollEventArgs>;
     panePinnedToggle(eventArgs: IgcPanePinnedEventArgs): CustomEvent<IgcPanePinnedEventArgs>;
+    paneFlyoutToggle(eventArgs: IgcPaneFlyoutEventArgs): CustomEvent<IgcPaneFlyoutEventArgs>;
     paneDragStart(eventArgs: IgcPaneDragStartEventArgs): CustomEvent<IgcPaneDragStartEventArgs>;
     paneDragOver(eventArgs: IgcPaneDragOverEventArgs): CustomEvent<IgcPaneDragOverEventArgs>;
     paneDragEnd(eventArgs: IgcPaneDragEndEventArgs): CustomEvent<IgcPaneDragEndEventArgs>;
@@ -293,6 +294,20 @@ export interface IgcPanePinnedEventArgs {
      */
     readonly location: IgcUnpinnedLocation;
 }
+export interface IgcPaneFlyoutEventArgs {
+    /**
+     * Gets the unpinned pane that is being opened or closed.
+     * This is the content pane whose flyout state is changing.
+     */
+    readonly pane: IgcContentPane;
+    /**
+     * Gets whether the unpinned pane is being opened (true) or closed (false).
+     *
+     * - `true`: The unpinned pane's flyout is opening and its content will be displayed.
+     * - `false`: The unpinned pane's flyout is closing and its content will be hidden.
+     */
+    readonly isOpen: boolean;
+}
 export interface IgcPaneDragStartEventArgs {
     /**
      * Gets the source pane that triggers the drag start.

package/{dist/components → components}/dockmanager/dockmanager.service.d.ts

@@ -38,6 +38,7 @@ export declare class IgcDockManagerService {
         pane: any;
         index: number;
     };
+    isPinToggling: boolean;
     constructor(dockManager: IgcDockManagerComponentBase);
     getContent(contentId: string): IgcDockManagerPane;
     private generateUuid;
@@ -55,6 +56,7 @@ export declare class IgcDockManagerService {
     private getChildContentPanesRecursive;
     getChildDocHostRecursive(pane: IgcSplitPane): IgcDocumentHost | null;
     getVisibleContentPanes(parent: IgcTabGroupPane): IgcContentPane[];
+    findPaneById(paneId: string | undefined): IgcDockManagerPane | null;
     private getPaneToDock;
     private removeDocumentHost;
     private dockToCenter;
@@ -98,6 +100,12 @@ export declare class IgcDockManagerService {
     private emitPaneClose;
     private removeAllowedPanes;
     flyoutPane(pane: IgcContentPane): void;
+    /**
+     * Sets the flyout pane and emits paneFlyoutToggle event if needed.
+     * @param newValue The new flyout pane value
+     * @param oldValue The previous flyout pane value
+     */
+    setFlyoutPane(newValue: IgcContentPane | null, oldValue: IgcContentPane | null): void;
     maximizePane(pane: IgcContentPane | IgcSplitPane | IgcTabGroupPane | null): void;
     moveFloatingPane(pane: IgcSplitPane, location: IgcDockManagerPoint): void;
     resizeFloatingPaneStart(pane: IgcSplitPane, resizerLocation: ResizerLocation): boolean;

package/{dist/components → components}/dockmanager/dockmanager.service.js

@@ -20,6 +20,7 @@ export class IgcDockManagerService {
         this.forceDragTabHeader = null;
         this.unpinnedLocationMap = new Map();
         this.keyboardDockPane = null;
+        this.isPinToggling = false;
     }
     getContent(contentId) {
         return this.clientContentPanesMap.get(contentId);
@@ -300,6 +301,42 @@ export class IgcDockManagerService {
     getVisibleContentPanes(parent) {
         return parent.panes.filter((t) => this.isContentPaneVisible(t));
     }
+    findPaneById(paneId) {
+        const layout = this.dockManager.layout;
+        if (!layout || !paneId)
+            return null;
+        const searchPane = (pane) => {
+            if (!pane)
+                return null;
+            if (pane.id === paneId) {
+                return pane;
+            }
+            if (pane.type === 'splitPane' || pane.type === 'tabGroupPane') {
+                if (pane.panes) {
+                    for (const childPane of pane.panes) {
+                        const found = searchPane(childPane);
+                        if (found)
+                            return found;
+                    }
+                }
+            }
+            if (pane.type === 'documentHost' && pane.rootPane) {
+                return searchPane(pane.rootPane);
+            }
+            return null;
+        };
+        let found = searchPane(layout.rootPane);
+        if (found)
+            return found;
+        if (layout.floatingPanes) {
+            for (const floatingPane of layout.floatingPanes) {
+                found = searchPane(floatingPane);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
     getPaneToDock(draggedPane) {
         return draggedPane?.type === 'contentPane'
             ? draggedPane
@@ -557,6 +594,10 @@ export class IgcDockManagerService {
         return null;
     }
     processLayout() {
+        const draggedTabId = this.draggedTab ? this.draggedTab.id : null;
+        const draggedPaneIds = this.draggedPanes
+            .filter((pane) => pane && pane.id != null)
+            .map((pane) => pane.id);
         this.paneParentMap = new Map();
         this.unpinnedLocationMap = new Map();
         this.clientContentPanesMap = new Map();
@@ -577,6 +618,7 @@ export class IgcDockManagerService {
                     else {
                         this.dockManager.floatingPaneZIndicesMap.set(pane, i);
                     }
+                    this.populatePinLocations(pane);
                 }
                 for (const key of indicesToDelete.keys()) {
                     this.dockManager.floatingPaneZIndicesMap.delete(key);
@@ -585,7 +627,25 @@ export class IgcDockManagerService {
             this.populatePinLocations(layout.rootPane);
             if (this.dockManager.flyoutPane &&
                 !this.unpinnedLocationMap.has(this.dockManager.flyoutPane)) {
-                this.dockManager.flyoutPane = null;
+                this.setFlyoutPane(null, this.dockManager.flyoutPane);
+            }
+            if (draggedTabId) {
+                const restoredTab = this.findPaneById(draggedTabId);
+                if (restoredTab && restoredTab.type === 'contentPane') {
+                    this.draggedTab = restoredTab;
+                }
+                else {
+                    this.draggedTab = null;
+                }
+            }
+            if (draggedPaneIds.length > 0) {
+                this.draggedPanes = [];
+                for (const paneId of draggedPaneIds) {
+                    const restoredPane = this.findPaneById(paneId);
+                    if (restoredPane && restoredPane.type === 'contentPane') {
+                        this.draggedPanes.push(restoredPane);
+                    }
+                }
             }
         }
     }
@@ -679,14 +739,14 @@ export class IgcDockManagerService {
                     cp.isMaximized = false;
                 }
                 if (newValue) {
-                    this.dockManager.flyoutPane = null;
+                    this.setFlyoutPane(null, this.dockManager.flyoutPane);
                 }
                 else {
                     this.flyoutPane(pane);
                 }
             }
             else if (newValue) {
-                this.dockManager.flyoutPane = null;
+                this.setFlyoutPane(null, this.dockManager.flyoutPane);
             }
             this.updateLayout();
             this.dockManager.layoutChange();
@@ -727,7 +787,7 @@ export class IgcDockManagerService {
             ? this.removeAllowedPanes(pane, paneToRemove)
             : this.emitPaneClose(pane, [paneToRemove]);
         if ((paneRemoved || pane.hidden) && pane === this.dockManager.flyoutPane) {
-            this.dockManager.flyoutPane = null;
+            this.setFlyoutPane(null, this.dockManager.flyoutPane);
         }
         if (paneRemoved) {
             this.paneParentMap.delete(paneToRemove);
@@ -761,8 +821,35 @@ export class IgcDockManagerService {
         return paneRemoved;
     }
     flyoutPane(pane) {
-        this.dockManager.flyoutPane =
-            this.dockManager.flyoutPane === pane ? null : pane;
+        const oldValue = this.dockManager.flyoutPane;
+        const newValue = oldValue === pane ? null : pane;
+        this.setFlyoutPane(newValue, oldValue);
+    }
+    setFlyoutPane(newValue, oldValue) {
+        if (this.isPinToggling) {
+            this.dockManager.flyoutPane = newValue;
+            return;
+        }
+        if (newValue === oldValue) {
+            return;
+        }
+        let closePrevented = false;
+        let openPrevented = false;
+        if (oldValue) {
+            closePrevented = this.dockManager.paneFlyoutToggle({
+                pane: oldValue,
+                isOpen: false,
+            }).defaultPrevented;
+        }
+        if (!closePrevented && newValue) {
+            openPrevented = this.dockManager.paneFlyoutToggle({
+                pane: newValue,
+                isOpen: true,
+            }).defaultPrevented;
+        }
+        if (!closePrevented && !openPrevented) {
+            this.dockManager.flyoutPane = newValue;
+        }
     }
     maximizePane(pane) {
         if (!pane)
@@ -954,7 +1041,7 @@ export class IgcDockManagerService {
         this.addFloatingPane(paneToAdd, { x, y }, width, height);
         if (pane === this.dockManager.flyoutPane) {
             pane.isPinned = true;
-            this.dockManager.flyoutPane = null;
+            this.setFlyoutPane(null, this.dockManager.flyoutPane);
         }
         this.updateLayout();
     }
@@ -1391,7 +1478,7 @@ export class IgcDockManagerService {
                 if (draggedPane.isPinned === false) {
                     draggedPane.isPinned = true;
                     if (draggedPane === this.dockManager.flyoutPane) {
-                        this.dockManager.flyoutPane = null;
+                        this.setFlyoutPane(null, this.dockManager.flyoutPane);
                     }
                 }
             }

package/{dist/components → components}/sample-component/sample-component.d.ts

@@ -36,6 +36,7 @@ export declare class SampleComponent extends LitElement {
     private handlePinnedToggle;
     private handleActivePaneChanged;
     private handleDragStart;
+    private handlePaneFlyoutToggle;
     private handleDragOver;
     private handleDragEnd;
     private handleSplitterResizeStart;