diff --git a/es/Algorithm.d.ts b/es/Algorithm.d.ts
index d2d3bd23..e8860783 100644
--- a/es/Algorithm.d.ts
+++ b/es/Algorithm.d.ts
@@ -16,7 +16,7 @@ export declare enum Filter {
     AnyTabPanel = 123,
     All = 127
 }
-export declare function find(layout: LayoutData, id: string, filter?: Filter): PanelData | TabData | BoxData;
+export declare function find(layout: LayoutData, id: string, filter?: Filter): PanelData | TabData | BoxData | undefined;
 export declare function addNextToTab(layout: LayoutData, source: TabData | PanelData, target: TabData, direction: DropDirection): LayoutData;
 export declare function addTabToPanel(layout: LayoutData, source: TabData | PanelData, panel: PanelData, idx?: number): LayoutData;
 export declare function converToPanel(source: TabData | PanelData): PanelData;
diff --git a/es/Algorithm.js b/es/Algorithm.js
index cd86155d..c93e88fa 100644
--- a/es/Algorithm.js
+++ b/es/Algorithm.js
@@ -71,13 +71,16 @@ function findInPanel(panel, id, filter) {
             }
         }
     }
-    return null;
+    return undefined;
 }
 function findInBox(box, id, filter) {
     let result;
-    if ((filter | Filter.Box) && box.id === id) {
+    if ((filter | Filter.Box) && (box === null || box === void 0 ? void 0 : box.id) === id) {
         return box;
     }
+    if (!(box === null || box === void 0 ? void 0 : box.children)) {
+        return undefined;
+    }
     for (let child of box.children) {
         if ('children' in child) {
             if (result = findInBox(child, id, filter)) {
diff --git a/es/DockData.d.ts b/es/DockData.d.ts
index 58963f1a..89b1506d 100644
--- a/es/DockData.d.ts
+++ b/es/DockData.d.ts
@@ -243,6 +243,15 @@ export interface LayoutData extends LayoutBase {
     loadedFrom?: LayoutBase;
 }
 export declare type DropDirection = 'left' | 'right' | 'bottom' | 'top' | 'middle' | 'remove' | 'before-tab' | 'after-tab' | 'float' | 'front' | 'maximize' | 'new-window' | 'move' | 'active' | 'update';
+export interface FloatSize {
+    width: number;
+    height: number;
+}
+export interface FloatPosition extends FloatSize {
+    left: number;
+    top: number;
+}
+export declare type LayoutSize = FloatSize;
 export interface DockContext {
     /** @ignore */
     getDockId(): any;
@@ -254,10 +263,7 @@ export interface DockContext {
         clientY: number;
     }, panelSize?: [number, number]): void;
     /** @ignore */
-    getLayoutSize(): {
-        width: number;
-        height: number;
-    };
+    getLayoutSize(): LayoutSize;
     /** @ignore
      * When a state change happen to the layout that's handled locally, like inside DockPanel or DockBox.
      * It still need to tell the context there is a change so DockLayout can call onLayoutChange callback.
@@ -276,12 +282,7 @@ export interface DockContext {
      *  - when direction is 'float', target doesn't matter. If this is called directly from code without any user interaction, source must be PanelData with x,y,w,h properties
      * @param floatPosition position of float panel, used only when direction="float"
      */
-    dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, floatPosition?: {
-        left: number;
-        top: number;
-        width: number;
-        height: number;
-    }): void;
+    dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, floatPosition?: FloatPosition): void;
     /**
      * Get the TabGroup defined in defaultLayout
      */
@@ -289,7 +290,7 @@ export interface DockContext {
     /**
      * Find PanelData or TabData by id
      */
-    find(id: string, filter?: Filter): PanelData | TabData | BoxData;
+    find(id: string, filter?: Filter): PanelData | TabData | BoxData | undefined;
     /**
      * Update a tab with new TabData
      * @param id tab id to update
diff --git a/es/DockLayout.d.ts b/es/DockLayout.d.ts
index c1e49ac7..d951ae73 100644
--- a/es/DockLayout.d.ts
+++ b/es/DockLayout.d.ts
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { BoxData, DockContext, DropDirection, LayoutBase, LayoutData, PanelBase, PanelData, TabBase, TabData, TabGroup, TabPaneCache } from "./DockData";
+import { BoxData, DockContext, DropDirection, FloatPosition, LayoutBase, LayoutData, LayoutSize, PanelBase, PanelData, TabBase, TabData, TabGroup, TabPaneCache } from "./DockData";
 import * as Algorithm from "./Algorithm";
 export interface LayoutProps {
     /**
@@ -109,19 +109,11 @@ export declare class DockLayout extends DockPortalManager implements DockContext
      * @param direction @inheritDoc
      * @param floatPosition @inheritDoc
      */
-    dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, floatPosition?: {
-        left: number;
-        top: number;
-        width: number;
-        height: number;
-    }): void;
+    dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, floatPosition?: FloatPosition): void;
     /** @inheritDoc */
-    find(id: string, filter?: Algorithm.Filter): PanelData | TabData | BoxData;
+    find(id: string, filter?: Algorithm.Filter): PanelData | TabData | BoxData | undefined;
     /** @ignore */
-    getLayoutSize(): {
-        width: number;
-        height: number;
-    };
+    getLayoutSize(): LayoutSize;
     /** @inheritDoc */
     updateTab(id: string, newTab: TabData | null, makeActive?: boolean): boolean;
     /** @inheritDoc */
diff --git a/es/DockLayout.js b/es/DockLayout.js
index ea36f4b8..d6f11ed4 100644
--- a/es/DockLayout.js
+++ b/es/DockLayout.js
@@ -197,7 +197,7 @@ export class DockLayout extends DockPortalManager {
         }
         else if (target) {
             if ('tabs' in target) {
-                // pandel target
+                // panel target
                 if (direction === 'middle') {
                     layout = Algorithm.addTabToPanel(layout, source, target);
                 }
diff --git a/lib/Algorithm.d.ts b/lib/Algorithm.d.ts
index d2d3bd23..e8860783 100644
--- a/lib/Algorithm.d.ts
+++ b/lib/Algorithm.d.ts
@@ -16,7 +16,7 @@ export declare enum Filter {
     AnyTabPanel = 123,
     All = 127
 }
-export declare function find(layout: LayoutData, id: string, filter?: Filter): PanelData | TabData | BoxData;
+export declare function find(layout: LayoutData, id: string, filter?: Filter): PanelData | TabData | BoxData | undefined;
 export declare function addNextToTab(layout: LayoutData, source: TabData | PanelData, target: TabData, direction: DropDirection): LayoutData;
 export declare function addTabToPanel(layout: LayoutData, source: TabData | PanelData, panel: PanelData, idx?: number): LayoutData;
 export declare function converToPanel(source: TabData | PanelData): PanelData;
diff --git a/lib/Algorithm.js b/lib/Algorithm.js
index 833d7d17..5f22efa9 100644
--- a/lib/Algorithm.js
+++ b/lib/Algorithm.js
@@ -77,13 +77,16 @@ function findInPanel(panel, id, filter) {
             }
         }
     }
-    return null;
+    return undefined;
 }
 function findInBox(box, id, filter) {
     let result;
-    if ((filter | Filter.Box) && box.id === id) {
+    if ((filter | Filter.Box) && (box === null || box === void 0 ? void 0 : box.id) === id) {
         return box;
     }
+    if (!(box === null || box === void 0 ? void 0 : box.children)) {
+        return undefined;
+    }
     for (let child of box.children) {
         if ('children' in child) {
             if (result = findInBox(child, id, filter)) {
diff --git a/lib/DockData.d.ts b/lib/DockData.d.ts
index 58963f1a..89b1506d 100644
--- a/lib/DockData.d.ts
+++ b/lib/DockData.d.ts
@@ -243,6 +243,15 @@ export interface LayoutData extends LayoutBase {
     loadedFrom?: LayoutBase;
 }
 export declare type DropDirection = 'left' | 'right' | 'bottom' | 'top' | 'middle' | 'remove' | 'before-tab' | 'after-tab' | 'float' | 'front' | 'maximize' | 'new-window' | 'move' | 'active' | 'update';
+export interface FloatSize {
+    width: number;
+    height: number;
+}
+export interface FloatPosition extends FloatSize {
+    left: number;
+    top: number;
+}
+export declare type LayoutSize = FloatSize;
 export interface DockContext {
     /** @ignore */
     getDockId(): any;
@@ -254,10 +263,7 @@ export interface DockContext {
         clientY: number;
     }, panelSize?: [number, number]): void;
     /** @ignore */
-    getLayoutSize(): {
-        width: number;
-        height: number;
-    };
+    getLayoutSize(): LayoutSize;
     /** @ignore
      * When a state change happen to the layout that's handled locally, like inside DockPanel or DockBox.
      * It still need to tell the context there is a change so DockLayout can call onLayoutChange callback.
@@ -276,12 +282,7 @@ export interface DockContext {
      *  - when direction is 'float', target doesn't matter. If this is called directly from code without any user interaction, source must be PanelData with x,y,w,h properties
      * @param floatPosition position of float panel, used only when direction="float"
      */
-    dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, floatPosition?: {
-        left: number;
-        top: number;
-        width: number;
-        height: number;
-    }): void;
+    dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, floatPosition?: FloatPosition): void;
     /**
      * Get the TabGroup defined in defaultLayout
      */
@@ -289,7 +290,7 @@ export interface DockContext {
     /**
      * Find PanelData or TabData by id
      */
-    find(id: string, filter?: Filter): PanelData | TabData | BoxData;
+    find(id: string, filter?: Filter): PanelData | TabData | BoxData | undefined;
     /**
      * Update a tab with new TabData
      * @param id tab id to update
diff --git a/lib/DockLayout.d.ts b/lib/DockLayout.d.ts
index c1e49ac7..d951ae73 100644
--- a/lib/DockLayout.d.ts
+++ b/lib/DockLayout.d.ts
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { BoxData, DockContext, DropDirection, LayoutBase, LayoutData, PanelBase, PanelData, TabBase, TabData, TabGroup, TabPaneCache } from "./DockData";
+import { BoxData, DockContext, DropDirection, FloatPosition, LayoutBase, LayoutData, LayoutSize, PanelBase, PanelData, TabBase, TabData, TabGroup, TabPaneCache } from "./DockData";
 import * as Algorithm from "./Algorithm";
 export interface LayoutProps {
     /**
@@ -109,19 +109,11 @@ export declare class DockLayout extends DockPortalManager implements DockContext
      * @param direction @inheritDoc
      * @param floatPosition @inheritDoc
      */
-    dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, floatPosition?: {
-        left: number;
-        top: number;
-        width: number;
-        height: number;
-    }): void;
+    dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData | null, direction: DropDirection, floatPosition?: FloatPosition): void;
     /** @inheritDoc */
-    find(id: string, filter?: Algorithm.Filter): PanelData | TabData | BoxData;
+    find(id: string, filter?: Algorithm.Filter): PanelData | TabData | BoxData | undefined;
     /** @ignore */
-    getLayoutSize(): {
-        width: number;
-        height: number;
-    };
+    getLayoutSize(): LayoutSize;
     /** @inheritDoc */
     updateTab(id: string, newTab: TabData | null, makeActive?: boolean): boolean;
     /** @inheritDoc */
diff --git a/lib/DockLayout.js b/lib/DockLayout.js
index e5ef6fc3..f1108c24 100644
--- a/lib/DockLayout.js
+++ b/lib/DockLayout.js
@@ -222,7 +222,7 @@ class DockLayout extends DockPortalManager {
         }
         else if (target) {
             if ('tabs' in target) {
-                // pandel target
+                // panel target
                 if (direction === 'middle') {
                     layout = Algorithm.addTabToPanel(layout, source, target);
                 }
diff --git a/src/Algorithm.ts b/src/Algorithm.ts
index 0bf8012a..f0844eb2 100644
--- a/src/Algorithm.ts
+++ b/src/Algorithm.ts
@@ -80,7 +80,7 @@ export function nextZIndex(current?: number): number {
 }
 
 
-function findInPanel(panel: PanelData, id: string, filter: Filter): PanelData | TabData {
+function findInPanel(panel: PanelData, id: string, filter: Filter): PanelData | TabData | undefined {
   if (panel.id === id && (filter & Filter.Panel)) {
     return panel;
   }
@@ -91,14 +91,17 @@ function findInPanel(panel: PanelData, id: string, filter: Filter): PanelData |
       }
     }
   }
-  return null;
+  return undefined;
 }
 
-function findInBox(box: BoxData, id: string, filter: Filter): PanelData | TabData | BoxData {
-  let result: PanelData | TabData | BoxData;
-  if ((filter | Filter.Box) && box.id === id) {
+function findInBox(box: BoxData | undefined, id: string, filter: Filter): PanelData | TabData | BoxData | undefined {
+  let result: PanelData | TabData | BoxData | undefined;
+  if ((filter | Filter.Box) && box?.id === id) {
     return box;
   }
+  if (!box?.children) {
+    return undefined;
+  }
   for (let child of box.children) {
     if ('children' in child) {
       if (result = findInBox(child, id, filter)) {
@@ -130,8 +133,8 @@ export enum Filter {
 }
 
 
-export function find(layout: LayoutData, id: string, filter: Filter = Filter.AnyTabPanel): PanelData | TabData | BoxData {
-  let result: PanelData | TabData | BoxData;
+export function find(layout: LayoutData, id: string, filter: Filter = Filter.AnyTabPanel): PanelData | TabData | BoxData | undefined {
+  let result: PanelData | TabData | BoxData | undefined;
 
   if (filter & Filter.Docked) {
     result = findInBox(layout.dockbox, id, filter);
diff --git a/src/DockData.ts b/src/DockData.ts
index 15ed9048..b71c2015 100644
--- a/src/DockData.ts
+++ b/src/DockData.ts
@@ -310,6 +310,18 @@ export type DropDirection =
   | 'update' // tab updated with updateTab
   ;
 
+export interface FloatSize {
+  width: number;
+  height: number;
+}
+
+export interface FloatPosition extends FloatSize {
+  left: number;
+  top: number;
+}
+
+export type LayoutSize = FloatSize;
+
 export interface DockContext {
   /** @ignore */
   getDockId(): any;
@@ -321,7 +333,7 @@ export interface DockContext {
   setDropRect(element: HTMLElement, direction?: DropDirection, source?: any, event?: {clientX: number, clientY: number}, panelSize?: [number, number]): void;
 
   /** @ignore */
-  getLayoutSize(): {width: number, height: number};
+  getLayoutSize(): LayoutSize;
 
   /** @ignore
    * When a state change happen to the layout that's handled locally, like inside DockPanel or DockBox.
@@ -346,7 +358,7 @@ export interface DockContext {
     source: TabData | PanelData,
     target: string | TabData | PanelData | BoxData | null,
     direction: DropDirection,
-    floatPosition?: { left: number, top: number, width: number, height: number }
+    floatPosition?: FloatPosition
   ): void;
 
   /**
@@ -357,7 +369,7 @@ export interface DockContext {
   /**
    * Find PanelData or TabData by id
    */
-  find(id: string, filter?: Filter): PanelData | TabData | BoxData;
+  find(id: string, filter?: Filter): PanelData | TabData | BoxData | undefined;
 
   /**
    * Update a tab with new TabData
@@ -389,7 +401,7 @@ export interface DockContext {
 }
 
 /** @ignore */
-export const DockContextType = React.createContext<DockContext>(null);
+export const DockContextType = React.createContext<DockContext>(null!);
 /** @ignore */
 export const DockContextProvider = DockContextType.Provider;
 /** @ignore */
diff --git a/src/DockLayout.tsx b/src/DockLayout.tsx
index 840cf008..fcaea363 100644
--- a/src/DockLayout.tsx
+++ b/src/DockLayout.tsx
@@ -7,8 +7,10 @@ import {
   DockContext,
   DockContextProvider,
   DropDirection,
+  FloatPosition,
   LayoutBase,
   LayoutData,
+  LayoutSize,
   PanelBase,
   PanelData,
   placeHolderGroup,
@@ -215,7 +217,7 @@ export class DockLayout extends DockPortalManager implements DockContext {
     source: TabData | PanelData,
     target: string | TabData | PanelData | BoxData | null,
     direction: DropDirection,
-    floatPosition?: {left: number, top: number, width: number, height: number}
+    floatPosition?: FloatPosition
   ) {
     let layout = this.getLayout();
     if (direction === 'maximize') {
@@ -249,7 +251,7 @@ export class DockLayout extends DockPortalManager implements DockContext {
       layout = Algorithm.panelToWindow(layout, newPanel);
     } else if (target) {
       if ('tabs' in (target as PanelData)) {
-        // pandel target
+        // panel target
         if (direction === 'middle') {
           layout = Algorithm.addTabToPanel(layout, source, target as PanelData);
         } else {
@@ -275,12 +277,12 @@ export class DockLayout extends DockPortalManager implements DockContext {
   }
 
   /** @inheritDoc */
-  find(id: string, filter?: Algorithm.Filter): PanelData | TabData | BoxData {
+  find(id: string, filter?: Algorithm.Filter): PanelData | TabData | BoxData | undefined {
     return Algorithm.find(this.getLayout(), id, filter);
   }
 
   /** @ignore */
-  getLayoutSize() {
+  getLayoutSize(): LayoutSize {
     if (this._ref) {
       return {width: this._ref.offsetWidth, height: this._ref.offsetHeight};
     }