From 39d195260260016628ba5a015334bea4d9016e9e Mon Sep 17 00:00:00 2001
From: Emil Petrov <epetrov@progress.com>
Date: Mon, 9 Dec 2024 15:04:26 +0200
Subject: [PATCH] feat(dock-manager): add support for floating panes

---
 .../default/scss/dock-manager/_layout.scss    |   4 +
 .../fluent/scss/dock-manager/_layout.scss     |   4 +
 .../tests/dock-manager-floating-panes.tsx     | 120 ++++++++++++++++++
 packages/html/src/window/window.spec.tsx      |  16 ++-
 4 files changed, 143 insertions(+), 1 deletion(-)
 create mode 100644 packages/html/src/dock-manager/tests/dock-manager-floating-panes.tsx

diff --git a/packages/default/scss/dock-manager/_layout.scss b/packages/default/scss/dock-manager/_layout.scss
index 2841fa8a47e..3fe12d1f939 100644
--- a/packages/default/scss/dock-manager/_layout.scss
+++ b/packages/default/scss/dock-manager/_layout.scss
@@ -157,6 +157,10 @@
         z-index: 10;
     }
 
+    .k-dock-manager-window:has(.k-pane) .k-window-content {
+        padding: 0;
+    }
+
 }
 
 @mixin kendo-dock-navigator--layout() {
diff --git a/packages/fluent/scss/dock-manager/_layout.scss b/packages/fluent/scss/dock-manager/_layout.scss
index 1ab4c4b383b..106f12a66f5 100644
--- a/packages/fluent/scss/dock-manager/_layout.scss
+++ b/packages/fluent/scss/dock-manager/_layout.scss
@@ -154,6 +154,10 @@
         border-radius: var( --kendo-dock-manager-dock-preview-border-radius, #{$kendo-dock-manager-dock-preview-border-radius} );
     }
 
+    .k-dock-manager-window:has(.k-pane) .k-window-content {
+        padding: 0;
+    }
+
 }
 
 @mixin  kendo-dock-indicator--layout() {
diff --git a/packages/html/src/dock-manager/tests/dock-manager-floating-panes.tsx b/packages/html/src/dock-manager/tests/dock-manager-floating-panes.tsx
new file mode 100644
index 00000000000..f932037eec1
--- /dev/null
+++ b/packages/html/src/dock-manager/tests/dock-manager-floating-panes.tsx
@@ -0,0 +1,120 @@
+import { Button } from "../../button";
+import { MenuButton } from "../../menu-button";
+import { SplitterPane } from "../../splitter";
+import { TabStripNormal, TabStripItem, TabStripContent } from "../../tabstrip";
+import { WindowNormal } from "../../window";
+import { DockManagerSplitter, PaneScrollable } from "../";
+
+const style = `
+    .k-window {
+        position: relative;
+        top: 1rem;
+    }
+`;
+
+export default () => (
+  <>
+    <style>{style}</style>
+    <div id="test-area" className="k-d-grid k-grid-cols-2">
+        <section>
+            <span>Floating Pane</span>
+            <WindowNormal
+                className="k-dock-manager-window"
+                title="Pane Title"
+                actions={["window-minimize", "window", "more-vertical"]}
+                children={
+                <p>
+                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur error repudiandaecorrupti qui. Ipsum corporis, voluptates numquam distinctio et dolorem illum. Ipsa, laborumsoluta cum asperiores sit fuga iure ad.
+                    Deleniti veniam totam debitis quidem vitae id sunt, fuga at ipsa sed deserunt nulla ipsumquam!
+                </p>
+            }/>
+        </section>
+        <section>
+            <span>Floating Pane with TabStrip</span>
+            <WindowNormal
+                style={{ width: "466px" }}
+                className="k-dock-manager-window"
+                title="Pane Title 1"
+                actions={["window-minimize", "window", "more-vertical"]}
+                children={
+                <TabStripNormal
+                    tabStripItems={
+                        <>
+                            <TabStripItem
+                                first
+                                value="Pane Title 1"
+                                active
+                                actions={
+                                <>
+                                    <Button fillMode="flat" icon="pin"></Button>
+                                    <MenuButton
+                                        fillMode="flat"
+                                        icon="more-vertical"
+                                        showArrow={false}
+                                    ></MenuButton>
+                                </>
+                                }
+                            ></TabStripItem>
+                            <TabStripItem
+                                last
+                                value="Pane Title 2"
+                                actions={
+                                <>
+                                    <Button fillMode="flat" icon="pin"></Button>
+                                    <MenuButton
+                                        fillMode="flat"
+                                        icon="more-vertical"
+                                        showArrow={false}
+                                    ></MenuButton>
+                                </>
+                                }
+                            ></TabStripItem>
+                        </>
+                }>
+                    <TabStripContent active>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi suscipit porro optio veritatis obcaecati nostrum molestias dolor maxime! Molestias ducimus placeat quia possimus esse atque odio, a recusandae iste exercitationem.
+                    </TabStripContent>
+                </TabStripNormal>
+            }/>
+        </section>
+        <section>
+            <span>Floating Pane with Splitter</span>
+            <WindowNormal
+                className="k-dock-manager-window"
+                title="Pane Title 1"
+                actions={["window-minimize", "window", "more-vertical"]}
+                children={
+                <>
+                    <DockManagerSplitter>
+                        <SplitterPane>
+                            <PaneScrollable title="Pane Title 1" actions={
+                                <>
+                                    <Button fillMode="flat" icon="pin"></Button>
+                                    <MenuButton fillMode="flat" icon="more-vertical" showArrow={false}></MenuButton>
+                                </>
+                            }>
+                                <p>
+                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus perspiciatis mollitia dicta expedita numquam reprehenderit assumenda rem eum id voluptas laborum pariatur ab alias iure accusantium blanditiis, corporis, ut maxime?
+                                </p>
+                            </PaneScrollable>
+                        </SplitterPane>
+                        <SplitterPane>
+                            <PaneScrollable title="Pane Title 2" actions={
+                                <>
+                                    <Button fillMode="flat" icon="pin"></Button>
+                                    <MenuButton fillMode="flat" icon="more-vertical" showArrow={false}></MenuButton>
+                                </>
+                            }>
+                                <p>
+                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus perspiciatis mollitia dicta expedita numquam reprehenderit assumenda rem eum id voluptas laborum pariatur ab alias iure accusantium blanditiis, corporis, ut maxime?
+                                </p>
+                            </PaneScrollable>
+                        </SplitterPane>
+
+                    </DockManagerSplitter>
+                </>
+            }/>
+        </section>
+    </div>
+  </>
+);
diff --git a/packages/html/src/window/window.spec.tsx b/packages/html/src/window/window.spec.tsx
index e69942e7169..1a2ffe7f42d 100644
--- a/packages/html/src/window/window.spec.tsx
+++ b/packages/html/src/window/window.spec.tsx
@@ -1,5 +1,6 @@
 import { ActionButtons } from '../action-buttons';
 import { Button } from '../button';
+import { MenuButton } from '../menu-button';
 import { classNames, optionClassNames, ThemeColor } from '../misc';
 
 export const WINDOW_CLASSNAME = `k-window`;
@@ -60,7 +61,20 @@ export const Window = (
                     {actions && <>
                         <div className="k-window-titlebar-actions">
                             {actions.map(actionName =>
-                                <Button key={actionName} icon={actionName} fillMode="flat" className="k-window-titlebar-action"></Button>
+                                actionName === "more-vertical" ?
+                                    <MenuButton
+                                        key={actionName}
+                                        icon={actionName}
+                                        fillMode="flat"
+                                        showArrow={false}
+                                        className="k-window-titlebar-action"
+                                    ></MenuButton> :
+                                    <Button
+                                        key={actionName}
+                                        icon={actionName}
+                                        fillMode="flat"
+                                        className="k-window-titlebar-action"
+                                    ></Button>
                             )}
                         </div>
                     </>}