@linzjs/windows 1.2.0 → 1.3.0

package/package.json

@@ -12,7 +12,7 @@
     "panel",
     "popout"
   ],
-  "version": "1.2.0",
+  "version": "1.3.0",
   "peerDependencies": {
     "@linzjs/lui": "^17",
     "lodash-es": ">=4",

package/src/panel/Panel.scss

@@ -1,3 +1,14 @@
+.panelDock > .panelDock-content:not(:empty) + .panelDock-empty {
+  display: none;
+}
+
+.LuiFloatingWindow-children {
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
 .WindowPanel {
   box-shadow: 0 1px 6px 0 #00000026, 0 6px 10px 0 #00000040;
   background-color: #fff;
@@ -22,9 +33,6 @@
 
 .WindowPanel-header-title {
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
 }
 
 .WindowPanel-content {

package/src/panel/Panel.tsx

@@ -5,7 +5,8 @@ import { PanelContext } from "./PanelContext";
 import { PanelInstanceContext, PanelSize } from "./PanelInstanceContext";
 import { PanelPosition, PanelsContext } from "./PanelsContext";
 import { PopoutWindow } from "./PopoutWindow";
-import { ReactElement, ReactNode, useContext, useEffect, useState } from "react";
+import { PropsWithChildren, ReactElement, ReactNode, useContext, useEffect, useState } from "react";
+import ReactDOM from "react-dom";
 import { Rnd } from "react-rnd";
 
 import { LuiButton, LuiIcon } from "@linzjs/lui";
@@ -19,8 +20,9 @@ export interface PanelProps {
 }
 
 export const Panel = ({ title, position, size = { width: 320, height: 200 }, children }: PanelProps): ReactElement => {
-  const { nextStackPosition } = useContext(PanelsContext);
-  const { panelPoppedOut, bounds, zIndex, bringPanelToFront, uniqueId, setTitle } = useContext(PanelInstanceContext);
+  const { nextStackPosition, dockElements } = useContext(PanelsContext);
+  const { panelPoppedOut, bounds, zIndex, bringPanelToFront, uniqueId, setTitle, dockId, docked } =
+    useContext(PanelInstanceContext);
 
   const [panelPosition, setPanelPosition] = useState(() => position ?? nextStackPosition());
   const [panelSize, setPanelSize] = useState(size ?? { width: 320, height: 200 });
@@ -37,10 +39,13 @@ export const Panel = ({ title, position, size = { width: 320, height: 200 }, chi
     setTitle(title);
   }, [setTitle, title]);
 
-  //panelClose
+  const dockElement = docked && dockId && dockElements[dockId];
+
   return (
     <PanelContext.Provider value={{ resizePanel }}>
-      {panelPoppedOut ? (
+      {dockElement && dockElement.isConnected ? (
+        ReactDOM.createPortal(children, dockElement)
+      ) : panelPoppedOut ? (
         <PopoutWindow name={uniqueId} title={title} size={panelSize}>
           <div
             style={{
@@ -113,10 +118,12 @@ export const PanelHeaderButton = ({ "aria-label": ariaLabel, icon, onClick }: Pa
 
 export interface PanelHeaderProps {
   extraButtons?: ReactNode;
+  dockTo?: string;
 }
 
-export const PanelHeader = ({ extraButtons }: PanelHeaderProps) => {
-  const { panelClose, panelTogglePopout, panelPoppedOut, title } = useContext(PanelInstanceContext);
+export const PanelHeader = ({ extraButtons, dockTo, children }: PropsWithChildren<PanelHeaderProps>) => {
+  const { panelClose, panelTogglePopout, panelPoppedOut, title, dock, undock, docked } =
+    useContext(PanelInstanceContext);
   const [cursor, setCursor] = useState<"grab" | "grabbing">("grab");
 
   const headerMouseDown = () => {
@@ -131,9 +138,16 @@ export const PanelHeader = ({ extraButtons }: PanelHeaderProps) => {
       style={{ cursor }}
     >
       <div className={"WindowPanel-header-title"}>{title}</div>
+      <div className={"LuiFloatingWindow-children"}>{children}</div>
       <div className={"LuiFloatingWindow-buttons"}>{extraButtons}</div>
       <div className={"LuiFloatingWindow-extra-buttons-divider"}>|</div>
       <div className={"LuiFloatingWindow-buttons"}>
+        {dockTo &&
+          (docked ? (
+            <PanelHeaderButton aria-label={"Undock"} onClick={undock} icon={"ic_close_list"} />
+          ) : (
+            <PanelHeaderButton aria-label={"Undock"} onClick={() => dock(dockTo)} icon={"ic_left_col"} />
+          ))}
         <PanelHeaderButton
           aria-label={panelPoppedOut ? "Pop-in" : "Pop-out"}
           onClick={panelTogglePopout}

package/src/panel/PanelDock.tsx

@@ -0,0 +1,19 @@
+import { PanelsContext } from "./PanelsContext";
+import { PropsWithChildren, ReactElement, useContext } from "react";
+
+export interface PanelDockProps {
+  id: string;
+}
+
+export const PanelDock = ({ id, children }: PropsWithChildren<PanelDockProps>): ReactElement => {
+  const { setDockElement } = useContext(PanelsContext);
+
+  const setElement = (element: HTMLDivElement) => setDockElement(id, element);
+
+  return (
+    <div className={"panelDock"}>
+      <div ref={setElement} className={"panelDock-content"} />
+      <div className={"panelDock-empty"}>{children}</div>
+    </div>
+  );
+};

package/src/panel/PanelInstanceContext.ts

@@ -17,6 +17,10 @@ export interface PanelInstanceContextType {
   bringPanelToFront: () => void;
   panelPoppedOut: boolean;
   zIndex: number;
+  dockId: string | undefined;
+  docked: boolean;
+  dock: (id: string) => void;
+  undock: () => void;
 }
 
 const NoContextError = () => {
@@ -36,6 +40,10 @@ export const PanelInstanceContext = createContext<PanelInstanceContextType>({
   panelClose: NoContextError,
   setPanelWindow: NoContextError,
   bringPanelToFront: NoContextError,
+  dock: NoContextError,
+  undock: NoContextError,
+  docked: false,
+  dockId: undefined,
   panelPoppedOut: false,
   zIndex: 0,
 });

package/src/panel/PanelInstanceContextProvider.tsx

@@ -1,6 +1,6 @@
 import { PanelInstanceContext } from "./PanelInstanceContext";
 import { PanelInstance, PanelsContext } from "./PanelsContext";
-import { ReactElement, ReactNode, useContext, useState } from "react";
+import { ReactElement, ReactNode, useCallback, useContext, useState } from "react";
 
 /**
  * Provides access to closing/popping panels
@@ -14,8 +14,25 @@ export const PanelInstanceContextProvider = ({
   panelInstance: PanelInstance;
   children: ReactNode;
 }): ReactElement => {
-  const { closePanel, togglePopOut, bringPanelToFront } = useContext(PanelsContext);
+  const { closePanel, bringPanelToFront } = useContext(PanelsContext);
   const [title, setTitle] = useState("");
+  const [dockId, setDockId] = useState<string>();
+  const [poppedOut, setPoppedOut] = useState(false);
+
+  const togglePopOut = useCallback(() => {
+    panelInstance.window = null;
+    setPoppedOut(!poppedOut);
+  }, [panelInstance, poppedOut]);
+
+  const dock = useCallback(
+    (id: string) => {
+      if (poppedOut) togglePopOut();
+      setDockId(id);
+    },
+    [poppedOut, togglePopOut],
+  );
+
+  const undock = useCallback(() => setDockId(undefined), []);
 
   return (
     <PanelInstanceContext.Provider
@@ -30,15 +47,17 @@ export const PanelInstanceContextProvider = ({
           panelInstance.window = null;
           closePanel(panelInstance);
         },
-        panelTogglePopout: () => {
-          togglePopOut(panelInstance);
-        },
-        panelPoppedOut: panelInstance.poppedOut,
+        panelTogglePopout: togglePopOut,
+        panelPoppedOut: poppedOut,
         setPanelWindow: (w: Window) => {
           panelInstance.window = w;
         },
         bringPanelToFront: () => bringPanelToFront(panelInstance),
         zIndex: panelInstance.zIndex,
+        docked: !poppedOut && !!dockId,
+        dockId,
+        dock,
+        undock,
       }}
     >
       {children}

package/src/panel/PanelsContext.tsx

@@ -17,9 +17,10 @@ export interface PanelsContextType {
   openPanels: Set<string>;
   openPanel: (uniqueId: string, component: () => ReactElement) => void;
   closePanel: (panelInstance: PanelInstance) => void;
-  togglePopOut: (panelInstance: PanelInstance) => void;
   bringPanelToFront: (panelInstance: PanelInstance) => void;
   nextStackPosition: () => PanelPosition;
+  dockElements: Record<string, HTMLDivElement>;
+  setDockElement: (id: string, element: HTMLDivElement) => void;
 }
 
 const NoContext = () => {
@@ -30,7 +31,8 @@ export const PanelsContext = createContext<PanelsContextType>({
   openPanels: new Set(),
   openPanel: NoContext,
   closePanel: NoContext,
-  togglePopOut: NoContext,
   bringPanelToFront: NoContext,
+  dockElements: {},
+  setDockElement: NoContext,
   nextStackPosition: () => ({ x: 0, y: 0 }),
 });

package/src/panel/PanelsContextProvider.tsx

@@ -25,6 +25,17 @@ export const PanelsContextProvider = ({
   // Can't use a map here as we need to retain render order for performance
   const [panelInstances, setPanelInstances] = useState<PanelInstance[]>([]);
 
+  const [dockElements, setDockElements] = useState<Record<string, HTMLDivElement>>({});
+
+  const setDockElement = useCallback(
+    (id: string, element: HTMLDivElement) => {
+      if (dockElements[id] !== element) {
+        setDockElements({ ...dockElements, [id]: element });
+      }
+    },
+    [dockElements],
+  );
+
   const bringPanelToFront = useCallback(
     (panelInstance: PanelInstance) => {
       if (panelInstance.window) {
@@ -82,17 +93,6 @@ export const PanelsContextProvider = ({
     [panelInstances],
   );
 
-  const togglePopOut = useCallback(
-    (panelInstance: PanelInstance) => {
-      panelInstance.poppedOut = !panelInstance.poppedOut;
-      if (!panelInstance.poppedOut) {
-        panelInstance.window = null;
-      }
-      setPanelInstances([...panelInstances]);
-    },
-    [panelInstances],
-  );
-
   /**
    * It's not easy to tell the difference between a window closing and a window popping in via events,
    * so we're periodically checking instead.
@@ -122,9 +122,10 @@ export const PanelsContextProvider = ({
         openPanels,
         openPanel,
         closePanel,
-        togglePopOut,
         bringPanelToFront,
         nextStackPosition,
+        dockElements,
+        setDockElement,
       }}
     >
       <Fragment key={"panels"}>

package/src/stories/panel/ShowPanel/ShowPanel.tsx

@@ -27,36 +27,35 @@ export const ShowPanelComponent = ({ data }: ShowPanelComponentProps) => (
 );
 
 /* exclude */
-export const PanelContents = () => {
-  return (
-    <table>
-      <thead>
-        <tr>
-          <th>Owner</th>
-          <th>Title</th>
-          <th>Address</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>Roy</td>
-          <td>OT10A/1011</td>
-          <td>5 Grange St, Auckland</td>
-        </tr>
-        <tr>
-          <td>Ryan</td>
-          <td>OT10A/154</td>
-          <td>145 Garry St, Wellington</td>
-        </tr>
-        <tr>
-          <td>Suzy</td>
-          <td>OT10A/155</td>
-          <td>15 Aix St, Auckland</td>
-        </tr>
-      </tbody>
-    </table>
-  );
-};
+export const PanelContents = () => (
+  <table>
+    <thead>
+      <tr>
+        <th>Owner</th>
+        <th>Title</th>
+        <th>Address</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Roy</td>
+        <td>OT10A/1011</td>
+        <td>5 Grange St, Auckland</td>
+      </tr>
+      <tr>
+        <td>Ryan</td>
+        <td>OT10A/154</td>
+        <td>145 Garry St, Wellington</td>
+      </tr>
+      <tr>
+        <td>Suzy</td>
+        <td>OT10A/155</td>
+        <td>15 Aix St, Auckland</td>
+      </tr>
+    </tbody>
+  </table>
+);
+
 /* exclude */
 
 // #Example: Panel Invocation

package/src/stories/panel/ShowPanelDocking/ShowPanel.mdx

@@ -0,0 +1,20 @@
+import {getBlocks, blockToString} from "../../support.js";
+import {Meta, Source, Story} from "@storybook/blocks";
+import * as ShowPanelStories from "./ShowPanel.stories.tsx"
+
+import myModule from './ShowPanel.tsx?raw';
+
+<Meta name="Docking Panel" of={ShowPanelStories}/>
+# Panel Docking
+## Example
+Click to show the panel:
+<Story of={ShowPanelStories.ShowPanelDocking}/>
+
+## Code
+<br/>
+{getBlocks(myModule).map(block => (
+<>
+    <h3>{block.split("\n")[0]}</h3>
+    <Source code={blockToString(block)} language='typescript'/>
+</>
+))}

package/src/stories/panel/ShowPanelDocking/ShowPanel.stories.tsx

@@ -0,0 +1,27 @@
+import { PanelsContextProvider } from "../../../panel/PanelsContextProvider";
+import { TestShowPanel } from "./ShowPanel";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof TestShowPanel> = {
+  title: "Components/Panel",
+  component: TestShowPanel,
+  argTypes: {
+    backgroundColor: { control: "color" },
+  },
+  decorators: [
+    (Story: any) => (
+      <div>
+        <PanelsContextProvider baseZIndex={500}>
+          <Story />
+        </PanelsContextProvider>
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ShowPanelDocking: Story = {
+  args: {},
+};

package/src/stories/panel/ShowPanelDocking/ShowPanel.tsx

@@ -0,0 +1,63 @@
+import "./showPanel.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { OpenPanelButton } from "../../../panel/OpenPanelButton";
+import { Panel, PanelContent, PanelHeader } from "../../../panel/Panel";
+import { PanelDock } from "../../../panel/PanelDock";
+
+// #Example: Panel Component
+export interface ShowPanelComponentProps {
+  data: number;
+}
+
+export const ShowPanelComponent = ({ data }: ShowPanelComponentProps) => (
+  <Panel title={`Panel demo ${data}`} size={{ width: 640, height: 400 }}>
+    <PanelHeader dockTo={"leftSide"} />
+    <PanelContent>
+      <PanelContents />
+    </PanelContent>
+  </Panel>
+);
+
+/* exclude */
+export const PanelContents = () => {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Owner</th>
+          <th>Title</th>
+          <th>Address</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Roy</td>
+          <td>OT10A/1011</td>
+          <td>5 Grange St, Auckland</td>
+        </tr>
+        <tr>
+          <td>Ryan</td>
+          <td>OT10A/154</td>
+          <td>145 Garry St, Wellington</td>
+        </tr>
+        <tr>
+          <td>Suzy</td>
+          <td>OT10A/155</td>
+          <td>15 Aix St, Auckland</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+/* exclude */
+
+// #Example: Panel Invocation
+export const TestShowPanel = () => {
+  return (
+    <>
+      <OpenPanelButton buttonText={"TestPanel"} component={() => <ShowPanelComponent data={1} />} />
+      <PanelDock id={"leftSide"}>The Panel will dock in here</PanelDock>
+    </>
+  );
+};

package/src/stories/panel/ShowPanelDocking/showPanel.scss

@@ -0,0 +1,9 @@
+#story--components-panel--show-panel-docking-inner {
+  .panelDock {
+    margin-top: 16px;
+    border: 2px solid black;
+    .panelDock-empty {
+      padding: 16px;
+    }
+  }
+}

package/src/stories/panel/ShowPanelResizingAgGrid/ShowPanelResizingAgGrid.mdx

@@ -4,7 +4,7 @@ import * as PanelStories from "./ShowPanelResizingAgGrid.stories.tsx"
 
 import myModule from './ShowPanelResizingStepAgGrid.tsx?raw';
 
-<Meta name="Show Resizing step-ag-grid" of={PanelStories}/>
+<Meta name="Resizing Panel step-ag-grid" of={PanelStories}/>
 # Show Panel
 ## Example
 Click to show the panel: