From 3787056c9593e507e10df8738ffcde0955535e69 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 ++
 packages/html/src/dock-manager/index.ts       |  3 ++
 ...ck-manager-floating-pane-with-splitter.tsx | 48 +++++++++++++++++
 ...ck-manager-floating-pane-with-tabstrip.tsx | 53 +++++++++++++++++++
 .../templates/dock-manager-floating-pane.tsx  | 17 ++++++
 .../tests/dock-manager-floating-panes.tsx     | 28 ++++++++++
 packages/html/src/window/window.spec.tsx      | 16 +++++-
 8 files changed, 172 insertions(+), 1 deletion(-)
 create mode 100644 packages/html/src/dock-manager/templates/dock-manager-floating-pane-with-splitter.tsx
 create mode 100644 packages/html/src/dock-manager/templates/dock-manager-floating-pane-with-tabstrip.tsx
 create mode 100644 packages/html/src/dock-manager/templates/dock-manager-floating-pane.tsx
 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..c5ceffe618c 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-floating-pane: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..c2957066bb1 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-floating-pane:has(.k-pane) .k-window-content {
+        padding: 0;
+    }
+
 }
 
 @mixin  kendo-dock-indicator--layout() {
diff --git a/packages/html/src/dock-manager/index.ts b/packages/html/src/dock-manager/index.ts
index c804025fdde..92dfac768b5 100644
--- a/packages/html/src/dock-manager/index.ts
+++ b/packages/html/src/dock-manager/index.ts
@@ -6,3 +6,6 @@ export * from './dock-navigator';
 export * from './pane-scrollable';
 export * from './templates/dock-manager-normal';
 export * from './templates/dock-manager-unpinned-pane';
+export * from './templates/dock-manager-floating-pane';
+export * from './templates/dock-manager-floating-pane-with-tabstrip';
+export * from './templates/dock-manager-floating-pane-with-splitter';
diff --git a/packages/html/src/dock-manager/templates/dock-manager-floating-pane-with-splitter.tsx b/packages/html/src/dock-manager/templates/dock-manager-floating-pane-with-splitter.tsx
new file mode 100644
index 00000000000..913ca8907c0
--- /dev/null
+++ b/packages/html/src/dock-manager/templates/dock-manager-floating-pane-with-splitter.tsx
@@ -0,0 +1,48 @@
+import { Button } from "../../button";
+import { MenuButton } from "../../menu-button";
+import { SplitterPane } from "../../splitter";
+import { WindowNormal } from "../../window";
+import DockManagerSplitter from "../dock-manager-splitter";
+import PaneScrollable from "../pane-scrollable";
+
+export const DockManagerFloatingPaneWithSplitter = (props) => (
+    <WindowNormal
+        className="k-floating-pane"
+        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?
+                            Ea assumenda minus debitis excepturi ipsum facere inventore aperiam delectus maxime tenetur hic vel, cum ab est voluptas in laborum deserunt. Ipsum possimus nam aspernatur quia aliquid in doloremque ex.
+                        </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?
+                            Ea assumenda minus debitis excepturi ipsum facere inventore aperiam delectus maxime tenetur hic vel, cum ab est voluptas in laborum deserunt. Ipsum possimus nam aspernatur quia aliquid in doloremque ex.
+                        </p>
+                    </PaneScrollable>
+                </SplitterPane>
+
+            </DockManagerSplitter>
+        </>
+    }
+    {...props}
+    />
+);
diff --git a/packages/html/src/dock-manager/templates/dock-manager-floating-pane-with-tabstrip.tsx b/packages/html/src/dock-manager/templates/dock-manager-floating-pane-with-tabstrip.tsx
new file mode 100644
index 00000000000..5a19a65929b
--- /dev/null
+++ b/packages/html/src/dock-manager/templates/dock-manager-floating-pane-with-tabstrip.tsx
@@ -0,0 +1,53 @@
+import { Button } from "../../button";
+import { MenuButton } from "../../menu-button";
+import { TabStripNormal, TabStripItem, TabStripContent } from "../../tabstrip";
+import { WindowNormal } from "../../window";
+
+export const DockManagerFloatingPaneWithTabStrip = (props) => (
+    <WindowNormal
+        className="k-floating-pane"
+        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>
+    }
+    {...props}
+    />
+);
diff --git a/packages/html/src/dock-manager/templates/dock-manager-floating-pane.tsx b/packages/html/src/dock-manager/templates/dock-manager-floating-pane.tsx
new file mode 100644
index 00000000000..9b17acbde3d
--- /dev/null
+++ b/packages/html/src/dock-manager/templates/dock-manager-floating-pane.tsx
@@ -0,0 +1,17 @@
+import { WindowNormal } from "../../window";
+
+export const DockManagerFloatingPane = (props) => (
+    <WindowNormal
+        className="k-floating-pane"
+        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>
+    }
+    {...props}
+    />
+
+);
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..c879fb13c22
--- /dev/null
+++ b/packages/html/src/dock-manager/tests/dock-manager-floating-panes.tsx
@@ -0,0 +1,28 @@
+import { DockManagerFloatingPane, DockManagerFloatingPaneWithTabStrip, DockManagerFloatingPaneWithSplitter } 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>
+            <DockManagerFloatingPane/>
+        </section>
+        <section>
+            <span>Floating Pane with TabStrip</span>
+            <DockManagerFloatingPaneWithTabStrip style={{ width: "350px" }}/>
+        </section>
+        <section>
+            <span>Floating Pane with Splitter</span>
+            <DockManagerFloatingPaneWithSplitter />
+        </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>
                     </>}