diff --git a/.gitattributes b/.gitattributes
index 9f60d4df1..fb7ceecb6 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1 +1 @@
-*.snap filter=lfs diff=lfs merge=lfs -text
+*.snap filter=lfs diff=lfs merge=lfs -text
\ No newline at end of file
diff --git a/.husky/post-checkout b/.husky/post-checkout
new file mode 100755
index 000000000..c37815e2b
--- /dev/null
+++ b/.husky/post-checkout
@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting '.git/hooks/post-checkout'.\n"; exit 2; }
+git lfs post-checkout "$@"
diff --git a/.husky/post-commit b/.husky/post-commit
new file mode 100755
index 000000000..e5230c305
--- /dev/null
+++ b/.husky/post-commit
@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting '.git/hooks/post-commit'.\n"; exit 2; }
+git lfs post-commit "$@"
diff --git a/.husky/post-merge b/.husky/post-merge
new file mode 100755
index 000000000..c99b752a5
--- /dev/null
+++ b/.husky/post-merge
@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting '.git/hooks/post-merge'.\n"; exit 2; }
+git lfs post-merge "$@"
diff --git a/.husky/pre-push b/.husky/pre-push
new file mode 100755
index 000000000..216e91527
--- /dev/null
+++ b/.husky/pre-push
@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting '.git/hooks/pre-push'.\n"; exit 2; }
+git lfs pre-push "$@"
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 429f9c4a9..95a970841 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,7 +1,26 @@
-<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
+<link
+    href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap"
+    rel="stylesheet"
+/>
 
 <style>
-    html, body {
+    html,
+    body {
         font-family: 'Source Sans Pro', sans-serif;
     }
+
+    .virtual-table .table-container:before,
+    .virtual-table .table-container:after {
+        display: none;
+    }
+    .virtual-table-cell {
+        background: white;
+        border-bottom: 1px solid #d9dce1;
+        box-sizing: border-box;
+        overflow: hidden;
+        padding: 16px;
+    }
+    .grouped-th {
+        border-bottom: none !important;
+    }
 </style>
diff --git a/global.d.ts b/global.d.ts
index 0641b5506..aa0afd4d2 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -3,6 +3,8 @@ declare module '*.scss' {
     export default styles;
 }
 
+declare module '@ngard/tiny-isequal';
+
 /**
  * userLanguage type for IE i18n
  */
diff --git a/package.json b/package.json
index a00986252..832a604c3 100644
--- a/package.json
+++ b/package.json
@@ -49,9 +49,16 @@
         "@floating-ui/react-dom": "0.6.0",
         "@floating-ui/react-dom-interactions": "0.6.3",
         "@mdi/react": "1.5.0",
+        "@ngard/tiny-isequal": "1.1.0",
+        "@types/lodash": "4.14.182",
+        "@types/react-is": "17.0.3",
+        "@types/shallowequal": "1.1.1",
         "bodymovin": "4.13.0",
         "lottie-web": "5.8.1",
-        "react-flip-toolkit": "7.0.13"
+        "react-flip-toolkit": "7.0.13",
+        "react-is": "18.1.0",
+        "resize-observer-polyfill": "1.5.1",
+        "shallowequal": "1.1.0"
     },
     "peerDependencies": {
         "@types/react": "17.0.39",
@@ -95,6 +102,7 @@
         "@types/jest": "24.0.23",
         "@types/node": "16.11.26",
         "@types/react-color": "3.0.6",
+        "@types/react-window": "1.8.2",
         "@types/webpack": "5.28.0",
         "@typescript-eslint/eslint-plugin": "5.14.0",
         "@typescript-eslint/parser": "5.14.0",
@@ -138,6 +146,7 @@
         "jest-watch-typeahead": "1.0.0",
         "lint-staged": "12.3.6",
         "mini-css-extract-plugin": "2.6.0",
+        "mockdate": "3.0.0",
         "postcss": "8.4.4",
         "postcss-flexbugs-fixes": "5.0.2",
         "postcss-loader": "6.2.1",
@@ -149,7 +158,10 @@
         "react-dev-utils": "12.0.0",
         "react-docgen-typescript": "2.2.2",
         "react-refresh": "0.11.0",
+        "react-sortable-hoc": "2.0.0",
         "react-test-renderer": "17.0.2",
+        "react-window": "1.8.5",
+        "regenerator-runtime": "0.13.7",
         "resolve": "1.20.0",
         "resolve-url-loader": "4.0.0",
         "sass": "1.47.0",
diff --git a/src/__snapshots__/storybook.test.js.snap b/src/__snapshots__/storybook.test.js.snap
index 51918595c..a54577b15 100644
--- a/src/__snapshots__/storybook.test.js.snap
+++ b/src/__snapshots__/storybook.test.js.snap
@@ -1,11882 +1,3 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Accordion List Horizontal 1`] = `
-<div
-  className="my-list-class"
-  style={Object {}}
->
-  <div
-    style={
-      Object {
-        "paddingLeft": "16px",
-      }
-    }
-  >
-    <h2>
-      Header
-    </h2>
-  </div>
-  <ul
-    className="list-container"
-  >
-    <li
-      className="list-item my-list-item-class"
-      style={
-        Object {
-          "padding": "8px",
-        }
-      }
-    >
-      <div
-        className="accordion-container"
-      >
-        <div
-          aria-controls="1-content"
-          aria-expanded={false}
-          className="accordion-summary"
-          id="1-header"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          role="button"
-          tabIndex={0}
-        >
-          <div
-            style={
-              Object {
-                "alignItems": "center",
-                "display": "flex",
-              }
-            }
-          >
-            <span
-              aria-hidden={false}
-              className="icon-wrapper"
-              role="presentation"
-            >
-              <svg
-                role="presentation"
-                style={
-                  Object {
-                    "height": "20px",
-                    "width": "20px",
-                  }
-                }
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
-                  style={
-                    Object {
-                      "fill": "green",
-                    }
-                  }
-                />
-              </svg>
-            </span>
-            <div
-              style={
-                Object {
-                  "margin": "0 12px 0 5px",
-                }
-              }
-            >
-              Notification testing
-            </div>
-            <span
-              className="badge header6 active"
-            >
-              2
-            </span>
-          </div>
-          <span
-            aria-hidden={false}
-            className="accordion-icon icon-wrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          aria-labelledby="1-header"
-          className="accordion-body-container"
-          id="1-content"
-          role="region"
-        >
-          <div
-            className="accordion-body show-border-top"
-          >
-            Body 2 text used here. Bottom bars are sticky sections that
-        can be used to highlight a few actions that are out of the
-        view to be displayed inside the view. For example, if
-        there's a very long form with Save and Cancel buttons at the
-        bottom, we can use the bottom bar to show those two buttons
-        in the view. We are making these bars to be flexible in
-        height and also allowing any component to be
-          </div>
-        </div>
-      </div>
-    </li>
-    <li
-      className="list-item my-list-item-class"
-      style={
-        Object {
-          "padding": "8px",
-        }
-      }
-    >
-      <div
-        className="accordion-container"
-      >
-        <div
-          aria-controls="2-content"
-          aria-expanded={false}
-          className="accordion-summary"
-          id="2-header"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          role="button"
-          tabIndex={0}
-        >
-          <div
-            style={
-              Object {
-                "alignItems": "center",
-                "display": "flex",
-              }
-            }
-          >
-            <span
-              aria-hidden={false}
-              className="icon-wrapper"
-              role="presentation"
-            >
-              <svg
-                role="presentation"
-                style={
-                  Object {
-                    "height": "20px",
-                    "width": "20px",
-                  }
-                }
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
-                  style={
-                    Object {
-                      "fill": "green",
-                    }
-                  }
-                />
-              </svg>
-            </span>
-            <div
-              style={
-                Object {
-                  "margin": "0 12px 0 5px",
-                }
-              }
-            >
-              Notification testing
-            </div>
-            <span
-              className="badge header6 active"
-            >
-              12
-            </span>
-          </div>
-          <span
-            aria-hidden={false}
-            className="accordion-icon icon-wrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          aria-labelledby="2-header"
-          className="accordion-body-container"
-          id="2-content"
-          role="region"
-        >
-          <div
-            className="accordion-body show-border-top"
-          >
-            Body 2 text used here. Bottom bars are sticky sections that
-        can be used to highlight a few actions that are out of the
-        view to be displayed inside the view. For example, if
-        there's a very long form with Save and Cancel buttons at the
-        bottom, we can use the bottom bar to show those two buttons
-        in the view. We are making these bars to be flexible in
-        height and also allowing any component to be
-          </div>
-        </div>
-      </div>
-    </li>
-  </ul>
-  <div
-    style={
-      Object {
-        "paddingLeft": "16px",
-      }
-    }
-  >
-    <h3>
-      Footer
-    </h3>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Accordion List Vertical 1`] = `
-<div
-  className="my-list-class"
-  style={Object {}}
->
-  <div
-    style={
-      Object {
-        "paddingLeft": "16px",
-      }
-    }
-  >
-    <h2>
-      Header
-    </h2>
-  </div>
-  <ul
-    className="list-container vertical"
-  >
-    <li
-      className="list-item my-list-item-class"
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div
-        className="accordion-container"
-      >
-        <div
-          aria-controls="1-content"
-          aria-expanded={false}
-          className="accordion-summary"
-          id="1-header"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          role="button"
-          tabIndex={0}
-        >
-          <div
-            style={
-              Object {
-                "alignItems": "center",
-                "display": "flex",
-              }
-            }
-          >
-            <span
-              aria-hidden={false}
-              className="icon-wrapper"
-              role="presentation"
-            >
-              <svg
-                role="presentation"
-                style={
-                  Object {
-                    "height": "20px",
-                    "width": "20px",
-                  }
-                }
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
-                  style={
-                    Object {
-                      "fill": "green",
-                    }
-                  }
-                />
-              </svg>
-            </span>
-            <div
-              style={
-                Object {
-                  "margin": "0 12px 0 5px",
-                }
-              }
-            >
-              Notification testing
-            </div>
-            <span
-              className="badge header6 active"
-            >
-              2
-            </span>
-          </div>
-          <span
-            aria-hidden={false}
-            className="accordion-icon icon-wrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          aria-labelledby="1-header"
-          className="accordion-body-container"
-          id="1-content"
-          role="region"
-        >
-          <div
-            className="accordion-body show-border-top"
-          >
-            Body 2 text used here. Bottom bars are sticky sections that
-        can be used to highlight a few actions that are out of the
-        view to be displayed inside the view. For example, if
-        there's a very long form with Save and Cancel buttons at the
-        bottom, we can use the bottom bar to show those two buttons
-        in the view. We are making these bars to be flexible in
-        height and also allowing any component to be
-          </div>
-        </div>
-      </div>
-    </li>
-    <li
-      className="list-item my-list-item-class"
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div
-        className="accordion-container"
-      >
-        <div
-          aria-controls="2-content"
-          aria-expanded={false}
-          className="accordion-summary"
-          id="2-header"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          role="button"
-          tabIndex={0}
-        >
-          <div
-            style={
-              Object {
-                "alignItems": "center",
-                "display": "flex",
-              }
-            }
-          >
-            <span
-              aria-hidden={false}
-              className="icon-wrapper"
-              role="presentation"
-            >
-              <svg
-                role="presentation"
-                style={
-                  Object {
-                    "height": "20px",
-                    "width": "20px",
-                  }
-                }
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
-                  style={
-                    Object {
-                      "fill": "green",
-                    }
-                  }
-                />
-              </svg>
-            </span>
-            <div
-              style={
-                Object {
-                  "margin": "0 12px 0 5px",
-                }
-              }
-            >
-              Notification testing
-            </div>
-            <span
-              className="badge header6 active"
-            >
-              12
-            </span>
-          </div>
-          <span
-            aria-hidden={false}
-            className="accordion-icon icon-wrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          aria-labelledby="2-header"
-          className="accordion-body-container"
-          id="2-content"
-          role="region"
-        >
-          <div
-            className="accordion-body show-border-top"
-          >
-            Body 2 text used here. Bottom bars are sticky sections that
-        can be used to highlight a few actions that are out of the
-        view to be displayed inside the view. For example, if
-        there's a very long form with Save and Cancel buttons at the
-        bottom, we can use the bottom bar to show those two buttons
-        in the view. We are making these bars to be flexible in
-        height and also allowing any component to be
-          </div>
-        </div>
-      </div>
-    </li>
-  </ul>
-  <div
-    style={
-      Object {
-        "paddingLeft": "16px",
-      }
-    }
-  >
-    <h3>
-      Footer
-    </h3>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Accordion Single 1`] = `
-<div
-  className="accordion-container"
->
-  <div
-    aria-controls="myAccordionId-content"
-    aria-expanded={false}
-    className="accordion-summary"
-    id="myAccordionId-header"
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    role="button"
-    tabIndex={0}
-  >
-    Accordion Header
-    <span
-      aria-hidden={false}
-      className="accordion-icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </div>
-  <div
-    aria-labelledby="myAccordionId-header"
-    className="accordion-body-container"
-    id="myAccordionId-content"
-    role="region"
-  >
-    <div
-      className="accordion-body show-border-top"
-    >
-      <div
-        style={
-          Object {
-            "height": "80px",
-          }
-        }
-      >
-        Body 2 text used here. Bottom bars are sticky sections that can be used to highlight a few actions that are out of the view to be displayed inside the view. For example, if there's a very long form with Save and Cancel buttons at the bottom, we can use the bottom bar to show those two buttons in the view. We are making these bars to be flexible in height and also allowing any component to be added inside for now, to understand use cases from the team.
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Avatar Avatar Default 1`] = `
-<div
-  className="my-avatar-class"
-  style={
-    Object {
-      "fontSize": "18px",
-      "height": "40px",
-      "minHeight": "40px",
-      "minWidth": "40px",
-      "width": "40px",
-    }
-  }
->
-  <img
-    alt="random profile image"
-    className="image-style"
-    height="40px"
-    src="https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg"
-    width="40px"
-  />
-</div>
-`;
-
-exports[`Storyshots Avatar Avatar Fallback Hashing 1`] = `
-<div
-  className="wrapper-style my-avatar-class image-style round-image orange"
-  style={
-    Object {
-      "fontSize": "18px",
-      "height": "40px",
-      "minHeight": "40px",
-      "minWidth": "40px",
-      "width": "40px",
-    }
-  }
->
-  HF
-</div>
-`;
-
-exports[`Storyshots Avatar Avatar Fallback Theme 1`] = `
-<div
-  className="wrapper-style my-avatar-class image-style round-image green"
-  style={
-    Object {
-      "fontSize": "18px",
-      "height": "40px",
-      "minHeight": "40px",
-      "minWidth": "40px",
-      "width": "40px",
-    }
-  }
->
-  AB
-</div>
-`;
-
-exports[`Storyshots Avatar Avatar Icon 1`] = `
-<div
-  className="wrapper-style my-avatar-class image-style"
-  style={
-    Object {
-      "backgroundColor": "grey",
-      "fontSize": "18px",
-      "height": "40px",
-      "minHeight": "40px",
-      "minWidth": "40px",
-      "width": "40px",
-    }
-  }
->
-  <span
-    aria-hidden={false}
-    className="icon-wrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "18px",
-          "width": "18px",
-        }
-      }
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-</div>
-`;
-
-exports[`Storyshots Avatar Avatar Round 1`] = `
-<div
-  className="my-avatar-class"
-  style={
-    Object {
-      "fontSize": "18px",
-      "height": "40px",
-      "minHeight": "40px",
-      "minWidth": "40px",
-      "width": "40px",
-    }
-  }
->
-  <img
-    alt="random profile image"
-    className="image-style round-image"
-    height="40px"
-    src="https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg"
-    width="40px"
-  />
-</div>
-`;
-
-exports[`Storyshots Avatar Avatar Round Icon 1`] = `
-<div
-  className="wrapper-style my-avatar-class image-style round-image"
-  style={
-    Object {
-      "backgroundColor": "grey",
-      "fontSize": "18px",
-      "height": "40px",
-      "minHeight": "40px",
-      "minWidth": "40px",
-      "width": "40px",
-    }
-  }
->
-  <span
-    aria-hidden={false}
-    className="icon-wrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "18px",
-          "width": "18px",
-        }
-      }
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-</div>
-`;
-
-exports[`Storyshots Badge Badge Active 1`] = `
-<span
-  className="badge header6 my-badge-class active"
-  style={Object {}}
->
-  8
-</span>
-`;
-
-exports[`Storyshots Badge Badge Default 1`] = `
-<span
-  className="badge header6 my-badge-class"
-  style={Object {}}
->
-  8
-</span>
-`;
-
-exports[`Storyshots Badge Badge Disruptive 1`] = `
-<span
-  className="badge header6 disruptive my-badge-class active"
-  style={Object {}}
->
-  8
-</span>
-`;
-
-exports[`Storyshots Button Counter 1`] = `
-<button
-  aria-disabled={false}
-  aria-label="Primary Button"
-  className="my-btn-class button button-primary icon-left"
-  data-test-id="my-btn-test-id"
-  defaultChecked={false}
-  disabled={false}
-  id="myButton"
-  style={Object {}}
-  type="button"
->
-  <span>
-    <span
-      aria-hidden={true}
-      className="icon my-btn-icon icon-wrapper"
-      data-test-id="myButtonIconTestId"
-      id="myButtonIcon"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      className=""
-    >
-      Primary Button
-      <span
-        className="badge header6 counter"
-      >
-        8
-      </span>
-    </span>
-  </span>
-</button>
-`;
-
-exports[`Storyshots Button Default 1`] = `
-<button
-  aria-disabled={false}
-  aria-label="Default Button"
-  className="my-btn-class button button-default icon-left"
-  data-test-id="my-btn-test-id"
-  defaultChecked={false}
-  disabled={false}
-  id="myButton"
-  style={Object {}}
-  type="button"
->
-  <span>
-    <span
-      aria-hidden={true}
-      className="icon my-btn-icon icon-wrapper"
-      data-test-id="myButtonIconTestId"
-      id="myButtonIcon"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      className=""
-    >
-      Default Button
-    </span>
-  </span>
-</button>
-`;
-
-exports[`Storyshots Button Neutral 1`] = `
-<button
-  aria-disabled={false}
-  aria-label="Neutral Button"
-  className="my-btn-class button button-neutral icon-left"
-  data-test-id="my-btn-test-id"
-  defaultChecked={false}
-  disabled={false}
-  id="myButton"
-  style={Object {}}
-  type="button"
->
-  <span>
-    <span
-      aria-hidden={true}
-      className="icon my-btn-icon icon-wrapper"
-      data-test-id="myButtonIconTestId"
-      id="myButtonIcon"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      className=""
-    >
-      Neutral Button
-    </span>
-  </span>
-</button>
-`;
-
-exports[`Storyshots Button Primary 1`] = `
-<button
-  aria-disabled={false}
-  aria-label="Primary Button"
-  className="my-btn-class button button-primary icon-left"
-  data-test-id="my-btn-test-id"
-  defaultChecked={false}
-  disabled={false}
-  id="myButton"
-  style={Object {}}
-  type="button"
->
-  <span>
-    <span
-      aria-hidden={true}
-      className="icon my-btn-icon icon-wrapper"
-      data-test-id="myButtonIconTestId"
-      id="myButtonIcon"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      className=""
-    >
-      Primary Button
-    </span>
-  </span>
-</button>
-`;
-
-exports[`Storyshots Button Secondary 1`] = `
-<button
-  aria-disabled={false}
-  aria-label="Secondary Button"
-  className="my-btn-class button button-secondary icon-left"
-  data-test-id="my-btn-test-id"
-  defaultChecked={false}
-  disabled={false}
-  id="myButton"
-  style={Object {}}
-  type="button"
->
-  <span>
-    <span
-      aria-hidden={true}
-      className="icon my-btn-icon icon-wrapper"
-      data-test-id="myButtonIconTestId"
-      id="myButtonIcon"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      className=""
-    >
-      Secondary Button
-    </span>
-  </span>
-</button>
-`;
-
-exports[`Storyshots Button Split 1`] = `
-Array [
-  <button
-    aria-disabled={false}
-    aria-label="Split Button"
-    className="my-btn-class button button-primary split-left"
-    data-test-id="my-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myButton"
-    style={Object {}}
-    type="button"
-  >
-    <span
-      className=""
-    >
-      Split Button
-    </span>
-  </button>,
-  <button
-    aria-checked={false}
-    aria-disabled={false}
-    aria-pressed={false}
-    className="my-btn-class button button-primary undefined split-button split-right"
-    defaultChecked={false}
-    disabled={false}
-    type="button"
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      aria-hidden="true"
-      className="split-divider split-divider-primary"
-    />
-  </button>,
-]
-`;
-
-exports[`Storyshots Button Split With Counter 1`] = `
-Array [
-  <button
-    aria-disabled={false}
-    aria-label="Split Button"
-    className="my-btn-class button button-primary split-left"
-    data-test-id="my-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myButton"
-    style={Object {}}
-    type="button"
-  >
-    <span
-      className=""
-    >
-      Split Button
-      <span
-        className="badge header6 counter"
-      >
-        8
-      </span>
-    </span>
-  </button>,
-  <button
-    aria-checked={false}
-    aria-disabled={false}
-    aria-pressed={false}
-    className="my-btn-class button button-primary undefined split-button split-right"
-    defaultChecked={false}
-    disabled={false}
-    type="button"
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      aria-hidden="true"
-      className="split-divider split-divider-primary"
-    />
-  </button>,
-]
-`;
-
-exports[`Storyshots Button Toggle 1`] = `
-<button
-  aria-checked={false}
-  aria-disabled={false}
-  aria-label="Toggle Button"
-  aria-pressed={false}
-  className="my-btn-class button button-primary icon-right"
-  data-test-id="my-btn-test-id"
-  defaultChecked={false}
-  disabled={false}
-  id="myButton"
-  style={Object {}}
-  type="button"
->
-  <span>
-    <span
-      aria-hidden={true}
-      className="icon my-btn-icon icon-wrapper"
-      data-test-id="myButtonIconTestId"
-      id="myButtonIcon"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      className=""
-    >
-      Toggle Button
-    </span>
-  </span>
-</button>
-`;
-
-exports[`Storyshots Button Toggle With Counter 1`] = `
-<button
-  aria-checked={false}
-  aria-disabled={false}
-  aria-label="Toggle Button"
-  aria-pressed={false}
-  className="my-btn-class button button-primary icon-right"
-  data-test-id="my-btn-test-id"
-  defaultChecked={false}
-  disabled={false}
-  id="myButton"
-  style={Object {}}
-  type="button"
->
-  <span>
-    <span
-      aria-hidden={true}
-      className="icon my-btn-icon icon-wrapper"
-      data-test-id="myButtonIconTestId"
-      id="myButtonIcon"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      className=""
-    >
-      Toggle Button
-      <span
-        className="badge header6 counter"
-      >
-        8
-      </span>
-    </span>
-  </span>
-</button>
-`;
-
-exports[`Storyshots Button Two State Button 1`] = `
-<button
-  aria-checked={false}
-  aria-disabled={false}
-  aria-label="Two State Button"
-  aria-pressed={false}
-  className="my-two-state-btn-class button two-state-button"
-  defaultChecked={false}
-  disabled={false}
-  id="myTwoStateButton"
-  style={Object {}}
-  type="button"
->
-  <span
-    className="two-state-button-content"
-  >
-    <span
-      className="column column-one"
-    >
-      <span
-        aria-hidden={true}
-        className="icon icon-wrapper"
-        data-test-id="myTwoStateButtonIconOneTestId"
-        id="myTwoStateButtonIconOne"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-      <span
-        className=""
-      >
-        Two State Button
-      </span>
-      <span
-        className="badge header6 counter"
-      >
-        8
-      </span>
-    </span>
-    <span
-      className="column"
-    >
-      <span
-        aria-hidden={true}
-        className="icon icon-wrapper"
-        data-test-id="myTwoStateButtonIconTwoTestId"
-        id="myTwoStateButtonIconTwo"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </span>
-  </span>
-</button>
-`;
-
-exports[`Storyshots Check Box Check Box 1`] = `
-<div
-  className="selector my-checkbox-class"
->
-  <input
-    aria-label="Label"
-    checked={true}
-    disabled={false}
-    id="myCheckBoxId"
-    name="myCheckBoxName"
-    onChange={[Function]}
-    readOnly={true}
-    type="checkbox"
-    value="label"
-  />
-  <label
-    className=""
-    htmlFor="myCheckBoxId"
-  >
-    <span
-      className="checkmark"
-    />
-    <span
-      className="selector-label"
-    >
-      Label
-    </span>
-  </label>
-</div>
-`;
-
-exports[`Storyshots Check Box Check Box Group 1`] = `
-<div
-  checked={true}
-  className="checkbox-group"
-  defaultChecked={
-    Array [
-      "First",
-    ]
-  }
-  role="group"
->
-  <div
-    className="selector"
-  >
-    <input
-      checked={false}
-      disabled={false}
-      id="test-1"
-      name="group"
-      onChange={[Function]}
-      readOnly={true}
-      type="checkbox"
-      value="First"
-    />
-    <label
-      className=""
-      htmlFor="test-1"
-    >
-      <span
-        className="checkmark"
-      />
-      <span
-        className="selector-label"
-      >
-        First
-      </span>
-    </label>
-  </div>
-  <div
-    className="selector"
-  >
-    <input
-      checked={false}
-      disabled={false}
-      id="test-2"
-      name="group"
-      onChange={[Function]}
-      readOnly={true}
-      type="checkbox"
-      value="Second"
-    />
-    <label
-      className=""
-      htmlFor="test-2"
-    >
-      <span
-        className="checkmark"
-      />
-      <span
-        className="selector-label"
-      >
-        Second
-      </span>
-    </label>
-  </div>
-  <div
-    className="selector"
-  >
-    <input
-      checked={false}
-      disabled={false}
-      id="test-3"
-      name="group"
-      onChange={[Function]}
-      readOnly={true}
-      type="checkbox"
-      value="Third"
-    />
-    <label
-      className=""
-      htmlFor="test-3"
-    >
-      <span
-        className="checkmark"
-      />
-      <span
-        className="selector-label"
-      >
-        Third
-      </span>
-    </label>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Config Provider Theming 1`] = `
-<div
-  className="stack vertical xxl"
-  style={
-    Object {
-      "alignItems": undefined,
-      "flexWrap": undefined,
-      "justifyContent": undefined,
-    }
-  }
->
-  <h1
-    style={
-      Object {
-        "marginBottom": 0,
-      }
-    }
-  >
-    Selected Theme:
-    <span
-      style={
-        Object {
-          "color": "var(--primary-color)",
-          "marginLeft": "4px",
-          "textTransform": "capitalize",
-        }
-      }
-    >
-      blue
-    </span>
-  </h1>
-  <div
-    className="stack horizontal m"
-    style={
-      Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-        "marginTop": 0,
-      }
-    }
-  >
-    <div>
-      <p>
-        Predefined
-      </p>
-      <select
-        onChange={[Function]}
-        style={
-          Object {
-            "fontSize": "1rem",
-          }
-        }
-        value="blue"
-      >
-        <option
-          value="red"
-        >
-          red
-        </option>
-        <option
-          value="orange"
-        >
-          orange
-        </option>
-        <option
-          value="yellow"
-        >
-          yellow
-        </option>
-        <option
-          value="green"
-        >
-          green
-        </option>
-        <option
-          value="bluegreen"
-        >
-          bluegreen
-        </option>
-        <option
-          value="blue"
-        >
-          blue
-        </option>
-        <option
-          value="violet"
-        >
-          violet
-        </option>
-        <option
-          value="grey"
-        >
-          grey
-        </option>
-      </select>
-    </div>
-    <div>
-      <p>
-        Custom
-      </p>
-      <div
-        style={
-          Object {
-            "display": "inline-block",
-            "position": "relative",
-          }
-        }
-      >
-        <div
-          style={
-            Object {
-              "MozBorderRadius": 2,
-              "MozBoxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
-              "OBorderRadius": 2,
-              "OBoxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
-              "WebkitBorderRadius": 2,
-              "WebkitBoxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
-              "background": "#fff",
-              "borderRadius": 2,
-              "bottom": "0px",
-              "boxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
-              "left": "0px",
-              "msBorderRadius": 2,
-              "msBoxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
-              "position": "absolute",
-              "right": "0px",
-              "top": "0px",
-            }
-          }
-        />
-        <div
-          style={
-            Object {
-              "position": "relative",
-            }
-          }
-        >
-          <div
-            className="compact-picker "
-            style={
-              Object {
-                "boxSizing": "initial",
-                "paddingLeft": "5px",
-                "paddingTop": "5px",
-                "width": "240px",
-              }
-            }
-          >
-            <div>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#4D4D4D",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#4D4D4D"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#999999",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#999999"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "MozBoxShadow": "inset 0 0 0 1px #ddd",
-                      "OBoxShadow": "inset 0 0 0 1px #ddd",
-                      "WebkitBoxShadow": "inset 0 0 0 1px #ddd",
-                      "background": "#FFFFFF",
-                      "boxShadow": "inset 0 0 0 1px #ddd",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "msBoxShadow": "inset 0 0 0 1px #ddd",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#FFFFFF"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#F44E3B",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#F44E3B"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#FE9200",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#FE9200"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#FCDC00",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#FCDC00"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#DBDF00",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#DBDF00"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#A4DD00",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#A4DD00"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#68CCCA",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#68CCCA"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#73D8FF",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#73D8FF"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#AEA1FF",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#AEA1FF"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#FDA1FF",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#FDA1FF"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#333333",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#333333"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#808080",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#808080"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#cccccc",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#cccccc"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#D33115",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#D33115"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#E27300",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#E27300"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#FCC400",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#FCC400"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#B0BC00",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#B0BC00"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#68BC00",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#68BC00"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#16A5A5",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#16A5A5"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#009CE0",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#009CE0"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#7B64FF",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#7B64FF"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#FA28FF",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#FA28FF"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#000000",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#000000"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "1",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#666666",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#666666"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#B3B3B3",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#B3B3B3"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#9F0500",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#9F0500"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#C45100",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#C45100"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#FB9E00",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#FB9E00"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#000",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#808900",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#808900"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#194D33",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#194D33"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#0C797D",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#0C797D"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#0062B1",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#0062B1"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#653294",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#653294"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <span
-                onBlur={[Function]}
-                onFocus={[Function]}
-              >
-                <div
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  style={
-                    Object {
-                      "background": "#AB149E",
-                      "cursor": "pointer",
-                      "float": "left",
-                      "height": "15px",
-                      "marginBottom": "5px",
-                      "marginRight": "5px",
-                      "outline": "none",
-                      "position": "relative",
-                      "width": "15px",
-                    }
-                  }
-                  tabIndex={0}
-                  title="#AB149E"
-                >
-                  <div
-                    style={
-                      Object {
-                        "MozBorderRadius": "50%",
-                        "OBorderRadius": "50%",
-                        "WebkitBorderRadius": "50%",
-                        "background": "#fff",
-                        "borderRadius": "50%",
-                        "bottom": "5px",
-                        "left": "5px",
-                        "msBorderRadius": "50%",
-                        "opacity": "0",
-                        "position": "absolute",
-                        "right": "5px",
-                        "top": "5px",
-                      }
-                    }
-                  />
-                </div>
-              </span>
-              <div
-                style={
-                  Object {
-                    "clear": "both",
-                  }
-                }
-              />
-            </div>
-            <div
-              className="flexbox-fix"
-              style={
-                Object {
-                  "display": "flex",
-                  "paddingBottom": "6px",
-                  "paddingRight": "5px",
-                  "position": "relative",
-                }
-              }
-            >
-              <div
-                style={
-                  Object {
-                    "background": "#000000",
-                    "height": "9px",
-                    "left": "5px",
-                    "position": "absolute",
-                    "top": "6px",
-                    "width": "9px",
-                  }
-                }
-              />
-              <div
-                style={
-                  Object {
-                    "MozBoxFlex": "6",
-                    "WebkitBoxFlex": "6",
-                    "WebkitFlex": "6",
-                    "flex": "6",
-                    "msFlex": "6",
-                    "position": "relative",
-                  }
-                }
-              >
-                <input
-                  id="rc-editable-input-1"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onKeyDown={[Function]}
-                  spellCheck="false"
-                  style={
-                    Object {
-                      "background": "none",
-                      "border": "none",
-                      "color": "#333",
-                      "fontSize": "12px",
-                      "height": "16px",
-                      "outline": "none",
-                      "padding": "0px",
-                      "paddingLeft": "20%",
-                      "width": "80%",
-                    }
-                  }
-                  value="#000000"
-                />
-                <label
-                  htmlFor="rc-editable-input-1"
-                  onMouseDown={[Function]}
-                  style={
-                    Object {
-                      "display": "none",
-                    }
-                  }
-                >
-                  hex
-                </label>
-              </div>
-              <div
-                style={
-                  Object {
-                    "MozBoxFlex": "3",
-                    "WebkitBoxFlex": "3",
-                    "WebkitFlex": "3",
-                    "flex": "3",
-                    "msFlex": "3",
-                    "position": "relative",
-                  }
-                }
-              >
-                <input
-                  id="rc-editable-input-2"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onKeyDown={[Function]}
-                  spellCheck="false"
-                  style={
-                    Object {
-                      "background": "none",
-                      "border": "none",
-                      "color": "#333",
-                      "fontSize": "12px",
-                      "height": "16px",
-                      "outline": "none",
-                      "padding": "0px",
-                      "paddingLeft": "30%",
-                      "width": "70%",
-                    }
-                  }
-                  value="0"
-                />
-                <label
-                  htmlFor="rc-editable-input-2"
-                  onMouseDown={[Function]}
-                  style={
-                    Object {
-                      "color": "#999",
-                      "fontSize": "12px",
-                      "left": "0px",
-                      "lineHeight": "16px",
-                      "position": "absolute",
-                      "textTransform": "uppercase",
-                      "top": "3px",
-                    }
-                  }
-                >
-                  r
-                </label>
-              </div>
-              <div
-                style={
-                  Object {
-                    "MozBoxFlex": "3",
-                    "WebkitBoxFlex": "3",
-                    "WebkitFlex": "3",
-                    "flex": "3",
-                    "msFlex": "3",
-                    "position": "relative",
-                  }
-                }
-              >
-                <input
-                  id="rc-editable-input-3"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onKeyDown={[Function]}
-                  spellCheck="false"
-                  style={
-                    Object {
-                      "background": "none",
-                      "border": "none",
-                      "color": "#333",
-                      "fontSize": "12px",
-                      "height": "16px",
-                      "outline": "none",
-                      "padding": "0px",
-                      "paddingLeft": "30%",
-                      "width": "70%",
-                    }
-                  }
-                  value="0"
-                />
-                <label
-                  htmlFor="rc-editable-input-3"
-                  onMouseDown={[Function]}
-                  style={
-                    Object {
-                      "color": "#999",
-                      "fontSize": "12px",
-                      "left": "0px",
-                      "lineHeight": "16px",
-                      "position": "absolute",
-                      "textTransform": "uppercase",
-                      "top": "3px",
-                    }
-                  }
-                >
-                  g
-                </label>
-              </div>
-              <div
-                style={
-                  Object {
-                    "MozBoxFlex": "3",
-                    "WebkitBoxFlex": "3",
-                    "WebkitFlex": "3",
-                    "flex": "3",
-                    "msFlex": "3",
-                    "position": "relative",
-                  }
-                }
-              >
-                <input
-                  id="rc-editable-input-4"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onKeyDown={[Function]}
-                  spellCheck="false"
-                  style={
-                    Object {
-                      "background": "none",
-                      "border": "none",
-                      "color": "#333",
-                      "fontSize": "12px",
-                      "height": "16px",
-                      "outline": "none",
-                      "padding": "0px",
-                      "paddingLeft": "30%",
-                      "width": "70%",
-                    }
-                  }
-                  value="0"
-                />
-                <label
-                  htmlFor="rc-editable-input-4"
-                  onMouseDown={[Function]}
-                  style={
-                    Object {
-                      "color": "#999",
-                      "fontSize": "12px",
-                      "left": "0px",
-                      "lineHeight": "16px",
-                      "position": "absolute",
-                      "textTransform": "uppercase",
-                      "top": "3px",
-                    }
-                  }
-                >
-                  b
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className="stack horizontal m"
-    style={
-      Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-      }
-    }
-  >
-    <button
-      aria-disabled={false}
-      aria-label="Primary Button"
-      className="button button-primary button-size3"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        className="button-text3"
-      >
-        Primary Button
-      </span>
-    </button>
-    <button
-      aria-disabled={false}
-      aria-label="Primary Button"
-      className="button button-primary button-size3 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "16px",
-              "width": "16px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      aria-disabled={false}
-      aria-label="Primary Button"
-      className="button button-primary button-size3 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "16px",
-                "width": "16px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="button-text3"
-        >
-          Primary Button
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    className="stack horizontal m"
-    style={
-      Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-      }
-    }
-  >
-    <button
-      aria-disabled={false}
-      aria-label="Secondary Button"
-      className="button button-secondary button-size3"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        className="button-text3"
-      >
-        Secondary Button
-      </span>
-    </button>
-    <button
-      aria-disabled={false}
-      aria-label="Secondary Button"
-      className="button button-secondary button-size3 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "16px",
-              "width": "16px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      aria-disabled={false}
-      aria-label="Secondary Button"
-      className="button button-secondary button-size3 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "16px",
-                "width": "16px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="button-text3"
-        >
-          Secondary Button
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    className="stack horizontal m"
-    style={
-      Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-      }
-    }
-  >
-    <button
-      aria-disabled={false}
-      aria-label="Default Button"
-      className="button button-default button-size3"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        className="button-text3"
-      >
-        Default Button
-      </span>
-    </button>
-    <button
-      aria-disabled={false}
-      aria-label="Default Button"
-      className="button button-default button-size3 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "16px",
-              "width": "16px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      aria-disabled={false}
-      aria-label="Default Button"
-      className="button button-default button-size3 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "16px",
-                "width": "16px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="button-text3"
-        >
-          Default Button
-        </span>
-      </span>
-    </button>
-  </div>
-  <div>
-    <div
-      className="tab-wrap"
-      role="tablist"
-      value="tab1"
-    >
-      <button
-        aria-label="Tab 1"
-        aria-selected={true}
-        className="tab active"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 1
-        </span>
-        <div
-          className="tab-indicator"
-          data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
-          data-flip-id="tabIndicator"
-          data-portal-key="portal"
-        />
-      </button>
-      <button
-        aria-label="Tab 2"
-        aria-selected={false}
-        className="tab"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 2
-        </span>
-      </button>
-      <button
-        aria-label="Tab 3"
-        aria-selected={false}
-        className="tab"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 3
-        </span>
-      </button>
-      <button
-        aria-label="Tab 4"
-        aria-selected={false}
-        className="tab"
-        disabled={true}
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 4
-        </span>
-      </button>
-    </div>
-  </div>
-  <div>
-    <div
-      className="tab-wrap"
-      role="tablist"
-      value="tab1"
-    >
-      <button
-        aria-label="Tab 1"
-        aria-selected={true}
-        className="tab active"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          aria-hidden={false}
-          className="icon icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <div
-          className="tab-indicator"
-          data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
-          data-flip-id="tabIndicator"
-          data-portal-key="portal"
-        />
-      </button>
-      <button
-        aria-label="Tab 2"
-        aria-selected={false}
-        className="tab"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          aria-hidden={false}
-          className="icon icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        aria-label="Tab 3"
-        aria-selected={false}
-        className="tab"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          aria-hidden={false}
-          className="icon icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        aria-label="Tab 4"
-        aria-selected={false}
-        className="tab"
-        disabled={true}
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          aria-hidden={false}
-          className="icon icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </div>
-  <div>
-    <div
-      className="tab-wrap small"
-      role="tablist"
-      value="tab1"
-    >
-      <button
-        aria-label="Tab 1"
-        aria-selected={true}
-        className="tab active"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 1
-        </span>
-        <div
-          className="tab-indicator"
-          data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
-          data-flip-id="tabIndicator"
-          data-portal-key="portal"
-        />
-      </button>
-      <button
-        aria-label="Tab 2"
-        aria-selected={false}
-        className="tab"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 2
-        </span>
-      </button>
-      <button
-        aria-label="Tab 3"
-        aria-selected={false}
-        className="tab"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 3
-        </span>
-      </button>
-      <button
-        aria-label="Tab 4"
-        aria-selected={false}
-        className="tab"
-        disabled={true}
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 4
-        </span>
-      </button>
-    </div>
-  </div>
-  <div>
-    <div
-      className="tab-wrap pill"
-      role="tablist"
-      value="tab1"
-    >
-      <button
-        aria-label="Tab 1"
-        aria-selected={true}
-        className="tab active"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 1
-        </span>
-        <div
-          className="tab-indicator"
-          data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
-          data-flip-id="tabIndicator"
-          data-portal-key="portal"
-        />
-      </button>
-      <button
-        aria-label="Tab 2"
-        aria-selected={false}
-        className="tab"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 2
-        </span>
-      </button>
-      <button
-        aria-label="Tab 3"
-        aria-selected={false}
-        className="tab"
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 3
-        </span>
-      </button>
-      <button
-        aria-label="Tab 4"
-        aria-selected={false}
-        className="tab"
-        disabled={true}
-        onClick={[Function]}
-        role="tab"
-      >
-        <span
-          className="label"
-        >
-          Tab 4
-        </span>
-      </button>
-    </div>
-  </div>
-  <div
-    className="navbar-container"
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
-  >
-    <div
-      className="navbar-content"
-    >
-      <a
-        className="link-style"
-        href="/"
-        style={
-          Object {
-            "color": "inherit",
-            "padding": "8px",
-          }
-        }
-        target="_self"
-      >
-        Home
-      </a>
-    </div>
-    <div
-      className="navbar-content"
-    >
-      <a
-        className="link-style"
-        href="https://www.twitter.com"
-        style={
-          Object {
-            "color": "inherit",
-            "padding": "8px",
-          }
-        }
-        target="_self"
-      >
-        <span
-          aria-hidden={false}
-          className="icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-      </a>
-      <a
-        className="link-style"
-        href="https://www.facebook.com"
-        style={
-          Object {
-            "color": "inherit",
-            "padding": "8px",
-          }
-        }
-        target="_self"
-      >
-        <span
-          aria-hidden={false}
-          className="icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12 2.04c-5.5 0-10 4.49-10 10.02c0 5 3.66 9.15 8.44 9.9v-7H7.9v-2.9h2.54V9.85c0-2.51 1.49-3.89 3.78-3.89c1.09 0 2.23.19 2.23.19v2.47h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.78l-.45 2.9h-2.33v7a10 10 0 0 0 8.44-9.9c0-5.53-4.5-10.02-10-10.02Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-      </a>
-      <a
-        className="link-style"
-        href="https://www.instagram.com"
-        style={
-          Object {
-            "color": "inherit",
-            "padding": "8px",
-          }
-        }
-        target="_self"
-      >
-        <span
-          aria-hidden={false}
-          className="icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-      </a>
-    </div>
-  </div>
-  <div
-    aria-label="score"
-    className="match-score-container oct-component"
-  >
-    <div
-      className="match-score-circle full"
-    />
-    <div
-      className="match-score-circle full"
-    />
-    <div
-      className="match-score-circle full"
-    />
-    <div
-      className="match-score-circle"
-    />
-    <div
-      className="match-score-circle"
-    />
-    <p
-      className="label"
-    >
-      3
-      /
-      5
-    </p>
-  </div>
-  <span
-    aria-hidden={false}
-    className="spinner icon-wrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "48px",
-          "width": "48px",
-        }
-      }
-      viewBox="0 0 24 24"
-    >
-      <style>
-        @keyframes spin { to { transform: rotate(360deg) } }
-      </style>
-      <g
-        style={
-          Object {
-            "animation": "spin linear 0.8s infinite",
-            "transformOrigin": "center",
-          }
-        }
-      >
-        <path
-          d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-        <rect
-          fill="transparent"
-          height="24"
-          width="24"
-        />
-      </g>
-    </svg>
-  </span>
-  <div
-    className="checkbox-group"
-    defaultChecked={
-      Array [
-        "First",
-      ]
-    }
-    role="group"
-  >
-    <div
-      className="selector"
-    >
-      <input
-        checked={true}
-        disabled={false}
-        id="test-1"
-        name="group"
-        onChange={[Function]}
-        readOnly={true}
-        type="checkbox"
-        value="First"
-      />
-      <label
-        className=""
-        htmlFor="test-1"
-      >
-        <span
-          className="checkmark"
-        />
-        <span
-          className="selector-label"
-        >
-          First
-        </span>
-      </label>
-    </div>
-    <div
-      className="selector"
-    >
-      <input
-        checked={false}
-        disabled={false}
-        id="test-2"
-        name="group"
-        onChange={[Function]}
-        readOnly={true}
-        type="checkbox"
-        value="Second"
-      />
-      <label
-        className=""
-        htmlFor="test-2"
-      >
-        <span
-          className="checkmark"
-        />
-        <span
-          className="selector-label"
-        >
-          Second
-        </span>
-      </label>
-    </div>
-    <div
-      className="selector"
-    >
-      <input
-        checked={false}
-        disabled={false}
-        id="test-3"
-        name="group"
-        onChange={[Function]}
-        readOnly={true}
-        type="checkbox"
-        value="Third"
-      />
-      <label
-        className=""
-        htmlFor="test-3"
-      >
-        <span
-          className="checkmark"
-        />
-        <span
-          className="selector-label"
-        >
-          Third
-        </span>
-      </label>
-    </div>
-  </div>
-  <div
-    aria-label="Radio Group"
-    className="radio-group"
-    role="group"
-  >
-    <div
-      className="selector"
-    >
-      <input
-        checked={true}
-        disabled={false}
-        id="oea2exk-1"
-        name="group"
-        onChange={[Function]}
-        readOnly={true}
-        type="radio"
-        value="Radio1"
-      />
-      <label
-        className=""
-        htmlFor="oea2exk-1"
-      >
-        <span
-          className="radio-button"
-          id="oea2exk-1-custom-radio"
-        />
-        <span
-          className="selector-label"
-        >
-          Radio1
-        </span>
-      </label>
-    </div>
-    <div
-      className="selector"
-    >
-      <input
-        checked={false}
-        disabled={false}
-        id="oea2exk-2"
-        name="group"
-        onChange={[Function]}
-        readOnly={true}
-        type="radio"
-        value="Radio2"
-      />
-      <label
-        className=""
-        htmlFor="oea2exk-2"
-      >
-        <span
-          className="radio-button"
-          id="oea2exk-2-custom-radio"
-        />
-        <span
-          className="selector-label"
-        >
-          Radio2
-        </span>
-      </label>
-    </div>
-    <div
-      className="selector"
-    >
-      <input
-        checked={false}
-        disabled={false}
-        id="oea2exk-3"
-        name="group"
-        onChange={[Function]}
-        readOnly={true}
-        type="radio"
-        value="Radio3"
-      />
-      <label
-        className=""
-        htmlFor="oea2exk-3"
-      >
-        <span
-          className="radio-button"
-          id="oea2exk-3-custom-radio"
-        />
-        <span
-          className="selector-label"
-        >
-          Radio3
-        </span>
-      </label>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Dialog Medium 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open dialog
-  </span>
-</button>
-`;
-
-exports[`Storyshots Dialog Small 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary button-primary-disruptive"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open dialog
-  </span>
-</button>
-`;
-
-exports[`Storyshots Dropdown Dropdown Button 1`] = `
-<div
-  className="my-dropdown-class main-wrapper"
-  style={Object {}}
->
-  <button
-    aria-controls="dropdown-3"
-    aria-disabled={false}
-    aria-expanded={false}
-    aria-haspopup={true}
-    className="button button-default icon-right"
-    defaultChecked={false}
-    disabled={false}
-    onClick={[Function]}
-    role="button"
-    tabIndex="0"
-  >
-    <span>
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-      <span
-        className=""
-      >
-        Click button start
-      </span>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Dropdown Dropdown Div 1`] = `
-<div
-  className="my-dropdown-class main-wrapper"
-  style={Object {}}
->
-  <div
-    aria-controls="dropdown-4"
-    aria-expanded={false}
-    aria-haspopup={true}
-    className="reference-wrapper"
-    onClick={[Function]}
-    role="button"
-    style={
-      Object {
-        "display": "flex",
-      }
-    }
-    tabIndex="0"
-  >
-    <code>
-      HTMLDivElement
-    </code>
-    <span
-      aria-hidden={false}
-      className="icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Empty Custom Image 1`] = `
-<div
-  className="empty"
-  style={Object {}}
->
-  <div
-    className="empty-image"
-    style={Object {}}
-  >
-    <span
-      aria-hidden={false}
-      className="icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "200px",
-            "width": "200px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M22.61,19L13.53,9.91C14.46,7.57 14,4.81 12.09,2.91C9.79,0.61 6.21,0.4 3.66,2.26L7.5,6.11L6.08,7.5L2.25,3.69C0.39,6.23 0.6,9.82 2.9,12.11C4.76,13.97 7.47,14.46 9.79,13.59L18.9,22.7C19.29,23.09 19.92,23.09 20.31,22.7L22.61,20.4C23,20 23,19.39 22.61,19M19.61,20.59L10.15,11.13C9.54,11.58 8.86,11.85 8.15,11.95C6.79,12.15 5.36,11.74 4.32,10.7C3.37,9.76 2.93,8.5 3,7.26L6.09,10.35L10.33,6.11L7.24,3C8.5,2.95 9.73,3.39 10.68,4.33C11.76,5.41 12.17,6.9 11.92,8.29C11.8,9 11.5,9.66 11.04,10.25L20.5,19.7L19.61,20.59Z"
-          style={
-            Object {
-              "fill": "#8ED0FA",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </div>
-  <div
-    className="empty-title"
-  >
-    Short Message Here
-  </div>
-  <div
-    className="empty-description"
-  >
-    More detail on how might the user be able to get around this
-  </div>
-</div>
-`;
-
-exports[`Storyshots Empty Empty Messages 1`] = `
-<div
-  className="empty"
-  style={Object {}}
->
-  <div
-    className="empty-image"
-  >
-    <svg
-      className="empty-messages-image-default"
-      fill="none"
-      height="184"
-      viewBox="0 0 200 184"
-      width="200"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
-        fill="#EBF7FF"
-      />
-      <path
-        d="M131.098 145.069C125.349 140.58 119.665 136.448 116.52 133.384C116.016 132.893 115.288 132.671 114.598 132.81C35.5718 148.779 -9.97428 65.6821 65.669 27.1035C65.7558 27.0592 65.8525 27.0185 65.9449 26.9875C142.983 1.22162 204.241 81.5443 135.362 124.844C134.772 125.214 134.381 125.876 134.381 126.572L134.381 143.483C134.381 145.166 132.424 146.105 131.098 145.069Z"
-        fill="white"
-        stroke="#8ED0FA"
-        stroke-width="6"
-      />
-      <path
-        d="M66.3926 86.6624C70.9586 86.6624 74.3926 82.703 74.3926 78.1624C74.3926 73.6217 70.9586 69.6624 66.3926 69.6624C61.8266 69.6624 58.3926 73.6217 58.3926 78.1624C58.3926 82.703 61.8266 86.6624 66.3926 86.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
-        stroke-width="4"
-      />
-      <path
-        d="M94.3926 86.6624C98.9586 86.6624 102.393 82.703 102.393 78.1624C102.393 73.6217 98.9586 69.6624 94.3926 69.6624C89.8266 69.6624 86.3926 73.6217 86.3926 78.1624C86.3926 82.703 89.8266 86.6624 94.3926 86.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
-        stroke-width="4"
-      />
-      <path
-        d="M122.393 86.6624C126.959 86.6624 130.393 82.703 130.393 78.1624C130.393 73.6217 126.959 69.6624 122.393 69.6624C117.827 69.6624 114.393 73.6217 114.393 78.1624C114.393 82.703 117.827 86.6624 122.393 86.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
-        stroke-width="4"
-      />
-    </svg>
-  </div>
-  <div
-    className="empty-title"
-  >
-    Short Message Here
-  </div>
-  <div
-    className="empty-description"
-  >
-    More detail on how might the user be able to get around this
-  </div>
-</div>
-`;
-
-exports[`Storyshots Empty Error State 1`] = `
-<div
-  className="empty"
-  style={Object {}}
->
-  <div
-    className="empty-image"
-  >
-    <svg
-      className="server-error-image-default"
-      fill="none"
-      height="185"
-      viewBox="0 0 200 185"
-      width="200"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M39.0718 178.839C21.8078 172.861 3.66074 163.325 0.510726 151.175C-2.63929 139.025 9.18787 124.359 24.8068 116.637C40.5358 109.029 59.9069 108.449 71.9662 103.257C83.9156 97.9498 88.5731 87.9309 99.9189 78.9985C111.265 70.066 129.299 62.2199 140.372 65.9517C151.555 69.798 155.648 85.2069 164.716 97.6426C173.785 110.078 187.68 119.625 194.904 132.657C202.237 145.804 202.768 162.422 189.061 167.219C175.355 172.016 147.3 164.877 128.36 166.625C109.569 168.288 99.7624 178.823 86.4541 182.955C73.2954 187.004 56.4854 184.734 39.0718 178.839Z"
-        fill="#EBF7FF"
-      />
-      <path
-        d="M49.2784 101.405C39.3247 57.4604 105.676 18.8428 136.863 78.7671C196.578 76.1036 191.934 156.002 145.489 158L107.668 158L46.6243 158C12.7837 158 0.841885 104.068 49.2784 101.405Z"
-        fill="white"
-        stroke="#8ED0FA"
-        stroke-width="6"
-      />
-      <path
-        d="M76.0193 103.097L82.4167 109.495L86.6594 105.252L80.2619 98.8548L76.0193 103.097ZM82.4167 108.081L76.38 114.117L80.6226 118.36L86.6594 112.323L82.4167 108.081ZM82.4167 109.495C82.0262 109.104 82.0262 108.471 82.4167 108.081L86.6594 112.323C88.612 110.371 88.612 107.205 86.6594 105.252L82.4167 109.495Z"
-        fill="#8ED0FA"
-      />
-      <path
-        d="M128.572 114.117L122.175 107.72L117.932 111.963L124.33 118.36L128.572 114.117ZM122.175 109.134L128.212 103.097L123.969 98.8548L117.932 104.892L122.175 109.134ZM122.175 107.72C122.566 108.111 122.566 108.744 122.175 109.134L117.932 104.892C115.98 106.844 115.98 110.01 117.932 111.963L122.175 107.72Z"
-        fill="#8ED0FA"
-      />
-      <path
-        d="M102 142C107.192 142 111 137.516 111 132.5C111 127.484 107.192 123 102 123C96.8079 123 93 127.484 93 132.5C93 137.516 96.8079 142 102 142Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
-        stroke-width="6"
-      />
-      <path
-        d="M161 68C166.192 68 170 63.5161 170 58.5C170 53.4839 166.192 49 161 49C155.808 49 152 53.4839 152 58.5C152 63.5161 155.808 68 161 68Z"
-        stroke="#B0F3FE"
-        stroke-width="6"
-      />
-      <path
-        d="M55 22C60.1921 22 64 17.5161 64 12.5C64 7.48391 60.1921 3 55 3C49.8079 3 46 7.48391 46 12.5C46 17.5161 49.8079 22 55 22Z"
-        stroke="#B0F3FE"
-        stroke-width="6"
-      />
-      <ellipse
-        cx="108"
-        cy="29.5"
-        fill="#B0F3FE"
-        rx="6"
-        ry="6.5"
-      />
-      <ellipse
-        cx="28"
-        cy="89.5"
-        fill="#B0F3FE"
-        rx="6"
-        ry="6.5"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="161.334"
-        x2="148.606"
-        y1="11.6067"
-        y2="24.3346"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="161.335"
-        x2="148.608"
-        y1="24.3345"
-        y2="11.6065"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="31.334"
-        x2="18.6061"
-        y1="38.6067"
-        y2="51.3346"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="31.3355"
-        x2="18.6076"
-        y1="51.3345"
-        y2="38.6065"
-      />
-    </svg>
-  </div>
-  <div
-    className="empty-title"
-  >
-    Short Message Here
-  </div>
-  <div
-    className="empty-description"
-  >
-    More detail on how might the user be able to get around this
-  </div>
-</div>
-`;
-
-exports[`Storyshots Empty No Data 1`] = `
-<div
-  className="empty"
-  style={Object {}}
->
-  <div
-    className="empty-image"
-  >
-    <svg
-      className="empty-data-image-default"
-      fill="none"
-      height="184"
-      viewBox="0 0 200 184"
-      width="200"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
-        fill="#EBF7FF"
-      />
-      <path
-        d="M26 108L38.5 59H160.5L174 108V154H26V108Z"
-        fill="white"
-      />
-      <path
-        clipRule="evenodd"
-        d="M118.495 108.258C118.495 117.504 110.214 123.333 99.9993 123.333C89.7843 123.333 81.5034 117.504 81.5034 108.258C81.5034 107.958 81.5121 105.994 81.5293 105.698H46.666L60.2683 72.6258C60.8547 71.0563 62.4813 70 64.3116 70H135.687C137.517 70 139.144 71.0563 139.73 72.6258L153.333 105.698H118.469C118.487 105.994 118.495 107.958 118.495 108.258Z"
-        fill="#B0F3FE"
-        fillRule="evenodd"
-      />
-      <path
-        clipRule="evenodd"
-        d="M152.505 59.9999L47.4938 60.0006C43.6128 60.0006 40.0926 62.6542 38.7909 66.7166L27.5922 101.666L74.0905 101.666C78.722 101.666 83.0934 103.873 86.0399 107.654L92.9658 116.542C96.6469 121.266 103.355 121.266 107.037 116.542L113.962 107.654C116.909 103.873 121.28 101.666 125.912 101.666L172.408 101.666L161.208 66.7158C159.906 62.6534 156.386 59.9999 152.505 59.9999ZM173.651 108.333L125.912 108.333C123.217 108.333 120.638 109.615 118.876 111.876L111.95 120.763C105.729 128.747 94.2733 128.747 88.0518 120.763L81.126 111.876C79.3647 109.615 76.7854 108.333 74.0906 108.333L26.3492 108.333L26.3493 143.333C26.3493 148.934 30.548 153.333 35.5634 153.333L164.436 153.333C169.452 153.333 173.65 148.934 173.651 143.333L173.651 108.333ZM47.4937 53.3339L152.505 53.3333C159.195 53.3332 165.081 57.8972 167.226 64.5898L180 104.454L180 143.333C180 152.46 173.105 159.999 164.436 159.999L35.5635 160C26.8946 160 20.0001 152.46 20 143.333L20 104.454L32.7731 64.5908C34.9176 57.898 40.804 53.334 47.4937 53.3339Z"
-        fill="#8ED0FA"
-        fillRule="evenodd"
-      />
-      <rect
-        fill="#B0F3FE"
-        height="40"
-        rx="6.66667"
-        width="13.3333"
-        x="93.334"
-      />
-      <rect
-        fill="#B0F3FE"
-        height="40"
-        rx="6.66667"
-        transform="rotate(-30 46.666 6.66675)"
-        width="13.3333"
-        x="46.666"
-        y="6.66675"
-      />
-      <rect
-        fill="#B0F3FE"
-        height="40"
-        rx="6.66667"
-        transform="rotate(30 141.666 0)"
-        width="13.3333"
-        x="141.666"
-      />
-    </svg>
-  </div>
-  <div
-    className="empty-title"
-  >
-    Short Message Here
-  </div>
-  <div
-    className="empty-description"
-  >
-    More detail on how might the user be able to get around this
-  </div>
-</div>
-`;
-
-exports[`Storyshots Empty No Search Results 1`] = `
-<div
-  className="empty"
-  style={Object {}}
->
-  <div
-    className="empty-image"
-  >
-    <svg
-      className="empty-search-image-default"
-      fill="none"
-      height="184"
-      viewBox="0 0 200 184"
-      width="200"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
-        fill="#EBF7FF"
-      />
-      <path
-        d="M183 91C188.192 91 192 86.5161 192 81.5C192 76.4839 188.192 72 183 72C177.808 72 174 76.4839 174 81.5C174 86.5161 177.808 91 183 91Z"
-        stroke="#B0F3FE"
-        stroke-width="6"
-      />
-      <circle
-        cx="139"
-        cy="47"
-        fill="#B0F3FE"
-        r="5"
-      />
-      <rect
-        fill="#B0F3FE"
-        height="10"
-        rx="5"
-        width="20"
-        x="148"
-        y="42"
-      />
-      <rect
-        fill="#B0F3FE"
-        height="10"
-        rx="5"
-        width="30"
-        x="10"
-        y="83"
-      />
-      <path
-        d="M111.824 36.9412C130.569 55.6864 130.569 86.0783 111.824 104.823C93.0788 123.569 62.6869 123.569 43.9417 104.823C25.1965 86.0783 25.1965 55.6864 43.9417 36.9412C62.6869 18.196 93.0788 18.196 111.824 36.9412Z"
-        fill="white"
-      />
-      <path
-        d="M127.38 131.693C124.256 128.569 124.256 123.504 127.38 120.38C130.504 117.256 135.57 117.256 138.694 120.38L155.664 137.35C158.789 140.475 158.789 145.54 155.664 148.664C152.54 151.788 147.475 151.788 144.351 148.664L127.38 131.693Z"
-        fill="white"
-      />
-      <path
-        d="M125.26 118.259L118.189 111.187M111.824 36.9412C130.569 55.6864 130.569 86.0783 111.824 104.823C93.0788 123.569 62.6869 123.569 43.9417 104.823C25.1965 86.0783 25.1965 55.6864 43.9417 36.9412C62.6869 18.196 93.0788 18.196 111.824 36.9412ZM155.664 148.664C152.54 151.788 147.475 151.788 144.351 148.664L127.38 131.693C124.256 128.569 124.256 123.504 127.38 120.38C130.504 117.256 135.57 117.256 138.694 120.38L155.664 137.35C158.789 140.475 158.789 145.54 155.664 148.664Z"
-        stroke="#8ED0FA"
-        stroke-width="6"
-        strokeLinecap="round"
-      />
-      <path
-        d="M56.3926 96.6624C60.9586 96.6624 64.3926 92.703 64.3926 88.1624C64.3926 83.6217 60.9586 79.6624 56.3926 79.6624C51.8266 79.6624 48.3926 83.6217 48.3926 88.1624C48.3926 92.703 51.8266 96.6624 56.3926 96.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
-        stroke-width="4"
-      />
-    </svg>
-  </div>
-  <div
-    className="empty-title"
-  >
-    Short Message Here
-  </div>
-  <div
-    className="empty-description"
-  >
-    More detail on how might the user be able to get around this
-  </div>
-</div>
-`;
-
-exports[`Storyshots Empty Tasks Complete 1`] = `
-<div
-  className="empty"
-  style={Object {}}
->
-  <div
-    className="empty-image"
-  >
-    <svg
-      className="tasks-complete-image-default"
-      fill="none"
-      height="184"
-      viewBox="0 0 200 184"
-      width="200"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
-        fill="#EBF7FF"
-      />
-      <path
-        d="M180 98C185.192 98 189 93.5161 189 88.5C189 83.4839 185.192 79 180 79C174.808 79 171 83.4839 171 88.5C171 93.5161 174.808 98 180 98Z"
-        stroke="#B0F3FE"
-        stroke-width="6"
-      />
-      <circle
-        cx="139"
-        cy="47"
-        fill="#B0F3FE"
-        r="5"
-      />
-      <path
-        d="M56.3926 96.6624C60.9586 96.6624 64.3926 92.703 64.3926 88.1624C64.3926 83.6217 60.9586 79.6624 56.3926 79.6624C51.8266 79.6624 48.3926 83.6217 48.3926 88.1624C48.3926 92.703 51.8266 96.6624 56.3926 96.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
-        stroke-width="4"
-      />
-      <circle
-        cx="98"
-        cy="79"
-        fill="white"
-        r="60"
-        stroke="#8ED0FA"
-        stroke-width="6"
-        strokeLinecap="round"
-      />
-      <path
-        d="M80.9802 73.3685C79.5239 72.0567 77.2649 72.1574 75.9346 73.5935C74.6043 75.0295 74.7064 77.2571 76.1627 78.569L92.971 93.7098C95.0099 95.5463 98.1725 95.4053 100.035 93.3948C100.113 93.3094 100.113 93.3094 100.188 93.2217L124.175 64.7735C125.436 63.2779 125.228 61.0574 123.712 59.8139C122.195 58.5703 119.943 58.7747 118.682 60.2703L96.1309 87.0162L80.9802 73.3685Z"
-        fill="#B0F3FE"
-      />
-      <path
-        d="M16 26C21.1921 26 25 21.5161 25 16.5C25 11.4839 21.1921 7 16 7C10.8079 7 7 11.4839 7 16.5C7 21.5161 10.8079 26 16 26Z"
-        stroke="#B0F3FE"
-        stroke-width="6"
-      />
-      <ellipse
-        cx="38"
-        cy="35.5"
-        fill="#B0F3FE"
-        rx="6"
-        ry="6.5"
-      />
-      <ellipse
-        cx="171"
-        cy="35.5"
-        fill="#B0F3FE"
-        rx="6"
-        ry="6.5"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="160"
-        x2="142"
-        y1="13"
-        y2="13"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="151"
-        x2="151"
-        y1="22"
-        y2="4"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="31"
-        x2="13"
-        y1="87"
-        y2="87"
-      />
-      <line
-        stroke="#B0F3FE"
-        stroke-width="6"
-        strokeLinecap="round"
-        x1="22"
-        x2="22"
-        y1="96"
-        y2="78"
-      />
-    </svg>
-  </div>
-  <div
-    className="empty-title"
-  >
-    Short Message Here
-  </div>
-  <div
-    className="empty-description"
-  >
-    More detail on how might the user be able to get around this
-  </div>
-</div>
-`;
-
-exports[`Storyshots Icon Basic 1`] = `
-<span
-  aria-hidden={false}
-  className="my-icon-class icon-wrapper"
-  data-test-id="myIconTestId"
-  id="myIconId"
-  role="presentation"
->
-  <svg
-    aria-labelledby="icon_labelledby_40 icon_describedby_40"
-    style={
-      Object {
-        "height": "20px",
-        "width": "20px",
-      }
-    }
-    viewBox="0 0 24 24"
-  >
-    <title
-      id="icon_labelledby_40"
-    >
-      My icon title.
-    </title>
-    <desc
-      id="icon_describedby_40"
-    >
-      My icon description.
-    </desc>
-    <path
-      d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-      style={
-        Object {
-          "fill": "#000000",
-        }
-      }
-    />
-  </svg>
-</span>
-`;
-
-exports[`Storyshots Icon Icomoon 1`] = `
-<span
-  aria-hidden={false}
-  className="my-icon-class icon-wrapper"
-  data-test-id="myIconTestId"
-  id="myIconId"
-  role="presentation"
->
-  <svg
-    className=""
-    height="20px"
-    role="presentation"
-    style={
-      Object {
-        "display": "inline-block",
-        "verticalAlign": "middle",
-      }
-    }
-    viewBox="0 0 1024 1024"
-    width="20px"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M864 0c88.364 0 160 71.634 160 160 0 36.020-11.91 69.258-32 96l-64 64-224-224 64-64c26.742-20.090 59.978-32 96-32zM64 736l-64 288 288-64 592-592-224-224-592 592zM715.578 363.578l-448 448-55.156-55.156 448-448 55.156 55.156z"
-      style={
-        Object {
-          "fill": "#000000",
-        }
-      }
-    />
-  </svg>
-</span>
-`;
-
-exports[`Storyshots Icon Icomoon Multicolor 1`] = `
-<span
-  aria-hidden={false}
-  className="my-icon-class icon-wrapper"
-  data-test-id="myIconTestId"
-  id="myIconId"
-  role="presentation"
->
-  <svg
-    className=""
-    height="24px"
-    role="presentation"
-    style={
-      Object {
-        "display": "inline-block",
-        "verticalAlign": "middle",
-      }
-    }
-    viewBox="0 0 1024 1024"
-    width="24px"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M102.4 153.6v716.8h241.912v-139.999h79.375v139.999h241.912v-716.8h-563.2zM181.777 233.867h81.268v78.399h-81.268v-78.399zM344.312 233.867h79.375v78.399h-79.375v-78.399zM504.955 233.867h81.267v78.399h-81.267v-78.399zM181.777 392.532h81.268v80.269h-81.268v-80.269zM344.312 392.532h79.375v80.269h-79.375v-80.269zM504.955 392.532h81.267v80.269h-81.267v-80.269zM181.777 551.201h81.268v80.266h-81.268v-80.266zM344.312 551.201h79.375v80.266h-79.375v-80.266zM504.955 551.201h81.267v80.266h-81.267v-80.266zM181.777 711.734h81.268v78.4h-81.268v-78.4zM504.955 711.734h81.267v78.4h-81.267v-78.4z"
-      fill="rgb(80, 206, 225)"
-      style={
-        Object {
-          "fill": undefined,
-        }
-      }
-    />
-    <path
-      d="M598.536 358.4h108.529c14.303 0 26.501 5.478 36.598 16.435 10.936 10.112 16.404 22.333 16.404 36.662v54.359h108.531c14.303 0 26.501 5.478 36.598 16.435 10.936 10.115 16.404 22.756 16.404 37.926v295.821c0 15.171-5.468 28.234-16.404 39.191-10.097 10.115-22.295 15.171-36.598 15.171h-431.596c-14.303 0-26.921-5.056-37.86-15.171-10.094-10.957-15.142-24.020-15.142-39.191v-295.821c0-15.171 5.048-27.812 15.142-37.926 10.939-10.957 23.557-16.435 37.86-16.435h108.531v-54.359c0-14.328 5.046-26.55 15.142-36.662 10.936-10.957 23.557-16.435 37.86-16.435zM707.064 465.856v-54.359h-108.529v54.359h108.529z"
-      fill="rgb(20, 109, 166)"
-      opacity={0.6}
-      style={
-        Object {
-          "fill": undefined,
-        }
-      }
-    />
-  </svg>
-</span>
-`;
-
-exports[`Storyshots Info Bar Disruptive 1`] = `
-<div
-  className="info-bar my-info-bar-class disruptive"
-  role="presentation"
-  style={Object {}}
->
-  <span
-    aria-hidden={false}
-    className="icon icon-wrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
-      }
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-  <div
-    className="message body2"
-  >
-    Body2 is used inside here.
-  </div>
-  <button
-    aria-disabled={false}
-    aria-label="Action"
-    className="my-action-btn-class button button-neutral"
-    data-test-id="my-action-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myActionButton"
-  >
-    <span
-      className=""
-    >
-      Action
-    </span>
-  </button>
-  <button
-    aria-disabled={false}
-    aria-label="Close"
-    className="my-close-btn-class button button-neutral icon-left"
-    data-test-id="my-close-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myCloseButton"
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Info Bar Neutral 1`] = `
-<div
-  className="info-bar my-info-bar-class neutral"
-  role="presentation"
-  style={Object {}}
->
-  <span
-    aria-hidden={false}
-    className="icon icon-wrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
-      }
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-  <div
-    className="message body2"
-  >
-    Body2 is used inside here.
-  </div>
-  <button
-    aria-disabled={false}
-    aria-label="Action"
-    className="my-action-btn-class button button-neutral"
-    data-test-id="my-action-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myActionButton"
-  >
-    <span
-      className=""
-    >
-      Action
-    </span>
-  </button>
-  <button
-    aria-disabled={false}
-    aria-label="Close"
-    className="my-close-btn-class button button-neutral icon-left"
-    data-test-id="my-close-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myCloseButton"
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Info Bar Positive 1`] = `
-<div
-  className="info-bar my-info-bar-class positive"
-  role="presentation"
-  style={Object {}}
->
-  <span
-    aria-hidden={false}
-    className="icon icon-wrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
-      }
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-  <div
-    className="message body2"
-  >
-    Body2 is used inside here.
-  </div>
-  <button
-    aria-disabled={false}
-    aria-label="Action"
-    className="my-action-btn-class button button-neutral"
-    data-test-id="my-action-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myActionButton"
-  >
-    <span
-      className=""
-    >
-      Action
-    </span>
-  </button>
-  <button
-    aria-disabled={false}
-    aria-label="Close"
-    className="my-close-btn-class button button-neutral icon-left"
-    data-test-id="my-close-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myCloseButton"
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Info Bar Warning 1`] = `
-<div
-  className="info-bar my-info-bar-class warning"
-  role="presentation"
-  style={Object {}}
->
-  <span
-    aria-hidden={false}
-    className="icon icon-wrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
-      }
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-  <div
-    className="message body2"
-  >
-    Body2 is used inside here.
-  </div>
-  <button
-    aria-disabled={false}
-    aria-label="Action"
-    className="my-action-btn-class button button-neutral"
-    data-test-id="my-action-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myActionButton"
-  >
-    <span
-      className=""
-    >
-      Action
-    </span>
-  </button>
-  <button
-    aria-disabled={false}
-    aria-label="Close"
-    className="my-close-btn-class button button-neutral icon-left"
-    data-test-id="my-close-btn-test-id"
-    defaultChecked={false}
-    disabled={false}
-    id="myCloseButton"
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Input Search Box 1`] = `
-<form
-  role="search"
->
-  <div
-    className="input-wrapper"
-  >
-    <div
-      className="field-label medium"
-    >
-      <label
-        className="text-style medium"
-      >
-        Label
-      </label>
-      <span
-        className="field-label-icon-button medium"
-      >
-        <div
-          className="reference-wrapper"
-          id="4fzzzxj"
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <button
-            aria-disabled={false}
-            className="label-icon-button button button-default button-size3 icon-left"
-            defaultChecked={false}
-            disabled={false}
-          >
-            <span
-              aria-hidden={false}
-              className="icon icon-wrapper"
-              role="presentation"
-            >
-              <svg
-                role="presentation"
-                style={
-                  Object {
-                    "height": "16px",
-                    "width": "16px",
-                  }
-                }
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-                  style={
-                    Object {
-                      "fill": "currentColor",
-                    }
-                  }
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-      </span>
-    </div>
-    <input
-      aria-label="Search"
-      autoFocus={false}
-      className="my-searchbox-class with-icon with-icon-button with-icon-and-icon-button"
-      disabled={false}
-      id="mySearchBoxId5"
-      maxLength={100}
-      minLength={0}
-      name="mySearchBox"
-      onChange={[Function]}
-      placeholder="Search"
-      readOnly={false}
-      required={false}
-      role="textbox"
-      style={Object {}}
-      tabIndex={0}
-      type="search"
-    />
-    <div
-      className="icon-wrapper left-icon"
-    >
-      <span
-        aria-hidden={false}
-        className="icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "red",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </div>
-    <button
-      aria-disabled={false}
-      className="icon-button left-icon button button-default button-size2 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-</form>
-`;
-
-exports[`Storyshots Input Text Area 1`] = `
-<div
-  className="input-wrapper"
->
-  <div
-    className="field-label medium"
-  >
-    <label
-      className="text-style medium"
-    >
-      Label
-    </label>
-    <span
-      className="field-label-icon-button medium"
-    >
-      <div
-        className="reference-wrapper"
-        id="4fzzzxj"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-      >
-        <button
-          aria-disabled={false}
-          className="label-icon-button button button-default button-size3 icon-left"
-          defaultChecked={false}
-          disabled={false}
-        >
-          <span
-            aria-hidden={false}
-            className="icon icon-wrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "16px",
-                  "width": "16px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-    </span>
-  </div>
-  <textarea
-    aria-disabled={false}
-    aria-label="Sample text"
-    autoFocus={false}
-    className="my-textarea-class text-area"
-    cols={50}
-    disabled={false}
-    htmltype="text"
-    id="myTextAreaId6"
-    maxLength={300}
-    minLength={0}
-    name="myTextArea"
-    onChange={[Function]}
-    placeholder="Placeholder text"
-    required={false}
-    rows={5}
-    style={Object {}}
-    tabIndex={0}
-  />
-  <span
-    aria-hidden={false}
-    className="text-area-resize-icon icon-wrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
-      }
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M22,22H20V20H22V22M22,18H20V16H22V18M18,22H16V20H18V22M18,18H16V16H18V18M14,22H12V20H14V22M22,14H20V12H22V14Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-</div>
-`;
-
-exports[`Storyshots Input Text Input 1`] = `
-<div
-  className="input-wrapper"
->
-  <div
-    className="field-label medium"
-  >
-    <label
-      className="text-style medium"
-    >
-      Label
-    </label>
-    <span
-      className="field-label-icon-button medium"
-    >
-      <div
-        className="reference-wrapper"
-        id="4fzzzxj"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-      >
-        <button
-          aria-disabled={false}
-          className="label-icon-button button button-default button-size3 icon-left"
-          defaultChecked={false}
-          disabled={false}
-        >
-          <span
-            aria-hidden={false}
-            className="icon icon-wrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "16px",
-                  "width": "16px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-    </span>
-  </div>
-  <input
-    aria-label="Sample text"
-    autoFocus={false}
-    className="my-textinput-class with-icon with-icon-button with-icon-and-icon-button"
-    disabled={false}
-    htmltype="text"
-    id="myTextInputId7"
-    maxLength={100}
-    minLength={0}
-    name="myTextInput"
-    onChange={[Function]}
-    placeholder="Placeholder text"
-    readOnly={false}
-    required={false}
-    role="textbox"
-    style={Object {}}
-    tabIndex={0}
-    type="text"
-  />
-  <div
-    className="icon-wrapper left-icon"
-  >
-    <span
-      aria-hidden={false}
-      className="icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-          style={
-            Object {
-              "fill": "red",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </div>
-  <button
-    aria-disabled={false}
-    className="icon-button left-icon button button-default button-size2 icon-left"
-    defaultChecked={false}
-    disabled={false}
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Label Labels 1`] = `
-<div
-  className="field-label medium my-label-class"
->
-  <label
-    className="text-style medium"
-    htmlFor=""
-  >
-    This is a label
-  </label>
-  <span
-    className="field-label-icon-button medium"
-  >
-    <div
-      className="reference-wrapper"
-      id="4fzzzxj"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-    >
-      <button
-        aria-disabled={false}
-        className="label-icon-button button button-default button-size3 icon-left"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          aria-hidden={false}
-          className="icon icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "16px",
-                "width": "16px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </span>
-</div>
-`;
-
-exports[`Storyshots Link Default 1`] = `
-<a
-  className="link-style my-link-class"
-  href="https://www.twitter.com"
-  style={Object {}}
-  target="_self"
->
-  Twitter
-</a>
-`;
-
-exports[`Storyshots Link Default Disabled 1`] = `
-<a
-  className="link-style my-link-class"
-  href="https://www.facebook.com"
-  style={Object {}}
-  target="_self"
->
-  <span
-    aria-hidden={false}
-    className="icon-wrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
-      }
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-  User Profile
-</a>
-`;
-
-exports[`Storyshots Link Primary 1`] = `
-<a
-  className="link-style my-link-class primary"
-  href="https://www.facebook.com"
-  style={
-    Object {
-      "maxWidth": "100px",
-    }
-  }
-  target="_self"
->
-  <span
-    aria-hidden={false}
-    className="icon-wrapper"
-    role="presentation"
-  >
-    <svg
-      role="presentation"
-      style={
-        Object {
-          "height": "20px",
-          "width": "20px",
-        }
-      }
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-    </svg>
-  </span>
-  User Profile
-</a>
-`;
-
-exports[`Storyshots List Horizontal 1`] = `
-<div
-  className="my-list-class"
-  style={Object {}}
->
-  <div
-    style={
-      Object {
-        "paddingLeft": "16px",
-      }
-    }
-  >
-    <h2>
-      Header
-    </h2>
-  </div>
-  <ul
-    className="list-container"
-    role=""
-  >
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 1
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 2
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 3
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 4
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 5
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-  </ul>
-  <div
-    style={
-      Object {
-        "paddingLeft": "16px",
-      }
-    }
-  >
-    <h3>
-      Footer
-    </h3>
-  </div>
-</div>
-`;
-
-exports[`Storyshots List Vertical 1`] = `
-<div
-  className="my-list-class"
-  style={Object {}}
->
-  <div
-    style={
-      Object {
-        "paddingLeft": "16px",
-      }
-    }
-  >
-    <h2>
-      Header
-    </h2>
-  </div>
-  <ul
-    className="list-container vertical"
-    role=""
-  >
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 1
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 2
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 3
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 4
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-    <li
-      className="list-item my-list-item-class"
-      role=""
-      style={
-        Object {
-          "padding": "8px 16px",
-        }
-      }
-    >
-      <div>
-        <p>
-          User 5
-        </p>
-        <div>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-        </div>
-      </div>
-    </li>
-  </ul>
-  <div
-    style={
-      Object {
-        "paddingLeft": "16px",
-      }
-    }
-  >
-    <h3>
-      Footer
-    </h3>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Match Score Default 1`] = `
-<div
-  aria-label="score"
-  className="my-match-score-class match-score-container oct-component"
->
-  <div
-    className="match-score-circle full"
-  />
-  <div
-    className="match-score-circle full"
-  />
-  <div
-    className="match-score-circle full"
-  />
-  <div
-    className="match-score-circle"
-  />
-  <div
-    className="match-score-circle"
-  />
-  <p
-    className="label"
-  >
-    3
-    /
-    5
-  </p>
-</div>
-`;
-
-exports[`Storyshots Match Score Without Label 1`] = `
-<div
-  aria-label="score"
-  className="my-match-score-class match-score-container oct-component"
->
-  <div
-    className="match-score-circle full"
-  />
-  <div
-    className="match-score-circle full"
-  />
-  <div
-    className="match-score-circle full"
-  />
-  <div
-    className="match-score-circle"
-  />
-  <div
-    className="match-score-circle"
-  />
-</div>
-`;
-
-exports[`Storyshots Menu Menus 1`] = `
-<div
-  className="main-wrapper"
->
-  <button
-    aria-controls="dropdown-8"
-    aria-disabled={false}
-    aria-expanded={false}
-    aria-haspopup={true}
-    className="button button-default"
-    defaultChecked={false}
-    disabled={false}
-    onClick={[Function]}
-    role="button"
-    tabIndex="0"
-  >
-    <span
-      className=""
-    >
-      Menu dropdown
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Modal Fullscreen 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open modal
-  </span>
-</button>
-`;
-
-exports[`Storyshots Modal Large 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open modal
-  </span>
-</button>
-`;
-
-exports[`Storyshots Modal Medium 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open modal
-  </span>
-</button>
-`;
-
-exports[`Storyshots Modal Scrollable 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open modal
-  </span>
-</button>
-`;
-
-exports[`Storyshots Modal Small 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open modal
-  </span>
-</button>
-`;
-
-exports[`Storyshots Modal X Large 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open modal
-  </span>
-</button>
-`;
-
-exports[`Storyshots Navbar Navbar Div 1`] = `
-<div
-  style={
-    Object {
-      "height": "250px",
-    }
-  }
->
-  <div
-    className="navbar-container"
-  >
-    <div
-      className="navbar-content"
-    >
-      <a
-        className="link-style"
-        href="https://www.twitter.com"
-        style={
-          Object {
-            "color": "inherit",
-            "padding": "8px 20px",
-          }
-        }
-        target="_self"
-      >
-        Twitter
-      </a>
-      <a
-        className="link-style"
-        href="https://www.facebook.com"
-        style={
-          Object {
-            "color": "inherit",
-            "padding": "8px 20px",
-          }
-        }
-        target="_self"
-      >
-        Facebook
-      </a>
-    </div>
-    <div
-      className="navbar-content"
-    >
-      <div
-        className="main-wrapper"
-      >
-        <div
-          aria-controls="dropdown-15"
-          aria-expanded={false}
-          aria-haspopup={true}
-          className="reference-wrapper"
-          onClick={[Function]}
-          role="button"
-          style={
-            Object {
-              "display": "flex",
-            }
-          }
-          tabIndex="0"
-        >
-          <div
-            style={
-              Object {
-                "fontSize": "18px",
-                "height": "32px",
-                "minHeight": "32px",
-                "minWidth": "32px",
-                "width": "32px",
-              }
-            }
-          >
-            <img
-              alt="random profile image"
-              className="image-style round-image"
-              height="32px"
-              src="https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg"
-              width="32px"
-            />
-          </div>
-          <span
-            aria-hidden={false}
-            className="icon-wrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Pagination All Combined 1`] = `
-<div
-  className="my-pagination-class pagination"
-  data-test-id="myPaginationTestId"
->
-  <span
-    className="sizes"
-  >
-    <div
-      className="main-wrapper"
-    >
-      <button
-        aria-controls="dropdown-16"
-        aria-disabled={false}
-        aria-expanded={false}
-        aria-haspopup={true}
-        aria-label="Selected page size"
-        className="button button-default button-size3 icon-left"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-        role="button"
-        tabIndex="0"
-      >
-        <span>
-          <span
-            aria-hidden={false}
-            className="icon icon-wrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "16px",
-                  "width": "16px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-          <span
-            className="button-text3"
-          >
-            page / 100
-          </span>
-        </span>
-      </button>
-    </div>
-  </span>
-  <span
-    className="total"
-  >
-    400 Total
-  </span>
-  <button
-    aria-disabled={false}
-    aria-label="Previous"
-    className="pagination-button button button-default button-size3 icon-left"
-    defaultChecked={false}
-    disabled={false}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-  <ul
-    className="pager"
-  >
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="pagination-button button button-default button-size3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          1
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="pagination-button button button-default button-size3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          0
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={true}
-        aria-disabled={false}
-        aria-pressed={true}
-        className="pagination-button active button button-default button-size3"
-        defaultChecked={true}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          4
-        </span>
-      </button>
-    </li>
-  </ul>
-  <button
-    aria-disabled={false}
-    aria-label="Next"
-    className="pagination-button button button-default button-size3 icon-left disabled"
-    defaultChecked={false}
-    disabled={true}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-  <span
-    className="jump"
-  >
-    <div
-      className="input-wrapper"
-    >
-      <input
-        autoFocus={false}
-        className="editor"
-        defaultValue={4}
-        disabled={false}
-        id="input-17"
-        minLength={1}
-        onChange={[Function]}
-        readOnly={false}
-        required={false}
-        role="textbox"
-        tabIndex={0}
-        type="number"
-      />
-    </div>
-  </span>
-</div>
-`;
-
-exports[`Storyshots Pagination Basic Few 1`] = `
-<div
-  className="my-pagination-class pagination"
-  data-test-id="myPaginationTestId"
->
-  <span />
-  <button
-    aria-disabled={false}
-    aria-label="Previous"
-    className="pagination-button button button-default button-size3 icon-left disabled"
-    defaultChecked={false}
-    disabled={true}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-  <ul
-    className="pager"
-  >
-    <li>
-      <button
-        aria-checked={true}
-        aria-disabled={false}
-        aria-pressed={true}
-        className="pagination-button active button button-default button-size3"
-        defaultChecked={true}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          1
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="pagination-button button button-default button-size3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          0
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="pagination-button button button-default button-size3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          5
-        </span>
-      </button>
-    </li>
-  </ul>
-  <button
-    aria-disabled={false}
-    aria-label="Next"
-    className="pagination-button button button-default button-size3 icon-left"
-    defaultChecked={false}
-    disabled={false}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Pagination Basic Many 1`] = `
-<div
-  className="my-pagination-class pagination"
-  data-test-id="myPaginationTestId"
->
-  <span />
-  <button
-    aria-disabled={false}
-    aria-label="Previous"
-    className="pagination-button button button-default button-size3 icon-left disabled"
-    defaultChecked={false}
-    disabled={true}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-  <ul
-    className="pager"
-  >
-    <li>
-      <button
-        aria-checked={true}
-        aria-disabled={false}
-        aria-pressed={true}
-        className="pagination-button active button button-default button-size3"
-        defaultChecked={true}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          1
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="pagination-button button button-default button-size3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          0
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-disabled={false}
-        aria-label="Next 5"
-        className="pagination-button quicknext button button-default button-size3 icon-left"
-        defaultChecked={false}
-        disabled={false}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-      >
-        <span
-          aria-hidden={false}
-          className="icon icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "16px",
-                "width": "16px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="pagination-button button button-default button-size3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          100
-        </span>
-      </button>
-    </li>
-  </ul>
-  <button
-    aria-disabled={false}
-    aria-label="Next"
-    className="pagination-button button button-default button-size3 icon-left"
-    defaultChecked={false}
-    disabled={false}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Pagination Change Page Size 1`] = `
-<div
-  className="my-pagination-class pagination"
-  data-test-id="myPaginationTestId"
->
-  <span
-    className="sizes"
-  >
-    <div
-      className="main-wrapper"
-    >
-      <button
-        aria-controls="dropdown-18"
-        aria-disabled={false}
-        aria-expanded={false}
-        aria-haspopup={true}
-        aria-label="Selected page size"
-        className="button button-default button-size3 icon-left"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-        role="button"
-        tabIndex="0"
-      >
-        <span>
-          <span
-            aria-hidden={false}
-            className="icon icon-wrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "16px",
-                  "width": "16px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-          <span
-            className="button-text3"
-          >
-            page / 1000
-          </span>
-        </span>
-      </button>
-    </div>
-  </span>
-  <span />
-  <button
-    aria-disabled={false}
-    aria-label="Previous"
-    className="pagination-button button button-default button-size3 icon-left disabled"
-    defaultChecked={false}
-    disabled={true}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-  <ul
-    className="pager"
-  >
-    <li>
-      <button
-        aria-checked={true}
-        aria-disabled={false}
-        aria-pressed={true}
-        className="pagination-button active button button-default button-size3"
-        defaultChecked={true}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          1
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="pagination-button button button-default button-size3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          0
-        </span>
-      </button>
-    </li>
-  </ul>
-  <button
-    aria-disabled={false}
-    aria-label="Next"
-    className="pagination-button button button-default button-size3 icon-left disabled"
-    defaultChecked={false}
-    disabled={true}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Pagination Dots 1`] = `
-<div
-  className="my-pagination-class pagination dots"
-  data-test-id="myPaginationTestId"
->
-  <span />
-  <button
-    aria-disabled={false}
-    aria-label="Previous"
-    className="pagination-button button button-default button-size3 icon-left disabled"
-    defaultChecked={false}
-    disabled={true}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-  <ul
-    className="pager"
-  >
-    <li>
-      <button
-        aria-checked={true}
-        aria-disabled={false}
-        aria-pressed={true}
-        className="pagination-button active button button-default button-size3"
-        defaultChecked={true}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          1
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="pagination-button button button-default button-size3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          0
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="pagination-button button button-default button-size3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          5
-        </span>
-      </button>
-    </li>
-  </ul>
-  <button
-    aria-disabled={false}
-    aria-label="Next"
-    className="pagination-button button button-default button-size3 icon-left"
-    defaultChecked={false}
-    disabled={false}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Pagination Jump To 1`] = `
-<div
-  className="my-pagination-class pagination"
-  data-test-id="myPaginationTestId"
->
-  <span />
-  <button
-    aria-disabled={false}
-    aria-label="Previous"
-    className="pagination-button button button-default button-size3 icon-left"
-    defaultChecked={false}
-    disabled={false}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-  <ul
-    className="pager"
-  >
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="pagination-button button button-default button-size3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          1
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="pagination-button button button-default button-size3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          0
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="pagination-button button button-default button-size3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          10
-        </span>
-      </button>
-    </li>
-  </ul>
-  <button
-    aria-disabled={false}
-    aria-label="Next"
-    className="pagination-button button button-default button-size3 icon-left"
-    defaultChecked={false}
-    disabled={false}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-  <span
-    className="jump"
-  >
-    <div
-      className="input-wrapper"
-    >
-      <input
-        autoFocus={false}
-        className="editor"
-        defaultValue={5}
-        disabled={false}
-        id="input-19"
-        minLength={1}
-        onChange={[Function]}
-        readOnly={false}
-        required={false}
-        role="textbox"
-        tabIndex={0}
-        type="number"
-      />
-    </div>
-  </span>
-</div>
-`;
-
-exports[`Storyshots Pagination Total Item Count 1`] = `
-<div
-  className="my-pagination-class pagination"
-  data-test-id="myPaginationTestId"
->
-  <span
-    className="total"
-  >
-    1000 Total
-  </span>
-  <button
-    aria-disabled={false}
-    aria-label="Previous"
-    className="pagination-button button button-default button-size3 icon-left disabled"
-    defaultChecked={false}
-    disabled={true}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-  <ul
-    className="pager"
-  >
-    <li>
-      <button
-        aria-checked={true}
-        aria-disabled={false}
-        aria-pressed={true}
-        className="pagination-button active button button-default button-size3"
-        defaultChecked={true}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          1
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="pagination-button button button-default button-size3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          0
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-disabled={false}
-        aria-label="Next 5"
-        className="pagination-button quicknext button button-default button-size3 icon-left"
-        defaultChecked={false}
-        disabled={false}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-      >
-        <span
-          aria-hidden={false}
-          className="icon icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "16px",
-                "width": "16px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-      </button>
-    </li>
-    <li>
-      <button
-        aria-checked={false}
-        aria-disabled={false}
-        aria-pressed={false}
-        className="pagination-button button button-default button-size3"
-        defaultChecked={false}
-        disabled={false}
-        onClick={[Function]}
-      >
-        <span
-          className="button-text3"
-        >
-          100
-        </span>
-      </button>
-    </li>
-  </ul>
-  <button
-    aria-disabled={false}
-    aria-label="Next"
-    className="pagination-button button button-default button-size3 icon-left"
-    defaultChecked={false}
-    disabled={false}
-    onClick={[Function]}
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "16px",
-            "width": "16px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Panel Bottom 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open panel
-  </span>
-</button>
-`;
-
-exports[`Storyshots Panel Large 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open panel
-  </span>
-</button>
-`;
-
-exports[`Storyshots Panel Left 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open panel
-  </span>
-</button>
-`;
-
-exports[`Storyshots Panel Medium 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open panel
-  </span>
-</button>
-`;
-
-exports[`Storyshots Panel Small 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open panel
-  </span>
-</button>
-`;
-
-exports[`Storyshots Panel Stacked 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open panel
-  </span>
-</button>
-`;
-
-exports[`Storyshots Panel Top 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-primary"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className=""
-  >
-    Open panel
-  </span>
-</button>
-`;
-
-exports[`Storyshots Pill Closable 1`] = `
-<div
-  className="stack vertical l"
-  style={
-    Object {
-      "alignItems": undefined,
-      "flexWrap": undefined,
-      "justifyContent": undefined,
-    }
-  }
->
-  <div
-    className="tag-pills red"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      red
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Close"
-      className="close-button button button-default button-size2 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tag-pills orange"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      orange
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Close"
-      className="close-button button button-default button-size2 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tag-pills yellow"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      yellow
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Close"
-      className="close-button button button-default button-size2 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tag-pills green"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      green
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Close"
-      className="close-button button button-default button-size2 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tag-pills bluegreen"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      bluegreen
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Close"
-      className="close-button button button-default button-size2 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tag-pills blue"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      blue
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Close"
-      className="close-button button button-default button-size2 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tag-pills violet"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      violet
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Close"
-      className="close-button button button-default button-size2 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tag-pills grey"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      grey
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Close"
-      className="close-button button button-default button-size2 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Pill Default 1`] = `
-<div
-  className="stack vertical l"
-  style={
-    Object {
-      "alignItems": undefined,
-      "flexWrap": undefined,
-      "justifyContent": undefined,
-    }
-  }
->
-  <div
-    className="tag-pills red"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      red
-    </span>
-  </div>
-  <div
-    className="tag-pills orange"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      orange
-    </span>
-  </div>
-  <div
-    className="tag-pills yellow"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      yellow
-    </span>
-  </div>
-  <div
-    className="tag-pills green"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      green
-    </span>
-  </div>
-  <div
-    className="tag-pills bluegreen"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      bluegreen
-    </span>
-  </div>
-  <div
-    className="tag-pills blue"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      blue
-    </span>
-  </div>
-  <div
-    className="tag-pills violet"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      violet
-    </span>
-  </div>
-  <div
-    className="tag-pills grey"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      grey
-    </span>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Pill With Button 1`] = `
-<div
-  className="stack vertical l"
-  style={
-    Object {
-      "alignItems": undefined,
-      "flexWrap": undefined,
-      "justifyContent": undefined,
-    }
-  }
->
-  <div
-    className="tag-pills red"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      red
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Thumbs up"
-      className="button button button-default button-size2 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="button-text2"
-        >
-          2
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tag-pills orange"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      orange
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Thumbs up"
-      className="button button button-default button-size2 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="button-text2"
-        >
-          2
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tag-pills yellow"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      yellow
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Thumbs up"
-      className="button button button-default button-size2 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="button-text2"
-        >
-          2
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tag-pills green"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      green
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Thumbs up"
-      className="button button button-default button-size2 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="button-text2"
-        >
-          2
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tag-pills bluegreen"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      bluegreen
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Thumbs up"
-      className="button button button-default button-size2 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="button-text2"
-        >
-          2
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tag-pills blue"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      blue
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Thumbs up"
-      className="button button button-default button-size2 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="button-text2"
-        >
-          2
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tag-pills violet"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      violet
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Thumbs up"
-      className="button button button-default button-size2 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="button-text2"
-        >
-          2
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    className="tag-pills grey"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      className="label"
-    >
-      grey
-    </span>
-    <button
-      aria-disabled={false}
-      aria-label="Thumbs up"
-      className="button button button-default button-size2 icon-left"
-      defaultChecked={false}
-      disabled={false}
-    >
-      <span>
-        <span
-          aria-hidden={false}
-          className="icon icon-wrapper"
-          role="presentation"
-        >
-          <svg
-            role="presentation"
-            style={
-              Object {
-                "height": "20px",
-                "width": "20px",
-              }
-            }
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
-              style={
-                Object {
-                  "fill": "currentColor",
-                }
-              }
-            />
-          </svg>
-        </span>
-        <span
-          className="button-text2"
-        >
-          2
-        </span>
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Pill With Icon 1`] = `
-<div
-  className="stack vertical l"
-  style={
-    Object {
-      "alignItems": undefined,
-      "flexWrap": undefined,
-      "justifyContent": undefined,
-    }
-  }
->
-  <div
-    className="tag-pills red"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      className="label"
-    >
-      red
-    </span>
-  </div>
-  <div
-    className="tag-pills orange"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      className="label"
-    >
-      orange
-    </span>
-  </div>
-  <div
-    className="tag-pills yellow"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      className="label"
-    >
-      yellow
-    </span>
-  </div>
-  <div
-    className="tag-pills green"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      className="label"
-    >
-      green
-    </span>
-  </div>
-  <div
-    className="tag-pills bluegreen"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      className="label"
-    >
-      bluegreen
-    </span>
-  </div>
-  <div
-    className="tag-pills blue"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      className="label"
-    >
-      blue
-    </span>
-  </div>
-  <div
-    className="tag-pills violet"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      className="label"
-    >
-      violet
-    </span>
-  </div>
-  <div
-    className="tag-pills grey"
-    style={
-      Object {
-        "color": undefined,
-      }
-    }
-  >
-    <span
-      aria-hidden={false}
-      className="icon icon-wrapper"
-      role="presentation"
-    >
-      <svg
-        role="presentation"
-        style={
-          Object {
-            "height": "20px",
-            "width": "20px",
-          }
-        }
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
-          style={
-            Object {
-              "fill": "currentColor",
-            }
-          }
-        />
-      </svg>
-    </span>
-    <span
-      className="label"
-    >
-      grey
-    </span>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Portal Default 1`] = `<div />`;
-
-exports[`Storyshots Radio Button Radio Button 1`] = `
-<div
-  className="selector my-radiobutton-class"
->
-  <input
-    aria-label="Label"
-    checked={false}
-    disabled={false}
-    id="myRadioButtonId"
-    name="myRadioButtonName"
-    onChange={[Function]}
-    readOnly={true}
-    type="radio"
-    value="Label"
-  />
-  <label
-    className=""
-    htmlFor="myRadioButtonId"
-  >
-    <span
-      className="radio-button"
-      id="myRadioButtonId-custom-radio"
-    />
-    <span
-      className="selector-label"
-    >
-      Label
-    </span>
-  </label>
-</div>
-`;
-
-exports[`Storyshots Radio Button Radio Group 1`] = `
-<div
-  aria-label="Radio Group"
-  className="radio-group"
-  role="group"
->
-  <div
-    className="selector"
-  >
-    <input
-      checked={true}
-      disabled={false}
-      id="oea2exk-1"
-      name="group"
-      onChange={[Function]}
-      readOnly={true}
-      type="radio"
-      value="Radio1"
-    />
-    <label
-      className=""
-      htmlFor="oea2exk-1"
-    >
-      <span
-        className="radio-button"
-        id="oea2exk-1-custom-radio"
-      />
-      <span
-        className="selector-label"
-      >
-        Radio1
-      </span>
-    </label>
-  </div>
-  <div
-    className="selector"
-  >
-    <input
-      checked={false}
-      disabled={false}
-      id="oea2exk-2"
-      name="group"
-      onChange={[Function]}
-      readOnly={true}
-      type="radio"
-      value="Radio2"
-    />
-    <label
-      className=""
-      htmlFor="oea2exk-2"
-    >
-      <span
-        className="radio-button"
-        id="oea2exk-2-custom-radio"
-      />
-      <span
-        className="selector-label"
-      >
-        Radio2
-      </span>
-    </label>
-  </div>
-  <div
-    className="selector"
-  >
-    <input
-      checked={false}
-      disabled={false}
-      id="oea2exk-3"
-      name="group"
-      onChange={[Function]}
-      readOnly={true}
-      type="radio"
-      value="Radio3"
-    />
-    <label
-      className=""
-      htmlFor="oea2exk-3"
-    >
-      <span
-        className="radio-button"
-        id="oea2exk-3-custom-radio"
-      />
-      <span
-        className="selector-label"
-      >
-        Radio3
-      </span>
-    </label>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Select Basic 1`] = `
-<div
-  style={
-    Object {
-      "width": "200px",
-    }
-  }
->
-  <div
-    className="select-wrapper octuple-select-class"
-    data-test-id="octuple-select-test-id"
-    style={Object {}}
-  >
-    <div
-      className="select-dropdown-main-wrapper main-wrapper"
-    >
-      <div
-        className="input-wrapper input-stretch"
-      >
-        <input
-          aria-controls="dropdown-20"
-          aria-expanded={false}
-          aria-haspopup={true}
-          autoFocus={false}
-          className="select-input with-icon input-stretch"
-          disabled={false}
-          id="input-21"
-          onChange={[Function]}
-          onClick={[Function]}
-          placeholder="Select"
-          readOnly={true}
-          required={false}
-          role="textbox"
-          tabIndex={0}
-          type="text"
-        />
-        <div
-          className="icon-wrapper left-icon"
-        >
-          <span
-            aria-hidden={false}
-            className="icon-wrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7,10L12,15L17,10H7Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Select Disabled 1`] = `
-<div
-  style={
-    Object {
-      "width": "200px",
-    }
-  }
->
-  <div
-    className="select-wrapper octuple-select-class"
-    data-test-id="octuple-select-test-id"
-    style={Object {}}
-  >
-    <div
-      className="select-dropdown-main-wrapper main-wrapper"
-    >
-      <div
-        className="input-wrapper input-stretch"
-      >
-        <input
-          aria-controls="dropdown-22"
-          aria-expanded={false}
-          aria-haspopup={true}
-          autoFocus={false}
-          className="select-input with-icon input-stretch"
-          disabled={true}
-          id="input-23"
-          onChange={[Function]}
-          onClick={[Function]}
-          placeholder="Select"
-          readOnly={true}
-          required={false}
-          role="textbox"
-          tabIndex={0}
-          type="text"
-        />
-        <div
-          className="icon-wrapper left-icon"
-        >
-          <span
-            aria-hidden={false}
-            className="icon-wrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7,10L12,15L17,10H7Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Select Dynamic 1`] = `
-<div
-  style={
-    Object {
-      "width": "200px",
-    }
-  }
->
-  <div
-    className="select-wrapper"
-  >
-    <div
-      className="select-dropdown-main-wrapper main-wrapper"
-    >
-      <div
-        className="input-wrapper input-stretch"
-      >
-        <input
-          aria-controls="dropdown-24"
-          aria-expanded={false}
-          aria-haspopup={true}
-          autoFocus={false}
-          className="with-icon input-stretch"
-          disabled={false}
-          id="input-25"
-          onChange={[Function]}
-          onClick={[Function]}
-          placeholder="Select"
-          readOnly={false}
-          required={false}
-          role="textbox"
-          style={
-            Object {
-              "minWidth": "unset",
-            }
-          }
-          tabIndex={0}
-          type="text"
-        />
-        <div
-          className="icon-wrapper left-icon"
-        >
-          <span
-            aria-hidden={false}
-            className="icon-wrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7,10L12,15L17,10H7Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Select Filterable 1`] = `
-<div
-  style={
-    Object {
-      "width": "200px",
-    }
-  }
->
-  <div
-    className="select-wrapper octuple-select-class"
-    data-test-id="octuple-select-test-id"
-    style={Object {}}
-  >
-    <div
-      className="select-dropdown-main-wrapper main-wrapper"
-    >
-      <div
-        className="input-wrapper input-stretch"
-      >
-        <input
-          aria-controls="dropdown-26"
-          aria-expanded={false}
-          aria-haspopup={true}
-          autoFocus={false}
-          className="with-icon input-stretch"
-          disabled={false}
-          id="input-27"
-          onChange={[Function]}
-          onClick={[Function]}
-          placeholder="Select"
-          readOnly={false}
-          required={false}
-          role="textbox"
-          style={
-            Object {
-              "minWidth": "unset",
-            }
-          }
-          tabIndex={0}
-          type="text"
-        />
-        <div
-          className="icon-wrapper left-icon"
-        >
-          <span
-            aria-hidden={false}
-            className="icon-wrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7,10L12,15L17,10H7Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Select Multiple 1`] = `
-<div
-  style={
-    Object {
-      "width": "200px",
-    }
-  }
->
-  <div
-    className="select-wrapper octuple-select-class"
-    data-test-id="octuple-select-test-id"
-    style={Object {}}
-  >
-    <div
-      className="select-dropdown-main-wrapper main-wrapper"
-    >
-      <div
-        className="input-wrapper input-stretch"
-      >
-        <input
-          aria-controls="dropdown-28"
-          aria-expanded={false}
-          aria-haspopup={true}
-          autoFocus={false}
-          className="with-icon input-stretch"
-          disabled={false}
-          id="input-29"
-          onChange={[Function]}
-          onClick={[Function]}
-          placeholder="Select"
-          readOnly={false}
-          required={false}
-          role="textbox"
-          style={
-            Object {
-              "minWidth": "unset",
-            }
-          }
-          tabIndex={0}
-          type="text"
-        />
-        <div
-          className="icon-wrapper left-icon"
-        >
-          <span
-            aria-hidden={false}
-            className="icon-wrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7,10L12,15L17,10H7Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Select Multiple With No Filter 1`] = `
-<div
-  style={
-    Object {
-      "width": "200px",
-    }
-  }
->
-  <div
-    className="select-wrapper octuple-select-class"
-    data-test-id="octuple-select-test-id"
-    style={Object {}}
-  >
-    <div
-      className="select-dropdown-main-wrapper main-wrapper"
-    >
-      <div
-        className="input-wrapper input-stretch"
-      >
-        <input
-          aria-controls="dropdown-30"
-          aria-expanded={false}
-          aria-haspopup={true}
-          autoFocus={false}
-          className="select-input with-icon input-stretch"
-          disabled={false}
-          id="input-31"
-          onChange={[Function]}
-          onClick={[Function]}
-          placeholder="Select"
-          readOnly={true}
-          required={false}
-          role="textbox"
-          tabIndex={0}
-          type="text"
-        />
-        <div
-          className="icon-wrapper left-icon"
-        >
-          <span
-            aria-hidden={false}
-            className="icon-wrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7,10L12,15L17,10H7Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Select Options Disabled 1`] = `
-<div
-  style={
-    Object {
-      "width": "200px",
-    }
-  }
->
-  <div
-    className="select-wrapper octuple-select-class"
-    data-test-id="octuple-select-test-id"
-    style={Object {}}
-  >
-    <div
-      className="select-dropdown-main-wrapper main-wrapper"
-    >
-      <div
-        className="input-wrapper input-stretch"
-      >
-        <input
-          aria-controls="dropdown-32"
-          aria-expanded={false}
-          aria-haspopup={true}
-          autoFocus={false}
-          className="select-input with-icon input-stretch"
-          disabled={false}
-          id="input-33"
-          onChange={[Function]}
-          onClick={[Function]}
-          placeholder="Select"
-          readOnly={true}
-          required={false}
-          role="textbox"
-          tabIndex={0}
-          type="text"
-        />
-        <div
-          className="icon-wrapper left-icon"
-        >
-          <span
-            aria-hidden={false}
-            className="icon-wrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7,10L12,15L17,10H7Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Select With Clear 1`] = `
-<div
-  style={
-    Object {
-      "width": "200px",
-    }
-  }
->
-  <div
-    className="select-wrapper octuple-select-class"
-    data-test-id="octuple-select-test-id"
-    style={Object {}}
-  >
-    <div
-      className="select-dropdown-main-wrapper main-wrapper"
-    >
-      <div
-        className="input-wrapper input-stretch"
-      >
-        <input
-          aria-controls="dropdown-34"
-          aria-expanded={false}
-          aria-haspopup={true}
-          autoFocus={false}
-          className="select-input with-icon input-stretch"
-          disabled={false}
-          id="input-35"
-          onChange={[Function]}
-          onClick={[Function]}
-          placeholder="Select"
-          readOnly={true}
-          required={false}
-          role="textbox"
-          tabIndex={0}
-          type="text"
-        />
-        <div
-          className="icon-wrapper left-icon"
-        >
-          <span
-            aria-hidden={false}
-            className="icon-wrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7,10L12,15L17,10H7Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Select With Default Value 1`] = `
-<div
-  style={
-    Object {
-      "width": "200px",
-    }
-  }
->
-  <div
-    className="select-wrapper octuple-select-class"
-    data-test-id="octuple-select-test-id"
-    style={Object {}}
-  >
-    <div
-      className="select-dropdown-main-wrapper main-wrapper"
-    >
-      <div
-        className="input-wrapper input-stretch"
-      >
-        <input
-          aria-controls="dropdown-36"
-          aria-expanded={false}
-          aria-haspopup={true}
-          autoFocus={false}
-          className="select-input with-icon input-stretch"
-          disabled={false}
-          id="input-37"
-          onChange={[Function]}
-          onClick={[Function]}
-          placeholder="Select"
-          readOnly={true}
-          required={false}
-          role="textbox"
-          tabIndex={0}
-          type="text"
-        />
-        <div
-          className="icon-wrapper left-icon"
-        >
-          <span
-            aria-hidden={false}
-            className="icon-wrapper"
-            role="presentation"
-          >
-            <svg
-              role="presentation"
-              style={
-                Object {
-                  "height": "20px",
-                  "width": "20px",
-                }
-              }
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7,10L12,15L17,10H7Z"
-                style={
-                  Object {
-                    "fill": "currentColor",
-                  }
-                }
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Slider Range Slider 1`] = `
-<div
-  className="slider-container"
->
-  <div
-    className="slider my-slider"
-  >
-    <div
-      className="slider-rail"
-    />
-    <div
-      className="slider-track"
-    />
-    <div
-      className="rail-marker"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker active"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker active"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker active"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker active"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker active"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <div
-      className="rail-marker"
-      style={
-        Object {
-          "left": "NaNpx",
-        }
-      }
-    />
-    <input
-      aria-label="Slider"
-      autoFocus={false}
-      className="thumb"
-      disabled={false}
-      id="mySliderId-0"
-      max={200}
-      min={0}
-      name="mySlider-0"
-      onChange={[Function]}
-      step={10}
-      type="range"
-      value={110}
-    />
-    <input
-      aria-label="Slider"
-      autoFocus={false}
-      className="thumb"
-      disabled={false}
-      id="mySliderId-1"
-      max={200}
-      min={0}
-      name="mySlider-1"
-      onChange={[Function]}
-      step={10}
-      type="range"
-      value={150}
-    />
-  </div>
-  <div
-    className="slider-value label-visible"
-  >
-    110
-  </div>
-  <div
-    className="slider-value label-visible"
-  >
-    150
-  </div>
-  <div
-    className="extremity-label min-label label-visible"
-  >
-    0
-  </div>
-  <div
-    className="extremity-label max-label label-visible"
-  >
-    200
-  </div>
-</div>
-`;
-
-exports[`Storyshots Slider Standard Slider 1`] = `
-<div
-  className="slider-container"
->
-  <div
-    className="slider my-slider"
-  >
-    <div
-      className="slider-rail"
-    />
-    <div
-      className="slider-track"
-    />
-    <input
-      aria-label="Slider"
-      autoFocus={true}
-      className="thumb"
-      disabled={false}
-      id="mySliderId"
-      max={5}
-      min={1}
-      name="mySlider"
-      onChange={[Function]}
-      step={1}
-      type="range"
-      value={2}
-    />
-  </div>
-  <div
-    className="slider-value"
-  >
-    2
-  </div>
-  <div
-    className="extremity-label min-label"
-  >
-    1
-  </div>
-  <div
-    className="extremity-label max-label"
-  >
-    5
-  </div>
-</div>
-`;
-
-exports[`Storyshots Snack Bar Closable 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-default button-size3"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className="button-text3"
-  >
-    Serve closable snack
-  </span>
-</button>
-`;
-
-exports[`Storyshots Snack Bar Default 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-default button-size3"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className="button-text3"
-  >
-    Serve snack
-  </span>
-</button>
-`;
-
-exports[`Storyshots Snack Bar With Action 1`] = `
-<button
-  aria-disabled={false}
-  className="button button-default button-size3"
-  defaultChecked={false}
-  disabled={false}
-  onClick={[Function]}
->
-  <span
-    className="button-text3"
-  >
-    Serve snack with action
-  </span>
-</button>
-`;
-
-exports[`Storyshots Spinner Default 1`] = `
-<span
-  aria-hidden={false}
-  className="spinner my-spinner-class icon-wrapper"
-  role="presentation"
->
-  <svg
-    role="presentation"
-    style={
-      Object {
-        "height": "48px",
-        "width": "48px",
-      }
-    }
-    viewBox="0 0 24 24"
-  >
-    <style>
-      @keyframes spin { to { transform: rotate(360deg) } }
-    </style>
-    <g
-      style={
-        Object {
-          "animation": "spin linear 0.8s infinite",
-          "transformOrigin": "center",
-        }
-      }
-    >
-      <path
-        d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
-        style={
-          Object {
-            "fill": "currentColor",
-          }
-        }
-      />
-      <rect
-        fill="transparent"
-        height="24"
-        width="24"
-      />
-    </g>
-  </svg>
-</span>
-`;
-
-exports[`Storyshots Stack Horizontal 1`] = `
-<div
-  className="stack my-stack-class horizontal m"
-  style={
-    Object {
-      "alignItems": "",
-      "backgroundColor": "aquamarine",
-      "flexWrap": "",
-      "justifyContent": "",
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "backgroundColor": "mediumpurple",
-        "height": "200px",
-        "width": "200px",
-      }
-    }
-  />
-  <div
-    style={
-      Object {
-        "backgroundColor": "mediumpurple",
-        "height": "200px",
-        "width": "200px",
-      }
-    }
-  />
-  <div
-    style={
-      Object {
-        "backgroundColor": "mediumpurple",
-        "height": "200px",
-        "width": "200px",
-      }
-    }
-  />
-</div>
-`;
-
-exports[`Storyshots Stack Responsive 1`] = `
-<div
-  className="stack my-stack-class vertical l"
-  style={
-    Object {
-      "alignItems": "",
-      "backgroundColor": "aquamarine",
-      "flexWrap": "",
-      "justifyContent": "",
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "backgroundColor": "mediumpurple",
-        "height": "200px",
-        "width": "200px",
-      }
-    }
-  />
-  <div
-    style={
-      Object {
-        "backgroundColor": "mediumpurple",
-        "height": "200px",
-        "width": "200px",
-      }
-    }
-  />
-  <div
-    style={
-      Object {
-        "backgroundColor": "mediumpurple",
-        "height": "200px",
-        "width": "200px",
-      }
-    }
-  />
-</div>
-`;
-
-exports[`Storyshots Stack Sample Nav List 1`] = `
-<div
-  className="stack nav-list-container horizontal"
-  style={
-    Object {
-      "alignItems": "",
-      "flexWrap": "wrap",
-      "justifyContent": "",
-    }
-  }
->
-  <div
-    className="stack group vertical m"
-    style={
-      Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-      }
-    }
-  >
-    <h3>
-      Title
-    </h3>
-    <div
-      className="stack vertical xs"
-      style={
-        Object {
-          "alignItems": undefined,
-          "flexWrap": undefined,
-          "justifyContent": undefined,
-        }
-      }
-    >
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-    </div>
-  </div>
-  <div
-    className="stack group vertical m"
-    style={
-      Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-      }
-    }
-  >
-    <h3>
-      Title
-    </h3>
-    <div
-      className="stack vertical xs"
-      style={
-        Object {
-          "alignItems": undefined,
-          "flexWrap": undefined,
-          "justifyContent": undefined,
-        }
-      }
-    >
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-    </div>
-  </div>
-  <div
-    className="stack group vertical m"
-    style={
-      Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-      }
-    }
-  >
-    <h3>
-      Title
-    </h3>
-    <div
-      className="stack vertical xs"
-      style={
-        Object {
-          "alignItems": undefined,
-          "flexWrap": undefined,
-          "justifyContent": undefined,
-        }
-      }
-    >
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-    </div>
-  </div>
-  <div
-    className="stack group vertical m"
-    style={
-      Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-      }
-    }
-  >
-    <h3>
-      Title
-    </h3>
-    <div
-      className="stack vertical xs"
-      style={
-        Object {
-          "alignItems": undefined,
-          "flexWrap": undefined,
-          "justifyContent": undefined,
-        }
-      }
-    >
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-    </div>
-  </div>
-  <div
-    className="stack group vertical m"
-    style={
-      Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-      }
-    }
-  >
-    <h3>
-      Title
-    </h3>
-    <div
-      className="stack vertical xs"
-      style={
-        Object {
-          "alignItems": undefined,
-          "flexWrap": undefined,
-          "justifyContent": undefined,
-        }
-      }
-    >
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-    </div>
-  </div>
-  <div
-    className="stack group vertical m"
-    style={
-      Object {
-        "alignItems": undefined,
-        "flexWrap": undefined,
-        "justifyContent": undefined,
-      }
-    }
-  >
-    <h3>
-      Title
-    </h3>
-    <div
-      className="stack vertical xs"
-      style={
-        Object {
-          "alignItems": undefined,
-          "flexWrap": undefined,
-          "justifyContent": undefined,
-        }
-      }
-    >
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-      <p>
-        subheading
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Stack Vertical 1`] = `
-<div
-  className="stack my-stack-class vertical l"
-  style={
-    Object {
-      "alignItems": "",
-      "backgroundColor": "aquamarine",
-      "flexWrap": "",
-      "justifyContent": "",
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "backgroundColor": "mediumpurple",
-        "height": "200px",
-        "width": "200px",
-      }
-    }
-  />
-  <div
-    style={
-      Object {
-        "backgroundColor": "mediumpurple",
-        "height": "200px",
-        "width": "200px",
-      }
-    }
-  />
-  <div
-    style={
-      Object {
-        "backgroundColor": "mediumpurple",
-        "height": "200px",
-        "width": "200px",
-      }
-    }
-  />
-</div>
-`;
-
-exports[`Storyshots Tabs Default 1`] = `
-<div>
-  <div
-    className="tab-wrap"
-    role="tablist"
-    style={Object {}}
-    value="tab1"
-  >
-    <button
-      aria-label="Tab 1"
-      aria-selected={true}
-      className="tab active"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 1
-      </span>
-      <div
-        className="tab-indicator"
-        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
-        data-flip-id="tabIndicator"
-        data-portal-key="portal"
-      />
-    </button>
-    <button
-      aria-label="Tab 2"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 2
-      </span>
-    </button>
-    <button
-      aria-label="Tab 3"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 3
-      </span>
-    </button>
-    <button
-      aria-label="Tab 4"
-      aria-selected={false}
-      className="tab"
-      disabled={true}
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 4
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Tabs Icon 1`] = `
-<div>
-  <div
-    className="tab-wrap"
-    role="tablist"
-    style={Object {}}
-    value="tab1"
-  >
-    <button
-      aria-label="Tab 1"
-      aria-selected={true}
-      className="tab active"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-      <div
-        className="tab-indicator"
-        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
-        data-flip-id="tabIndicator"
-        data-portal-key="portal"
-      />
-    </button>
-    <button
-      aria-label="Tab 2"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      aria-label="Tab 3"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      aria-label="Tab 4"
-      aria-selected={false}
-      className="tab"
-      disabled={true}
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Tabs Icon Label 1`] = `
-<div>
-  <div
-    className="tab-wrap"
-    role="tablist"
-    style={Object {}}
-    value="tab1"
-  >
-    <button
-      aria-label="Tab 1"
-      aria-selected={true}
-      className="tab active"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-      <span
-        className="label"
-      >
-        Tab 1
-      </span>
-      <div
-        className="tab-indicator"
-        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
-        data-flip-id="tabIndicator"
-        data-portal-key="portal"
-      />
-    </button>
-    <button
-      aria-label="Tab 2"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-      <span
-        className="label"
-      >
-        Tab 2
-      </span>
-    </button>
-    <button
-      aria-label="Tab 3"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-      <span
-        className="label"
-      >
-        Tab 3
-      </span>
-    </button>
-    <button
-      aria-label="Tab 4"
-      aria-selected={false}
-      className="tab"
-      disabled={true}
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-      <span
-        className="label"
-      >
-        Tab 4
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Tabs Pill Default 1`] = `
-<div>
-  <div
-    className="tab-wrap pill"
-    role="tablist"
-    style={Object {}}
-    value="tab1"
-  >
-    <button
-      aria-label="Tab 1"
-      aria-selected={true}
-      className="tab active"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 1
-      </span>
-      <div
-        className="tab-indicator"
-        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
-        data-flip-id="tabIndicator"
-        data-portal-key="portal"
-      />
-    </button>
-    <button
-      aria-label="Tab 2"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 2
-      </span>
-    </button>
-    <button
-      aria-label="Tab 3"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 3
-      </span>
-    </button>
-    <button
-      aria-label="Tab 4"
-      aria-selected={false}
-      className="tab"
-      disabled={true}
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 4
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Tabs Pill Icon 1`] = `
-<div>
-  <div
-    className="tab-wrap pill"
-    role="tablist"
-    style={Object {}}
-    value="tab1"
-  >
-    <button
-      aria-label="Tab 1"
-      aria-selected={true}
-      className="tab active"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-      <div
-        className="tab-indicator"
-        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
-        data-flip-id="tabIndicator"
-        data-portal-key="portal"
-      />
-    </button>
-    <button
-      aria-label="Tab 2"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      aria-label="Tab 3"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      aria-label="Tab 4"
-      aria-selected={false}
-      className="tab"
-      disabled={true}
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Tabs Pill Icon Label 1`] = `
-<div>
-  <div
-    className="tab-wrap pill"
-    role="tablist"
-    style={Object {}}
-    value="tab1"
-  >
-    <button
-      aria-label="Tab 1"
-      aria-selected={true}
-      className="tab active"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-      <span
-        className="label"
-      >
-        Tab 1
-      </span>
-      <div
-        className="tab-indicator"
-        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
-        data-flip-id="tabIndicator"
-        data-portal-key="portal"
-      />
-    </button>
-    <button
-      aria-label="Tab 2"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-      <span
-        className="label"
-      >
-        Tab 2
-      </span>
-    </button>
-    <button
-      aria-label="Tab 3"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-      <span
-        className="label"
-      >
-        Tab 3
-      </span>
-    </button>
-    <button
-      aria-label="Tab 4"
-      aria-selected={false}
-      className="tab"
-      disabled={true}
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-      <span
-        className="label"
-      >
-        Tab 4
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Tabs Pill With Badge 1`] = `
-<div>
-  <div
-    className="tab-wrap pill"
-    role="tablist"
-    style={Object {}}
-    value="tab1"
-  >
-    <button
-      aria-label="Tab 1"
-      aria-selected={true}
-      className="tab active"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 1
-      </span>
-      <div
-        className="tab-indicator"
-        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
-        data-flip-id="tabIndicator"
-        data-portal-key="portal"
-      />
-      <span
-        className="badge header6 badge active"
-      >
-        1
-      </span>
-    </button>
-    <button
-      aria-label="Tab 2"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 2
-      </span>
-      <span
-        className="badge header6 badge"
-      >
-        2
-      </span>
-    </button>
-    <button
-      aria-label="Tab 3"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 3
-      </span>
-      <span
-        className="badge header6 badge"
-      >
-        3
-      </span>
-    </button>
-    <button
-      aria-label="Tab 4"
-      aria-selected={false}
-      className="tab"
-      disabled={true}
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 4
-      </span>
-      <span
-        className="badge header6 badge"
-      >
-        4
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Tabs Scrollable 1`] = `
-<div>
-  <div
-    className="tab-wrap scrollable"
-    role="tablist"
-    style={
-      Object {
-        "maxWidth": "400px",
-      }
-    }
-    value="tab1"
-  >
-    <button
-      aria-label="Tab 1"
-      aria-selected={true}
-      className="tab active"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 1
-      </span>
-      <div
-        className="tab-indicator"
-        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
-        data-flip-id="tabIndicator"
-        data-portal-key="portal"
-      />
-    </button>
-    <button
-      aria-label="Tab 2"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 2
-      </span>
-    </button>
-    <button
-      aria-label="Tab 3"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 3
-      </span>
-    </button>
-    <button
-      aria-label="Tab 4"
-      aria-selected={false}
-      className="tab"
-      disabled={true}
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 4
-      </span>
-    </button>
-    <button
-      aria-label="Tab 5"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 5
-      </span>
-    </button>
-    <button
-      aria-label="Tab 6"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 6
-      </span>
-    </button>
-    <button
-      aria-label="Tab 7"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 7
-      </span>
-    </button>
-    <button
-      aria-label="Tab 8"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 8
-      </span>
-    </button>
-    <button
-      aria-label="Tab 9"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 9
-      </span>
-    </button>
-    <button
-      aria-label="Tab 10"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 10
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Tabs Small 1`] = `
-<div>
-  <div
-    className="tab-wrap small"
-    role="tablist"
-    style={Object {}}
-    value="tab1"
-  >
-    <button
-      aria-label="Tab 1"
-      aria-selected={true}
-      className="tab active"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 1
-      </span>
-      <div
-        className="tab-indicator"
-        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
-        data-flip-id="tabIndicator"
-        data-portal-key="portal"
-      />
-    </button>
-    <button
-      aria-label="Tab 2"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 2
-      </span>
-    </button>
-    <button
-      aria-label="Tab 3"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 3
-      </span>
-    </button>
-    <button
-      aria-label="Tab 4"
-      aria-selected={false}
-      className="tab"
-      disabled={true}
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 4
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Tabs With Badge 1`] = `
-<div>
-  <div
-    className="tab-wrap"
-    role="tablist"
-    style={Object {}}
-    value="tab1"
-  >
-    <button
-      aria-label="Tab 1"
-      aria-selected={true}
-      className="tab active"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 1
-      </span>
-      <div
-        className="tab-indicator"
-        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
-        data-flip-id="tabIndicator"
-        data-portal-key="portal"
-      />
-      <span
-        className="badge header6 badge active"
-      >
-        1
-      </span>
-    </button>
-    <button
-      aria-label="Tab 2"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 2
-      </span>
-      <span
-        className="badge header6 badge"
-      >
-        2
-      </span>
-    </button>
-    <button
-      aria-label="Tab 3"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 3
-      </span>
-      <span
-        className="badge header6 badge"
-      >
-        3
-      </span>
-    </button>
-    <button
-      aria-label="Tab 4"
-      aria-selected={false}
-      className="tab"
-      disabled={true}
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        className="label"
-      >
-        Tab 4
-      </span>
-      <span
-        className="badge header6 badge"
-      >
-        4
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Tooltip Tooltips 1`] = `
-<div
-  className="reference-wrapper"
-  id="4fzzzxj"
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
->
-  <button
-    aria-disabled={false}
-    aria-label="Show Tooltip"
-    className="button button-primary button-size2"
-    defaultChecked={false}
-    disabled={false}
-  >
-    <span
-      className="button-text2"
-    >
-      Show Tooltip
-    </span>
-  </button>
-</div>
-`;
+version https://git-lfs.github.com/spec/v1
+oid sha256:71d229409bc29def35df60c1686a2f911e200934c035fc5dce872e341cd70b26
+size 1811243
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 211476843..361d0693c 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -1,10 +1,9 @@
 import React, { FC, Ref, useCallback, useState } from 'react';
 
-import { mergeClasses, uniqueId } from '../../shared/utilities';
+import { eventKeys, mergeClasses, uniqueId } from '../../shared/utilities';
 
 import { AccordionProps, AccordionSummaryProps, AccordionBodyProps } from './';
 import { Icon, IconName } from '../Icon';
-import { eventKeys } from '../../shared/eventKeys';
 
 import styles from './accordion.module.scss';
 
diff --git a/src/components/Empty/svg/DefaultEmptyImg.tsx b/src/components/Empty/svg/DefaultEmptyImg.tsx
new file mode 100644
index 000000000..ec2f6d66e
--- /dev/null
+++ b/src/components/Empty/svg/DefaultEmptyImg.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+export const DefaultEmptyImg = (): JSX.Element => {
+    return (
+        <svg
+            className={'empty-image-default'}
+            width="200"
+            height="184"
+            viewBox="0 0 200 184"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
+                fill="#EBF7FF"
+            />
+            <path d="M26 108L38.5 59H160.5L174 108V154H26V108Z" fill="white" />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M118.495 108.258C118.495 117.504 110.214 123.333 99.9993 123.333C89.7843 123.333 81.5034 117.504 81.5034 108.258C81.5034 107.958 81.5121 105.994 81.5293 105.698H46.666L60.2683 72.6258C60.8547 71.0563 62.4813 70 64.3116 70H135.687C137.517 70 139.144 71.0563 139.73 72.6258L153.333 105.698H118.469C118.487 105.994 118.495 107.958 118.495 108.258Z"
+                fill="#B0F3FE"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M152.505 59.9999L47.4938 60.0006C43.6128 60.0006 40.0926 62.6542 38.7909 66.7166L27.5922 101.666L74.0905 101.666C78.722 101.666 83.0934 103.873 86.0399 107.654L92.9658 116.542C96.6469 121.266 103.355 121.266 107.037 116.542L113.962 107.654C116.909 103.873 121.28 101.666 125.912 101.666L172.408 101.666L161.208 66.7158C159.906 62.6534 156.386 59.9999 152.505 59.9999ZM173.651 108.333L125.912 108.333C123.217 108.333 120.638 109.615 118.876 111.876L111.95 120.763C105.729 128.747 94.2733 128.747 88.0518 120.763L81.126 111.876C79.3647 109.615 76.7854 108.333 74.0906 108.333L26.3492 108.333L26.3493 143.333C26.3493 148.934 30.548 153.333 35.5634 153.333L164.436 153.333C169.452 153.333 173.65 148.934 173.651 143.333L173.651 108.333ZM47.4937 53.3339L152.505 53.3333C159.195 53.3332 165.081 57.8972 167.226 64.5898L180 104.454L180 143.333C180 152.46 173.105 159.999 164.436 159.999L35.5635 160C26.8946 160 20.0001 152.46 20 143.333L20 104.454L32.7731 64.5908C34.9176 57.898 40.804 53.334 47.4937 53.3339Z"
+                fill="#8ED0FA"
+            />
+            <rect
+                x="93.334"
+                width="13.3333"
+                height="40"
+                rx="6.66667"
+                fill="#B0F3FE"
+            />
+            <rect
+                x="46.666"
+                y="6.66675"
+                width="13.3333"
+                height="40"
+                rx="6.66667"
+                transform="rotate(-30 46.666 6.66675)"
+                fill="#B0F3FE"
+            />
+            <rect
+                x="141.666"
+                width="13.3333"
+                height="40"
+                rx="6.66667"
+                transform="rotate(30 141.666 0)"
+                fill="#B0F3FE"
+            />
+        </svg>
+    );
+};
diff --git a/src/components/Icon/mdi.ts b/src/components/Icon/mdi.ts
index 975771906..dbc1d6056 100644
--- a/src/components/Icon/mdi.ts
+++ b/src/components/Icon/mdi.ts
@@ -216,6 +216,10 @@ export enum IconName {
     mdiFlaskEmpty = 'M6,22A3,3 0 0,1 3,19C3,18.4 3.18,17.84 3.5,17.37L9,7.81V6A1,1 0 0,1 8,5V4A2,2 0 0,1 10,2H14A2,2 0 0,1 16,4V5A1,1 0 0,1 15,6V7.81L20.5,17.37C20.82,17.84 21,18.4 21,19A3,3 0 0,1 18,22H6Z',
     mdiFlaskEmptyOutline = 'M5,19A1,1 0 0,0 6,20H18A1,1 0 0,0 19,19C19,18.79 18.93,18.59 18.82,18.43L13,8.35V4H11V8.35L5.18,18.43C5.07,18.59 5,18.79 5,19M6,22A3,3 0 0,1 3,19C3,18.4 3.18,17.84 3.5,17.37L9,7.81V6A1,1 0 0,1 8,5V4A2,2 0 0,1 10,2H14A2,2 0 0,1 16,4V5A1,1 0 0,1 15,6V7.81L20.5,17.37C20.82,17.84 21,18.4 21,19A3,3 0 0,1 18,22H6Z',
     mdiFlaskOutline = 'M5,19A1,1 0 0,0 6,20H18A1,1 0 0,0 19,19C19,18.79 18.93,18.59 18.82,18.43L13,8.35V4H11V8.35L5.18,18.43C5.07,18.59 5,18.79 5,19M6,22A3,3 0 0,1 3,19C3,18.4 3.18,17.84 3.5,17.37L9,7.81V6A1,1 0 0,1 8,5V4A2,2 0 0,1 10,2H14A2,2 0 0,1 16,4V5A1,1 0 0,1 15,6V7.81L20.5,17.37C20.82,17.84 21,18.4 21,19A3,3 0 0,1 18,22H6M13,16L14.34,14.66L16.27,18H7.73L10.39,13.39L13,16M12.5,12A0.5,0.5 0 0,1 13,12.5A0.5,0.5 0 0,1 12.5,13A0.5,0.5 0 0,1 12,12.5A0.5,0.5 0 0,1 12.5,12Z',
+    mdiFolder = 'M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z',
+    mdiFolderOpen = 'M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z',
+    mdiFolderOpenOutline = 'M6.1,10L4,18V8H21A2,2 0 0,0 19,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H19C19.9,20 20.7,19.4 20.9,18.5L23.2,10H6.1M19,18H6L7.6,12H20.6L19,18Z',
+    mdiFolderOutline = 'M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z',
     mdiFormatBold = 'M13.5,15.5H10V12.5H13.5A1.5,1.5 0 0,1 15,14A1.5,1.5 0 0,1 13.5,15.5M10,6.5H13A1.5,1.5 0 0,1 14.5,8A1.5,1.5 0 0,1 13,9.5H10M15.6,10.79C16.57,10.11 17.25,9 17.25,8C17.25,5.74 15.5,4 13.25,4H7V18H14.04C16.14,18 17.75,16.3 17.75,14.21C17.75,12.69 16.89,11.39 15.6,10.79Z',
     mdiFormatColorText = 'M9.62,12L12,5.67L14.37,12M11,3L5.5,17H7.75L8.87,14H15.12L16.25,17H18.5L13,3H11Z',
     mdiFormatItalic = 'M10,4V7H12.21L8.79,15H6V18H14V15H11.79L15.21,7H18V4H10Z',
@@ -231,6 +235,7 @@ export enum IconName {
     mdiGenderNonBinary = 'M13 3H11V5.27L9.04 4.13L8.04 5.87L10 7L8.04 8.13L9.04 9.87L11 8.73V12.1C8.72 12.56 7 14.58 7 17C7 19.76 9.24 22 12 22S17 19.76 17 17C17 14.58 15.28 12.56 13 12.1V8.73L14.96 9.87L15.96 8.13L14 7L15.96 5.87L14.96 4.13L13 5.27V3M12 20C10.35 20 9 18.65 9 17S10.35 14 12 14 15 15.35 15 17 13.65 20 12 20Z',
     mdiGenderTransgender = 'M19.58,3H15V1H23V9H21V4.41L16.17,9.24C16.69,10.03 17,11 17,12C17,14.42 15.28,16.44 13,16.9V19H15V21H13V23H11V21H9V19H11V16.9C8.72,16.44 7,14.42 7,12C7,11 7.3,10.04 7.82,9.26L6.64,8.07L5.24,9.46L3.83,8.04L5.23,6.65L3,4.42V8H1V1H8V3H4.41L6.64,5.24L8.08,3.81L9.5,5.23L8.06,6.66L9.23,7.84C10,7.31 11,7 12,7C13,7 13.96,7.3 14.75,7.83L19.58,3M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z',
     mdiGoogle = 'M21.35,11.1H12.18V13.83H18.69C18.36,17.64 15.19,19.27 12.19,19.27C8.36,19.27 5,16.25 5,12C5,7.9 8.2,4.73 12.2,4.73C15.29,4.73 17.1,6.7 17.1,6.7L19,4.72C19,4.72 16.56,2 12.1,2C6.42,2 2.03,6.8 2.03,12C2.03,17.05 6.16,22 12.25,22C17.6,22 21.5,18.33 21.5,12.91C21.5,11.76 21.35,11.1 21.35,11.1V11.1Z',
+    mdiHandBackRight = 'M13 24C9.74 24 6.81 22 5.6 19L2.57 11.37C2.26 10.58 3 9.79 3.81 10.05L4.6 10.31C5.16 10.5 5.62 10.92 5.84 11.47L7.25 15H8V3.25C8 2.56 8.56 2 9.25 2S10.5 2.56 10.5 3.25V12H11.5V1.25C11.5 .56 12.06 0 12.75 0S14 .56 14 1.25V12H15V2.75C15 2.06 15.56 1.5 16.25 1.5C16.94 1.5 17.5 2.06 17.5 2.75V12H18.5V5.75C18.5 5.06 19.06 4.5 19.75 4.5S21 5.06 21 5.75V16C21 20.42 17.42 24 13 24Z',
     mdiHelp = 'M10,19H13V22H10V19M12,2C17.35,2.22 19.68,7.62 16.5,11.67C15.67,12.67 14.33,13.33 13.67,14.17C13,15 13,16 13,17H10C10,15.33 10,13.92 10.67,12.92C11.33,11.92 12.67,11.33 13.5,10.67C15.92,8.43 15.32,5.26 12,5A3,3 0 0,0 9,8H6A6,6 0 0,1 12,2Z',
     mdiHelpCircle = 'M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z',
     mdiHelpCircleOutline = 'M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z',
@@ -308,6 +313,10 @@ export enum IconName {
     mdiPlayCircle = 'M10,16.5V7.5L16,12M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z',
     mdiPlayCircleOutline = 'M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z',
     mdiPlus = 'M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z',
+    mdiPlusBox = 'M17,13H13V17H11V13H7V11H11V7H13V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z',
+    mdiPlusBoxMultiple = 'M19,11H15V15H13V11H9V9H13V5H15V9H19M20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M4,6H2V20A2,2 0 0,0 4,22H18V20H4V6Z',
+    mdiPlusBoxMultipleOutline = 'M18 11H15V14H13V11H10V9H13V6H15V9H18M20 4V16H8V4H20M20 2H8C6.9 2 6 2.9 6 4V16C6 17.11 6.9 18 8 18H20C21.11 18 22 17.11 22 16V4C22 2.9 21.11 2 20 2M4 6H2V20C2 21.11 2.9 22 4 22H18V20H4V6Z',
+    mdiPlusBoxOutline = 'M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M11,7H13V11H17V13H13V17H11V13H7V11H11V7Z',
     mdiPlusCircle = 'M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z',
     mdiPlusCircleOutline = 'M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z',
     mdiPlusThick = 'M20 14H14V20H10V14H4V10H10V4H14V10H20V14Z',
diff --git a/src/components/Motion/CSSMotion.tsx b/src/components/Motion/CSSMotion.tsx
new file mode 100644
index 000000000..f35aebbd1
--- /dev/null
+++ b/src/components/Motion/CSSMotion.tsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import { useRef } from 'react';
+import {
+    DomWrapper,
+    findDOMNode,
+    fillRef,
+    mergeClasses,
+} from '../../shared/utilities';
+import { getTransitionName } from './util/motion';
+import type { CSSMotionProps } from './CSSMotion.types';
+import { STATUS_NONE, STEP_PREPARE, STEP_START } from './CSSMotion.types';
+import { useStatus } from './hooks/useStatus';
+import { isActive } from './hooks/useStepQueue';
+
+export function genCSSMotion(): React.ForwardRefExoticComponent<
+    CSSMotionProps & { ref?: React.Ref<any> }
+> {
+    const CSSMotion = React.forwardRef<any, CSSMotionProps>((props, ref) => {
+        const {
+            // Default config
+            visible = true,
+            removeOnLeave = true,
+
+            forceRender,
+            children,
+            motionName,
+            leavedClassName,
+            eventProps,
+        } = props;
+
+        // Ref to the react node, it may be a HTMLElement
+        const nodeRef = useRef<any>();
+        // Ref to the dom wrapper in case ref can not pass to HTMLElement
+        const wrapperNodeRef = useRef();
+
+        function getDomElement() {
+            try {
+                // Here we're avoiding call for findDOMNode since it's deprecated
+                // in strict mode. We're calling it only when node ref is not
+                // an instance of DOM HTMLElement. Otherwise use
+                // findDOMNode as a final resort
+                return nodeRef.current instanceof HTMLElement
+                    ? nodeRef.current
+                    : findDOMNode<HTMLElement>(wrapperNodeRef.current);
+            } catch (e) {
+                // Only happen when `motionDeadline` trigger but element removed.
+                return null;
+            }
+        }
+
+        const [status, statusStep, statusStyle, mergedVisible] = useStatus(
+            visible,
+            getDomElement,
+            props
+        );
+
+        // Record whether content has rendered
+        // Will return null for un-rendered even when `removeOnLeave={false}`
+        const renderedRef = React.useRef(mergedVisible);
+        if (mergedVisible) {
+            renderedRef.current = true;
+        }
+
+        // ====================== Refs ======================
+        const setNodeRef = React.useCallback(
+            (node: any) => {
+                nodeRef.current = node;
+                fillRef(ref, node);
+            },
+            [ref]
+        );
+
+        // ===================== Render =====================
+        let motionChildren: React.ReactNode;
+        const mergedProps = { ...eventProps, visible };
+
+        if (!children) {
+            // No children
+            motionChildren = null;
+        } else if (status === STATUS_NONE) {
+            // Stable children
+            if (mergedVisible) {
+                motionChildren = children({ ...mergedProps }, setNodeRef);
+            } else if (!removeOnLeave && renderedRef.current) {
+                motionChildren = children(
+                    { ...mergedProps, className: leavedClassName },
+                    setNodeRef
+                );
+            } else if (forceRender) {
+                motionChildren = children(
+                    { ...mergedProps, style: { display: 'none' } },
+                    setNodeRef
+                );
+            } else {
+                motionChildren = null;
+            }
+        } else {
+            // In motion
+            let statusSuffix: string;
+            if (statusStep === STEP_PREPARE) {
+                statusSuffix = 'prepare';
+            } else if (isActive(statusStep)) {
+                statusSuffix = 'active';
+            } else if (statusStep === STEP_START) {
+                statusSuffix = 'start';
+            }
+
+            motionChildren = children(
+                {
+                    ...mergedProps,
+                    className: mergeClasses([
+                        getTransitionName(motionName, status),
+                        {
+                            [getTransitionName(
+                                motionName,
+                                `${status}-${statusSuffix}`
+                            )]: statusSuffix,
+                        },
+                        {
+                            [motionName as string]:
+                                typeof motionName === 'string',
+                        },
+                    ]),
+                    style: statusStyle,
+                },
+                setNodeRef
+            );
+        }
+
+        // Auto inject ref if child node not have `ref` props
+        if (React.isValidElement(motionChildren)) {
+            const { ref: originNodeRef } = motionChildren as any;
+
+            if (!originNodeRef) {
+                motionChildren = React.cloneElement(motionChildren, {
+                    ref: setNodeRef,
+                });
+            }
+        }
+
+        return <DomWrapper ref={wrapperNodeRef}>{motionChildren}</DomWrapper>;
+    });
+
+    CSSMotion.displayName = 'CSSMotion';
+
+    return CSSMotion;
+}
+
+export default genCSSMotion();
diff --git a/src/components/Motion/CSSMotion.types.ts b/src/components/Motion/CSSMotion.types.ts
new file mode 100644
index 000000000..a6dd032a0
--- /dev/null
+++ b/src/components/Motion/CSSMotion.types.ts
@@ -0,0 +1,157 @@
+import type { KeyObject } from './util/diff';
+
+export const MOTION_PROP_NAMES: string[] = [
+    'eventProps',
+    'visible',
+    'children',
+    'motionName',
+    'motionAppear',
+    'motionEnter',
+    'motionLeave',
+    'motionLeaveImmediately',
+    'motionDeadline',
+    'removeOnLeave',
+    'leavedClassName',
+    'onAppearStart',
+    'onAppearActive',
+    'onAppearEnd',
+    'onEnterStart',
+    'onEnterActive',
+    'onEnterEnd',
+    'onLeaveStart',
+    'onLeaveActive',
+    'onLeaveEnd',
+];
+
+export const STATUS_NONE = 'none' as const;
+export const STATUS_APPEAR = 'appear' as const;
+export const STATUS_ENTER = 'enter' as const;
+export const STATUS_LEAVE = 'leave' as const;
+
+export type MotionStatus =
+    | typeof STATUS_NONE
+    | typeof STATUS_APPEAR
+    | typeof STATUS_ENTER
+    | typeof STATUS_LEAVE;
+
+export const STEP_NONE = 'none' as const;
+export const STEP_PREPARE = 'prepare' as const;
+export const STEP_START = 'start' as const;
+export const STEP_ACTIVE = 'active' as const;
+export const STEP_ACTIVATED = 'end' as const;
+
+export type StepStatus =
+    | typeof STEP_NONE
+    | typeof STEP_PREPARE
+    | typeof STEP_START
+    | typeof STEP_ACTIVE
+    | typeof STEP_ACTIVATED;
+
+export type MotionEvent = (TransitionEvent | AnimationEvent) & {
+    deadline?: boolean;
+};
+
+export type MotionPrepareEventHandler = (
+    element: HTMLElement
+) => Promise<any> | void;
+
+export type MotionEventHandler = (
+    element: HTMLElement,
+    event: MotionEvent
+) => React.CSSProperties | void;
+
+export type MotionEndEventHandler = (
+    element: HTMLElement,
+    event: MotionEvent
+) => boolean | void;
+
+export type MotionName =
+    | string
+    | {
+          appear?: string;
+          enter?: string;
+          leave?: string;
+          appearActive?: string;
+          enterActive?: string;
+          leaveActive?: string;
+      };
+
+export interface CSSMotionListProps
+    extends Omit<CSSMotionProps, 'onVisibleChanged'>,
+        Omit<React.HTMLAttributes<any>, 'children'> {
+    keys: (React.Key | { key: React.Key; [name: string]: any })[];
+    component?: string | React.ComponentType | false;
+
+    /** This will always trigger after final visible changed. Even if no motion configured. */
+    onVisibleChanged?: (visible: boolean, info: { key: React.Key }) => void;
+    /** All motion leaves in the screen */
+    onAllRemoved?: () => void;
+}
+
+export interface CSSMotionListState {
+    keyEntities: KeyObject[];
+}
+
+export interface CSSMotionProps {
+    motionName?: MotionName;
+    visible?: boolean;
+    motionAppear?: boolean;
+    motionEnter?: boolean;
+    motionLeave?: boolean;
+    motionLeaveImmediately?: boolean;
+    motionDeadline?: number;
+    /**
+     * Create element in view even the element is invisible.
+     * Will patch `display: none` style on it.
+     */
+    forceRender?: boolean;
+    /**
+     * Remove element when motion end. This will not work when `forceRender` is set.
+     */
+    removeOnLeave?: boolean;
+    leavedClassName?: string;
+    /** @private Used by CSSMotionList. */
+    eventProps?: object;
+
+    // Prepare groups
+    onAppearPrepare?: MotionPrepareEventHandler;
+    onEnterPrepare?: MotionPrepareEventHandler;
+    onLeavePrepare?: MotionPrepareEventHandler;
+
+    // Normal motion groups
+    onAppearStart?: MotionEventHandler;
+    onEnterStart?: MotionEventHandler;
+    onLeaveStart?: MotionEventHandler;
+
+    onAppearActive?: MotionEventHandler;
+    onEnterActive?: MotionEventHandler;
+    onLeaveActive?: MotionEventHandler;
+
+    onAppearEnd?: MotionEndEventHandler;
+    onEnterEnd?: MotionEndEventHandler;
+    onLeaveEnd?: MotionEndEventHandler;
+
+    // Special
+    /** This will always trigger after final visible changed. Even if no motion configured. */
+    onVisibleChanged?: (visible: boolean) => void;
+
+    internalRef?: React.Ref<any>;
+
+    children?: (
+        props: {
+            visible?: boolean;
+            classNames?: string;
+            style?: React.CSSProperties;
+            [key: string]: any;
+        },
+        ref: (node: any) => void
+    ) => React.ReactElement;
+}
+
+export interface CSSMotionState {
+    status?: MotionStatus;
+    statusActive?: boolean;
+    newStatus?: boolean;
+    statusStyle?: React.CSSProperties;
+    prevProps?: CSSMotionProps;
+}
diff --git a/src/components/Motion/CSSMotionList.tsx b/src/components/Motion/CSSMotionList.tsx
new file mode 100644
index 000000000..38cbcbcd4
--- /dev/null
+++ b/src/components/Motion/CSSMotionList.tsx
@@ -0,0 +1,144 @@
+import React from 'react';
+import OriginCSSMotion from './CSSMotion';
+import type { CSSMotionProps } from './CSSMotion.types';
+import {
+    MOTION_PROP_NAMES,
+    CSSMotionListProps,
+    CSSMotionListState,
+} from './CSSMotion.types';
+import {
+    STATUS_ADD,
+    STATUS_KEEP,
+    STATUS_REMOVE,
+    STATUS_REMOVED,
+    diffKeys,
+    parseKeys,
+} from './util/diff';
+
+/**
+ * Generate a CSSMotionList component with config
+ * @param CSSMotion CSSMotion component
+ */
+export function genCSSMotionList(
+    CSSMotion = OriginCSSMotion
+): React.ComponentClass<CSSMotionListProps> {
+    class CSSMotionList extends React.Component<
+        CSSMotionListProps,
+        CSSMotionListState
+    > {
+        static defaultProps = {
+            component: 'div',
+        };
+
+        state: CSSMotionListState = {
+            keyEntities: [],
+        };
+
+        static getDerivedStateFromProps(
+            { keys }: CSSMotionListProps,
+            { keyEntities }: CSSMotionListState
+        ) {
+            const parsedKeyObjects = parseKeys({ keys });
+            const mixedKeyEntities = diffKeys(keyEntities, parsedKeyObjects);
+
+            return {
+                keyEntities: mixedKeyEntities.filter((entity) => {
+                    const prevEntity = keyEntities.find(
+                        ({ key }) => entity.key === key
+                    );
+
+                    // Remove if already mark as removed
+                    if (
+                        prevEntity &&
+                        prevEntity.status === STATUS_REMOVED &&
+                        entity.status === STATUS_REMOVE
+                    ) {
+                        return false;
+                    }
+                    return true;
+                }),
+            };
+        }
+
+        removeKey = (removeKey: React.Key) => {
+            const { keyEntities } = this.state;
+            const nextKeyEntities = keyEntities.map((entity) => {
+                if (entity.key !== removeKey) return entity;
+                return {
+                    ...entity,
+                    status: STATUS_REMOVED,
+                };
+            });
+
+            this.setState({
+                keyEntities: nextKeyEntities,
+            });
+
+            return nextKeyEntities.filter(
+                ({ status }) => status !== STATUS_REMOVED
+            ).length;
+        };
+
+        render() {
+            const { keyEntities } = this.state;
+            const {
+                component,
+                children,
+                onVisibleChanged,
+                onAllRemoved,
+                ...rest
+            } = this.props;
+
+            const Component = component || React.Fragment;
+            const motionProps: CSSMotionProps = {};
+
+            MOTION_PROP_NAMES.forEach((prop) => {
+                (motionProps as any)[prop] = (rest as any)[prop];
+                delete (rest as any)[prop];
+            });
+
+            delete rest.keys;
+
+            return (
+                <Component {...rest}>
+                    {keyEntities.map(({ status, ...eventProps }) => {
+                        const visible =
+                            status === STATUS_ADD || status === STATUS_KEEP;
+                        return (
+                            <CSSMotion
+                                {...motionProps}
+                                key={eventProps.key}
+                                visible={visible}
+                                eventProps={eventProps}
+                                onVisibleChanged={(changedVisible: boolean) => {
+                                    onVisibleChanged?.(changedVisible, {
+                                        key: eventProps.key,
+                                    });
+
+                                    if (!changedVisible) {
+                                        const restKeysCount = this.removeKey(
+                                            eventProps.key
+                                        );
+
+                                        if (
+                                            restKeysCount === 0 &&
+                                            onAllRemoved
+                                        ) {
+                                            onAllRemoved();
+                                        }
+                                    }
+                                }}
+                            >
+                                {children}
+                            </CSSMotion>
+                        );
+                    })}
+                </Component>
+            );
+        }
+    }
+
+    return CSSMotionList;
+}
+
+export default genCSSMotionList();
diff --git a/src/components/Motion/hooks/useDomMotionEvents.ts b/src/components/Motion/hooks/useDomMotionEvents.ts
new file mode 100644
index 000000000..bde4f0d2f
--- /dev/null
+++ b/src/components/Motion/hooks/useDomMotionEvents.ts
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { animationEndName, transitionEndName } from '../util/motion';
+import type { MotionEvent } from '../CSSMotion.types';
+
+export const useDomMotionEvents = (
+    callback: (event: MotionEvent) => void
+): [(element: HTMLElement) => void, (element: HTMLElement) => void] => {
+    const cacheElementRef = useRef<HTMLElement>();
+
+    // Cache callback
+    const callbackRef = useRef(callback);
+    callbackRef.current = callback;
+
+    // Internal motion event handler
+    const onInternalMotionEnd = React.useCallback((event: MotionEvent) => {
+        callbackRef.current(event);
+    }, []);
+
+    // Remove events
+    function removeMotionEvents(element: HTMLElement) {
+        if (element) {
+            element.removeEventListener(transitionEndName, onInternalMotionEnd);
+            element.removeEventListener(animationEndName, onInternalMotionEnd);
+        }
+    }
+
+    // Patch events
+    function patchMotionEvents(element: HTMLElement) {
+        if (cacheElementRef.current && cacheElementRef.current !== element) {
+            removeMotionEvents(cacheElementRef.current);
+        }
+
+        if (element && element !== cacheElementRef.current) {
+            element.addEventListener(transitionEndName, onInternalMotionEnd);
+            element.addEventListener(animationEndName, onInternalMotionEnd);
+
+            // Save as cache in case dom removed trigger by `motionDeadline`
+            cacheElementRef.current = element;
+        }
+    }
+
+    // Clean up when removed
+    React.useEffect(
+        () => () => {
+            removeMotionEvents(cacheElementRef.current);
+        },
+        []
+    );
+
+    return [patchMotionEvents, removeMotionEvents];
+};
diff --git a/src/components/Motion/hooks/useNextFrame.ts b/src/components/Motion/hooks/useNextFrame.ts
new file mode 100644
index 000000000..1b508aa02
--- /dev/null
+++ b/src/components/Motion/hooks/useNextFrame.ts
@@ -0,0 +1,41 @@
+import React from 'react';
+import { requestAnimationFrameWrapper } from '../../../shared/utilities';
+
+export const useNextFrame = (): [
+    (callback: (info: { isCanceled: () => boolean }) => void) => void,
+    () => void
+] => {
+    const nextFrameRef = React.useRef<number>(null);
+
+    function cancelNextFrame() {
+        requestAnimationFrameWrapper.cancel(nextFrameRef.current);
+    }
+
+    function nextFrame(
+        callback: (info: { isCanceled: () => boolean }) => void,
+        delay = 2
+    ) {
+        cancelNextFrame();
+
+        const nextFrameId = requestAnimationFrameWrapper(() => {
+            if (delay <= 1) {
+                callback({
+                    isCanceled: () => nextFrameId !== nextFrameRef.current,
+                });
+            } else {
+                nextFrame(callback, delay - 1);
+            }
+        });
+
+        nextFrameRef.current = nextFrameId;
+    }
+
+    React.useEffect(
+        () => () => {
+            cancelNextFrame();
+        },
+        []
+    );
+
+    return [nextFrame, cancelNextFrame];
+};
diff --git a/src/components/Motion/hooks/useStatus.ts b/src/components/Motion/hooks/useStatus.ts
new file mode 100644
index 000000000..6b30fc23c
--- /dev/null
+++ b/src/components/Motion/hooks/useStatus.ts
@@ -0,0 +1,240 @@
+import React, { useRef, useEffect, useLayoutEffect } from 'react';
+import { useSafeState } from '../../../hooks/useState';
+import {
+    STATUS_APPEAR,
+    STATUS_NONE,
+    STATUS_LEAVE,
+    STATUS_ENTER,
+    STEP_PREPARE,
+    STEP_START,
+    STEP_ACTIVE,
+} from '../CSSMotion.types';
+import type {
+    CSSMotionProps,
+    MotionStatus,
+    MotionEventHandler,
+    MotionEvent,
+    MotionPrepareEventHandler,
+    StepStatus,
+} from '../CSSMotion.types';
+import { DoStep, SkipStep, isActive, useStepQueue } from './useStepQueue';
+import { useDomMotionEvents } from './useDomMotionEvents';
+
+export const useStatus = (
+    visible: boolean,
+    getElement: () => HTMLElement,
+    {
+        motionEnter = true,
+        motionAppear = true,
+        motionLeave = true,
+        motionDeadline,
+        motionLeaveImmediately,
+        onAppearPrepare,
+        onEnterPrepare,
+        onLeavePrepare,
+        onAppearStart,
+        onEnterStart,
+        onLeaveStart,
+        onAppearActive,
+        onEnterActive,
+        onLeaveActive,
+        onAppearEnd,
+        onEnterEnd,
+        onLeaveEnd,
+        onVisibleChanged,
+    }: CSSMotionProps
+): [MotionStatus, StepStatus, React.CSSProperties, boolean] => {
+    // Used for outer render usage to avoid `visible: false & status: none` to render nothing
+    const [asyncVisible, setAsyncVisible] = useSafeState<boolean>();
+    const [status, setStatus] = useSafeState<MotionStatus>(STATUS_NONE);
+    const [style, setStyle] = useSafeState<React.CSSProperties | undefined>(
+        null
+    );
+
+    const mountedRef = useRef(false);
+    const deadlineRef = useRef(null);
+
+    // =========================== Dom Node ===========================
+    function getDomElement() {
+        return getElement();
+    }
+
+    // ========================== Motion End ==========================
+    const activeRef = useRef(false);
+
+    function onInternalMotionEnd(event: MotionEvent) {
+        const element = getDomElement();
+        if (event && !event.deadline && event.target !== element) {
+            // event exists
+            // not initiated by deadline
+            // transitionEnd not fired by inner elements
+            return;
+        }
+
+        const currentActive = activeRef.current;
+
+        let canEnd: boolean | void;
+        if (status === STATUS_APPEAR && currentActive) {
+            canEnd = onAppearEnd?.(element, event);
+        } else if (status === STATUS_ENTER && currentActive) {
+            canEnd = onEnterEnd?.(element, event);
+        } else if (status === STATUS_LEAVE && currentActive) {
+            canEnd = onLeaveEnd?.(element, event);
+        }
+
+        // Only update status when `canEnd` and not destroyed
+        if (status !== STATUS_NONE && currentActive && canEnd !== false) {
+            setStatus(STATUS_NONE, true);
+            setStyle(null, true);
+        }
+    }
+
+    const [patchMotionEvents] = useDomMotionEvents(onInternalMotionEnd);
+
+    // ============================= Step =============================
+    const eventHandlers = React.useMemo<{
+        [STEP_PREPARE]?: MotionPrepareEventHandler;
+        [STEP_START]?: MotionEventHandler;
+        [STEP_ACTIVE]?: MotionEventHandler;
+    }>(() => {
+        switch (status) {
+            case STATUS_APPEAR:
+                return {
+                    [STEP_PREPARE]: onAppearPrepare,
+                    [STEP_START]: onAppearStart,
+                    [STEP_ACTIVE]: onAppearActive,
+                };
+
+            case STATUS_ENTER:
+                return {
+                    [STEP_PREPARE]: onEnterPrepare,
+                    [STEP_START]: onEnterStart,
+                    [STEP_ACTIVE]: onEnterActive,
+                };
+
+            case STATUS_LEAVE:
+                return {
+                    [STEP_PREPARE]: onLeavePrepare,
+                    [STEP_START]: onLeaveStart,
+                    [STEP_ACTIVE]: onLeaveActive,
+                };
+
+            default:
+                return {};
+        }
+    }, [status]);
+
+    const [startStep, step] = useStepQueue(status, (newStep) => {
+        // Only prepare step can be skip
+        if (newStep === STEP_PREPARE) {
+            const onPrepare = eventHandlers[STEP_PREPARE];
+            if (!onPrepare) {
+                return SkipStep;
+            }
+
+            return onPrepare(getDomElement());
+        }
+
+        // Rest step is sync update
+        if (step in eventHandlers) {
+            setStyle(
+                (eventHandlers as any)[step]?.(getDomElement(), null) || null
+            );
+        }
+
+        if (step === STEP_ACTIVE) {
+            // Patch events when motion needed
+            patchMotionEvents(getDomElement());
+
+            if (motionDeadline > 0) {
+                clearTimeout(deadlineRef.current);
+                deadlineRef.current = setTimeout(() => {
+                    onInternalMotionEnd({
+                        deadline: true,
+                    } as MotionEvent);
+                }, motionDeadline);
+            }
+        }
+
+        return DoStep;
+    });
+
+    const active = isActive(step);
+    activeRef.current = active;
+
+    // ============================ Status ============================
+    // Update with new status
+    useLayoutEffect(() => {
+        setAsyncVisible(visible);
+
+        const isMounted = mountedRef.current;
+        mountedRef.current = true;
+
+        let nextStatus: MotionStatus;
+
+        // Appear
+        if (!isMounted && visible && motionAppear) {
+            nextStatus = STATUS_APPEAR;
+        }
+
+        // Enter
+        if (isMounted && visible && motionEnter) {
+            nextStatus = STATUS_ENTER;
+        }
+
+        // Leave
+        if (
+            (isMounted && !visible && motionLeave) ||
+            (!isMounted && motionLeaveImmediately && !visible && motionLeave)
+        ) {
+            nextStatus = STATUS_LEAVE;
+        }
+
+        // Update to next status
+        if (nextStatus) {
+            setStatus(nextStatus);
+            startStep();
+        }
+    }, [visible]);
+
+    // ============================ Effect ============================
+    // Reset when motion changed
+    useEffect(() => {
+        if (
+            // Cancel appear
+            (status === STATUS_APPEAR && !motionAppear) ||
+            // Cancel enter
+            (status === STATUS_ENTER && !motionEnter) ||
+            // Cancel leave
+            (status === STATUS_LEAVE && !motionLeave)
+        ) {
+            setStatus(STATUS_NONE);
+        }
+    }, [motionAppear, motionEnter, motionLeave]);
+
+    useEffect(
+        () => () => {
+            mountedRef.current = false;
+            clearTimeout(deadlineRef.current);
+        },
+        []
+    );
+
+    // Trigger `onVisibleChanged`
+    useEffect(() => {
+        if (asyncVisible !== undefined && status === STATUS_NONE) {
+            onVisibleChanged?.(asyncVisible);
+        }
+    }, [asyncVisible, status]);
+
+    // ============================ Styles ============================
+    let mergedStyle = style;
+    if (eventHandlers[STEP_PREPARE] && step === STEP_START) {
+        mergedStyle = {
+            transition: 'none',
+            ...mergedStyle,
+        };
+    }
+
+    return [status, step, mergedStyle, asyncVisible ?? visible];
+};
diff --git a/src/components/Motion/hooks/useStepQueue.ts b/src/components/Motion/hooks/useStepQueue.ts
new file mode 100644
index 000000000..9a215ca25
--- /dev/null
+++ b/src/components/Motion/hooks/useStepQueue.ts
@@ -0,0 +1,82 @@
+import React, { useLayoutEffect } from 'react';
+import { useSafeState } from '../../../hooks/useState';
+import type { StepStatus, MotionStatus } from '../CSSMotion.types';
+import {
+    STEP_PREPARE,
+    STEP_ACTIVE,
+    STEP_START,
+    STEP_ACTIVATED,
+    STEP_NONE,
+} from '../CSSMotion.types';
+import { useNextFrame } from './useNextFrame';
+
+const STEP_QUEUE: StepStatus[] = [
+    STEP_PREPARE,
+    STEP_START,
+    STEP_ACTIVE,
+    STEP_ACTIVATED,
+];
+
+/** Skip current step */
+export const SkipStep = false as const;
+/** Current step should be update in */
+export const DoStep = true as const;
+
+export function isActive(step: StepStatus) {
+    return step === STEP_ACTIVE || step === STEP_ACTIVATED;
+}
+
+export const useStepQueue = (
+    status: MotionStatus,
+    callback: (
+        step: StepStatus
+    ) => Promise<void> | void | typeof SkipStep | typeof DoStep
+): [() => void, StepStatus] => {
+    const [step, setStep] = useSafeState<StepStatus>(STEP_NONE);
+
+    const [nextFrame, cancelNextFrame] = useNextFrame();
+
+    function startQueue() {
+        setStep(STEP_PREPARE, true);
+    }
+
+    useLayoutEffect(() => {
+        if (step !== STEP_NONE && step !== STEP_ACTIVATED) {
+            const index = STEP_QUEUE.indexOf(step);
+            const nextStep = STEP_QUEUE[index + 1];
+
+            const result = callback(step);
+
+            if (result === SkipStep) {
+                // Skip when no needed
+                setStep(nextStep, true);
+            } else {
+                // Do as frame for step update
+                nextFrame((info) => {
+                    function doNext() {
+                        // Skip since current queue is ood
+                        if (info.isCanceled()) return;
+
+                        setStep(nextStep, true);
+                    }
+
+                    if (result === true) {
+                        doNext();
+                    } else {
+                        // Only promise should be async
+                        Promise.resolve(result).then(doNext);
+                    }
+                });
+            }
+        }
+    }, [status, step]);
+
+    React.useEffect(
+        () => () => {
+            cancelNextFrame();
+        },
+        []
+    );
+
+    return [startQueue, step];
+};
diff --git a/src/components/Motion/index.tsx b/src/components/Motion/index.tsx
new file mode 100644
index 000000000..ab4f264d4
--- /dev/null
+++ b/src/components/Motion/index.tsx
@@ -0,0 +1,18 @@
+import CSSMotion from './CSSMotion';
+import CSSMotionList from './CSSMotionList';
+import {
+    CSSMotionProps,
+    CSSMotionListProps,
+    MotionEventHandler,
+    MotionEndEventHandler,
+} from './CSSMotion.types';
+
+export {
+    CSSMotionProps,
+    CSSMotionList,
+    CSSMotionListProps,
+    MotionEventHandler,
+    MotionEndEventHandler,
+};
+
+export default CSSMotion;
diff --git a/src/components/Motion/tests/CSSMotion.test.tsx b/src/components/Motion/tests/CSSMotion.test.tsx
new file mode 100644
index 000000000..f7c2e383e
--- /dev/null
+++ b/src/components/Motion/tests/CSSMotion.test.tsx
@@ -0,0 +1,219 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { mergeClasses } from '../../../shared/utilities';
+import { render, fireEvent } from '@testing-library/react';
+import type { CSSMotionProps } from '../CSSMotion.types';
+import RefCSSMotion, { genCSSMotion } from '../CSSMotion';
+import ReactDOM from 'react-dom';
+
+describe('CSSMotion', () => {
+    const CSSMotion = genCSSMotion();
+
+    beforeEach(() => {
+        jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+        jest.clearAllTimers();
+        jest.useRealTimers();
+    });
+
+    describe('animation', () => {
+        const actionList = [
+            {
+                name: 'appear',
+                props: { motionAppear: true },
+                visibleQueue: [true],
+            },
+            {
+                name: 'enter',
+                props: { motionEnter: true },
+                visibleQueue: [false, true],
+            },
+            {
+                name: 'leave',
+                props: { motionLeave: true },
+                visibleQueue: [true, false],
+            },
+        ];
+    });
+
+    it('forwardRef', () => {
+        const domRef = React.createRef();
+        render(
+            <RefCSSMotion motionName="transition" ref={domRef}>
+                {({ style, className }, ref) => (
+                    <div
+                        ref={ref}
+                        style={style}
+                        className={mergeClasses(['motion-box', className])}
+                    />
+                )}
+            </RefCSSMotion>
+        );
+
+        expect(domRef.current instanceof HTMLElement).toBeTruthy();
+    });
+
+    it("onMotionEnd shouldn't be fired by inner element", () => {
+        const onLeaveEnd = jest.fn();
+
+        const genMotion = (props?: CSSMotionProps) => (
+            <CSSMotion
+                visible
+                motionName="bamboo"
+                onLeaveEnd={onLeaveEnd}
+                removeOnLeave={false}
+                {...props}
+            >
+                {(_, ref) => (
+                    <div className="outer-block" ref={ref}>
+                        <div className="inner-block" />
+                    </div>
+                )}
+            </CSSMotion>
+        );
+        const { container, rerender } = render(genMotion());
+
+        function resetLeave() {
+            rerender(genMotion({ visible: true }));
+            act(() => {
+                jest.runAllTimers();
+            });
+
+            rerender(genMotion({ visible: false }));
+            act(() => {
+                jest.runAllTimers();
+            });
+        }
+
+        // Outer
+        resetLeave();
+        fireEvent.transitionEnd(container.querySelector('.outer-block'));
+        expect(onLeaveEnd).toHaveBeenCalledTimes(1);
+
+        // Outer
+        resetLeave();
+        fireEvent.transitionEnd(container.querySelector('.outer-block'));
+        expect(onLeaveEnd).toHaveBeenCalledTimes(2);
+
+        // Inner
+        resetLeave();
+        fireEvent.transitionEnd(container.querySelector('.inner-block'));
+        expect(onLeaveEnd).toHaveBeenCalledTimes(2);
+    });
+
+    it('switch dom should work', () => {
+        const onLeaveEnd = jest.fn();
+
+        const genMotion = (Component: any, visible: boolean) => (
+            <CSSMotion
+                visible={visible}
+                onLeaveEnd={onLeaveEnd}
+                motionDeadline={233}
+                motionName="bamboo"
+            >
+                {({ style, classNames }) => (
+                    <Component
+                        style={style}
+                        className={mergeClasses(['motion-box', classNames])}
+                    />
+                )}
+            </CSSMotion>
+        );
+
+        const { rerender } = render(genMotion('div', true));
+
+        // Active
+        act(() => {
+            jest.runAllTimers();
+        });
+
+        // Hide
+        rerender(genMotion('p', false));
+
+        // Active
+        act(() => {
+            jest.runAllTimers();
+        });
+
+        // Deadline
+        act(() => {
+            jest.runAllTimers();
+        });
+
+        expect(onLeaveEnd).toHaveBeenCalled();
+    });
+
+    describe('strict mode', () => {
+        beforeEach(() => {
+            jest.spyOn(ReactDOM, 'findDOMNode');
+        });
+
+        afterEach(() => {
+            jest.resetAllMocks();
+        });
+
+        it('calls findDOMNode when no refs are passed', () => {
+            const Div = () => <div />;
+            render(
+                <CSSMotion motionName="transition" visible>
+                    {() => <Div />}
+                </CSSMotion>
+            );
+
+            act(() => {
+                jest.runAllTimers();
+            });
+
+            expect(ReactDOM.findDOMNode).toHaveBeenCalled();
+        });
+
+        it('does not call findDOMNode when ref is passed internally', () => {
+            render(
+                <CSSMotion motionName="transition" visible>
+                    {(props, ref) => <div ref={ref} {...props} />}
+                </CSSMotion>
+            );
+
+            act(() => {
+                jest.runAllTimers();
+            });
+
+            expect(ReactDOM.findDOMNode).not.toHaveBeenCalled();
+        });
+
+        it('calls findDOMNode when refs are forwarded but not assigned', () => {
+            const domRef = React.createRef();
+            const Div = () => <div />;
+
+            render(
+                <CSSMotion motionName="transition" visible ref={domRef}>
+                    {() => <Div />}
+                </CSSMotion>
+            );
+
+            act(() => {
+                jest.runAllTimers();
+            });
+
+            expect(ReactDOM.findDOMNode).toHaveBeenCalled();
+        });
+
+        it('does not call findDOMNode when refs are forwarded and assigned', () => {
+            const domRef = React.createRef();
+
+            render(
+                <CSSMotion motionName="transition" visible ref={domRef}>
+                    {(props, ref) => <div ref={ref} {...props} />}
+                </CSSMotion>
+            );
+
+            act(() => {
+                jest.runAllTimers();
+            });
+
+            expect(ReactDOM.findDOMNode).not.toHaveBeenCalled();
+        });
+    });
+});
diff --git a/src/components/Motion/tests/CSSMotionList.test.tsx b/src/components/Motion/tests/CSSMotionList.test.tsx
new file mode 100644
index 000000000..b77732ec9
--- /dev/null
+++ b/src/components/Motion/tests/CSSMotionList.test.tsx
@@ -0,0 +1,176 @@
+import React from 'react';
+import { mergeClasses } from '../../../shared/utilities';
+import { act } from 'react-dom/test-utils';
+import { render, fireEvent } from '@testing-library/react';
+import { genCSSMotionList } from '../CSSMotionList';
+import type { CSSMotionListProps } from '../CSSMotion.types';
+import { genCSSMotion } from '../CSSMotion';
+
+describe('CSSMotionList', () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+
+    describe('diff should work', () => {
+        function testMotion(
+            CSSMotionList: React.ComponentType<CSSMotionListProps>,
+            injectLeave?: (wrapper: HTMLElement) => void
+        ) {
+            let leaveCalled = 0;
+            function onLeaveEnd() {
+                leaveCalled += 1;
+            }
+
+            const Demo = ({ keys }: { keys: string[] }) => (
+                <CSSMotionList
+                    motionName="transition"
+                    keys={keys}
+                    onLeaveEnd={onLeaveEnd}
+                >
+                    {({ key, style, classNames }) => (
+                        <div
+                            key={key}
+                            style={style}
+                            className={mergeClasses(['motion-box', classNames])}
+                        >
+                            {key}
+                        </div>
+                    )}
+                </CSSMotionList>
+            );
+
+            const { container, rerender } = render(<Demo keys={['a', 'b']} />);
+
+            function checkKeys(targetKeys: React.Key[]) {
+                const nodeList = Array.from(
+                    container.querySelectorAll<HTMLDivElement>('.motion-box')
+                );
+                const keys = nodeList.map((node) => node.textContent);
+                expect(keys).toEqual(targetKeys);
+            }
+
+            checkKeys(['a', 'b']);
+
+            // Change to ['c', 'd']
+            act(() => {
+                jest.runAllTimers();
+            });
+
+            rerender(<Demo keys={['c', 'd']} />);
+            act(() => {
+                jest.runAllTimers();
+            });
+
+            // Inject leave event
+            if (injectLeave) {
+                act(() => {
+                    injectLeave(container);
+                });
+            }
+
+            act(() => {
+                jest.runAllTimers();
+            });
+            checkKeys(['c', 'd']);
+
+            if (injectLeave) {
+                expect(leaveCalled).toEqual(2);
+            }
+        }
+
+        it('motion', () => {
+            const CSSMotion = genCSSMotion();
+            const CSSMotionList = genCSSMotionList(CSSMotion);
+            testMotion(CSSMotionList, (container) => {
+                const nodeList = Array.from(
+                    container.querySelectorAll('.motion-box')
+                );
+                nodeList.slice(0, 2).forEach((node) => {
+                    fireEvent.transitionEnd(node);
+                });
+            });
+        });
+    });
+
+    it('onVisibleChanged true', () => {
+        const onVisibleChanged = jest.fn();
+        const onAllRemoved = jest.fn();
+        const CSSMotionList = genCSSMotionList();
+
+        const Demo = ({
+            keys,
+            visible,
+        }: {
+            keys: string[];
+            visible: boolean;
+        }) => (
+            <CSSMotionList
+                motionName="transition"
+                keys={keys}
+                onVisibleChanged={onVisibleChanged(visible, { key: keys[0] })}
+                onAllRemoved={onAllRemoved}
+            >
+                {({ key, style, classNames }) => (
+                    <div
+                        key={key}
+                        style={style}
+                        className={mergeClasses(['motion-box', classNames])}
+                    >
+                        {key}
+                    </div>
+                )}
+            </CSSMotionList>
+        );
+
+        render(<Demo keys={['a']} visible={true} />);
+
+        act(() => {
+            jest.runAllTimers();
+        });
+
+        expect(onVisibleChanged).toHaveBeenCalledWith(true, { key: 'a' });
+    });
+
+    it('onVisibleChanged false', () => {
+        const onVisibleChanged = jest.fn();
+        const onAllRemoved = jest.fn();
+        const CSSMotionList = genCSSMotionList();
+
+        const Demo = ({
+            keys,
+            visible,
+        }: {
+            keys: string[];
+            visible: boolean;
+        }) => (
+            <CSSMotionList
+                motionName="transition"
+                keys={keys}
+                onVisibleChanged={onVisibleChanged(visible, { key: keys[0] })}
+                onAllRemoved={onAllRemoved}
+            >
+                {({ key, style, classNames }) => (
+                    <div
+                        key={key}
+                        style={style}
+                        className={mergeClasses(['motion-box', classNames])}
+                    >
+                        {key}
+                    </div>
+                )}
+            </CSSMotionList>
+        );
+
+        render(<Demo keys={['a']} visible={false} />);
+
+        act(() => {
+            jest.runAllTimers();
+        });
+
+        expect(onVisibleChanged).toHaveBeenCalledWith(false, { key: 'a' });
+    });
+});
diff --git a/src/components/Motion/tests/util.test.tsx b/src/components/Motion/tests/util.test.tsx
new file mode 100644
index 000000000..5f6820165
--- /dev/null
+++ b/src/components/Motion/tests/util.test.tsx
@@ -0,0 +1,44 @@
+import { getTransitionName } from '../util/motion';
+import { diffKeys } from '../util/diff';
+
+describe('Util', () => {
+    it('getTransitionName', () => {
+        // Null
+        expect(getTransitionName(null, null)).toBeFalsy();
+
+        // Object
+        expect(
+            getTransitionName(
+                {
+                    appearActive: 'light',
+                },
+                'appear-active'
+            )
+        ).toEqual('light');
+
+        expect(
+            getTransitionName(
+                {
+                    appearActive: 'light',
+                },
+                'appear'
+            )
+        ).toBeFalsy();
+
+        // string
+        expect(getTransitionName('light', 'enter-active')).toEqual(
+            'light-enter-active'
+        );
+    });
+
+    it('diffKeys', () => {
+        // Deduplicate key when move:
+        // [1 - add, 2 - keep, 1 - remove] -> [1 - keep, 2 - keep]
+        expect(
+            diffKeys([{ key: 1 }, { key: 2 }], [{ key: 2 }, { key: 1 }])
+        ).toEqual([
+            { key: '2', status: 'keep' },
+            { key: '1', status: 'keep' },
+        ]);
+    });
+});
diff --git a/src/components/Motion/util/diff.ts b/src/components/Motion/util/diff.ts
new file mode 100644
index 000000000..98e9bed08
--- /dev/null
+++ b/src/components/Motion/util/diff.ts
@@ -0,0 +1,115 @@
+export const STATUS_ADD = 'add' as const;
+export const STATUS_KEEP = 'keep' as const;
+export const STATUS_REMOVE = 'remove' as const;
+export const STATUS_REMOVED = 'removed' as const;
+export type DiffStatus =
+    | typeof STATUS_ADD
+    | typeof STATUS_KEEP
+    | typeof STATUS_REMOVE
+    | typeof STATUS_REMOVED;
+
+export interface KeyObject {
+    key: React.Key;
+    status?: DiffStatus;
+}
+
+export function wrapKeyToObject(key: React.Key) {
+    let keyObj: KeyObject;
+    if (key && typeof key === 'object' && 'key' in key) {
+        keyObj = key;
+    } else {
+        keyObj = { key };
+    }
+    return {
+        ...keyObj,
+        key: String(keyObj.key),
+    };
+}
+
+export function parseKeys({ keys = [] }: { keys?: any[] } = {}) {
+    return keys.map(wrapKeyToObject);
+}
+
+export function diffKeys(
+    prevKeys: KeyObject[] = [],
+    currentKeys: KeyObject[] = []
+) {
+    let list: KeyObject[] = [];
+    let currentIndex = 0;
+    const currentLen = currentKeys.length;
+
+    const prevKeyObjects = parseKeys({ keys: prevKeys });
+    const currentKeyObjects = parseKeys({ keys: currentKeys });
+
+    // Check prev keys to insert or keep
+    prevKeyObjects.forEach((keyObj) => {
+        let hit = false;
+
+        for (let i = currentIndex; i < currentLen; i += 1) {
+            const currentKeyObj = currentKeyObjects[i];
+            if (currentKeyObj.key === keyObj.key) {
+                // New added keys should add before current key
+                if (currentIndex < i) {
+                    list = list.concat(
+                        currentKeyObjects
+                            .slice(currentIndex, i)
+                            .map((obj) => ({ ...obj, status: STATUS_ADD }))
+                    );
+                    currentIndex = i;
+                }
+                list.push({
+                    ...currentKeyObj,
+                    status: STATUS_KEEP,
+                });
+                currentIndex += 1;
+
+                hit = true;
+                break;
+            }
+        }
+
+        // If not hit, it means key is removed
+        if (!hit) {
+            list.push({
+                ...keyObj,
+                status: STATUS_REMOVE,
+            });
+        }
+    });
+
+    // Add rest to the list
+    if (currentIndex < currentLen) {
+        list = list.concat(
+            currentKeyObjects
+                .slice(currentIndex)
+                .map((obj) => ({ ...obj, status: STATUS_ADD }))
+        );
+    }
+
+    /**
+     * Merge same key when it remove and add again:
+     *    [1 - add, 2 - keep, 1 - remove] -> [1 - keep, 2 - keep]
+     */
+    const keys = {};
+    list.forEach(({ key }) => {
+        (keys as any)[key] = ((keys as any)[key] || 0) + 1;
+    });
+    const duplicatedKeys = Object.keys(keys).filter(
+        (key) => (keys as any)[key] > 1
+    );
+    duplicatedKeys.forEach((matchKey) => {
+        // Remove `STATUS_REMOVE` node.
+        list = list.filter(
+            ({ key, status }) => key !== matchKey || status !== STATUS_REMOVE
+        );
+
+        // Update `STATUS_ADD` to `STATUS_KEEP`
+        list.forEach((node) => {
+            if (node.key === matchKey) {
+                node.status = STATUS_KEEP;
+            }
+        });
+    });
+
+    return list;
+}
diff --git a/src/components/Motion/util/easings.test.tsx b/src/components/Motion/util/easings.test.tsx
new file mode 100644
index 000000000..f028ffa93
--- /dev/null
+++ b/src/components/Motion/util/easings.test.tsx
@@ -0,0 +1,12 @@
+import { easeInOutCubic } from './easings';
+
+describe('Test easings', () => {
+    it('easeInOutCubic return value', () => {
+        const nums = [];
+        for (let index = 0; index < 5; index++) {
+            nums.push(easeInOutCubic(index, 1, 5, 4));
+        }
+
+        expect(nums).toEqual([1, 1.25, 3, 4.75, 5]);
+    });
+});
diff --git a/src/components/Motion/util/easings.ts b/src/components/Motion/util/easings.ts
new file mode 100644
index 000000000..3c6cb1044
--- /dev/null
+++ b/src/components/Motion/util/easings.ts
@@ -0,0 +1,13 @@
+export const easeInOutCubic = (
+    t: number,
+    b: number,
+    c: number,
+    d: number
+): number => {
+    const cc = c - b;
+    t /= d / 2;
+    if (t < 1) {
+        return (cc / 2) * t * t * t + b;
+    }
+    return (cc / 2) * ((t -= 2) * t * t + 2) + b;
+};
diff --git a/src/components/Motion/util/motion.ts b/src/components/Motion/util/motion.ts
new file mode 100644
index 000000000..d03d353ce
--- /dev/null
+++ b/src/components/Motion/util/motion.ts
@@ -0,0 +1,98 @@
+import { canUseDom } from '../../../shared/utilities';
+import { MotionName } from '../CSSMotion.types';
+
+// ================= Transition =================
+// Event wrapper. Copy from react source code
+function makePrefixMap(styleProp: string, eventName: string) {
+    const prefixes: Record<string, string> = {};
+
+    prefixes[styleProp.toLowerCase()] = eventName.toLowerCase();
+    prefixes[`Webkit${styleProp}`] = `webkit${eventName}`;
+    prefixes[`Moz${styleProp}`] = `moz${eventName}`;
+    prefixes[`ms${styleProp}`] = `MS${eventName}`;
+    prefixes[`O${styleProp}`] = `o${eventName.toLowerCase()}`;
+
+    return prefixes;
+}
+
+export function getVendorPrefixes(domSupport: boolean, win: object) {
+    const prefixes: {
+        animationend: Record<string, string>;
+        transitionend: Record<string, string>;
+    } = {
+        animationend: makePrefixMap('Animation', 'AnimationEnd'),
+        transitionend: makePrefixMap('Transition', 'TransitionEnd'),
+    };
+
+    if (domSupport) {
+        if (!('AnimationEvent' in win)) {
+            delete prefixes.animationend.animation;
+        }
+
+        if (!('TransitionEvent' in win)) {
+            delete prefixes.transitionend.transition;
+        }
+    }
+
+    return prefixes;
+}
+
+const vendorPrefixes = getVendorPrefixes(
+    canUseDom(),
+    typeof window !== 'undefined' ? window : {}
+);
+
+let style = {};
+
+if (canUseDom()) {
+    ({ style } = document.createElement('div'));
+}
+
+const prefixedEventNames = {};
+
+export function getVendorPrefixedEventName(eventName: string) {
+    if ((prefixedEventNames as any)[eventName]) {
+        return (prefixedEventNames as any)[eventName];
+    }
+
+    const prefixMap = (vendorPrefixes as any)[eventName];
+
+    if (prefixMap) {
+        const stylePropList = Object.keys(prefixMap);
+        const len = stylePropList.length;
+        for (let i = 0; i < len; i += 1) {
+            const styleProp = stylePropList[i];
+            if (
+                Object.prototype.hasOwnProperty.call(prefixMap, styleProp) &&
+                styleProp in style
+            ) {
+                (prefixedEventNames as any)[eventName] = prefixMap[styleProp];
+                return (prefixedEventNames as any)[eventName];
+            }
+        }
+    }
+
+    return '';
+}
+
+const internalAnimationEndName = getVendorPrefixedEventName('animationend');
+const internalTransitionEndName = getVendorPrefixedEventName('transitionend');
+
+export const animationEndName = internalAnimationEndName || 'animationend';
+export const transitionEndName = internalTransitionEndName || 'transitionend';
+
+export function getTransitionName(
+    transitionName: MotionName,
+    transitionType: string
+) {
+    if (!transitionName) return null;
+
+    if (typeof transitionName === 'object') {
+        const type = transitionType.replace(/-\w/g, (match) =>
+            match[1].toUpperCase()
+        );
+        return (transitionName as any)[type];
+    }
+
+    return `${transitionName}-${transitionType}`;
+}
diff --git a/src/components/Table/ExpandIcon.tsx b/src/components/Table/ExpandIcon.tsx
new file mode 100644
index 000000000..c17d0f902
--- /dev/null
+++ b/src/components/Table/ExpandIcon.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { mergeClasses } from '../../shared/utilities';
+
+import styles from './Styles/table.module.scss';
+
+interface DefaultExpandIconProps<RecordType> {
+    onExpand: (record: RecordType, e: React.MouseEvent<HTMLElement>) => void;
+    record: RecordType;
+    expanded: boolean;
+    expandable: boolean;
+}
+
+function renderExpandIcon(collapseText: string, expandText: string) {
+    return function expandIcon<RecordType>({
+        onExpand,
+        record,
+        expanded,
+        expandable,
+    }: DefaultExpandIconProps<RecordType>) {
+        return (
+            <button
+                type="button"
+                onClick={(e) => {
+                    onExpand(record, e!);
+                    e.stopPropagation();
+                }}
+                className={mergeClasses([
+                    styles.tableRowExpandIcon,
+                    { [styles.tableRowExpandIconSpaced]: !expandable },
+                    { [styles.tableExpandedRow]: expandable && expanded },
+                    {
+                        [styles.tableRowExpandIconCollapsed]:
+                            expandable && !expanded,
+                    },
+                ])}
+                aria-label={expanded ? collapseText : expandText}
+            />
+        );
+    };
+}
+
+export default renderExpandIcon;
diff --git a/src/components/Table/Hooks/useFilter/FilterDropdown.tsx b/src/components/Table/Hooks/useFilter/FilterDropdown.tsx
new file mode 100644
index 000000000..4f951aad9
--- /dev/null
+++ b/src/components/Table/Hooks/useFilter/FilterDropdown.tsx
@@ -0,0 +1,502 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { mergeClasses } from '../../../../shared/utilities';
+import { isEqual } from '@ngard/tiny-isequal';
+import {
+    ButtonSize,
+    DefaultButton,
+    NeutralButton,
+    PrimaryButton,
+} from '../../../Button';
+import { Menu } from '../../../Menu';
+import type { MenuProps } from '../../../Menu';
+import Tree from '../../../Tree';
+import type { DataNode, EventDataNode } from '../../../Tree';
+import { CheckBox, RadioButton } from '../../../Selectors';
+import { Dropdown } from '../../../Dropdown';
+import { Empty } from '../../../Empty';
+import type {
+    ColumnType,
+    ColumnFilterItem,
+    Key,
+    GetPopupContainer,
+    FilterSearchType,
+} from '../../Table.types';
+import FilterDropdownMenuWrapper from './FilterWrapper';
+import FilterSearch from './FilterSearch';
+import type { FilterState } from './index';
+import { flattenKeys } from './index';
+import { useSyncState } from '../../../../hooks/useSyncState';
+import { IconName, IconSize } from '../../../Icon';
+import { useCanvasDirection } from '../../../../hooks/useCanvasDirection';
+
+import styles from '../../Styles/table.module.scss';
+
+interface FilterRestProps {
+    confirm?: Boolean;
+    closeDropdown?: Boolean;
+}
+
+function hasSubMenu(filters: ColumnFilterItem[]) {
+    return filters.some(({ children }) => children);
+}
+
+function searchValueMatched(searchValue: string, text: React.ReactNode) {
+    if (typeof text === 'string' || typeof text === 'number') {
+        return text
+            ?.toString()
+            .toLowerCase()
+            .includes(searchValue.trim().toLowerCase());
+    }
+    return false;
+}
+
+function renderFilterItems({
+    filters,
+    filteredKeys,
+    filterMultiple,
+    searchValue,
+    filterSearch,
+}: {
+    filters: ColumnFilterItem[];
+    filteredKeys: Key[];
+    filterMultiple: boolean;
+    searchValue: string;
+    filterSearch: FilterSearchType;
+}): Required<MenuProps>['items'] {
+    return filters.map((filter, index: number) => {
+        const key = String(filter.value);
+
+        if (filter.children) {
+            return {
+                key: key || index,
+                value: filter.text,
+                popupClassName: styles.tableFilterDropdownSubmenu,
+                children: renderFilterItems({
+                    filters: filter.children,
+                    filteredKeys,
+                    filterMultiple,
+                    searchValue,
+                    filterSearch,
+                }),
+            };
+        }
+
+        const Component = filterMultiple ? CheckBox : RadioButton;
+
+        const item = {
+            key: filter.value !== undefined ? key : index,
+            value: (
+                <>
+                    <Component checked={filteredKeys.includes(key)} />
+                    <span>{filter.text}</span>
+                </>
+            ),
+        };
+        if (searchValue.trim()) {
+            if (typeof filterSearch === 'function') {
+                return filterSearch(searchValue, filter) ? item : null;
+            }
+            return searchValueMatched(searchValue, filter.text) ? item : null;
+        }
+        return item;
+    });
+}
+
+export interface FilterDropdownProps<RecordType> {
+    column: ColumnType<RecordType>;
+    filterCheckallText: string;
+    filterConfirmText: string;
+    filterEmptyText: string;
+    filterResetText: string;
+    filterState?: FilterState<RecordType>;
+    filterMultiple: boolean;
+    filterMode?: 'menu' | 'tree';
+    filterSearch?: FilterSearchType;
+    filterSearchPlaceholderText: string;
+    columnKey: Key;
+    children: React.ReactNode;
+    triggerFilter: (filterState: FilterState<RecordType>) => void;
+    getPopupContainer?: GetPopupContainer;
+    filterResetToDefaultFilteredValue?: boolean;
+}
+
+function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
+    const {
+        column,
+        columnKey,
+        filterCheckallText = 'Select all items',
+        filterConfirmText = 'OK',
+        filterEmptyText = 'No filters',
+        filterResetText = 'Reset',
+        filterMultiple,
+        filterMode = 'menu',
+        filterSearch = false,
+        filterSearchPlaceholderText = 'Search in filters',
+        filterState,
+        triggerFilter,
+        children,
+        getPopupContainer,
+    } = props;
+
+    const {
+        filterDropdownVisible,
+        onFilterDropdownVisibleChange,
+        filterResetToDefaultFilteredValue,
+        defaultFilteredValue,
+    } = column;
+    const [visible, setVisible] = useState(false);
+
+    const filtered: boolean = !!(
+        filterState &&
+        (filterState.filteredKeys?.length || filterState.forceFiltered)
+    );
+    const triggerVisible = (newVisible: boolean) => {
+        setVisible(newVisible);
+        onFilterDropdownVisibleChange?.(newVisible);
+    };
+
+    const mergedVisible =
+        typeof filterDropdownVisible === 'boolean'
+            ? filterDropdownVisible
+            : visible;
+
+    // ===================== Select Keys =====================
+    const propFilteredKeys = filterState?.filteredKeys;
+    const [getFilteredKeysSync, setFilteredKeysSync] = useSyncState(
+        propFilteredKeys || []
+    );
+
+    const onSelectKeys = ({ selectedKeys }: { selectedKeys: Key[] }) => {
+        setFilteredKeysSync(selectedKeys);
+    };
+
+    const onCheck = (
+        keys: Key[],
+        { node, checked }: { node: EventDataNode<DataNode>; checked: boolean }
+    ) => {
+        if (!filterMultiple) {
+            onSelectKeys({
+                selectedKeys: checked && node.key ? [node.key] : [],
+            });
+        } else {
+            onSelectKeys({ selectedKeys: keys as Key[] });
+        }
+    };
+
+    useEffect(() => {
+        if (!visible) {
+            return;
+        }
+        onSelectKeys({ selectedKeys: propFilteredKeys || [] });
+    }, [propFilteredKeys]);
+
+    // ====================== Open Keys ======================
+    // const [openKeys, setOpenKeys] = React.useState<string[]>([]);
+    const openRef = useRef<number>();
+    // const onOpenChange = (keys: string[]) => {
+    //   openRef.current = window.setTimeout(() => {
+    //     setOpenKeys(keys);
+    //   });
+    // };
+    const onMenuClick = () => {
+        window.clearTimeout(openRef.current);
+    };
+    useEffect(
+        () => () => {
+            window.clearTimeout(openRef.current);
+        },
+        []
+    );
+
+    // search in tree mode column filter
+    const [searchValue, setSearchValue] = useState('');
+    const onSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { value } = e.target;
+        setSearchValue(value);
+    };
+    // clear search value after close filter dropdown
+    useEffect(() => {
+        if (!visible) {
+            setSearchValue('');
+        }
+    }, [visible]);
+
+    // ======================= Submit ========================
+    const internalTriggerFilter = (keys: Key[] | undefined | null): any => {
+        const mergedKeys = keys && keys.length ? keys : null;
+        if (
+            mergedKeys === null &&
+            (!filterState || !filterState.filteredKeys)
+        ) {
+            return null;
+        }
+
+        if (isEqual(mergedKeys, filterState?.filteredKeys)) {
+            return null;
+        }
+
+        triggerFilter({
+            column,
+            key: columnKey,
+            filteredKeys: mergedKeys,
+        });
+    };
+
+    const onConfirm = () => {
+        triggerVisible(false);
+        internalTriggerFilter(getFilteredKeysSync());
+    };
+
+    const onReset = (
+        { confirm, closeDropdown }: FilterRestProps = {
+            confirm: false,
+            closeDropdown: false,
+        }
+    ) => {
+        if (confirm) {
+            internalTriggerFilter([]);
+        }
+        if (closeDropdown) {
+            triggerVisible(false);
+        }
+
+        setSearchValue('');
+
+        if (filterResetToDefaultFilteredValue) {
+            setFilteredKeysSync(
+                (defaultFilteredValue || []).map((key) => String(key))
+            );
+        } else {
+            setFilteredKeysSync([]);
+        }
+    };
+
+    const doFilter = ({ closeDropdown } = { closeDropdown: true }) => {
+        if (closeDropdown) {
+            triggerVisible(false);
+        }
+        internalTriggerFilter(getFilteredKeysSync());
+    };
+
+    const onVisibleChange = (newVisible: boolean) => {
+        if (newVisible && propFilteredKeys !== undefined) {
+            // Sync filteredKeys on appear in controlled mode (propFilteredKeys !== undefiend)
+            setFilteredKeysSync(propFilteredKeys || []);
+        }
+
+        triggerVisible(newVisible);
+
+        // Default will filter when closed
+        if (!newVisible && !column.filterDropdown) {
+            onConfirm();
+        }
+    };
+
+    // ======================== Style ========================
+    const dropdownMenuClass: string = mergeClasses([
+        { ['table-menu-without-submenu']: !hasSubMenu(column.filters || []) },
+    ]);
+
+    const onCheckAll = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.checked) {
+            const allFilterKeys = flattenKeys(column?.filters).map((key) =>
+                String(key)
+            );
+            setFilteredKeysSync(allFilterKeys);
+        } else {
+            setFilteredKeysSync([]);
+        }
+    };
+
+    const getTreeData = ({ filters }: { filters?: ColumnFilterItem[] }) =>
+        (filters || []).map((filter, index) => {
+            const key = String(filter.value);
+            const item: DataNode = {
+                title: filter.text,
+                key: filter.value !== undefined ? key : index,
+            };
+            if (filter.children) {
+                item.children = getTreeData({ filters: filter.children });
+            }
+            return item;
+        });
+
+    let dropdownContent: React.ReactNode;
+    if (typeof column.filterDropdown === 'function') {
+        dropdownContent = column.filterDropdown({
+            setSelectedKeys: (selectedKeys: Key[]) =>
+                onSelectKeys({ selectedKeys }),
+            selectedKeys: getFilteredKeysSync(),
+            confirm: doFilter,
+            clearFilters: onReset,
+            filters: column.filters,
+            visible: mergedVisible,
+        });
+    } else if (column.filterDropdown) {
+        dropdownContent = column.filterDropdown;
+    } else {
+        const selectedKeys = (getFilteredKeysSync() || []) as any;
+        const getFilterComponent = () => {
+            if ((column.filters || []).length === 0) {
+                return (
+                    <Empty
+                        description={filterEmptyText}
+                        imageStyle={{
+                            height: 24,
+                        }}
+                        style={{
+                            margin: 0,
+                            padding: '16px 0',
+                        }}
+                    />
+                );
+            }
+            if (filterMode === 'tree') {
+                return (
+                    <>
+                        <FilterSearch
+                            filterSearch={filterSearch}
+                            filterSearchPlaceholderText={
+                                filterSearchPlaceholderText
+                            }
+                            onChange={onSearch}
+                        />
+                        <div className={styles.tableFilterDropdownTree}>
+                            {filterMultiple ? (
+                                <CheckBox
+                                    checked={
+                                        selectedKeys.length ===
+                                        flattenKeys(column.filters).length
+                                    }
+                                    classNames={
+                                        styles.tableFilterDropdownCheckall
+                                    }
+                                    id={'filterCheckBox'}
+                                    onChange={onCheckAll}
+                                    label={filterCheckallText}
+                                />
+                            ) : null}
+                            <Tree
+                                checkable
+                                selectable={false}
+                                blockNode
+                                multiple={filterMultiple}
+                                checkStrictly={!filterMultiple}
+                                classNames={'table-menu'}
+                                onCheck={onCheck}
+                                checkedKeys={selectedKeys}
+                                selectedKeys={selectedKeys}
+                                showIcon={false}
+                                treeData={getTreeData({
+                                    filters: column.filters,
+                                })}
+                                autoExpandParent
+                                defaultExpandAll
+                                filterTreeNode={
+                                    searchValue.trim()
+                                        ? (node: EventDataNode<DataNode>) =>
+                                              searchValueMatched(
+                                                  searchValue,
+                                                  node.title
+                                              )
+                                        : undefined
+                                }
+                            />
+                        </div>
+                    </>
+                );
+            }
+            return (
+                <>
+                    <FilterSearch
+                        filterSearch={filterSearch}
+                        filterSearchPlaceholderText={
+                            filterSearchPlaceholderText
+                        }
+                        onChange={onSearch}
+                    />
+                    <Menu
+                        classNames={dropdownMenuClass}
+                        onClick={onMenuClick}
+                        onSelect={() => onSelectKeys}
+                        items={renderFilterItems({
+                            filters: column.filters || [],
+                            filterSearch,
+                            filteredKeys: getFilteredKeysSync(),
+                            filterMultiple,
+                            searchValue,
+                        })}
+                    />
+                </>
+            );
+        };
+
+        const getResetDisabled = () => {
+            if (filterResetToDefaultFilteredValue) {
+                return isEqual(
+                    (defaultFilteredValue || []).map((key) => String(key)),
+                    selectedKeys
+                );
+            }
+
+            return selectedKeys.length === 0;
+        };
+
+        dropdownContent = (
+            <>
+                {getFilterComponent()}
+                <div className={styles.tableFilterDropdownBtns}>
+                    <DefaultButton
+                        disabled={getResetDisabled()}
+                        onClick={() => onReset()}
+                        size={ButtonSize.Small}
+                        text={filterResetText}
+                    />
+                    <PrimaryButton
+                        onClick={onConfirm}
+                        size={ButtonSize.Small}
+                        text={filterConfirmText}
+                    />
+                </div>
+            </>
+        );
+    }
+
+    const menu = (
+        <FilterDropdownMenuWrapper classNames={styles.tableFilterDropdown}>
+            {dropdownContent}
+        </FilterDropdownMenuWrapper>
+    );
+
+    const htmlDir: string = useCanvasDirection();
+
+    return (
+        <div className={styles.tableFilterColumn}>
+            <span className={styles.tableColumnTitle}>{children}</span>
+            <Dropdown
+                overlay={menu}
+                trigger="click"
+                onVisibleChange={onVisibleChange}
+                placement={htmlDir === 'rtl' ? 'bottom-end' : 'bottom-start'}
+                positionStrategy="absolute"
+            >
+                <NeutralButton
+                    className={mergeClasses([
+                        styles.tableFilterTrigger,
+                        { [styles.active]: filtered },
+                    ])}
+                    iconProps={{
+                        path: IconName.mdiFilter,
+                        size: IconSize.Small,
+                    }}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                    }}
+                    size={ButtonSize.Small}
+                />
+            </Dropdown>
+        </div>
+    );
+}
+
+export default FilterDropdown;
diff --git a/src/components/Table/Hooks/useFilter/FilterSearch.tsx b/src/components/Table/Hooks/useFilter/FilterSearch.tsx
new file mode 100644
index 000000000..39f8006e4
--- /dev/null
+++ b/src/components/Table/Hooks/useFilter/FilterSearch.tsx
@@ -0,0 +1,36 @@
+import React, { FC } from 'react';
+import { TextInput } from '../../../Inputs';
+import { IconName } from '../../../Icon';
+import type { FilterSearchType } from '../../Table.types';
+
+import styles from '../../Styles/table.module.scss';
+
+interface FilterSearchProps {
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    filterSearch: FilterSearchType;
+    filterSearchPlaceholderText: string;
+}
+
+const FilterSearch: FC<FilterSearchProps> = ({
+    onChange,
+    filterSearch,
+    filterSearchPlaceholderText,
+}) => {
+    if (!filterSearch) {
+        return null;
+    }
+    return (
+        <div className={styles.tableFilterDropdownSearch}>
+            <TextInput
+                iconProps={{
+                    path: IconName.mdiMagnify,
+                }}
+                placeholder={filterSearchPlaceholderText}
+                onChange={onChange}
+                classNames={styles.tableFilterDropdownSearchInput}
+            />
+        </div>
+    );
+};
+
+export default FilterSearch;
diff --git a/src/components/Table/Hooks/useFilter/FilterWrapper.tsx b/src/components/Table/Hooks/useFilter/FilterWrapper.tsx
new file mode 100644
index 000000000..6c00a4175
--- /dev/null
+++ b/src/components/Table/Hooks/useFilter/FilterWrapper.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+export interface FilterDropdownMenuWrapperProps {
+    children?: React.ReactNode;
+    classNames?: string;
+}
+
+const FilterDropdownMenuWrapper = (props: FilterDropdownMenuWrapperProps) => (
+    <div className={props.classNames} onClick={(e) => e.stopPropagation()}>
+        {props.children}
+    </div>
+);
+
+export default FilterDropdownMenuWrapper;
diff --git a/src/components/Table/Hooks/useFilter/index.tsx b/src/components/Table/Hooks/useFilter/index.tsx
new file mode 100644
index 000000000..1d51be57b
--- /dev/null
+++ b/src/components/Table/Hooks/useFilter/index.tsx
@@ -0,0 +1,291 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import type {
+    TransformColumns,
+    ColumnsType,
+    ColumnType,
+    ColumnTitleProps,
+    Key,
+    FilterValue,
+    FilterKey,
+    GetPopupContainer,
+    ColumnFilterItem,
+} from '../../Table.types';
+import { getColumnPos, renderColumnTitle, getColumnKey } from '../../utlities';
+import FilterDropdown from './FilterDropdown';
+
+export interface FilterState<RecordType> {
+    column: ColumnType<RecordType>;
+    key: Key;
+    filteredKeys?: FilterKey;
+    forceFiltered?: boolean;
+}
+
+function collectFilterStates<RecordType>(
+    columns: ColumnsType<RecordType>,
+    init: boolean,
+    pos?: string
+): FilterState<RecordType>[] {
+    let filterStates: FilterState<RecordType>[] = [];
+
+    (columns || []).forEach((column, index) => {
+        const columnPos = getColumnPos(index, pos);
+
+        if (
+            column.filters ||
+            'filterDropdown' in column ||
+            'onFilter' in column
+        ) {
+            if ('filteredValue' in column) {
+                // Controlled
+                let filteredValues = column.filteredValue;
+                if (!('filterDropdown' in column)) {
+                    filteredValues =
+                        filteredValues?.map(String) ?? filteredValues;
+                }
+                filterStates.push({
+                    column,
+                    key: getColumnKey(column, columnPos),
+                    filteredKeys: filteredValues as FilterKey,
+                    forceFiltered: column.filtered,
+                });
+            } else {
+                // Uncontrolled
+                filterStates.push({
+                    column,
+                    key: getColumnKey(column, columnPos),
+                    filteredKeys: (init && column.defaultFilteredValue
+                        ? column.defaultFilteredValue!
+                        : undefined) as FilterKey,
+                    forceFiltered: column.filtered,
+                });
+            }
+        }
+
+        if ('children' in column) {
+            filterStates = [
+                ...filterStates,
+                ...collectFilterStates(column.children, init, columnPos),
+            ];
+        }
+    });
+
+    return filterStates;
+}
+
+function injectFilter<RecordType>(
+    columns: ColumnsType<RecordType>,
+    filterCheckallText: string,
+    filterConfirmText: string,
+    filterEmptyText: string,
+    filterResetText: string,
+    filterSearchPlaceholderText: string,
+    filterStates: FilterState<RecordType>[],
+    triggerFilter: (filterState: FilterState<RecordType>) => void,
+    getPopupContainer: GetPopupContainer | undefined,
+    pos?: string
+): ColumnsType<RecordType> {
+    return columns.map((column, index) => {
+        const columnPos = getColumnPos(index, pos);
+        const {
+            filterMultiple = true,
+            filterMode,
+            filterSearch,
+        } = column as ColumnType<RecordType>;
+
+        let newColumn: ColumnsType<RecordType>[number] = column;
+
+        if (newColumn.filters || newColumn.filterDropdown) {
+            const columnKey = getColumnKey(newColumn, columnPos);
+            const filterState = filterStates.find(
+                ({ key }) => columnKey === key
+            );
+
+            newColumn = {
+                ...newColumn,
+                title: (renderProps: ColumnTitleProps<RecordType>) => (
+                    <FilterDropdown
+                        column={newColumn}
+                        columnKey={columnKey}
+                        filterCheckallText={filterCheckallText}
+                        filterConfirmText={filterConfirmText}
+                        filterEmptyText={filterEmptyText}
+                        filterResetText={filterResetText}
+                        filterSearchPlaceholderText={
+                            filterSearchPlaceholderText
+                        }
+                        filterState={filterState}
+                        filterMultiple={filterMultiple}
+                        filterMode={filterMode}
+                        filterSearch={filterSearch}
+                        triggerFilter={triggerFilter}
+                        getPopupContainer={getPopupContainer}
+                    >
+                        {renderColumnTitle(column.title, renderProps)}
+                    </FilterDropdown>
+                ),
+            };
+        }
+
+        if ('children' in newColumn) {
+            newColumn = {
+                ...newColumn,
+                children: injectFilter(
+                    newColumn.children,
+                    filterCheckallText,
+                    filterConfirmText,
+                    filterEmptyText,
+                    filterResetText,
+                    filterSearchPlaceholderText,
+                    filterStates,
+                    triggerFilter,
+                    getPopupContainer,
+                    columnPos
+                ),
+            };
+        }
+
+        return newColumn;
+    });
+}
+
+export function flattenKeys(filters?: ColumnFilterItem[]) {
+    let keys: FilterValue = [];
+    (filters || []).forEach(({ value, children }) => {
+        keys.push(value);
+        if (children) {
+            keys = [...keys, ...flattenKeys(children)];
+        }
+    });
+    return keys;
+}
+
+function generateFilterInfo<RecordType>(
+    filterStates: FilterState<RecordType>[]
+) {
+    const currentFilters: Record<string, FilterValue | null> = {};
+
+    filterStates.forEach(({ key, filteredKeys, column }) => {
+        const { filters, filterDropdown } = column;
+        if (filterDropdown) {
+            currentFilters[key] = filteredKeys || null;
+        } else if (Array.isArray(filteredKeys)) {
+            const keys = flattenKeys(filters);
+            currentFilters[key] = keys.filter((originKey) =>
+                filteredKeys.includes(String(originKey))
+            );
+        } else {
+            currentFilters[key] = null;
+        }
+    });
+
+    return currentFilters;
+}
+
+export function getFilterData<RecordType>(
+    data: RecordType[],
+    filterStates: FilterState<RecordType>[]
+) {
+    return filterStates.reduce((currentData, filterState) => {
+        const {
+            column: { onFilter, filters },
+            filteredKeys,
+        } = filterState;
+        if (onFilter && filteredKeys && filteredKeys.length) {
+            return currentData.filter((record) =>
+                filteredKeys.some((key) => {
+                    const keys = flattenKeys(filters);
+                    const keyIndex = keys.findIndex(
+                        (k) => String(k) === String(key)
+                    );
+                    const realKey = keyIndex !== -1 ? keys[keyIndex] : key;
+                    return onFilter(realKey, record);
+                })
+            );
+        }
+        return currentData;
+    }, data);
+}
+
+interface FilterConfig<RecordType> {
+    mergedColumns: ColumnsType<RecordType>;
+    filterCheckallText: string;
+    filterConfirmText: string;
+    filterEmptyText: string;
+    filterResetText: string;
+    filterSearchPlaceholderText: string;
+    onFilterChange: (
+        filters: Record<string, FilterValue | null>,
+        filterStates: FilterState<RecordType>[]
+    ) => void;
+    getPopupContainer?: GetPopupContainer;
+}
+
+function useFilter<RecordType>({
+    mergedColumns,
+    filterCheckallText,
+    filterConfirmText,
+    filterEmptyText,
+    filterResetText,
+    filterSearchPlaceholderText,
+    onFilterChange,
+    getPopupContainer,
+}: FilterConfig<RecordType>): [
+    TransformColumns<RecordType>,
+    FilterState<RecordType>[],
+    () => Record<string, FilterValue | null>
+] {
+    const [filterStates, setFilterStates] = useState<FilterState<RecordType>[]>(
+        collectFilterStates(mergedColumns, true)
+    );
+
+    const mergedFilterStates = useMemo(() => {
+        const collectedStates = collectFilterStates(mergedColumns, false);
+        let filteredKeysIsAllNotControlled = true;
+        let filteredKeysIsAllControlled = true;
+        collectedStates.forEach(({ filteredKeys }) => {
+            if (filteredKeys !== undefined) {
+                filteredKeysIsAllNotControlled = false;
+            } else {
+                filteredKeysIsAllControlled = false;
+            }
+        });
+
+        // Return if not controlled
+        if (filteredKeysIsAllNotControlled) {
+            return filterStates;
+        }
+
+        return collectedStates;
+    }, [mergedColumns, filterStates]);
+
+    const getFilters = useCallback(
+        () => generateFilterInfo(mergedFilterStates),
+        [mergedFilterStates]
+    );
+
+    const triggerFilter = (filterState: FilterState<RecordType>) => {
+        const newFilterStates = mergedFilterStates.filter(
+            ({ key }) => key !== filterState.key
+        );
+        newFilterStates.push(filterState);
+        setFilterStates(newFilterStates);
+        onFilterChange(generateFilterInfo(newFilterStates), newFilterStates);
+    };
+
+    const transformColumns = (innerColumns: ColumnsType<RecordType>) =>
+        injectFilter(
+            innerColumns,
+            filterCheckallText,
+            filterConfirmText,
+            filterEmptyText,
+            filterResetText,
+            filterSearchPlaceholderText,
+            mergedFilterStates,
+            triggerFilter,
+            getPopupContainer
+        );
+
+    return [transformColumns, mergedFilterStates, getFilters];
+}
+
+export default useFilter;
diff --git a/src/components/Table/Hooks/useLazyKVMap.ts b/src/components/Table/Hooks/useLazyKVMap.ts
new file mode 100644
index 000000000..5007119ca
--- /dev/null
+++ b/src/components/Table/Hooks/useLazyKVMap.ts
@@ -0,0 +1,59 @@
+import { useRef } from 'react';
+import type { Key, GetRowKey } from '../Table.types';
+
+interface MapCache<RecordType> {
+    data?: readonly RecordType[];
+    childrenColumnName?: string;
+    kvMap?: Map<Key, RecordType>;
+    getRowKey?: Function;
+}
+
+export default function useLazyKVMap<RecordType>(
+    data: readonly RecordType[],
+    childrenColumnName: string,
+    getRowKey: GetRowKey<RecordType>
+) {
+    const mapCacheRef = useRef<MapCache<RecordType>>({});
+
+    function dig(
+        records: readonly RecordType[],
+        kvMap?: Map<Key, RecordType>
+    ): void {
+        records.forEach((record, index) => {
+            const rowKey = getRowKey(record, index);
+            kvMap?.set(rowKey, record);
+
+            if (
+                record &&
+                typeof record === 'object' &&
+                childrenColumnName in record
+            ) {
+                dig((record as any)[childrenColumnName] || []);
+            }
+        });
+    }
+
+    function getRecordByKey(key: Key): RecordType {
+        if (
+            !mapCacheRef.current ||
+            mapCacheRef.current.data !== data ||
+            mapCacheRef.current.childrenColumnName !== childrenColumnName ||
+            mapCacheRef.current.getRowKey !== getRowKey
+        ) {
+            const kvMap = new Map<Key, RecordType>();
+
+            dig(data, kvMap);
+
+            mapCacheRef.current = {
+                data,
+                childrenColumnName,
+                kvMap,
+                getRowKey,
+            };
+        }
+
+        return mapCacheRef.current.kvMap!.get(key)!;
+    }
+
+    return [getRecordByKey];
+}
diff --git a/src/components/Table/Hooks/usePagination.ts b/src/components/Table/Hooks/usePagination.ts
new file mode 100644
index 000000000..57a70e162
--- /dev/null
+++ b/src/components/Table/Hooks/usePagination.ts
@@ -0,0 +1,141 @@
+import { useState } from 'react';
+import type { PaginationProps } from '../../Pagination/Pagination.types';
+import type { TablePaginationConfig } from '../Table.types';
+
+export const DEFAULT_PAGE_SIZE: number = 10;
+
+export function getPaginationParam(
+    pagination: TablePaginationConfig | boolean | undefined,
+    mergedPagination: TablePaginationConfig
+) {
+    const param: any = {
+        currentPage: mergedPagination.currentPage,
+        pageSize: mergedPagination.pageSize,
+        total: mergedPagination.total,
+    };
+
+    const paginationObj =
+        pagination && typeof pagination === 'object' ? pagination : {};
+
+    Object.keys(paginationObj).forEach((pageProp) => {
+        const value = (mergedPagination as any)[pageProp];
+
+        if (typeof value !== 'function') {
+            param[pageProp] = value;
+        }
+    });
+
+    return param;
+}
+
+function extendsObject<T extends Object>(...list: T[]) {
+    const result: T = {} as T;
+
+    list.forEach((obj) => {
+        if (obj) {
+            Object.keys(obj).forEach((key) => {
+                const val = (obj as any)[key];
+                if (val !== undefined) {
+                    (result as any)[key] = val;
+                }
+            });
+        }
+    });
+
+    return result;
+}
+
+export default function usePagination(
+    total: number,
+    pagination: TablePaginationConfig | false | undefined,
+    onChange: (currentPage: number, pageSize: number, total: number) => void
+): [TablePaginationConfig, () => void] {
+    const { total: paginationTotal = 0, ...paginationObj } =
+        pagination && typeof pagination === 'object' ? pagination : {};
+
+    const [innerPagination, setInnerPagination] = useState<{
+        currentPage?: number;
+        pageSize?: number;
+        total?: number;
+    }>(() => ({
+        currentPage: paginationObj.currentPage,
+        pageSize: paginationObj.pageSize,
+        total: paginationTotal,
+    }));
+
+    // ============ Basic Pagination Config ============
+    const mergedPagination = extendsObject<Partial<TablePaginationConfig>>(
+        innerPagination,
+        paginationObj,
+        {
+            total: paginationTotal > 0 ? paginationTotal : total,
+        }
+    );
+
+    // Reset `current` if data length or pageSize changed
+    const maxPage = Math.ceil(
+        (paginationTotal || total) / mergedPagination.pageSize!
+    );
+    if (mergedPagination.currentPage! > maxPage) {
+        // Prevent a maximum page count of 0
+        mergedPagination.currentPage = maxPage || 1;
+    }
+
+    const refreshPagination = (
+        currentPage?: number,
+        pageSize?: number,
+        total?: number
+    ) => {
+        setInnerPagination({
+            currentPage: currentPage,
+            pageSize: pageSize,
+            total: total,
+        });
+    };
+
+    const onInternalCurrentChange: PaginationProps['onCurrentChange'] = (
+        currentPage: number
+    ) => {
+        mergedPagination.onCurrentChange?.(mergedPagination?.currentPage);
+        refreshPagination(
+            currentPage,
+            mergedPagination?.pageSize,
+            mergedPagination?.total
+        );
+        onChange(
+            currentPage || mergedPagination?.currentPage!,
+            mergedPagination?.pageSize,
+            mergedPagination?.total
+        );
+    };
+
+    const onInternalSizeChange: PaginationProps['onSizeChange'] = (
+        pageSize: number
+    ) => {
+        mergedPagination.onSizeChange?.(mergedPagination?.pageSize);
+        refreshPagination(
+            mergedPagination?.currentPage,
+            pageSize,
+            mergedPagination?.total
+        );
+        onChange(
+            mergedPagination?.currentPage,
+            pageSize || mergedPagination?.pageSize!,
+            mergedPagination?.total
+        );
+    };
+
+    if (pagination === false) {
+        return [{}, () => {}];
+    }
+
+    return [
+        {
+            ...mergedPagination,
+            onCurrentChange: onInternalCurrentChange,
+            onSizeChange: onInternalSizeChange,
+            total: mergedPagination.total,
+        },
+        refreshPagination,
+    ];
+}
diff --git a/src/components/Table/Hooks/useSelection.tsx b/src/components/Table/Hooks/useSelection.tsx
new file mode 100644
index 000000000..c2f3d0d94
--- /dev/null
+++ b/src/components/Table/Hooks/useSelection.tsx
@@ -0,0 +1,758 @@
+import React, { useEffect, useRef } from 'react';
+import { useState, useCallback, useMemo } from 'react';
+import { convertDataToEntities } from '../../Tree/Internal/utils/treeUtil';
+import { conductCheck } from '../../Tree/Internal/utils/conductUtil';
+import { arrAdd, arrDel } from '../../Tree/Internal/util';
+import type {
+    DataNode,
+    GetCheckDisabled,
+} from '../../Tree/Internal/OcTree.types';
+import { INTERNAL_COL_DEFINE } from '../Internal';
+import type { FixedType } from '../Internal/OcTable.types';
+import { useMergedState } from '../../../hooks/useMergedState';
+import type { CheckboxProps } from '../../Selectors';
+import { CheckBox, RadioButton } from '../../Selectors';
+import { Dropdown } from '../../Dropdown';
+import { Icon, IconName, IconSize } from '../../Icon';
+import { Menu } from '../../Menu';
+import type {
+    TableRowSelection,
+    Key,
+    ColumnsType,
+    ColumnType,
+    GetRowKey,
+    SelectionItem,
+    TransformColumns,
+    ExpandType,
+    GetPopupContainer,
+} from '../Table.types';
+
+import styles from '../Styles/table.module.scss';
+
+export const SELECTION_COLUMN = {} as const;
+export const SELECTION_ALL = 'SELECT_ALL' as const;
+export const SELECTION_INVERT = 'SELECT_INVERT' as const;
+export const SELECTION_NONE = 'SELECT_NONE' as const;
+
+const EMPTY_LIST: React.Key[] = [];
+
+interface UseSelectionConfig<RecordType> {
+    pageData: RecordType[];
+    data: RecordType[];
+    getRowKey: GetRowKey<RecordType>;
+    getRecordByKey: (key: Key) => RecordType;
+    expandType: ExpandType;
+    childrenColumnName: string;
+    emptyText: React.ReactNode | (() => React.ReactNode);
+    emptyTextDetails?: string;
+    selectionAllText: string;
+    selectInvertText: string;
+    selectNoneText: string;
+    getPopupContainer?: GetPopupContainer;
+}
+
+export type INTERNAL_SELECTION_ITEM =
+    | SelectionItem
+    | typeof SELECTION_ALL
+    | typeof SELECTION_INVERT
+    | typeof SELECTION_NONE;
+
+function flattenData<RecordType>(
+    data: RecordType[] | undefined,
+    childrenColumnName: string
+): RecordType[] {
+    let list: RecordType[] = [];
+    (data || []).forEach((record) => {
+        list.push(record);
+
+        if (
+            record &&
+            typeof record === 'object' &&
+            childrenColumnName in record
+        ) {
+            list = [
+                ...list,
+                ...flattenData<RecordType>(
+                    (record as any)[childrenColumnName],
+                    childrenColumnName
+                ),
+            ];
+        }
+    });
+
+    return list;
+}
+
+export default function useSelection<RecordType>(
+    rowSelection: TableRowSelection<RecordType> | undefined,
+    config: UseSelectionConfig<RecordType>
+): [TransformColumns<RecordType>, Set<Key>] {
+    const {
+        preserveSelectedRowKeys,
+        selectedRowKeys,
+        defaultSelectedRowKeys,
+        getCheckboxProps,
+        onChange: onSelectionChange,
+        onSelect,
+        columnWidth: selectionColWidth,
+        type: selectionType,
+        selections,
+        fixed,
+        renderCell: customizeRenderCell,
+        hideSelectAll,
+        checkStrictly = true,
+    } = rowSelection || {};
+
+    const {
+        data,
+        pageData,
+        getRecordByKey,
+        getRowKey,
+        expandType,
+        childrenColumnName,
+        selectionAllText,
+        selectInvertText,
+        selectNoneText,
+        getPopupContainer,
+    } = config;
+
+    // ========================= Keys =========================
+    const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(
+        selectedRowKeys || defaultSelectedRowKeys || EMPTY_LIST,
+        {
+            value: selectedRowKeys,
+        }
+    );
+
+    // ======================== Caches ========================
+    const preserveRecordsRef = useRef(new Map<Key, RecordType>());
+
+    const updatePreserveRecordsCache = useCallback(
+        (keys: Key[]) => {
+            if (preserveSelectedRowKeys) {
+                const newCache = new Map<Key, RecordType>();
+                // Keep key if mark as preserveSelectedRowKeys
+                keys.forEach((key) => {
+                    let record = getRecordByKey(key);
+
+                    if (!record && preserveRecordsRef.current.has(key)) {
+                        record = preserveRecordsRef.current.get(key)!;
+                    }
+
+                    newCache.set(key, record);
+                });
+                // Refresh to new cache
+                preserveRecordsRef.current = newCache;
+            }
+        },
+        [getRecordByKey, preserveSelectedRowKeys]
+    );
+
+    // Update cache with selectedKeys
+    useEffect(() => {
+        updatePreserveRecordsCache(mergedSelectedKeys);
+    }, [mergedSelectedKeys]);
+
+    const { keyEntities } = useMemo(
+        () =>
+            checkStrictly
+                ? { keyEntities: null }
+                : convertDataToEntities(data as unknown as DataNode[], {
+                      externalGetKey: getRowKey as any,
+                      childrenPropName: childrenColumnName,
+                  }),
+        [data, getRowKey, checkStrictly, childrenColumnName]
+    );
+
+    // Get flatten data
+    const flattedData = useMemo(
+        () => flattenData(pageData, childrenColumnName),
+        [pageData, childrenColumnName]
+    );
+
+    // Get all checkbox props
+    const checkboxPropsMap = useMemo(() => {
+        const map = new Map<Key, Partial<CheckboxProps>>();
+        flattedData.forEach((record, index) => {
+            const key = getRowKey(record, index);
+            const checkboxProps =
+                (getCheckboxProps ? getCheckboxProps(record) : null) || {};
+            map.set(key, checkboxProps);
+        });
+        return map;
+    }, [flattedData, getRowKey, getCheckboxProps]);
+
+    const isCheckboxDisabled: GetCheckDisabled<RecordType> = useCallback(
+        (r: RecordType) => !!checkboxPropsMap.get(getRowKey(r))?.disabled,
+        [checkboxPropsMap, getRowKey]
+    );
+
+    const [derivedSelectedKeys, derivedHalfSelectedKeys] = useMemo(() => {
+        if (checkStrictly) {
+            return [mergedSelectedKeys || [], []];
+        }
+        const { checkedKeys, halfCheckedKeys } = conductCheck(
+            mergedSelectedKeys,
+            true,
+            keyEntities as any,
+            isCheckboxDisabled as any
+        );
+        return [checkedKeys || [], halfCheckedKeys];
+    }, [mergedSelectedKeys, checkStrictly, keyEntities, isCheckboxDisabled]);
+
+    const derivedSelectedKeySet: Set<Key> = useMemo(() => {
+        const keys =
+            selectionType === 'radio'
+                ? derivedSelectedKeys.slice(0, 1)
+                : derivedSelectedKeys;
+        return new Set(keys);
+    }, [derivedSelectedKeys, selectionType]);
+    const derivedHalfSelectedKeySet = useMemo(
+        () =>
+            selectionType === 'radio'
+                ? new Set()
+                : new Set(derivedHalfSelectedKeys),
+        [derivedHalfSelectedKeys, selectionType]
+    );
+
+    // Save last selected key to enable range selection
+    const [lastSelectedKey, setLastSelectedKey] = useState<Key | null>(null);
+
+    // Reset if rowSelection reset
+    useEffect(() => {
+        if (!rowSelection) {
+            setMergedSelectedKeys(EMPTY_LIST);
+        }
+    }, [!!rowSelection]);
+
+    const setSelectedKeys = useCallback(
+        (keys: Key[]) => {
+            let availableKeys: Key[];
+            let records: RecordType[];
+
+            updatePreserveRecordsCache(keys);
+
+            if (preserveSelectedRowKeys) {
+                availableKeys = keys;
+                records = keys.map(
+                    (key) => preserveRecordsRef.current.get(key)!
+                );
+            } else {
+                // Filter key which not exist in the `dataSource`
+                availableKeys = [];
+                records = [];
+
+                keys.forEach((key) => {
+                    const record = getRecordByKey(key);
+                    if (record !== undefined) {
+                        availableKeys.push(key);
+                        records.push(record);
+                    }
+                });
+            }
+
+            setMergedSelectedKeys(availableKeys);
+
+            onSelectionChange?.(availableKeys, records);
+        },
+        [
+            setMergedSelectedKeys,
+            getRecordByKey,
+            onSelectionChange,
+            preserveSelectedRowKeys,
+        ]
+    );
+
+    // ====================== Selections ======================
+    // Trigger single `onSelect` event
+    const triggerSingleSelection = useCallback(
+        (key: Key, selected: boolean, keys: Key[], event: Event) => {
+            if (onSelect) {
+                const rows = keys.map((k) => getRecordByKey(k));
+                onSelect(getRecordByKey(key), selected, rows, event);
+            }
+
+            setSelectedKeys(keys);
+        },
+        [onSelect, getRecordByKey, setSelectedKeys]
+    );
+
+    const mergedSelections = useMemo<SelectionItem[] | null>((): any => {
+        if (!selections || hideSelectAll) {
+            return null;
+        }
+
+        const selectionList: INTERNAL_SELECTION_ITEM[] =
+            selections === true
+                ? [SELECTION_ALL, SELECTION_INVERT, SELECTION_NONE]
+                : selections;
+
+        return selectionList.map((selection: INTERNAL_SELECTION_ITEM) => {
+            if (selection === SELECTION_ALL) {
+                return {
+                    key: 'all',
+                    value: selectionAllText,
+                    onSelect() {
+                        setSelectedKeys(
+                            data
+                                .map((record, index) =>
+                                    getRowKey(record, index)
+                                )
+                                .filter((key) => {
+                                    const checkProps =
+                                        checkboxPropsMap.get(key);
+                                    return (
+                                        !checkProps?.disabled ||
+                                        derivedSelectedKeySet.has(key)
+                                    );
+                                })
+                        );
+                    },
+                };
+            }
+            if (selection === SELECTION_INVERT) {
+                return {
+                    key: 'invert',
+                    value: selectInvertText,
+                    onSelect() {
+                        const keySet = new Set(derivedSelectedKeySet);
+                        pageData.forEach((record, index) => {
+                            const key = getRowKey(record, index);
+                            const checkProps = checkboxPropsMap.get(key);
+
+                            if (!checkProps?.disabled) {
+                                if (keySet.has(key)) {
+                                    keySet.delete(key);
+                                } else {
+                                    keySet.add(key);
+                                }
+                            }
+                        });
+
+                        const keys = Array.from(keySet);
+                        setSelectedKeys(keys);
+                    },
+                };
+            }
+            if (selection === SELECTION_NONE) {
+                return {
+                    key: 'none',
+                    value: selectNoneText,
+                    onSelect() {
+                        setSelectedKeys(
+                            Array.from(derivedSelectedKeySet).filter((key) => {
+                                const checkProps = checkboxPropsMap.get(key);
+                                return checkProps?.disabled;
+                            })
+                        );
+                    },
+                };
+            }
+            return selection as SelectionItem;
+        });
+    }, [
+        selections,
+        derivedSelectedKeySet,
+        pageData,
+        getRowKey,
+        setSelectedKeys,
+    ]);
+
+    // ======================= Columns ========================
+    const transformColumns = useCallback(
+        (columns: ColumnsType<RecordType>): ColumnsType<RecordType> => {
+            // >>>>>>>>>>> Skip if not exists `rowSelection`
+            if (!rowSelection) {
+                return columns.filter((col) => col !== SELECTION_COLUMN);
+            }
+
+            // >>>>>>>>>>> Support selection
+            let cloneColumns = [...columns];
+            const keySet = new Set(derivedSelectedKeySet);
+
+            // Record key only need check with enabled
+            const recordKeys = flattedData
+                .map(getRowKey)
+                .filter((key) => !checkboxPropsMap.get(key)!.disabled);
+            const checkedCurrentAll = recordKeys.every((key) =>
+                keySet.has(key)
+            );
+
+            const onSelectAllChange = () => {
+                const changeKeys: Key[] = [];
+
+                if (checkedCurrentAll) {
+                    recordKeys.forEach((key) => {
+                        keySet.delete(key);
+                        changeKeys.push(key);
+                    });
+                } else {
+                    recordKeys.forEach((key) => {
+                        if (!keySet.has(key)) {
+                            keySet.add(key);
+                            changeKeys.push(key);
+                        }
+                    });
+                }
+
+                const keys = Array.from(keySet);
+                setSelectedKeys(keys);
+            };
+
+            // ===================== Render =====================
+            // Title Cell
+            let title: React.ReactNode;
+            if (selectionType !== 'radio') {
+                let customizeSelections: React.ReactNode;
+                if (mergedSelections) {
+                    const menu = (
+                        <Menu
+                            items={mergedSelections.map((selection, index) => {
+                                const {
+                                    key,
+                                    text,
+                                    onSelect: onSelectionClick,
+                                } = selection;
+
+                                return {
+                                    key: key || index,
+                                    onClick: () => {
+                                        onSelectionClick?.(recordKeys);
+                                    },
+                                    value: text,
+                                };
+                            })}
+                        />
+                    );
+                    customizeSelections = (
+                        <div className={styles.tableSelectionExtra}>
+                            <Dropdown overlay={menu}>
+                                <span>
+                                    <Icon
+                                        path={IconName.mdiArrowDown}
+                                        size={IconSize.Small}
+                                    />
+                                </span>
+                            </Dropdown>
+                        </div>
+                    );
+                }
+
+                const allDisabledData = flattedData
+                    .map((record, index) => {
+                        const key = getRowKey(record, index);
+                        const checkboxProps = checkboxPropsMap.get(key) || {};
+                        return { checked: keySet.has(key), ...checkboxProps };
+                    })
+                    .filter(({ disabled }) => disabled);
+
+                const allDisabled =
+                    !!allDisabledData.length &&
+                    allDisabledData.length === flattedData.length;
+
+                const allDisabledAndChecked =
+                    allDisabled &&
+                    allDisabledData.every(({ checked }) => checked);
+                const allDisabledSomeChecked =
+                    allDisabled &&
+                    allDisabledData.some(({ checked }) => checked);
+
+                title = !hideSelectAll && (
+                    <div className={styles.tableSelectionColumn}>
+                        <CheckBox
+                            checked={
+                                !allDisabled
+                                    ? !!flattedData.length && checkedCurrentAll
+                                    : allDisabledAndChecked
+                            }
+                            classNames={styles.selectionCheckbox}
+                            id={'selectCheckBox'}
+                            onChange={onSelectAllChange}
+                            disabled={flattedData.length === 0 || allDisabled}
+                        />
+                        {customizeSelections}
+                    </div>
+                );
+            }
+
+            // Body Cell
+            let renderCell: (
+                _: RecordType,
+                record: RecordType,
+                index: number
+            ) => { node: React.ReactNode; checked: boolean };
+            if (selectionType === 'radio') {
+                renderCell = (_, record, index) => {
+                    const key = getRowKey(record, index);
+                    const checked = keySet.has(key);
+
+                    return {
+                        node: (
+                            <RadioButton
+                                {...checkboxPropsMap.get(key)}
+                                checked={checked}
+                                name={'oc-table-radio-group'}
+                                classNames={styles.selectionRadiobutton}
+                                id={'selectRadioButton'}
+                                onClick={(e) => e.stopPropagation()}
+                                onChange={(event) => {
+                                    if (!keySet.has(key)) {
+                                        triggerSingleSelection(
+                                            key,
+                                            true,
+                                            [key],
+                                            event.nativeEvent
+                                        );
+                                    }
+                                }}
+                            />
+                        ),
+                        checked,
+                    };
+                };
+            } else {
+                renderCell = (_, record, index) => {
+                    const key = getRowKey(record, index);
+                    const checked = keySet.has(key);
+                    const checkboxProps = checkboxPropsMap.get(key);
+
+                    // Record checked
+                    return {
+                        node: (
+                            <CheckBox
+                                {...checkboxProps}
+                                checked={checked}
+                                classNames={styles.selectionCheckbox}
+                                id={'selectCheckBox'}
+                                onClick={(e) => e.stopPropagation()}
+                                onChange={(nativeEvent: any) => {
+                                    const { shiftKey } = nativeEvent;
+
+                                    let startIndex: number = -1;
+                                    let endIndex: number = -1;
+
+                                    // Get range of this
+                                    if (shiftKey && checkStrictly) {
+                                        const pointKeys = new Set([
+                                            lastSelectedKey,
+                                            key,
+                                        ]);
+
+                                        recordKeys.some(
+                                            (recordKey, recordIndex) => {
+                                                if (pointKeys.has(recordKey)) {
+                                                    if (startIndex === -1) {
+                                                        startIndex =
+                                                            recordIndex;
+                                                    } else {
+                                                        endIndex = recordIndex;
+                                                        return true;
+                                                    }
+                                                }
+
+                                                return false;
+                                            }
+                                        );
+                                    }
+
+                                    if (
+                                        endIndex !== -1 &&
+                                        startIndex !== endIndex &&
+                                        checkStrictly
+                                    ) {
+                                        // Batch update selections
+                                        const rangeKeys = recordKeys.slice(
+                                            startIndex,
+                                            endIndex + 1
+                                        );
+                                        const changedKeys: Key[] = [];
+
+                                        if (checked) {
+                                            rangeKeys.forEach((recordKey) => {
+                                                if (keySet.has(recordKey)) {
+                                                    changedKeys.push(recordKey);
+                                                    keySet.delete(recordKey);
+                                                }
+                                            });
+                                        } else {
+                                            rangeKeys.forEach((recordKey) => {
+                                                if (!keySet.has(recordKey)) {
+                                                    changedKeys.push(recordKey);
+                                                    keySet.add(recordKey);
+                                                }
+                                            });
+                                        }
+
+                                        const keys = Array.from(keySet);
+                                        setSelectedKeys(keys);
+                                    } else {
+                                        // Single record selected
+                                        const originCheckedKeys =
+                                            derivedSelectedKeys;
+                                        if (checkStrictly) {
+                                            const checkedKeys = checked
+                                                ? arrDel(originCheckedKeys, key)
+                                                : arrAdd(
+                                                      originCheckedKeys,
+                                                      key
+                                                  );
+                                            triggerSingleSelection(
+                                                key,
+                                                !checked,
+                                                checkedKeys,
+                                                nativeEvent
+                                            );
+                                        } else {
+                                            // Always fill first
+                                            const result = conductCheck(
+                                                [...originCheckedKeys, key],
+                                                true,
+                                                keyEntities as any,
+                                                isCheckboxDisabled as any
+                                            );
+                                            const {
+                                                checkedKeys,
+                                                halfCheckedKeys,
+                                            } = result;
+                                            let nextCheckedKeys = checkedKeys;
+
+                                            // If remove, we do it again to correction
+                                            if (checked) {
+                                                const tempKeySet = new Set(
+                                                    checkedKeys
+                                                );
+                                                tempKeySet.delete(key);
+                                                nextCheckedKeys = conductCheck(
+                                                    Array.from(tempKeySet),
+                                                    {
+                                                        checked: false,
+                                                        halfCheckedKeys,
+                                                    },
+                                                    keyEntities as any,
+                                                    isCheckboxDisabled as any
+                                                ).checkedKeys;
+                                            }
+
+                                            triggerSingleSelection(
+                                                key,
+                                                !checked,
+                                                nextCheckedKeys,
+                                                nativeEvent
+                                            );
+                                        }
+                                    }
+
+                                    setLastSelectedKey(key);
+                                }}
+                            />
+                        ),
+                        checked,
+                    };
+                };
+            }
+
+            const renderSelectionCell = (
+                _: any,
+                record: RecordType,
+                index: number
+            ) => {
+                const { node, checked } = renderCell(_, record, index);
+
+                if (customizeRenderCell) {
+                    return customizeRenderCell(checked, record, index, node);
+                }
+
+                return node;
+            };
+
+            // Insert selection column if not exist
+            if (!cloneColumns.includes(SELECTION_COLUMN)) {
+                // Always after expand icon
+                if (
+                    cloneColumns.findIndex(
+                        (col: any) =>
+                            col[INTERNAL_COL_DEFINE]?.columnType ===
+                            'EXPAND_COLUMN'
+                    ) === 0
+                ) {
+                    const [expandColumn, ...restColumns] = cloneColumns;
+                    cloneColumns = [
+                        expandColumn,
+                        SELECTION_COLUMN,
+                        ...restColumns,
+                    ];
+                } else {
+                    // Normal insert at first column
+                    cloneColumns = [SELECTION_COLUMN, ...cloneColumns];
+                }
+            }
+
+            // Deduplicate selection column
+            const selectionColumnIndex = cloneColumns.indexOf(SELECTION_COLUMN);
+
+            cloneColumns = cloneColumns.filter(
+                (column, index) =>
+                    column !== SELECTION_COLUMN ||
+                    index === selectionColumnIndex
+            );
+
+            // Fixed column logic
+            const prevCol: ColumnType<RecordType> & Record<string, any> =
+                cloneColumns[selectionColumnIndex - 1];
+            const nextCol: ColumnType<RecordType> & Record<string, any> =
+                cloneColumns[selectionColumnIndex + 1];
+
+            let mergedFixed: FixedType | undefined = fixed;
+
+            if (mergedFixed === undefined) {
+                if (nextCol?.fixed !== undefined) {
+                    mergedFixed = nextCol.fixed;
+                } else if (prevCol?.fixed !== undefined) {
+                    mergedFixed = prevCol.fixed;
+                }
+            }
+
+            if (
+                mergedFixed &&
+                prevCol &&
+                prevCol[INTERNAL_COL_DEFINE]?.columnType === 'EXPAND_COLUMN' &&
+                prevCol.fixed === undefined
+            ) {
+                prevCol.fixed = mergedFixed;
+            }
+
+            // Replace with real selection column
+            const selectionColumn = {
+                fixed: mergedFixed,
+                width: selectionColWidth,
+                className: styles.tableSelectionColumn,
+                title: rowSelection.columnTitle || title,
+                render: renderSelectionCell,
+                [INTERNAL_COL_DEFINE]: {
+                    className: styles.tableSelectionCol,
+                },
+            };
+
+            return cloneColumns.map((col) =>
+                col === SELECTION_COLUMN ? selectionColumn : col
+            );
+        },
+        [
+            getRowKey,
+            flattedData,
+            rowSelection,
+            derivedSelectedKeys,
+            derivedSelectedKeySet,
+            derivedHalfSelectedKeySet,
+            selectionColWidth,
+            mergedSelections,
+            expandType,
+            lastSelectedKey,
+            checkboxPropsMap,
+            triggerSingleSelection,
+            isCheckboxDisabled,
+        ]
+    );
+
+    return [transformColumns, derivedSelectedKeySet];
+}
diff --git a/src/components/Table/Hooks/useSorter.tsx b/src/components/Table/Hooks/useSorter.tsx
new file mode 100644
index 000000000..4c9d1486c
--- /dev/null
+++ b/src/components/Table/Hooks/useSorter.tsx
@@ -0,0 +1,528 @@
+import React, { useMemo, useState } from 'react';
+import { eventKeys, mergeClasses } from '../../../shared/utilities';
+import type {
+    TransformColumns,
+    ColumnsType,
+    Key,
+    ColumnType,
+    SortOrder,
+    CompareFn,
+    ColumnTitleProps,
+    SorterResult,
+    ColumnGroupType,
+} from '../Table.types';
+import type { TooltipProps } from '../../Tooltip';
+import { Tooltip, TooltipTheme } from '../../Tooltip';
+import { getColumnKey, getColumnPos, renderColumnTitle } from '../utlities';
+import { Icon, IconName, IconSize } from '../../Icon';
+
+import styles from '../Styles/table.module.scss';
+
+const ASCEND: SortOrder = 'ascend';
+const DESCEND: SortOrder = 'descend';
+
+function getMultiplePriority<RecordType>(
+    column: ColumnType<RecordType>
+): number | false {
+    if (
+        typeof column.sorter === 'object' &&
+        typeof column.sorter.multiple === 'number'
+    ) {
+        return column.sorter.multiple;
+    }
+    return false;
+}
+
+function getSortFunction<RecordType>(
+    sorter: ColumnType<RecordType>['sorter']
+): CompareFn<RecordType> | false {
+    if (typeof sorter === 'function') {
+        return sorter;
+    }
+    if (sorter && typeof sorter === 'object' && sorter.compare) {
+        return sorter.compare;
+    }
+    return false;
+}
+
+function nextSortDirection(
+    sortDirections: SortOrder[],
+    current: SortOrder | null
+) {
+    if (!current) {
+        return sortDirections[0];
+    }
+
+    return sortDirections[sortDirections.indexOf(current) + 1];
+}
+
+export interface SortState<RecordType> {
+    column: ColumnType<RecordType>;
+    key: Key;
+    sortOrder: SortOrder | null;
+    multiplePriority: number | false;
+}
+
+function collectSortStates<RecordType>(
+    columns: ColumnsType<RecordType>,
+    init: boolean,
+    pos?: string
+): SortState<RecordType>[] {
+    let sortStates: SortState<RecordType>[] = [];
+
+    function pushState(
+        column: ColumnsType<RecordType>[number],
+        columnPos: string
+    ) {
+        sortStates.push({
+            column,
+            key: getColumnKey(column, columnPos),
+            multiplePriority: getMultiplePriority(column),
+            sortOrder: column.sortOrder!,
+        });
+    }
+
+    (columns || []).forEach((column, index) => {
+        const columnPos = getColumnPos(index, pos);
+
+        if ((column as ColumnGroupType<RecordType>).children) {
+            if ('sortOrder' in column) {
+                // Controlled
+                pushState(column, columnPos);
+            }
+            sortStates = [
+                ...sortStates,
+                ...collectSortStates(
+                    (column as ColumnGroupType<RecordType>).children,
+                    init,
+                    columnPos
+                ),
+            ];
+        } else if (column.sorter) {
+            if ('sortOrder' in column) {
+                // Controlled
+                pushState(column, columnPos);
+            } else if (init && column.defaultSortOrder) {
+                // Default sorter
+                sortStates.push({
+                    column,
+                    key: getColumnKey(column, columnPos),
+                    multiplePriority: getMultiplePriority(column),
+                    sortOrder: column.defaultSortOrder!,
+                });
+            }
+        }
+    });
+
+    return sortStates;
+}
+
+function injectSorter<RecordType>(
+    cancelSortText: string,
+    columns: ColumnsType<RecordType>,
+    sorterStates: SortState<RecordType>[],
+    triggerSorter: (sorterSates: SortState<RecordType>) => void,
+    defaultSortDirections: SortOrder[],
+    triggerAscText: string,
+    triggerDescText: string,
+    tableShowSorterTooltip?: boolean | TooltipProps,
+    pos?: string
+): ColumnsType<RecordType> {
+    return (columns || []).map((column, index) => {
+        const columnPos = getColumnPos(index, pos);
+        let newColumn: ColumnsType<RecordType>[number] = column;
+
+        if (newColumn.sorter) {
+            const sortDirections: SortOrder[] =
+                newColumn.sortDirections || defaultSortDirections;
+            const showSorterTooltip =
+                newColumn.showSorterTooltip === undefined
+                    ? tableShowSorterTooltip
+                    : newColumn.showSorterTooltip;
+            const columnKey = getColumnKey(newColumn, columnPos);
+            const sorterState = sorterStates.find(
+                ({ key }) => key === columnKey
+            );
+            const sorterOrder = sorterState ? sorterState.sortOrder : null;
+            const nextSortOrder = nextSortDirection(
+                sortDirections,
+                sorterOrder
+            );
+            const upNode: React.ReactNode = sortDirections.includes(ASCEND) && (
+                <Icon
+                    classNames={mergeClasses([
+                        styles.tableColumnSorterUp,
+                        { [styles.active]: sorterOrder === ASCEND },
+                    ])}
+                    path={IconName.mdiChevronUp}
+                    size={IconSize.Small}
+                />
+            );
+            const downNode: React.ReactNode = sortDirections.includes(
+                DESCEND
+            ) && (
+                <Icon
+                    classNames={mergeClasses([
+                        styles.tableColumnSorterDown,
+                        { [styles.active]: sorterOrder === DESCEND },
+                    ])}
+                    path={IconName.mdiChevronDown}
+                    size={IconSize.Small}
+                />
+            );
+            let sortTip: string | undefined = cancelSortText;
+            if (nextSortOrder === DESCEND) {
+                sortTip = triggerDescText;
+            } else if (nextSortOrder === ASCEND) {
+                sortTip = triggerAscText;
+            }
+            const tooltipProps: TooltipProps =
+                typeof showSorterTooltip === 'object'
+                    ? showSorterTooltip
+                    : { content: sortTip };
+            newColumn = {
+                ...newColumn,
+                classNames: mergeClasses([
+                    newColumn.classNames,
+                    { [styles.tableColumnSort]: sorterOrder },
+                ]),
+                title: (renderProps: ColumnTitleProps<RecordType>) => {
+                    const renderSortTitle = (
+                        <div className={styles.tableColumnSorters}>
+                            <span className={styles.tableColumnTitle}>
+                                {renderColumnTitle(column.title, renderProps)}
+                            </span>
+                            <span
+                                className={mergeClasses([
+                                    styles.tableColumnSorter,
+                                    {
+                                        ['table-column-sorter-full']: !!(
+                                            upNode && downNode
+                                        ),
+                                    },
+                                ])}
+                            >
+                                <span className={styles.tableColumnSorterInner}>
+                                    {upNode}
+                                    {downNode}
+                                </span>
+                            </span>
+                        </div>
+                    );
+                    return showSorterTooltip ? (
+                        <Tooltip
+                            {...tooltipProps}
+                            id={'sortTip'}
+                            theme={TooltipTheme.dark}
+                        >
+                            {renderSortTitle}
+                        </Tooltip>
+                    ) : (
+                        renderSortTitle
+                    );
+                },
+                onHeaderCell: (col) => {
+                    const cell: React.HTMLAttributes<HTMLElement> =
+                        (column.onHeaderCell && column.onHeaderCell(col)) || {};
+                    const originOnClick = cell.onClick;
+                    const originOKeyDown = cell.onKeyDown;
+                    cell.onClick = (event: React.MouseEvent<HTMLElement>) => {
+                        triggerSorter({
+                            column,
+                            key: columnKey,
+                            sortOrder: nextSortOrder,
+                            multiplePriority: getMultiplePriority(column),
+                        });
+                        originOnClick?.(event);
+                    };
+                    cell.onKeyDown = (
+                        event: React.KeyboardEvent<HTMLElement>
+                    ) => {
+                        if (event.key === eventKeys.ENTER) {
+                            triggerSorter({
+                                column,
+                                key: columnKey,
+                                sortOrder: nextSortOrder,
+                                multiplePriority: getMultiplePriority(column),
+                            });
+                            originOKeyDown?.(event);
+                        }
+                    };
+
+                    // Inform the screen-reader so it can tell the visually impaired user which column is sorted
+                    if (sorterOrder) {
+                        if (sorterOrder === 'ascend') {
+                            cell['aria-sort'] = 'ascending';
+                        } else {
+                            cell['aria-sort'] = 'descending';
+                        }
+                    }
+
+                    cell.className = mergeClasses([
+                        cell.className,
+                        styles.tableColumnHasSorters,
+                    ]);
+                    cell.tabIndex = 0;
+
+                    return cell;
+                },
+            };
+        }
+
+        if ('children' in newColumn) {
+            newColumn = {
+                ...newColumn,
+                children: injectSorter(
+                    cancelSortText,
+                    newColumn.children,
+                    sorterStates,
+                    triggerSorter,
+                    defaultSortDirections,
+                    triggerAscText,
+                    triggerDescText,
+                    tableShowSorterTooltip,
+                    columnPos
+                ),
+            };
+        }
+
+        return newColumn;
+    });
+}
+
+function stateToInfo<RecordType>(sorterStates: SortState<RecordType>) {
+    const { column, sortOrder } = sorterStates;
+    return {
+        column,
+        order: sortOrder,
+        field: column.dataIndex,
+        columnKey: column.key,
+    };
+}
+
+function generateSorterInfo<RecordType>(
+    sorterStates: SortState<RecordType>[]
+): SorterResult<RecordType> | SorterResult<RecordType>[] {
+    const list = sorterStates
+        .filter(({ sortOrder }) => sortOrder)
+        .map(stateToInfo);
+
+    // =========== Legacy compatible support ===========
+    if (list.length === 0 && sorterStates.length) {
+        return {
+            ...stateToInfo(sorterStates[sorterStates.length - 1]),
+            column: undefined,
+        };
+    }
+
+    if (list.length <= 1) {
+        return list[0] || {};
+    }
+
+    return list;
+}
+
+export function getSortData<RecordType>(
+    data: readonly RecordType[],
+    sortStates: SortState<RecordType>[],
+    childrenColumnName: string
+): RecordType[] {
+    const innerSorterStates = sortStates
+        .slice()
+        .sort(
+            (a, b) =>
+                (b.multiplePriority as number) - (a.multiplePriority as number)
+        );
+
+    const cloneData = data.slice();
+
+    const runningSorters = innerSorterStates.filter(
+        ({ column: { sorter }, sortOrder }) =>
+            getSortFunction(sorter) && sortOrder
+    );
+
+    // Skip if no sorter needed
+    if (!runningSorters.length) {
+        return cloneData;
+    }
+
+    return cloneData
+        .sort((record1, record2) => {
+            for (let i = 0; i < runningSorters.length; i += 1) {
+                const sorterState = runningSorters[i];
+                const {
+                    column: { sorter },
+                    sortOrder,
+                } = sorterState;
+
+                const compareFn = getSortFunction(sorter);
+
+                if (compareFn && sortOrder) {
+                    const compareResult = compareFn(
+                        record1,
+                        record2,
+                        sortOrder
+                    );
+
+                    if (compareResult !== 0) {
+                        return sortOrder === ASCEND
+                            ? compareResult
+                            : -compareResult;
+                    }
+                }
+            }
+
+            return 0;
+        })
+        .map<RecordType>((record) => {
+            const subRecords = (record as any)[childrenColumnName];
+            if (subRecords) {
+                return {
+                    ...record,
+                    [childrenColumnName]: getSortData(
+                        subRecords,
+                        sortStates,
+                        childrenColumnName
+                    ),
+                };
+            }
+            return record;
+        });
+}
+
+interface SorterConfig<RecordType> {
+    cancelSortText: string;
+    mergedColumns: ColumnsType<RecordType>;
+    onSorterChange: (
+        sorterResult: SorterResult<RecordType> | SorterResult<RecordType>[],
+        sortStates: SortState<RecordType>[]
+    ) => void;
+    sortDirections: SortOrder[];
+    triggerAscText: string;
+    triggerDescText: string;
+    showSorterTooltip?: boolean | TooltipProps;
+}
+
+export default function useFilterSorter<RecordType>({
+    cancelSortText,
+    mergedColumns,
+    onSorterChange,
+    sortDirections,
+    triggerAscText,
+    triggerDescText,
+    showSorterTooltip,
+}: SorterConfig<RecordType>): [
+    TransformColumns<RecordType>,
+    SortState<RecordType>[],
+    ColumnTitleProps<RecordType>,
+    () => SorterResult<RecordType> | SorterResult<RecordType>[]
+] {
+    const [sortStates, setSortStates] = useState<SortState<RecordType>[]>(
+        collectSortStates(mergedColumns, true)
+    );
+
+    const mergedSorterStates = useMemo(() => {
+        let validate = true;
+        const collectedStates = collectSortStates(mergedColumns, false);
+
+        // Return if not controlled
+        if (!collectedStates.length) {
+            return sortStates;
+        }
+
+        const validateStates: SortState<RecordType>[] = [];
+
+        function patchStates(state: SortState<RecordType>) {
+            if (validate) {
+                validateStates.push(state);
+            } else {
+                validateStates.push({
+                    ...state,
+                    sortOrder: null,
+                });
+            }
+        }
+
+        let multipleMode: boolean | null = null;
+        collectedStates.forEach((state) => {
+            if (multipleMode === null) {
+                patchStates(state);
+
+                if (state.sortOrder) {
+                    if (state.multiplePriority === false) {
+                        validate = false;
+                    } else {
+                        multipleMode = true;
+                    }
+                }
+            } else if (multipleMode && state.multiplePriority !== false) {
+                patchStates(state);
+            } else {
+                validate = false;
+                patchStates(state);
+            }
+        });
+
+        return validateStates;
+    }, [mergedColumns, sortStates]);
+
+    // Get render columns title required props
+    const columnTitleSorterProps = useMemo<
+        ColumnTitleProps<RecordType>
+    >((): any => {
+        const sortColumns = mergedSorterStates.map(({ column, sortOrder }) => ({
+            column,
+            order: sortOrder,
+        }));
+
+        return {
+            sortColumns,
+            // Legacy
+            sortColumn: sortColumns[0] && sortColumns[0].column,
+            sortOrder: sortColumns[0] && sortColumns[0].order,
+        };
+    }, [mergedSorterStates]);
+
+    function triggerSorter(sortState: SortState<RecordType>) {
+        let newSorterStates;
+
+        if (
+            sortState.multiplePriority === false ||
+            !mergedSorterStates.length ||
+            mergedSorterStates[0].multiplePriority === false
+        ) {
+            newSorterStates = [sortState];
+        } else {
+            newSorterStates = [
+                ...mergedSorterStates.filter(
+                    ({ key }) => key !== sortState.key
+                ),
+                sortState,
+            ];
+        }
+
+        setSortStates(newSorterStates);
+        onSorterChange(generateSorterInfo(newSorterStates), newSorterStates);
+    }
+
+    const transformColumns = (innerColumns: ColumnsType<RecordType>) =>
+        injectSorter(
+            cancelSortText,
+            innerColumns,
+            mergedSorterStates,
+            triggerSorter,
+            sortDirections,
+            triggerAscText,
+            triggerDescText,
+            showSorterTooltip
+        );
+
+    const getSorters = () => generateSorterInfo(mergedSorterStates);
+
+    return [
+        transformColumns,
+        mergedSorterStates,
+        columnTitleSorterProps,
+        getSorters,
+    ];
+}
diff --git a/src/components/Table/Hooks/useTitleColumns.tsx b/src/components/Table/Hooks/useTitleColumns.tsx
new file mode 100644
index 000000000..ac0e4189d
--- /dev/null
+++ b/src/components/Table/Hooks/useTitleColumns.tsx
@@ -0,0 +1,39 @@
+import { useCallback } from 'react';
+import type {
+    TransformColumns,
+    ColumnTitleProps,
+    ColumnsType,
+} from '../Table.types';
+import { renderColumnTitle } from '../utlities';
+
+function fillTitle<RecordType>(
+    columns: ColumnsType<RecordType>,
+    columnTitleProps: ColumnTitleProps<RecordType>
+) {
+    return columns.map((column) => {
+        const cloneColumn = { ...column };
+
+        cloneColumn.title = renderColumnTitle(column.title, columnTitleProps);
+
+        if ('children' in cloneColumn) {
+            cloneColumn.children = fillTitle(
+                cloneColumn.children,
+                columnTitleProps
+            );
+        }
+
+        return cloneColumn;
+    });
+}
+
+export default function useTitleColumns<RecordType>(
+    columnTitleProps: ColumnTitleProps<RecordType>
+): [TransformColumns<RecordType>] {
+    const filledColumns = useCallback(
+        (columns: ColumnsType<RecordType>) =>
+            fillTitle(columns, columnTitleProps),
+        [columnTitleProps]
+    );
+
+    return [filledColumns];
+}
diff --git a/src/components/Table/Internal/Body/Body.types.ts b/src/components/Table/Internal/Body/Body.types.ts
new file mode 100644
index 000000000..0963aa201
--- /dev/null
+++ b/src/components/Table/Internal/Body/Body.types.ts
@@ -0,0 +1,55 @@
+import React from 'react';
+import type {
+    CustomizeComponent,
+    GetComponentProps,
+    Key,
+    GetRowKey,
+} from '../OcTable.types';
+
+export interface MeasureRowProps extends Omit<MeasureCellProps, 'columnKey'> {
+    columnsKey: React.Key[];
+}
+
+export interface MeasureCellProps {
+    columnKey: React.Key;
+    onColumnResize: (key: React.Key, width: number) => void;
+}
+
+export interface ExpandedRowProps {
+    component: CustomizeComponent;
+    cellComponent: CustomizeComponent;
+    classNames: string;
+    expanded: boolean;
+    children: React.ReactNode;
+    colSpan: number;
+    isEmpty: boolean;
+}
+
+export interface BodyRowProps<RecordType> {
+    record: RecordType;
+    index: number;
+    renderIndex: number;
+    classNames?: string;
+    style?: React.CSSProperties;
+    recordKey: Key;
+    expandedKeys: Set<Key>;
+    rowComponent: CustomizeComponent;
+    cellComponent: CustomizeComponent;
+    onRow: GetComponentProps<RecordType>;
+    rowExpandable: (record: RecordType) => boolean;
+    indent?: number;
+    rowKey: React.Key;
+    getRowKey: GetRowKey<RecordType>;
+    childrenColumnName: string;
+}
+
+export interface BodyProps<RecordType> {
+    data: readonly RecordType[];
+    getRowKey: GetRowKey<RecordType>;
+    measureColumnWidth: boolean;
+    expandedKeys: Set<Key>;
+    onRow: GetComponentProps<RecordType>;
+    rowExpandable: (record: RecordType) => boolean;
+    emptyNode: React.ReactNode;
+    childrenColumnName: string;
+}
diff --git a/src/components/Table/Internal/Body/BodyRow.tsx b/src/components/Table/Internal/Body/BodyRow.tsx
new file mode 100644
index 000000000..30b61f97a
--- /dev/null
+++ b/src/components/Table/Internal/Body/BodyRow.tsx
@@ -0,0 +1,209 @@
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { mergeClasses } from '../../../../shared/utilities';
+import Cell from '../Cell';
+import TableContext from '../Context/TableContext';
+import BodyContext from '../Context/BodyContext';
+import { getColumnsKey } from '../Utilities/valueUtil';
+import type { ColumnType } from '../OcTable.types';
+import { BodyRowProps } from './Body.types';
+import ExpandedRow from './ExpandedRow';
+
+import styles from '../octable.module.scss';
+
+function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
+    props: BodyRowProps<RecordType>
+) {
+    const {
+        classNames,
+        style,
+        record,
+        index,
+        renderIndex,
+        rowKey,
+        rowExpandable,
+        expandedKeys,
+        onRow,
+        indent = 0,
+        rowComponent: RowComponent,
+        cellComponent,
+        childrenColumnName,
+    } = props;
+    const { fixedInfoList } = useContext(TableContext);
+    const {
+        flattenColumns,
+        expandableType,
+        expandRowByClick,
+        onTriggerExpand,
+        rowClassName,
+        expandedRowClassName,
+        indentSize,
+        expandIcon,
+        expandedRowRender,
+    } = useContext(BodyContext);
+    const [expandRended, setExpandRended] = useState(false);
+
+    const expanded = expandedKeys && expandedKeys.has(props.recordKey);
+
+    useEffect(() => {
+        if (expanded) {
+            setExpandRended(true);
+        }
+    }, [expanded]);
+
+    const rowSupportExpand =
+        expandableType === 'row' && (!rowExpandable || rowExpandable(record));
+    // Only when row is not expandable and `children` exist in record
+    const nestExpandable = expandableType === 'nest';
+    const hasNestChildren: boolean =
+        childrenColumnName && record && (record as any)[childrenColumnName];
+    const mergedExpandable = rowSupportExpand || nestExpandable;
+
+    // ======================== Expandable =========================
+    const onExpandRef = useRef(onTriggerExpand);
+    onExpandRef.current = onTriggerExpand;
+
+    const onInternalTriggerExpand = (
+        ...args: Parameters<typeof onTriggerExpand>
+    ) => {
+        onExpandRef.current(...args);
+    };
+
+    // =========================== onRow ===========================
+    let additionalProps: React.HTMLAttributes<HTMLElement>;
+    if (onRow) {
+        additionalProps = onRow(record, index);
+    }
+
+    const onClick: React.MouseEventHandler<HTMLElement> = (event, ...args) => {
+        if (expandRowByClick && mergedExpandable) {
+            onInternalTriggerExpand(record, event);
+        }
+
+        additionalProps?.onClick?.(event, ...args);
+    };
+
+    // ======================== Base tr row ========================
+    let computeRowClassName: string;
+    if (typeof rowClassName === 'string') {
+        computeRowClassName = rowClassName;
+    } else if (typeof rowClassName === 'function') {
+        computeRowClassName = rowClassName(record, index, indent);
+    }
+
+    const columnsKey = getColumnsKey(flattenColumns);
+    const baseRowNode = (
+        <RowComponent
+            {...additionalProps}
+            data-row-key={rowKey}
+            className={mergeClasses?.([
+                classNames,
+                'table-row',
+                `table-row-level-${indent}`,
+                computeRowClassName,
+                additionalProps && additionalProps.className,
+            ])}
+            style={{
+                ...style,
+                ...(additionalProps ? additionalProps.style : null),
+            }}
+            onClick={onClick}
+        >
+            {flattenColumns.map((column: ColumnType<RecordType>, colIndex) => {
+                const {
+                    render,
+                    dataIndex,
+                    classNames: columnClassName,
+                } = column;
+
+                const key = columnsKey[colIndex];
+                const fixedInfo = fixedInfoList[colIndex];
+
+                // ============= Used for nest expandable =============
+                let appendCellNode: React.ReactNode;
+                if (colIndex === 0 && nestExpandable) {
+                    appendCellNode = (
+                        <>
+                            <span
+                                style={{
+                                    paddingLeft: `${indentSize * indent}px`,
+                                }}
+                                className={`table-row-indent indent-level-${indent}`}
+                            />
+                            {expandIcon({
+                                expanded,
+                                expandable: hasNestChildren,
+                                record,
+                                onExpand: onInternalTriggerExpand,
+                            })}
+                        </>
+                    );
+                }
+
+                let additionalCellProps: React.HTMLAttributes<HTMLElement>;
+                if (column.onCell) {
+                    additionalCellProps = column.onCell(record, index);
+                }
+
+                return (
+                    <Cell
+                        classNames={columnClassName}
+                        ellipsis={column.ellipsis}
+                        align={column.align}
+                        component={cellComponent}
+                        key={key}
+                        record={record}
+                        index={index}
+                        renderIndex={renderIndex}
+                        dataIndex={dataIndex}
+                        render={render}
+                        shouldCellUpdate={column.shouldCellUpdate}
+                        expanded={appendCellNode && expanded}
+                        {...fixedInfo}
+                        appendNode={appendCellNode}
+                        additionalProps={additionalCellProps}
+                    />
+                );
+            })}
+        </RowComponent>
+    );
+
+    // ======================== Expand Row =========================
+    let expandRowNode: React.ReactElement;
+    if (rowSupportExpand && (expandRended || expanded)) {
+        const expandContent = expandedRowRender(
+            record,
+            index,
+            indent + 1,
+            expanded
+        );
+        const computedExpandedRowClassName =
+            expandedRowClassName && expandedRowClassName(record, index, indent);
+        expandRowNode = (
+            <ExpandedRow
+                expanded={expanded}
+                classNames={mergeClasses?.([
+                    styles.tableExpandedRow,
+                    `table-expanded-row-level-${indent + 1}`,
+                    computedExpandedRowClassName,
+                ])}
+                component={RowComponent}
+                cellComponent={cellComponent}
+                colSpan={flattenColumns.length}
+                isEmpty={false}
+            >
+                {expandContent}
+            </ExpandedRow>
+        );
+    }
+
+    return (
+        <>
+            {baseRowNode}
+            {expandRowNode}
+        </>
+    );
+}
+
+BodyRow.displayName = 'BodyRow';
+
+export default BodyRow;
diff --git a/src/components/Table/Internal/Body/ExpandedRow.tsx b/src/components/Table/Internal/Body/ExpandedRow.tsx
new file mode 100644
index 000000000..bda60801c
--- /dev/null
+++ b/src/components/Table/Internal/Body/ExpandedRow.tsx
@@ -0,0 +1,69 @@
+import React, { useContext, useMemo } from 'react';
+import { ExpandedRowProps } from './Body.types';
+import Cell from '../Cell';
+import TableContext from '../Context/TableContext';
+import ExpandedRowContext from '../Context/ExpandedRowContext';
+
+import styles from '../octable.module.scss';
+
+function ExpandedRow({
+    children,
+    component: Component,
+    cellComponent,
+    classNames,
+    expanded,
+    colSpan,
+    isEmpty,
+}: ExpandedRowProps) {
+    const { scrollbarSize } = useContext(TableContext);
+    const { fixHeader, fixColumn, componentWidth, horizonScroll } =
+        useContext(ExpandedRowContext);
+
+    // Cache render node
+    return useMemo(() => {
+        let contentNode = children;
+
+        if (isEmpty ? horizonScroll : fixColumn) {
+            contentNode = (
+                <div
+                    style={{
+                        width: componentWidth - (fixHeader ? scrollbarSize : 0),
+                        position: 'sticky',
+                        left: 0,
+                        overflow: 'hidden',
+                    }}
+                    className={styles.tableExpandedRowFixed}
+                >
+                    {contentNode}
+                </div>
+            );
+        }
+
+        return (
+            <Component
+                className={classNames}
+                style={{
+                    display: expanded ? null : 'none',
+                }}
+            >
+                <Cell component={cellComponent} colSpan={colSpan}>
+                    {contentNode}
+                </Cell>
+            </Component>
+        );
+    }, [
+        children,
+        Component,
+        classNames,
+        expanded,
+        colSpan,
+        isEmpty,
+        scrollbarSize,
+        componentWidth,
+        fixColumn,
+        fixHeader,
+        horizonScroll,
+    ]);
+}
+
+export default ExpandedRow;
diff --git a/src/components/Table/Internal/Body/MeasureCell.tsx b/src/components/Table/Internal/Body/MeasureCell.tsx
new file mode 100644
index 000000000..aca620293
--- /dev/null
+++ b/src/components/Table/Internal/Body/MeasureCell.tsx
@@ -0,0 +1,24 @@
+import React, { useEffect, useRef } from 'react';
+import { ResizeObserver } from '../../../../shared/ResizeObserver/ResizeObserver';
+import { MeasureCellProps } from './Body.types';
+
+export default function MeasureCell({
+    columnKey,
+    onColumnResize,
+}: MeasureCellProps) {
+    const cellRef = useRef<HTMLTableCellElement>();
+
+    useEffect(() => {
+        if (cellRef.current) {
+            onColumnResize(columnKey, cellRef.current.offsetWidth);
+        }
+    }, []);
+
+    return (
+        <ResizeObserver data={columnKey}>
+            <td ref={cellRef} style={{ padding: 0, border: 0, height: 0 }}>
+                <div style={{ height: 0, overflow: 'hidden' }}>&nbsp;</div>
+            </td>
+        </ResizeObserver>
+    );
+}
diff --git a/src/components/Table/Internal/Body/MeasureRow.tsx b/src/components/Table/Internal/Body/MeasureRow.tsx
new file mode 100644
index 000000000..a823b5747
--- /dev/null
+++ b/src/components/Table/Internal/Body/MeasureRow.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { ResizeObserver } from '../../../../shared/ResizeObserver/ResizeObserver';
+import MeasureCell from './MeasureCell';
+import { MeasureRowProps } from './Body.types';
+
+export default function MeasureRow({
+    columnsKey,
+    onColumnResize,
+}: MeasureRowProps) {
+    return (
+        <tr
+            aria-hidden="true"
+            className={'table-measure-row'}
+            style={{ height: 0, fontSize: 0 }}
+        >
+            <ResizeObserver.Collection
+                onBatchResize={(infoList) => {
+                    infoList.forEach(({ data: columnKey, size }) => {
+                        onColumnResize(columnKey, size.offsetWidth);
+                    });
+                }}
+            >
+                {columnsKey.map((columnKey) => (
+                    <MeasureCell
+                        key={columnKey}
+                        columnKey={columnKey}
+                        onColumnResize={onColumnResize}
+                    />
+                ))}
+            </ResizeObserver.Collection>
+        </tr>
+    );
+}
diff --git a/src/components/Table/Internal/Body/index.tsx b/src/components/Table/Internal/Body/index.tsx
new file mode 100644
index 000000000..e69c8f1e8
--- /dev/null
+++ b/src/components/Table/Internal/Body/index.tsx
@@ -0,0 +1,154 @@
+import React, {
+    memo,
+    useCallback,
+    useContext,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import TableContext from '../Context/TableContext';
+import ExpandedRow from './ExpandedRow';
+import BodyContext from '../Context/BodyContext';
+import { getColumnsKey } from '../Utilities/valueUtil';
+import ResizeContext from '../Context/ResizeContext';
+import BodyRow from './BodyRow';
+import useFlattenRecords from '../Hooks/useFlattenRecords';
+import HoverContext from '../Context/HoverContext';
+import type { PerfRecord } from '../Context/PerfContext';
+import PerfContext from '../Context/PerfContext';
+import MeasureRow from './MeasureRow';
+import { BodyProps } from './Body.types';
+
+import styles from '../octable.module.scss';
+
+function Body<RecordType>({
+    data,
+    getRowKey,
+    measureColumnWidth,
+    expandedKeys,
+    onRow,
+    rowExpandable,
+    emptyNode,
+    childrenColumnName,
+}: BodyProps<RecordType>) {
+    const { onColumnResize } = useContext(ResizeContext);
+    const { getComponent } = useContext(TableContext);
+    const { flattenColumns } = useContext(BodyContext);
+
+    const flattenData: { record: RecordType; indent: number; index: number }[] =
+        useFlattenRecords<RecordType>(
+            data,
+            childrenColumnName,
+            expandedKeys,
+            getRowKey
+        );
+
+    // =================== Performance ====================
+    const perfRef = useRef<PerfRecord>({
+        renderWithProps: false,
+    });
+
+    // ====================== Hover =======================
+    const [startRow, setStartRow] = useState(-1);
+    const [endRow, setEndRow] = useState(-1);
+
+    const onHover = useCallback((start: number, end: number) => {
+        setStartRow(start);
+        setEndRow(end);
+    }, []);
+
+    const hoverContext = useMemo(
+        () => ({ startRow, endRow, onHover }),
+        [onHover, startRow, endRow]
+    );
+
+    // ====================== Render ======================
+    const bodyNode = useMemo(() => {
+        const WrapperComponent = getComponent(['body', 'wrapper'], 'tbody');
+        const trComponent = getComponent(['body', 'row'], 'tr');
+        const tdComponent = getComponent(['body', 'cell'], 'td');
+
+        let rows: React.ReactNode;
+        if (data.length) {
+            rows = flattenData.map((item, idx) => {
+                const { record, indent, index: renderIndex } = item;
+
+                const key = getRowKey(record, idx);
+
+                return (
+                    <BodyRow
+                        key={key}
+                        rowKey={key}
+                        record={record}
+                        recordKey={key}
+                        index={idx}
+                        renderIndex={renderIndex}
+                        rowComponent={trComponent}
+                        cellComponent={tdComponent}
+                        expandedKeys={expandedKeys}
+                        onRow={onRow}
+                        getRowKey={getRowKey}
+                        rowExpandable={rowExpandable}
+                        childrenColumnName={childrenColumnName}
+                        indent={indent}
+                    />
+                );
+            });
+        } else {
+            rows = (
+                <ExpandedRow
+                    expanded
+                    classNames={styles.tablePlaceholder}
+                    component={trComponent}
+                    cellComponent={tdComponent}
+                    colSpan={flattenColumns.length}
+                    isEmpty
+                >
+                    {emptyNode}
+                </ExpandedRow>
+            );
+        }
+
+        const columnsKey = getColumnsKey(flattenColumns);
+
+        return (
+            <WrapperComponent className={'table-tbody'}>
+                {/* Measure body column width with additional hidden col */}
+                {measureColumnWidth && (
+                    <MeasureRow
+                        columnsKey={columnsKey}
+                        onColumnResize={onColumnResize}
+                    />
+                )}
+
+                {rows}
+            </WrapperComponent>
+        );
+    }, [
+        data,
+        onRow,
+        measureColumnWidth,
+        expandedKeys,
+        getRowKey,
+        getComponent,
+        emptyNode,
+        flattenColumns,
+        childrenColumnName,
+        onColumnResize,
+        rowExpandable,
+        flattenData,
+    ]);
+
+    return (
+        <PerfContext.Provider value={perfRef.current}>
+            <HoverContext.Provider value={hoverContext}>
+                {bodyNode}
+            </HoverContext.Provider>
+        </PerfContext.Provider>
+    );
+}
+
+const MemoBody = memo(Body);
+MemoBody.displayName = 'Body';
+
+export default MemoBody;
diff --git a/src/components/Table/Internal/Cell/Cell.types.ts b/src/components/Table/Internal/Cell/Cell.types.ts
new file mode 100644
index 000000000..9b2253120
--- /dev/null
+++ b/src/components/Table/Internal/Cell/Cell.types.ts
@@ -0,0 +1,55 @@
+import type {
+    DataIndex,
+    ColumnType,
+    CustomizeComponent,
+    DefaultRecordType,
+    AlignType,
+    CellEllipsisType,
+} from '../OcTable.types';
+import type { HoverContextProps } from '../Context/HoverContext';
+
+export interface InternalCellProps<RecordType extends DefaultRecordType>
+    extends Pick<HoverContextProps, 'onHover'> {
+    classNames?: string;
+    record?: RecordType;
+    /** `column` index is the real show rowIndex */
+    index?: number;
+    /** the index of the record. For the render(value, record, renderIndex) */
+    renderIndex?: number;
+    dataIndex?: DataIndex;
+    render?: ColumnType<RecordType>['render'];
+    component?: CustomizeComponent;
+    children?: React.ReactNode;
+    colSpan?: number;
+    rowSpan?: number;
+    ellipsis?: CellEllipsisType;
+    align?: AlignType;
+
+    shouldCellUpdate?: (record: RecordType, prevRecord: RecordType) => boolean;
+
+    // Fixed
+    fixLeft?: number | false;
+    fixRight?: number | false;
+    firstFixLeft?: boolean;
+    lastFixLeft?: boolean;
+    firstFixRight?: boolean;
+    lastFixRight?: boolean;
+
+    // ====================== Private Props ======================
+    /** @private Used for `expandable` with nest tree */
+    appendNode?: React.ReactNode;
+    additionalProps?: React.TdHTMLAttributes<HTMLTableCellElement>;
+    /** @private Fixed for user use `shouldCellUpdate` which block the render */
+    expanded?: boolean;
+
+    rowType?: 'header' | 'body' | 'footer';
+
+    isSticky?: boolean;
+
+    hovering?: boolean;
+}
+
+export type CellProps<RecordType extends DefaultRecordType> = Omit<
+    InternalCellProps<RecordType>,
+    keyof HoverContextProps
+>;
diff --git a/src/components/Table/Internal/Cell/index.tsx b/src/components/Table/Internal/Cell/index.tsx
new file mode 100644
index 000000000..b43ccd207
--- /dev/null
+++ b/src/components/Table/Internal/Cell/index.tsx
@@ -0,0 +1,314 @@
+import React, { forwardRef, memo, Ref, useContext, useMemo } from 'react';
+import { mergeClasses } from '../../../../shared/utilities';
+import shallowEqual from 'shallowequal';
+import type {
+    RenderedCell,
+    CellType,
+    DefaultRecordType,
+    CellEllipsisType,
+} from '../OcTable.types';
+import { CellProps, InternalCellProps } from './Cell.types';
+import { getPathValue, validateValue } from '../Utilities/valueUtil';
+import StickyContext from '../Context/StickyContext';
+import HoverContext from '../Context/HoverContext';
+import PerfContext from '../Context/PerfContext';
+
+import styles from '../octable.module.scss';
+
+/** Check if cell is in hover range */
+function inHoverRange(
+    cellStartRow: number,
+    cellRowSpan: number,
+    startRow: number,
+    endRow: number
+) {
+    const cellEndRow = cellStartRow + cellRowSpan - 1;
+    return cellStartRow <= endRow && cellEndRow >= startRow;
+}
+
+function isRenderCell<RecordType>(
+    data: React.ReactNode | RenderedCell<RecordType>
+): data is RenderedCell<RecordType> {
+    return (
+        data &&
+        typeof data === 'object' &&
+        !Array.isArray(data) &&
+        !React.isValidElement(data)
+    );
+}
+
+const getTitleFromCellRenderChildren = ({
+    ellipsis,
+    rowType,
+    children,
+}: Pick<InternalCellProps<any>, 'ellipsis' | 'rowType' | 'children'>) => {
+    let title: string;
+    const ellipsisConfig: CellEllipsisType =
+        ellipsis === true ? { showTitle: true } : ellipsis;
+    if (ellipsisConfig && (ellipsisConfig.showTitle || rowType === 'header')) {
+        if (typeof children === 'string' || typeof children === 'number') {
+            title = children.toString();
+        } else if (
+            React.isValidElement(children) &&
+            typeof children.props.children === 'string'
+        ) {
+            title = children.props.children;
+        }
+    }
+    return title;
+};
+
+function Cell<RecordType extends DefaultRecordType>(
+    {
+        classNames,
+        record,
+        index,
+        renderIndex,
+        dataIndex,
+        render,
+        children,
+        component: Component = 'td',
+        colSpan,
+        rowSpan, // This is already merged on WrapperCell
+        fixLeft,
+        fixRight,
+        firstFixLeft,
+        lastFixLeft,
+        firstFixRight,
+        lastFixRight,
+        appendNode,
+        additionalProps = {},
+        ellipsis,
+        align,
+        rowType,
+        isSticky,
+        hovering,
+        onHover,
+    }: InternalCellProps<RecordType>,
+    ref: React.Ref<any>
+): React.ReactElement {
+    const perfRecord = useContext(PerfContext);
+    const supportSticky = useContext(StickyContext);
+
+    // ==================== Child Node ====================
+    const [childNode, legacyCellProps] = useMemo<
+        [React.ReactNode, CellType<RecordType>] | [React.ReactNode]
+    >(() => {
+        if (validateValue(children)) {
+            return [children];
+        }
+
+        const value = getPathValue<
+            Record<string, unknown> | React.ReactNode,
+            RecordType
+        >(record, dataIndex);
+
+        // Customize render node
+        let returnChildNode = value;
+        let returnCellProps: CellType<RecordType> | undefined = undefined;
+
+        if (render) {
+            const renderData = render(value, record, renderIndex);
+
+            if (isRenderCell(renderData)) {
+                returnChildNode = renderData.children;
+                returnCellProps = renderData.props;
+                perfRecord.renderWithProps = true;
+            } else {
+                returnChildNode = renderData;
+            }
+        }
+
+        return [returnChildNode, returnCellProps];
+    }, [
+        /* eslint-disable react-hooks/exhaustive-deps */
+        // Always re-render if `renderWithProps`
+        perfRecord.renderWithProps ? Math.random() : 0,
+        /* eslint-enable */
+        children,
+        dataIndex,
+        perfRecord,
+        record,
+        render,
+        renderIndex,
+    ]);
+
+    let mergedChildNode = childNode;
+
+    // Not crash if final `childNode` is not validate ReactNode
+    if (
+        typeof mergedChildNode === 'object' &&
+        !Array.isArray(mergedChildNode) &&
+        !React.isValidElement(mergedChildNode)
+    ) {
+        mergedChildNode = null;
+    }
+
+    if (ellipsis && (lastFixLeft || firstFixRight)) {
+        mergedChildNode = (
+            <span className={styles.tableCellContent}>{mergedChildNode}</span>
+        );
+    }
+
+    const {
+        colSpan: cellColSpan,
+        rowSpan: cellRowSpan,
+        style: cellStyle,
+        classNames: cellClassName,
+        ...restCellProps
+    } = legacyCellProps || {};
+    const mergedColSpan =
+        (cellColSpan !== undefined ? cellColSpan : colSpan) ?? 1;
+    const mergedRowSpan =
+        (cellRowSpan !== undefined ? cellRowSpan : rowSpan) ?? 1;
+
+    if (mergedColSpan === 0 || mergedRowSpan === 0) {
+        return null;
+    }
+
+    // ====================== Fixed =======================
+    const fixedStyle: React.CSSProperties = {};
+    const isFixLeft = typeof fixLeft === 'number' && supportSticky;
+    const isFixRight = typeof fixRight === 'number' && supportSticky;
+
+    if (isFixLeft) {
+        fixedStyle.position = 'sticky';
+        fixedStyle.left = fixLeft as number;
+    }
+    if (isFixRight) {
+        fixedStyle.position = 'sticky';
+        fixedStyle.right = fixRight as number;
+    }
+
+    // ====================== Align =======================
+    const alignStyle: React.CSSProperties = {};
+    if (align) {
+        alignStyle.textAlign = align;
+    }
+
+    // ====================== Hover =======================
+    const onMouseEnter: React.MouseEventHandler<HTMLTableCellElement> = (
+        event
+    ) => {
+        if (record) {
+            onHover(index, index + mergedRowSpan - 1);
+        }
+
+        additionalProps?.onMouseEnter?.(event);
+    };
+
+    const onMouseLeave: React.MouseEventHandler<HTMLTableCellElement> = (
+        event
+    ) => {
+        if (record) {
+            onHover(-1, -1);
+        }
+
+        additionalProps?.onMouseLeave?.(event);
+    };
+
+    // ====================== Render ======================
+    const title = getTitleFromCellRenderChildren({
+        rowType,
+        ellipsis,
+        children: childNode,
+    });
+
+    const componentProps: React.TdHTMLAttributes<HTMLTableCellElement> & {
+        ref: Ref<any>;
+    } = {
+        title,
+        ...restCellProps,
+        ...additionalProps,
+        colSpan: mergedColSpan !== 1 ? mergedColSpan : null,
+        rowSpan: mergedRowSpan !== 1 ? mergedRowSpan : null,
+        className: mergeClasses?.([
+            styles.tableCell,
+            classNames,
+            { [styles.tableCellFixLeft]: isFixLeft && supportSticky },
+            { [styles.tableCellFixLeftFirst]: firstFixLeft && supportSticky },
+            { [styles.tableCellFixLeftLast]: lastFixLeft && supportSticky },
+            { [styles.tableCellFixRight]: isFixRight && supportSticky },
+            { [styles.tableCellFixRightFirst]: firstFixRight && supportSticky },
+            { [styles.tableCellFixRightLast]: lastFixRight && supportSticky },
+            { [styles.tableCellEllipsis]: ellipsis },
+            { ['table-cell-with-append']: appendNode },
+            {
+                [styles.tableCellFixSticky]:
+                    (isFixLeft || isFixRight) && isSticky && supportSticky,
+            },
+            { [styles.tableCellRowHover]: !legacyCellProps && hovering },
+            additionalProps.className,
+            cellClassName,
+        ]),
+        style: {
+            ...additionalProps.style,
+            ...alignStyle,
+            ...fixedStyle,
+            ...cellStyle,
+        },
+        onMouseEnter,
+        onMouseLeave,
+        ref: ref,
+    };
+
+    return (
+        <Component {...componentProps}>
+            {appendNode}
+            {mergedChildNode}
+        </Component>
+    );
+}
+
+const RefCell = forwardRef<any, InternalCellProps<any>>(Cell);
+RefCell.displayName = 'Cell';
+
+const comparePropList: (keyof InternalCellProps<any>)[] = [
+    'expanded',
+    'classNames',
+    'hovering',
+];
+
+const MemoCell = memo(
+    RefCell,
+    (prev: InternalCellProps<any>, next: InternalCellProps<any>) => {
+        if (next.shouldCellUpdate) {
+            return (
+                // Additional handle of expanded logic
+                comparePropList.every(
+                    (propName) => prev[propName] === next[propName]
+                ) &&
+                // User control update logic
+                !next.shouldCellUpdate(next.record, prev.record)
+            );
+        }
+
+        return shallowEqual(prev, next);
+    }
+);
+
+/** Inject hover data here, we still wish MemoCell keep simple `shouldCellUpdate` logic */
+const WrappedCell = forwardRef((props: CellProps<any>, ref: Ref<any>) => {
+    const { onHover, startRow, endRow } = useContext(HoverContext);
+    const { index, additionalProps = {}, colSpan, rowSpan } = props;
+    const { colSpan: cellColSpan, rowSpan: cellRowSpan } = additionalProps;
+
+    const mergedColSpan = colSpan ?? cellColSpan;
+    const mergedRowSpan = rowSpan ?? cellRowSpan;
+
+    const hovering = inHoverRange(index, mergedRowSpan || 1, startRow, endRow);
+
+    return (
+        <MemoCell
+            {...props}
+            colSpan={mergedColSpan}
+            rowSpan={mergedRowSpan}
+            hovering={hovering}
+            ref={ref}
+            onHover={onHover}
+        />
+    );
+});
+WrappedCell.displayName = 'WrappedCell';
+
+export default WrappedCell;
diff --git a/src/components/Table/Internal/ColGroup.tsx b/src/components/Table/Internal/ColGroup.tsx
new file mode 100644
index 000000000..a2b20a3d3
--- /dev/null
+++ b/src/components/Table/Internal/ColGroup.tsx
@@ -0,0 +1,34 @@
+import React, { ReactElement } from 'react';
+import { ColGroupProps } from './OcTable.types';
+import { INTERNAL_COL_DEFINE } from './constant';
+
+function ColGroup<RecordType>({
+    colWidths,
+    columns,
+    columCount,
+}: ColGroupProps<RecordType>) {
+    const cols: ReactElement[] = [];
+    const len = columCount || columns.length;
+
+    // Only insert col with width & additional props
+    // Skip if rest col do not have any useful info
+    let mustInsert = false;
+    for (let i = len - 1; i >= 0; i -= 1) {
+        const width = colWidths[i];
+        const column = columns && columns[i];
+        const additionalProps = column && (column as any)[INTERNAL_COL_DEFINE];
+
+        if (width || additionalProps || mustInsert) {
+            const { columnType, ...restAdditionalProps } =
+                additionalProps || {};
+            cols.unshift(
+                <col key={i} style={{ width }} {...restAdditionalProps} />
+            );
+            mustInsert = true;
+        }
+    }
+
+    return <colgroup>{cols}</colgroup>;
+}
+
+export default ColGroup;
diff --git a/src/components/Table/Internal/Column.tsx b/src/components/Table/Internal/Column.tsx
new file mode 100644
index 000000000..5539a628d
--- /dev/null
+++ b/src/components/Table/Internal/Column.tsx
@@ -0,0 +1,16 @@
+import type { ColumnType } from './OcTable.types';
+
+export interface ColumnProps<RecordType> extends ColumnType<RecordType> {
+    children?: null;
+}
+
+/**
+ * This is a syntactic sugar for `columns` prop.
+ * So HOC will not work on this.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function Column<RecordType>(_: ColumnProps<RecordType>): any {
+    return null;
+}
+
+export default Column;
diff --git a/src/components/Table/Internal/ColumnGroup.tsx b/src/components/Table/Internal/ColumnGroup.tsx
new file mode 100644
index 000000000..b5e1c208c
--- /dev/null
+++ b/src/components/Table/Internal/ColumnGroup.tsx
@@ -0,0 +1,21 @@
+import { ReactElement } from 'react';
+import type { ColumnProps } from './Column';
+import type { ColumnType } from './OcTable.types';
+
+export interface ColumnGroupProps<RecordType>
+    extends Omit<ColumnType<RecordType>, 'children'> {
+    children:
+        | ReactElement<ColumnProps<RecordType>>
+        | readonly ReactElement<ColumnProps<RecordType>>[];
+}
+
+/**
+ * This is a syntactic sugar for `columns` prop.
+ * So HOC will not work on this.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function ColumnGroup<RecordType>(_: ColumnGroupProps<RecordType>): any {
+    return null;
+}
+
+export default ColumnGroup;
diff --git a/src/components/Table/Internal/Context/BodyContext.tsx b/src/components/Table/Internal/Context/BodyContext.tsx
new file mode 100644
index 000000000..df36b2d03
--- /dev/null
+++ b/src/components/Table/Internal/Context/BodyContext.tsx
@@ -0,0 +1,33 @@
+import { createContext } from 'react';
+import type {
+    ColumnType,
+    DefaultRecordType,
+    ColumnsType,
+    TableLayout,
+    RenderExpandIcon,
+    ExpandableType,
+    RowClassName,
+    TriggerEventHandler,
+    ExpandedRowRender,
+} from '../OcTable.types';
+
+export interface BodyContextProps<RecordType = DefaultRecordType> {
+    rowClassName: string | RowClassName<RecordType>;
+    expandedRowClassName: RowClassName<RecordType>;
+
+    columns: ColumnsType<RecordType>;
+    flattenColumns: readonly ColumnType<RecordType>[];
+
+    tableLayout: TableLayout;
+
+    indentSize: number;
+    expandableType: ExpandableType;
+    expandRowByClick: boolean;
+    expandedRowRender: ExpandedRowRender<RecordType>;
+    expandIcon: RenderExpandIcon<RecordType>;
+    onTriggerExpand: TriggerEventHandler<RecordType>;
+}
+
+const BodyContext = createContext<BodyContextProps>(null);
+
+export default BodyContext;
diff --git a/src/components/Table/Internal/Context/ExpandedRowContext.tsx b/src/components/Table/Internal/Context/ExpandedRowContext.tsx
new file mode 100644
index 000000000..fde3b294c
--- /dev/null
+++ b/src/components/Table/Internal/Context/ExpandedRowContext.tsx
@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+
+export interface ExpandedRowProps {
+    componentWidth: number;
+    fixHeader: boolean;
+    fixColumn: boolean;
+    horizonScroll: boolean;
+}
+
+const ExpandedRowContext = createContext<ExpandedRowProps>(null);
+
+export default ExpandedRowContext;
diff --git a/src/components/Table/Internal/Context/HoverContext.tsx b/src/components/Table/Internal/Context/HoverContext.tsx
new file mode 100644
index 000000000..4ccb13e09
--- /dev/null
+++ b/src/components/Table/Internal/Context/HoverContext.tsx
@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+export interface HoverContextProps {
+    startRow: number;
+    endRow: number;
+    onHover: (start: number, end: number) => void;
+}
+
+const HoverContext = createContext<HoverContextProps>({} as any);
+
+export default HoverContext;
diff --git a/src/components/Table/Internal/Context/PerfContext.tsx b/src/components/Table/Internal/Context/PerfContext.tsx
new file mode 100644
index 000000000..1533f5286
--- /dev/null
+++ b/src/components/Table/Internal/Context/PerfContext.tsx
@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+
+export interface PerfRecord {
+    /**
+     * Ensure Cells always rerender if set to true,
+     * Use cautiously as this will effect performance
+     * rerender is triggered by certain events:
+     * onMouseEnter, onMouseLeave, onScroll
+     * @default false
+     */
+    renderWithProps: boolean;
+}
+
+const PerfContext = createContext<PerfRecord>({
+    renderWithProps: false,
+});
+
+export default PerfContext;
diff --git a/src/components/Table/Internal/Context/ResizeContext.tsx b/src/components/Table/Internal/Context/ResizeContext.tsx
new file mode 100644
index 000000000..86591cc8c
--- /dev/null
+++ b/src/components/Table/Internal/Context/ResizeContext.tsx
@@ -0,0 +1,9 @@
+import { createContext, Key } from 'react';
+
+interface ResizeContextProps {
+    onColumnResize: (columnKey: Key, width: number) => void;
+}
+
+const ResizeContext = createContext<ResizeContextProps>(null);
+
+export default ResizeContext;
diff --git a/src/components/Table/Internal/Context/SizeContext.tsx b/src/components/Table/Internal/Context/SizeContext.tsx
new file mode 100644
index 000000000..b0442608a
--- /dev/null
+++ b/src/components/Table/Internal/Context/SizeContext.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+export type SizeType = 'small' | 'medium' | 'large' | undefined;
+
+const SizeContext = React.createContext<SizeType>(undefined);
+
+export interface SizeContextProps {
+    size?: SizeType;
+    children?: React.ReactNode;
+}
+
+export const SizeContextProvider: React.FC<SizeContextProps> = ({
+    children,
+    size,
+}) => (
+    <SizeContext.Consumer>
+        {(originSize) => (
+            <SizeContext.Provider value={size || originSize}>
+                {children}
+            </SizeContext.Provider>
+        )}
+    </SizeContext.Consumer>
+);
+
+export default SizeContext;
diff --git a/src/components/Table/Internal/Context/StickyContext.tsx b/src/components/Table/Internal/Context/StickyContext.tsx
new file mode 100644
index 000000000..aaeb5ef76
--- /dev/null
+++ b/src/components/Table/Internal/Context/StickyContext.tsx
@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+// Tell cell that browser support sticky
+const StickyContext = createContext<boolean>(false);
+
+export default StickyContext;
diff --git a/src/components/Table/Internal/Context/TableContext.tsx b/src/components/Table/Internal/Context/TableContext.tsx
new file mode 100644
index 000000000..999780d89
--- /dev/null
+++ b/src/components/Table/Internal/Context/TableContext.tsx
@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+import type { GetComponent } from '../OcTable.types';
+import type { FixedInfo } from '../Utilities/fixUtil';
+
+export interface TableContextProps {
+    getComponent: GetComponent;
+    scrollbarSize: number;
+    direction: string;
+    fixedInfoList: readonly FixedInfo[];
+    isSticky: boolean;
+}
+
+const TableContext = createContext<TableContextProps>(null);
+
+export default TableContext;
diff --git a/src/components/Table/Internal/FixedHolder/FixedHolder.types.ts b/src/components/Table/Internal/FixedHolder/FixedHolder.types.ts
new file mode 100644
index 000000000..1fa649620
--- /dev/null
+++ b/src/components/Table/Internal/FixedHolder/FixedHolder.types.ts
@@ -0,0 +1,19 @@
+import type { HeaderProps } from '../Header/Header.types';
+
+export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
+    classNames: string;
+    noData: boolean;
+    maxContentScroll: boolean;
+    colWidths: readonly number[];
+    columCount: number;
+    direction: string;
+    fixHeader: boolean;
+    stickyTopOffset?: number;
+    stickyBottomOffset?: number;
+    stickyClassName?: string;
+    onScroll: (info: {
+        currentTarget: HTMLDivElement;
+        scrollLeft?: number;
+    }) => void;
+    children: (info: HeaderProps<RecordType>) => React.ReactNode;
+}
diff --git a/src/components/Table/Internal/FixedHolder/index.tsx b/src/components/Table/Internal/FixedHolder/index.tsx
new file mode 100644
index 000000000..cec280046
--- /dev/null
+++ b/src/components/Table/Internal/FixedHolder/index.tsx
@@ -0,0 +1,216 @@
+import React, {
+    forwardRef,
+    useCallback,
+    useEffect,
+    useContext,
+    useMemo,
+    useRef,
+} from 'react';
+import {
+    fillRef,
+    isStyleSupport,
+    mergeClasses,
+} from '../../../../shared/utilities';
+import ColGroup from '../ColGroup';
+import type { ColumnsType, ColumnType } from '../OcTable.types';
+import { FixedHeaderProps } from './FixedHolder.types';
+import TableContext from '../Context/TableContext';
+
+import styles from '../octable.module.scss';
+
+function useColumnWidth(colWidths: readonly number[], columCount: number) {
+    return useMemo(() => {
+        const cloneColumns: number[] = [];
+        for (let i = 0; i < columCount; i += 1) {
+            const val = colWidths[i];
+            if (val !== undefined) {
+                cloneColumns[i] = val;
+            } else {
+                return null;
+            }
+        }
+        return cloneColumns;
+    }, [colWidths.join('_'), columCount]);
+}
+
+const FixedHolder = forwardRef<HTMLDivElement, FixedHeaderProps<unknown>>(
+    (
+        {
+            classNames,
+            noData,
+            columns,
+            flattenColumns,
+            colWidths,
+            columCount,
+            stickyOffsets,
+            direction,
+            fixHeader,
+            stickyTopOffset,
+            stickyBottomOffset,
+            stickyClassName,
+            onScroll,
+            maxContentScroll,
+            children,
+            ...props
+        },
+        ref
+    ) => {
+        const { scrollbarSize, isSticky } = useContext(TableContext);
+        const supportedScrollbarSize: number = isStyleSupport(
+            'scrollbar-gutter'
+        )
+            ? 0
+            : scrollbarSize;
+        const combinationScrollBarSize: number =
+            isSticky && !fixHeader ? 0 : supportedScrollbarSize;
+        const scrollRef: React.MutableRefObject<HTMLDivElement> =
+            useRef<HTMLDivElement>(null);
+
+        const setScrollRef = useCallback((element: HTMLElement) => {
+            fillRef(ref, element);
+            fillRef(scrollRef, element);
+        }, []);
+
+        useEffect(() => {
+            function onWheel(e: WheelEvent) {
+                const { currentTarget, deltaX } =
+                    e as unknown as React.WheelEvent<HTMLDivElement>;
+                if (deltaX) {
+                    onScroll({
+                        currentTarget,
+                        scrollLeft: currentTarget.scrollLeft + deltaX,
+                    });
+                    e.preventDefault();
+                }
+            }
+            scrollRef.current?.addEventListener('wheel', onWheel);
+
+            return () => {
+                scrollRef.current?.removeEventListener('wheel', onWheel);
+            };
+        }, []);
+
+        // Check if all flattenColumns has width
+        const allFlattenColumnsWithWidth: boolean = useMemo(
+            () => flattenColumns.every((column) => column.width >= 0),
+            [flattenColumns]
+        );
+
+        // Add scrollbar column
+        const lastColumn: ColumnType<unknown> =
+            flattenColumns[flattenColumns.length - 1];
+        const ScrollBarColumn: ColumnType<unknown> & { scrollbar: true } = {
+            fixed: lastColumn ? lastColumn.fixed : null,
+            scrollbar: true,
+            onHeaderCell: () => ({
+                className: styles.tableCellScrollbar,
+            }),
+        };
+
+        const columnsWithScrollbar: ColumnsType<unknown> = useMemo<
+            ColumnsType<unknown>
+        >(
+            () =>
+                combinationScrollBarSize
+                    ? [...columns, ScrollBarColumn]
+                    : columns,
+            [combinationScrollBarSize, columns]
+        );
+
+        const flattenColumnsWithScrollbar: readonly ColumnType<unknown>[] =
+            useMemo(
+                () =>
+                    combinationScrollBarSize
+                        ? [...flattenColumns, ScrollBarColumn]
+                        : flattenColumns,
+                [combinationScrollBarSize, flattenColumns]
+            );
+
+        // Calculate the sticky offsets
+        const headerStickyOffsets: {
+            left: readonly number[];
+            right: readonly number[];
+            isSticky: boolean;
+        } = useMemo(() => {
+            const { right, left } = stickyOffsets;
+            return {
+                ...stickyOffsets,
+                left:
+                    direction === 'rtl'
+                        ? [
+                              ...left.map(
+                                  (width) => width + combinationScrollBarSize
+                              ),
+                              0,
+                          ]
+                        : left,
+                right:
+                    direction === 'rtl'
+                        ? right
+                        : [
+                              ...right.map(
+                                  (width) => width + combinationScrollBarSize
+                              ),
+                              0,
+                          ],
+                isSticky,
+            };
+        }, [combinationScrollBarSize, stickyOffsets, isSticky]);
+
+        const mergedColumnWidth: number[] = useColumnWidth(
+            colWidths,
+            columCount
+        );
+
+        return (
+            <div
+                style={{
+                    overflow: 'hidden',
+                    ...(isSticky
+                        ? { top: stickyTopOffset, bottom: stickyBottomOffset }
+                        : {}),
+                }}
+                ref={setScrollRef}
+                className={mergeClasses([
+                    classNames,
+                    { [stickyClassName]: !!stickyClassName },
+                ])}
+            >
+                <table
+                    style={{
+                        tableLayout: 'fixed',
+                        visibility:
+                            noData || mergedColumnWidth ? null : 'hidden',
+                    }}
+                >
+                    {(!noData ||
+                        !maxContentScroll ||
+                        allFlattenColumnsWithWidth) && (
+                        <ColGroup
+                            colWidths={
+                                mergedColumnWidth
+                                    ? [
+                                          ...mergedColumnWidth,
+                                          combinationScrollBarSize,
+                                      ]
+                                    : []
+                            }
+                            columCount={columCount + 1}
+                            columns={flattenColumnsWithScrollbar}
+                        />
+                    )}
+                    {children({
+                        ...props,
+                        stickyOffsets: headerStickyOffsets,
+                        columns: columnsWithScrollbar,
+                        flattenColumns: flattenColumnsWithScrollbar,
+                    })}
+                </table>
+            </div>
+        );
+    }
+);
+
+FixedHolder.displayName = 'FixedHolder';
+
+export default FixedHolder;
diff --git a/src/components/Table/Internal/Footer/Cell.tsx b/src/components/Table/Internal/Footer/Cell.tsx
new file mode 100644
index 000000000..c4fd86fe3
--- /dev/null
+++ b/src/components/Table/Internal/Footer/Cell.tsx
@@ -0,0 +1,45 @@
+import React, { useContext } from 'react';
+import SummaryContext from './SummaryContext';
+import Cell from '../Cell';
+import TableContext from '../Context/TableContext';
+import { SummaryCellProps } from './Footer.types';
+import { getCellFixedInfo } from '../Utilities/fixUtil';
+
+export default function SummaryCell({
+    classNames,
+    index,
+    children,
+    colSpan = 1,
+    rowSpan,
+    align,
+}: SummaryCellProps) {
+    const { direction } = useContext(TableContext);
+    const { scrollColumnIndex, stickyOffsets, flattenColumns } =
+        useContext(SummaryContext);
+    const lastIndex = index + colSpan - 1;
+    const mergedColSpan =
+        lastIndex + 1 === scrollColumnIndex ? colSpan + 1 : colSpan;
+
+    const fixedInfo = getCellFixedInfo(
+        index,
+        index + mergedColSpan - 1,
+        flattenColumns,
+        stickyOffsets,
+        direction
+    );
+
+    return (
+        <Cell
+            classNames={classNames}
+            index={index}
+            component="td"
+            record={null}
+            dataIndex={null}
+            align={align}
+            colSpan={mergedColSpan}
+            rowSpan={rowSpan}
+            render={() => children}
+            {...fixedInfo}
+        />
+    );
+}
diff --git a/src/components/Table/Internal/Footer/Footer.types.ts b/src/components/Table/Internal/Footer/Footer.types.ts
new file mode 100644
index 000000000..cefd993d6
--- /dev/null
+++ b/src/components/Table/Internal/Footer/Footer.types.ts
@@ -0,0 +1,31 @@
+import type { AlignType, ColumnType, StickyOffsets } from '../OcTable.types';
+
+export type FlattenColumns<RecordType> = readonly (ColumnType<RecordType> & {
+    scrollbar?: boolean;
+})[];
+
+export interface SummaryCellProps {
+    classNames?: string;
+    children?: React.ReactNode;
+    index: number;
+    colSpan?: number;
+    rowSpan?: number;
+    align?: AlignType;
+}
+
+export interface SummaryProps {
+    fixed?: boolean | 'top' | 'bottom';
+    children?: React.ReactNode;
+}
+
+export interface FooterRowProps {
+    children?: React.ReactNode;
+    classNames?: string;
+    style?: React.CSSProperties;
+}
+
+export interface FooterProps<RecordType> {
+    children: React.ReactNode;
+    stickyOffsets: StickyOffsets;
+    flattenColumns: FlattenColumns<RecordType>;
+}
diff --git a/src/components/Table/Internal/Footer/Row.tsx b/src/components/Table/Internal/Footer/Row.tsx
new file mode 100644
index 000000000..bc2a5823d
--- /dev/null
+++ b/src/components/Table/Internal/Footer/Row.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { FooterRowProps } from './Footer.types';
+
+export default function FooterRow({ children, ...props }: FooterRowProps) {
+    return <tr {...props}>{children}</tr>;
+}
diff --git a/src/components/Table/Internal/Footer/Summary.tsx b/src/components/Table/Internal/Footer/Summary.tsx
new file mode 100644
index 000000000..69ab168d0
--- /dev/null
+++ b/src/components/Table/Internal/Footer/Summary.tsx
@@ -0,0 +1,16 @@
+import type * as React from 'react';
+import { SummaryProps } from './Footer.types';
+import Cell from './Cell';
+import Row from './Row';
+
+/**
+ * Syntactic sugar. Does not support HOC.
+ */
+function Summary({ children }: SummaryProps) {
+    return children as React.ReactElement;
+}
+
+Summary.Row = Row;
+Summary.Cell = Cell;
+
+export default Summary;
diff --git a/src/components/Table/Internal/Footer/SummaryContext.tsx b/src/components/Table/Internal/Footer/SummaryContext.tsx
new file mode 100644
index 000000000..21e331b1a
--- /dev/null
+++ b/src/components/Table/Internal/Footer/SummaryContext.tsx
@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+import type { StickyOffsets } from '../OcTable.types';
+import { FlattenColumns } from './Footer.types';
+
+const SummaryContext = createContext<{
+    stickyOffsets?: StickyOffsets;
+    scrollColumnIndex?: number;
+    flattenColumns?: FlattenColumns<any>;
+}>({});
+
+export default SummaryContext;
diff --git a/src/components/Table/Internal/Footer/index.tsx b/src/components/Table/Internal/Footer/index.tsx
new file mode 100644
index 000000000..54aaf0626
--- /dev/null
+++ b/src/components/Table/Internal/Footer/index.tsx
@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react';
+import Summary from './Summary';
+import SummaryContext from './SummaryContext';
+import { FooterProps } from './Footer.types';
+
+import styles from '../octable.module.scss';
+
+function Footer<RecordType>({
+    children,
+    stickyOffsets,
+    flattenColumns,
+}: FooterProps<RecordType>) {
+    const lastColumnIndex = flattenColumns.length - 1;
+    const scrollColumn = flattenColumns[lastColumnIndex];
+
+    const summaryContext = useMemo(
+        () => ({
+            stickyOffsets,
+            flattenColumns,
+            scrollColumnIndex: scrollColumn?.scrollbar ? lastColumnIndex : null,
+        }),
+        [scrollColumn, flattenColumns, lastColumnIndex, stickyOffsets]
+    );
+
+    return (
+        <SummaryContext.Provider value={summaryContext}>
+            <tfoot className={styles.tableSummary}>{children}</tfoot>
+        </SummaryContext.Provider>
+    );
+}
+
+export default Footer;
+
+export const FooterComponents = Summary;
diff --git a/src/components/Table/Internal/FrameWrapper/FrameWrapper.tsx b/src/components/Table/Internal/FrameWrapper/FrameWrapper.tsx
new file mode 100644
index 000000000..8a483209f
--- /dev/null
+++ b/src/components/Table/Internal/FrameWrapper/FrameWrapper.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { FrameWrapperProps } from './FrameWrapper.types';
+
+export const FrameWrapper = ({ classNames, children }: FrameWrapperProps) => {
+    return <div className={classNames}>{children}</div>;
+};
diff --git a/src/components/Table/Internal/FrameWrapper/FrameWrapper.types.ts b/src/components/Table/Internal/FrameWrapper/FrameWrapper.types.ts
new file mode 100644
index 000000000..5c29149f5
--- /dev/null
+++ b/src/components/Table/Internal/FrameWrapper/FrameWrapper.types.ts
@@ -0,0 +1,6 @@
+import React from 'react';
+
+export interface FrameWrapperProps {
+    classNames: string;
+    children: React.ReactNode;
+}
diff --git a/src/components/Table/Internal/Header/Header.tsx b/src/components/Table/Internal/Header/Header.tsx
new file mode 100644
index 000000000..dc9d68755
--- /dev/null
+++ b/src/components/Table/Internal/Header/Header.tsx
@@ -0,0 +1,117 @@
+import React, { useContext, useMemo } from 'react';
+import type { ColumnsType, CellType, ColumnGroupType } from '../OcTable.types';
+import { HeaderProps } from './Header.types';
+import HeaderRow from './HeaderRow';
+import TableContext from '../Context/TableContext';
+
+function parseHeaderRows<RecordType>(
+    rootColumns: ColumnsType<RecordType>
+): CellType<RecordType>[][] {
+    const rows: CellType<RecordType>[][] = [];
+
+    function fillRowCells(
+        columns: ColumnsType<RecordType>,
+        colIndex: number,
+        rowIndex: number = 0
+    ): number[] {
+        // Init rows
+        rows[rowIndex] = rows[rowIndex] || [];
+
+        let currentColIndex = colIndex;
+        const colSpans: number[] = columns.filter(Boolean).map((column) => {
+            const cell: CellType<RecordType> = {
+                key: column.key,
+                classNames: column.classNames || '',
+                children: column.title,
+                column,
+                colStart: currentColIndex,
+            };
+
+            let colSpan: number = 1;
+
+            const subColumns = (column as ColumnGroupType<RecordType>).children;
+            if (subColumns && subColumns.length > 0) {
+                colSpan = fillRowCells(
+                    subColumns,
+                    currentColIndex,
+                    rowIndex + 1
+                ).reduce((total, count) => total + count, 0);
+                cell.hasSubColumns = true;
+            }
+
+            if ('colSpan' in column) {
+                ({ colSpan } = column);
+            }
+
+            if ('rowSpan' in column) {
+                cell.rowSpan = column.rowSpan;
+            }
+
+            cell.colSpan = colSpan;
+            cell.colEnd = cell.colStart + colSpan - 1;
+            rows[rowIndex].push(cell);
+
+            currentColIndex += colSpan;
+
+            return colSpan;
+        });
+
+        return colSpans;
+    }
+
+    // Generate `rows` cell data
+    fillRowCells(rootColumns, 0);
+
+    // Handle `rowSpan`
+    const rowCount = rows.length;
+    for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
+        rows[rowIndex].forEach((cell) => {
+            if (!('rowSpan' in cell) && !cell.hasSubColumns) {
+                // eslint-disable-next-line no-param-reassign
+                cell.rowSpan = rowCount - rowIndex;
+            }
+        });
+    }
+
+    return rows;
+}
+
+function Header<RecordType>({
+    stickyOffsets,
+    columns,
+    flattenColumns,
+    onHeaderRow,
+}: HeaderProps<RecordType>): React.ReactElement {
+    const { getComponent } = useContext(TableContext);
+    const rows: CellType<RecordType>[][] = useMemo(
+        () => parseHeaderRows(columns),
+        [columns]
+    );
+
+    const WrapperComponent = getComponent(['header', 'wrapper'], 'thead');
+    const trComponent = getComponent(['header', 'row'], 'tr');
+    const thComponent = getComponent(['header', 'cell'], 'th');
+
+    return (
+        <WrapperComponent className={'table-thead'}>
+            {rows.map((row, rowIndex) => {
+                const rowNode = (
+                    <HeaderRow
+                        key={rowIndex}
+                        flattenColumns={flattenColumns}
+                        cells={row}
+                        stickyOffsets={stickyOffsets}
+                        rowComponent={trComponent}
+                        cellComponent={thComponent}
+                        onHeaderRow={onHeaderRow}
+                        index={rowIndex}
+                    />
+                );
+
+                return rowNode;
+            })}
+        </WrapperComponent>
+    );
+}
+
+export default Header;
diff --git a/src/components/Table/Internal/Header/Header.types.ts b/src/components/Table/Internal/Header/Header.types.ts
new file mode 100644
index 000000000..bd1ecb9a6
--- /dev/null
+++ b/src/components/Table/Internal/Header/Header.types.ts
@@ -0,0 +1,25 @@
+import type {
+    CellType,
+    ColumnType,
+    ColumnsType,
+    CustomizeComponent,
+    GetComponentProps,
+    StickyOffsets,
+} from '../OcTable.types';
+
+export interface RowProps<RecordType> {
+    cells: readonly CellType<RecordType>[];
+    stickyOffsets: StickyOffsets;
+    flattenColumns: readonly ColumnType<RecordType>[];
+    rowComponent: CustomizeComponent;
+    cellComponent: CustomizeComponent;
+    onHeaderRow: GetComponentProps<readonly ColumnType<RecordType>[]>;
+    index: number;
+}
+
+export interface HeaderProps<RecordType> {
+    columns: ColumnsType<RecordType>;
+    flattenColumns: readonly ColumnType<RecordType>[];
+    stickyOffsets: StickyOffsets;
+    onHeaderRow: GetComponentProps<readonly ColumnType<RecordType>[]>;
+}
diff --git a/src/components/Table/Internal/Header/HeaderRow.tsx b/src/components/Table/Internal/Header/HeaderRow.tsx
new file mode 100644
index 000000000..3b5e731f0
--- /dev/null
+++ b/src/components/Table/Internal/Header/HeaderRow.tsx
@@ -0,0 +1,66 @@
+import React, { useContext } from 'react';
+import Cell from '../Cell';
+import type { CellType } from '../OcTable.types';
+import { RowProps } from './Header.types';
+import TableContext from '../Context/TableContext';
+import { getCellFixedInfo } from '../Utilities/fixUtil';
+import { getColumnsKey } from '../Utilities/valueUtil';
+
+function HeaderRow<RecordType>({
+    cells,
+    stickyOffsets,
+    flattenColumns,
+    rowComponent: RowComponent,
+    cellComponent: CellComponent,
+    onHeaderRow,
+    index,
+}: RowProps<RecordType>) {
+    const { direction } = useContext(TableContext);
+
+    let rowProps: React.HTMLAttributes<HTMLElement>;
+    if (onHeaderRow) {
+        rowProps = onHeaderRow(
+            cells.map((cell) => cell.column),
+            index
+        );
+    }
+
+    const columnsKey = getColumnsKey(cells.map((cell) => cell.column));
+
+    return (
+        <RowComponent {...rowProps}>
+            {cells.map((cell: CellType<RecordType>, cellIndex) => {
+                const { column } = cell;
+                const fixedInfo = getCellFixedInfo(
+                    cell.colStart,
+                    cell.colEnd,
+                    flattenColumns,
+                    stickyOffsets,
+                    direction
+                );
+
+                let additionalProps: React.HTMLAttributes<HTMLElement>;
+                if (column && column.onHeaderCell) {
+                    additionalProps = cell.column.onHeaderCell(column);
+                }
+
+                return (
+                    <Cell
+                        {...cell}
+                        ellipsis={column.ellipsis}
+                        align={column.align}
+                        component={CellComponent}
+                        key={columnsKey[cellIndex]}
+                        {...fixedInfo}
+                        additionalProps={additionalProps}
+                        rowType="header"
+                    />
+                );
+            })}
+        </RowComponent>
+    );
+}
+
+HeaderRow.displayName = 'HeaderRow';
+
+export default HeaderRow;
diff --git a/src/components/Table/Internal/Hooks/useColumns.tsx b/src/components/Table/Internal/Hooks/useColumns.tsx
new file mode 100644
index 000000000..0bba9477f
--- /dev/null
+++ b/src/components/Table/Internal/Hooks/useColumns.tsx
@@ -0,0 +1,266 @@
+import React, { useMemo } from 'react';
+import { toArray } from '../../../../shared/utilities';
+import type {
+    ColumnsType,
+    ColumnType,
+    FixedType,
+    Key,
+    GetRowKey,
+    TriggerEventHandler,
+    RenderExpandIcon,
+    ColumnGroupType,
+} from '../OcTable.types';
+import { INTERNAL_COL_DEFINE } from '../constant';
+import { EXPAND_COLUMN } from '../constant';
+
+import styles from '../octable.module.scss';
+
+export function convertChildrenToColumns<RecordType>(
+    children: React.ReactNode
+): ColumnsType<RecordType> {
+    return toArray(children)
+        .filter((node: any) => React.isValidElement(node))
+        .map(({ key, props }: React.ReactElement) => {
+            const { children: nodeChildren, ...restProps } = props;
+            const column = {
+                key,
+                ...restProps,
+            };
+
+            if (nodeChildren) {
+                column.children = convertChildrenToColumns(nodeChildren);
+            }
+
+            return column;
+        });
+}
+
+function flatColumns<RecordType>(
+    columns: ColumnsType<RecordType>
+): ColumnType<RecordType>[] {
+    return columns.reduce((list, column) => {
+        const { fixed } = column;
+
+        // Convert `fixed='true'` to `fixed='left'` instead
+        const parsedFixed = fixed === true ? 'left' : fixed;
+
+        const subColumns = (column as ColumnGroupType<RecordType>).children;
+        if (subColumns && subColumns.length > 0) {
+            return [
+                ...list,
+                ...flatColumns(subColumns).map((subColum) => ({
+                    fixed: parsedFixed,
+                    ...subColum,
+                })),
+            ];
+        }
+        return [
+            ...list,
+            {
+                ...column,
+                fixed: parsedFixed,
+            },
+        ];
+    }, []);
+}
+
+function warningFixed(flattenColumns: readonly { fixed?: FixedType }[]) {
+    let allFixLeft = true;
+    for (let i = 0; i < flattenColumns.length; i += 1) {
+        const col = flattenColumns[i];
+        if (allFixLeft && col.fixed !== 'left') {
+            allFixLeft = false;
+        } else if (!allFixLeft && col.fixed === 'left') {
+            break;
+        }
+    }
+
+    let allFixRight = true;
+    for (let i = flattenColumns.length - 1; i >= 0; i -= 1) {
+        const col = flattenColumns[i];
+        if (allFixRight && col.fixed !== 'right') {
+            allFixRight = false;
+        } else if (!allFixRight && col.fixed === 'right') {
+            break;
+        }
+    }
+}
+
+function revertForRtl<RecordType>(
+    columns: ColumnsType<RecordType>
+): ColumnsType<RecordType> {
+    return columns.map((column) => {
+        const { fixed, ...restProps } = column;
+
+        // Convert `fixed='left'` to `fixed='right'` instead
+        let parsedFixed = fixed;
+        if (fixed === 'left') {
+            parsedFixed = 'right';
+        } else if (fixed === 'right') {
+            parsedFixed = 'left';
+        }
+        return {
+            fixed: parsedFixed,
+            ...restProps,
+        };
+    });
+}
+
+/**
+ * Parse `columns` & `children` into `columns`.
+ */
+function useColumns<RecordType>(
+    {
+        columns,
+        children,
+        expandable,
+        expandedKeys,
+        getRowKey,
+        onTriggerExpand,
+        expandIcon,
+        rowExpandable,
+        direction,
+        expandRowByClick,
+        columnWidth,
+        fixed,
+    }: {
+        columns?: ColumnsType<RecordType>;
+        children?: React.ReactNode;
+        expandable: boolean;
+        expandedKeys: Set<Key>;
+        getRowKey: GetRowKey<RecordType>;
+        onTriggerExpand: TriggerEventHandler<RecordType>;
+        expandIcon?: RenderExpandIcon<RecordType>;
+        rowExpandable?: (record: RecordType) => boolean;
+        direction?: string;
+        expandRowByClick?: boolean;
+        columnWidth?: number | string;
+        fixed?: FixedType;
+    },
+    transformColumns: (
+        columns: ColumnsType<RecordType>
+    ) => ColumnsType<RecordType>
+): [ColumnsType<RecordType>, readonly ColumnType<RecordType>[]] {
+    const baseColumns = useMemo<ColumnsType<RecordType>>(
+        () => columns || convertChildrenToColumns(children),
+        [columns, children]
+    );
+
+    // ========================== Expand ==========================
+    const withExpandColumns = useMemo<ColumnsType<RecordType>>(() => {
+        if (expandable) {
+            let cloneColumns = baseColumns.slice();
+
+            // >>> Insert expand column if not exist
+            if (!cloneColumns.includes(EXPAND_COLUMN)) {
+                const expandColIndex = 0;
+                if (expandColIndex >= 0) {
+                    cloneColumns.splice(expandColIndex, 0, EXPAND_COLUMN);
+                }
+            }
+
+            const expandColumnIndex = cloneColumns.indexOf(EXPAND_COLUMN);
+            cloneColumns = cloneColumns.filter(
+                (column, index) =>
+                    column !== EXPAND_COLUMN || index === expandColumnIndex
+            );
+
+            // >>> Check if expand column need to fixed
+            const prevColumn = baseColumns[expandColumnIndex];
+
+            let fixedColumn: FixedType | null;
+            if (fixed === 'left' || fixed) {
+                fixedColumn = 'left';
+            } else if (fixed === 'right' || fixed) {
+                fixedColumn = 'right';
+            } else {
+                fixedColumn = prevColumn ? prevColumn.fixed : null;
+            }
+
+            // >>> Create expandable column
+            const expandColumn = {
+                [INTERNAL_COL_DEFINE]: {
+                    className: styles.tableExpandIconCol,
+                    columnType: 'EXPAND_COLUMN',
+                },
+                title: '',
+                fixed: fixedColumn,
+                className: styles.tableRowExpandIconCell,
+                width: columnWidth,
+                render: (_: any, record: any, index: number) => {
+                    const rowKey = getRowKey(record, index);
+                    const expanded = expandedKeys.has(rowKey);
+                    const recordExpandable = rowExpandable
+                        ? rowExpandable(record)
+                        : true;
+
+                    const icon = expandIcon({
+                        expanded,
+                        expandable: recordExpandable,
+                        record,
+                        onExpand: onTriggerExpand,
+                    });
+
+                    if (expandRowByClick) {
+                        return (
+                            <span onClick={(e) => e.stopPropagation()}>
+                                {icon}
+                            </span>
+                        );
+                    }
+                    return icon;
+                },
+            };
+
+            return cloneColumns.map((col) =>
+                col === EXPAND_COLUMN ? expandColumn : col
+            );
+        }
+
+        return baseColumns.filter((col) => col !== EXPAND_COLUMN);
+    }, [
+        expandable,
+        baseColumns,
+        getRowKey,
+        expandedKeys,
+        expandIcon,
+        direction,
+    ]);
+
+    // ========================= Transform ========================
+    const mergedColumns = useMemo(() => {
+        let finalColumns = withExpandColumns;
+        if (transformColumns) {
+            finalColumns = transformColumns(finalColumns);
+        }
+
+        // Always provides at least one column for table display
+        if (!finalColumns.length) {
+            finalColumns = [
+                {
+                    render: () => null,
+                },
+            ];
+        }
+        return finalColumns;
+    }, [transformColumns, withExpandColumns, direction]);
+
+    // ========================== Flatten =========================
+    const flattenColumns = useMemo(() => {
+        if (direction === 'rtl') {
+            return revertForRtl(flatColumns(mergedColumns));
+        }
+        return flatColumns(mergedColumns);
+    }, [mergedColumns, direction]);
+    // Only check out of production since it's waste for each render
+    if (process.env.NODE_ENV !== 'production') {
+        warningFixed(
+            direction === 'rtl'
+                ? flattenColumns.slice().reverse()
+                : flattenColumns
+        );
+    }
+    return [mergedColumns, flattenColumns];
+}
+
+export default useColumns;
diff --git a/src/components/Table/Internal/Hooks/useFlattenRecords.ts b/src/components/Table/Internal/Hooks/useFlattenRecords.ts
new file mode 100644
index 000000000..0c386a8de
--- /dev/null
+++ b/src/components/Table/Internal/Hooks/useFlattenRecords.ts
@@ -0,0 +1,102 @@
+import { useMemo } from 'react';
+import type { GetRowKey, Key } from '../OcTable.types';
+
+// recursion (flat tree structure)
+function flatRecord<T>(
+    record: T,
+    indent: number,
+    childrenColumnName: string,
+    expandedKeys: Set<Key>,
+    getRowKey: GetRowKey<T>,
+    index: number
+): any {
+    const arr = [];
+
+    arr.push({
+        record,
+        indent,
+        index,
+    });
+
+    const key = getRowKey(record);
+
+    const expanded = expandedKeys?.has(key);
+
+    if (
+        record &&
+        Array.isArray((record as any)[childrenColumnName]) &&
+        expanded
+    ) {
+        // expanded state, flat record
+        for (
+            let i = 0;
+            i < (record as any)[childrenColumnName].length;
+            i += 1
+        ) {
+            const tempArr = flatRecord(
+                (record as any)[childrenColumnName][i],
+                indent + 1,
+                childrenColumnName,
+                expandedKeys,
+                getRowKey,
+                i
+            );
+
+            arr.push(...tempArr);
+        }
+    }
+
+    return arr;
+}
+
+/**
+ * flat tree data on expanded state
+ *
+ * @export
+ * @template T
+ * @param {*} data : table data
+ * @param {string} childrenColumnName
+ * @param {Set<Key>} expandedKeys
+ * @param {GetRowKey<T>} getRowKey
+ * @returns flattened data
+ */
+export default function useFlattenRecords<T>(
+    data: any,
+    childrenColumnName: string,
+    expandedKeys: Set<Key>,
+    getRowKey: GetRowKey<T>
+) {
+    const arr: { record: T; indent: number; index: number }[] = useMemo(() => {
+        if (expandedKeys?.size) {
+            const temp: { record: T; indent: number; index: number }[] = [];
+
+            // collect flattened record
+            for (let i = 0; i < data?.length; i += 1) {
+                const record = data[i];
+
+                temp.push(
+                    ...flatRecord<T>(
+                        record,
+                        0,
+                        childrenColumnName,
+                        expandedKeys,
+                        getRowKey,
+                        i
+                    )
+                );
+            }
+
+            return temp;
+        }
+
+        return data?.map((item: any, index: number) => {
+            return {
+                record: item,
+                indent: 0,
+                index,
+            };
+        });
+    }, [data, childrenColumnName, expandedKeys, getRowKey]);
+
+    return arr;
+}
diff --git a/src/components/Table/Internal/Hooks/useFrame.ts b/src/components/Table/Internal/Hooks/useFrame.ts
new file mode 100644
index 000000000..cf9d496fb
--- /dev/null
+++ b/src/components/Table/Internal/Hooks/useFrame.ts
@@ -0,0 +1,80 @@
+import { useRef, useState, useEffect } from 'react';
+
+export type Updater<State> = (prev: State) => State;
+
+/**
+ * Execute code before next frame but async
+ */
+export function useLayoutState<State>(
+    defaultState: State
+): [State, (updater: Updater<State>) => void] {
+    const stateRef = useRef(defaultState);
+    const [, forceUpdate] = useState({});
+
+    const lastPromiseRef = useRef<Promise<void>>(null);
+    const updateBatchRef = useRef<Updater<State>[]>([]);
+
+    function setFrameState(updater: Updater<State>) {
+        updateBatchRef.current.push(updater);
+
+        const promise = Promise.resolve();
+        lastPromiseRef.current = promise;
+
+        promise.then(() => {
+            if (lastPromiseRef.current === promise) {
+                const prevBatch = updateBatchRef.current;
+                const prevState = stateRef.current;
+                updateBatchRef.current = [];
+
+                prevBatch.forEach((batchUpdater) => {
+                    stateRef.current = batchUpdater(stateRef.current);
+                });
+
+                lastPromiseRef.current = null;
+
+                if (prevState !== stateRef.current) {
+                    forceUpdate({});
+                }
+            }
+        });
+    }
+
+    useEffect(
+        () => () => {
+            lastPromiseRef.current = null;
+        },
+        []
+    );
+
+    return [stateRef.current, setFrameState];
+}
+
+/** Lock frame, when frame pass reset the lock. */
+export function useTimeoutLock<State>(
+    defaultState?: State
+): [(state: State) => void, () => State | null] {
+    const frameRef = useRef<State | null>(defaultState || null);
+    const timeoutRef = useRef<number>();
+
+    function cleanUp() {
+        window.clearTimeout(timeoutRef.current);
+    }
+
+    function setState(newState: State) {
+        frameRef.current = newState;
+        cleanUp();
+
+        timeoutRef.current = window.setTimeout(() => {
+            frameRef.current = null;
+            timeoutRef.current = undefined;
+        }, 100);
+    }
+
+    function getState() {
+        return frameRef.current;
+    }
+
+    useEffect(() => cleanUp, []);
+
+    return [setState, getState];
+}
diff --git a/src/components/Table/Internal/Hooks/useSticky.ts b/src/components/Table/Internal/Hooks/useSticky.ts
new file mode 100644
index 000000000..d0102eae3
--- /dev/null
+++ b/src/components/Table/Internal/Hooks/useSticky.ts
@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import { canUseDom } from '../../../../shared/utilities';
+import type { TableSticky } from '../OcTable.types';
+
+import styles from '../octable.module.scss';
+
+// fix ssr render
+const defaultContainer = canUseDom ? window : null;
+
+/** Sticky header hooks */
+export default function useSticky(sticky: boolean | TableSticky): {
+    isSticky: boolean;
+    offsetHeader: number;
+    offsetSummary: number;
+    offsetScroll: number;
+    stickyClassName: string;
+    container: Window | HTMLElement;
+} {
+    const {
+        offsetHeader = 0,
+        offsetSummary = 0,
+        offsetScroll = 0,
+        getContainer = () => defaultContainer,
+    } = typeof sticky === 'object' ? sticky : {};
+
+    const container = getContainer() || defaultContainer;
+
+    return useMemo(() => {
+        const isSticky = !!sticky;
+        return {
+            isSticky,
+            stickyClassName: isSticky ? styles.tableStickyHolder : '',
+            offsetHeader,
+            offsetSummary,
+            offsetScroll,
+            container,
+        };
+    }, [offsetScroll, offsetHeader, offsetSummary, container]);
+}
diff --git a/src/components/Table/Internal/Hooks/useStickyOffsets.ts b/src/components/Table/Internal/Hooks/useStickyOffsets.ts
new file mode 100644
index 000000000..93744c3b7
--- /dev/null
+++ b/src/components/Table/Internal/Hooks/useStickyOffsets.ts
@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+import type { StickyOffsets } from '../OcTable.types';
+
+/**
+ * Get sticky column offset width
+ */
+function useStickyOffsets(
+    colWidths: number[],
+    columnCount: number,
+    direction: string
+) {
+    const stickyOffsets: StickyOffsets = useMemo(() => {
+        const leftOffsets: number[] = [];
+        const rightOffsets: number[] = [];
+        let left = 0;
+        let right = 0;
+
+        for (let start = 0; start < columnCount; start += 1) {
+            if (direction === 'rtl') {
+                // Left offset
+                rightOffsets[start] = right;
+                right += colWidths[start] || 0;
+
+                // Right offset
+                const end = columnCount - start - 1;
+                leftOffsets[end] = left;
+                left += colWidths[end] || 0;
+            } else {
+                // Left offset
+                leftOffsets[start] = left;
+                left += colWidths[start] || 0;
+
+                // Right offset
+                const end = columnCount - start - 1;
+                rightOffsets[end] = right;
+                right += colWidths[end] || 0;
+            }
+        }
+
+        return {
+            left: leftOffsets,
+            right: rightOffsets,
+        };
+    }, [colWidths, columnCount, direction]);
+
+    return stickyOffsets;
+}
+
+export default useStickyOffsets;
diff --git a/src/components/Table/Internal/OcTable.tsx b/src/components/Table/Internal/OcTable.tsx
new file mode 100644
index 000000000..4fa9977af
--- /dev/null
+++ b/src/components/Table/Internal/OcTable.tsx
@@ -0,0 +1,836 @@
+import React, {
+    memo,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import {
+    getTargetScrollBarSize,
+    isStyleSupport,
+    isVisible,
+    mergeClasses,
+    pickAttrs,
+} from '../../../shared/utilities';
+import shallowEqual from 'shallowequal';
+import {
+    ResizeObserver,
+    SizeInfo,
+} from '../../../shared/ResizeObserver/ResizeObserver';
+import ColumnGroup from './ColumnGroup';
+import Column from './Column';
+import Header from './Header/Header';
+import type {
+    CustomizeComponent,
+    CustomizeScrollBody,
+    DefaultRecordType,
+    ExpandableType,
+    GetComponent,
+    GetRowKey,
+    Key,
+    MemoTableContentProps,
+    TableComponents,
+    TableLayout,
+    OcTableProps,
+    TriggerEventHandler,
+} from './OcTable.types';
+import TableContext from './Context/TableContext';
+import BodyContext from './Context/BodyContext';
+import Body from './Body';
+import useColumns from './Hooks/useColumns';
+import { useLayoutState, useTimeoutLock } from './Hooks/useFrame';
+import {
+    getPathValue,
+    mergeObject,
+    validateValue,
+    getColumnsKey,
+} from './Utilities/valueUtil';
+import ResizeContext from './Context/ResizeContext';
+import useStickyOffsets from './Hooks/useStickyOffsets';
+import ColGroup from './ColGroup';
+import { FrameWrapper } from './FrameWrapper/FrameWrapper';
+import Footer, { FooterComponents } from './Footer';
+import { findAllChildrenKeys, renderExpandIcon } from './Utilities/expandUtil';
+import { getCellFixedInfo } from './Utilities/fixUtil';
+import StickyScrollBar from './stickyScrollBar';
+import useSticky from './Hooks/useSticky';
+import FixedHolder from './FixedHolder';
+import type { SummaryProps } from './Footer/Footer.types';
+import Summary from './Footer/Summary';
+import StickyContext from './Context/StickyContext';
+import ExpandedRowContext from './Context/ExpandedRowContext';
+import { EXPAND_COLUMN } from './constant';
+
+import styles from './octable.module.scss';
+
+// Used for conditions cache
+const EMPTY_DATA: any[] = [];
+
+// Used for customize scroll
+const EMPTY_SCROLL_TARGET: Object = {};
+
+const MemoTableContent = memo<MemoTableContentProps>(
+    ({ children }) => children as React.ReactElement,
+
+    (prev, next) => {
+        if (!shallowEqual(prev.props, next.props)) {
+            return false;
+        }
+
+        // No additional render when pinged status change.
+        // This is not a bug.
+        return (
+            prev.pingLeft !== next.pingLeft || prev.pingRight !== next.pingRight
+        );
+    }
+);
+
+function OcTable<RecordType extends DefaultRecordType>(
+    props: OcTableProps<RecordType>
+) {
+    const {
+        classNames,
+        rowClassName,
+        style,
+        data,
+        rowKey,
+        scroll,
+        tableLayout,
+        direction,
+
+        // Additional Part
+        title,
+        footer,
+        summary,
+
+        // Customize
+        id,
+        showHeader,
+        components,
+        emptyText,
+        onRow,
+        onHeaderRow,
+        transformColumns,
+        sticky,
+    } = props;
+
+    const mergedData = data || EMPTY_DATA;
+    const hasData = !!mergedData.length;
+
+    // ==================== Customize =====================
+    const mergedComponents = useMemo(
+        () => mergeObject<TableComponents<RecordType>>(components, {}),
+        [components]
+    );
+
+    const getComponent = useCallback<GetComponent>(
+        (path, defaultComponent) =>
+            getPathValue<CustomizeComponent, TableComponents<RecordType>>(
+                mergedComponents,
+                path
+            ) || defaultComponent,
+        [mergedComponents]
+    );
+
+    const getRowKey = useMemo<GetRowKey<RecordType>>(() => {
+        if (typeof rowKey === 'function') {
+            return rowKey;
+        }
+        return (record: RecordType) => {
+            const key = record && record[rowKey];
+            return key;
+        };
+    }, [rowKey]);
+
+    // ====================== Expand ======================
+    const expandableConfig = props.expandableConfig;
+
+    const {
+        expandIcon,
+        expandedRowKeys,
+        defaultExpandedRowKeys,
+        defaultExpandAllRows,
+        expandedRowRender,
+        onExpand,
+        onExpandedRowsChange,
+        expandRowByClick,
+        rowExpandable,
+        expandedRowClassName,
+        childrenColumnName,
+        indentSize,
+    } = expandableConfig;
+
+    const mergedExpandIcon = expandIcon || renderExpandIcon;
+    const mergedChildrenColumnName = childrenColumnName || 'children';
+    const expandableType = useMemo<ExpandableType>(() => {
+        if (expandedRowRender) {
+            return 'row';
+        }
+
+        /* eslint-disable no-underscore-dangle */
+        /**
+         * TODO: investigate removal of use `__PARENT_RENDER_ICON__` condition.
+         * This is required to remove the hidden icon button in the first cell
+         * of each row when the row is not expandable in tree mode.
+         */
+        if (
+            (props.expandableConfig &&
+                (props.expandableConfig as any).__PARENT_RENDER_ICON__) ||
+            mergedData.some(
+                (record) =>
+                    record &&
+                    typeof record === 'object' &&
+                    record[mergedChildrenColumnName]
+            )
+        ) {
+            return 'nest';
+        }
+        /* eslint-enable */
+
+        return false;
+    }, [!!expandedRowRender, mergedData]);
+
+    const [innerExpandedKeys, setInnerExpandedKeys] = useState(() => {
+        if (defaultExpandedRowKeys) {
+            return defaultExpandedRowKeys;
+        }
+
+        if (defaultExpandAllRows) {
+            return findAllChildrenKeys<RecordType>(
+                mergedData,
+                getRowKey,
+                mergedChildrenColumnName
+            );
+        }
+
+        return [];
+    });
+    const mergedExpandedKeys = useMemo(
+        () => new Set(expandedRowKeys || innerExpandedKeys || []),
+        [expandedRowKeys, innerExpandedKeys]
+    );
+
+    const onTriggerExpand: TriggerEventHandler<RecordType> = useCallback(
+        (record: RecordType) => {
+            const key = getRowKey(record, mergedData.indexOf(record));
+
+            let newExpandedKeys: Key[];
+            const hasKey = mergedExpandedKeys.has(key);
+            if (hasKey) {
+                mergedExpandedKeys.delete(key);
+                newExpandedKeys = [...mergedExpandedKeys];
+            } else {
+                newExpandedKeys = [...mergedExpandedKeys, key];
+            }
+
+            setInnerExpandedKeys(newExpandedKeys);
+            if (onExpand) {
+                onExpand(!hasKey, record);
+            }
+            if (onExpandedRowsChange) {
+                onExpandedRowsChange(newExpandedKeys);
+            }
+        },
+        [
+            getRowKey,
+            mergedExpandedKeys,
+            mergedData,
+            onExpand,
+            onExpandedRowsChange,
+        ]
+    );
+
+    // ====================== Column ======================
+    const [componentWidth, setComponentWidth] = useState(0);
+
+    const [columns, flattenColumns] = useColumns(
+        {
+            ...props,
+            ...expandableConfig,
+            expandable: !!expandedRowRender,
+            expandedKeys: mergedExpandedKeys,
+            getRowKey,
+            onTriggerExpand,
+            expandIcon: mergedExpandIcon,
+            direction,
+        },
+        transformColumns
+    );
+
+    const columnContext = useMemo(
+        () => ({
+            columns,
+            flattenColumns,
+        }),
+        [columns, flattenColumns]
+    );
+
+    // ====================== Scroll ======================
+    const fullTableRef = useRef<HTMLDivElement>();
+    const scrollHeaderRef = useRef<HTMLDivElement>();
+    const scrollBodyRef = useRef<HTMLDivElement>();
+    const scrollSummaryRef = useRef<HTMLDivElement>();
+    const [pingedLeft, setPingedLeft] = useState(false);
+    const [pingedRight, setPingedRight] = useState(false);
+    const [colsWidths, updateColsWidths] = useLayoutState(
+        new Map<React.Key, number>()
+    );
+
+    // Convert map to number width
+    const colsKeys = getColumnsKey(flattenColumns);
+    const pureColWidths = colsKeys.map((columnKey) =>
+        colsWidths.get(columnKey)
+    );
+    const colWidths = useMemo(() => pureColWidths, [pureColWidths.join('_')]);
+    const stickyOffsets = useStickyOffsets(
+        colWidths,
+        flattenColumns.length,
+        direction
+    );
+    const fixHeader = scroll && validateValue(scroll.y);
+    const horizonScroll =
+        (scroll && validateValue(scroll.x)) || Boolean(expandableConfig.fixed);
+    const fixColumn =
+        horizonScroll && flattenColumns.some(({ fixed }) => fixed);
+
+    // Sticky
+    const stickyRef = useRef<{ setScrollLeft: (left: number) => void }>();
+    const {
+        isSticky,
+        offsetHeader,
+        offsetSummary,
+        offsetScroll,
+        stickyClassName,
+        container,
+    } = useSticky(sticky);
+
+    // Footer (Fix footer must fixed header)
+    const summaryNode = summary?.(mergedData);
+    const fixFooter =
+        (fixHeader || isSticky) &&
+        React.isValidElement(summaryNode) &&
+        summaryNode.type === Summary &&
+        (summaryNode.props as SummaryProps).fixed;
+
+    // Scroll
+    let scrollXStyle: React.CSSProperties;
+    let scrollYStyle: React.CSSProperties;
+    let scrollTableStyle: React.CSSProperties;
+
+    if (fixHeader) {
+        scrollYStyle = {
+            overflow: 'overlay',
+            maxHeight: scroll.y,
+        };
+    }
+
+    if (horizonScroll) {
+        scrollXStyle = { overflow: 'overlay' };
+        // When no vertical scrollbar, should hide it
+        if (!fixHeader) {
+            scrollYStyle = { overflowY: 'hidden' };
+        }
+        scrollTableStyle = {
+            width: scroll?.x === true ? 'auto' : scroll?.x,
+            minWidth: '100%',
+        };
+    }
+
+    const onColumnResize = useCallback(
+        (columnKey: React.Key, width: number) => {
+            if (isVisible?.(fullTableRef.current)) {
+                updateColsWidths((widths) => {
+                    if (widths.get(columnKey) !== width) {
+                        const newWidths = new Map(widths);
+                        newWidths.set(columnKey, width);
+                        return newWidths;
+                    }
+                    return widths;
+                });
+            }
+        },
+        []
+    );
+
+    const [setScrollTarget, getScrollTarget] = useTimeoutLock(null);
+
+    function forceScroll(
+        scrollLeft: number,
+        target: HTMLDivElement | ((left: number) => void)
+    ) {
+        if (!target) {
+            return;
+        }
+        if (typeof target === 'function') {
+            target(scrollLeft);
+        } else if (target.scrollLeft !== scrollLeft) {
+            // eslint-disable-next-line no-param-reassign
+            target.scrollLeft = scrollLeft;
+        }
+    }
+
+    const onScroll = ({
+        currentTarget,
+        scrollLeft,
+    }: {
+        currentTarget: HTMLElement;
+        scrollLeft?: number;
+    }) => {
+        const isRTL = direction === 'rtl';
+        const mergedScrollLeft =
+            typeof scrollLeft === 'number'
+                ? scrollLeft
+                : currentTarget.scrollLeft;
+
+        const compareTarget = currentTarget || EMPTY_SCROLL_TARGET;
+        if (!getScrollTarget() || getScrollTarget() === compareTarget) {
+            setScrollTarget(compareTarget);
+
+            forceScroll(mergedScrollLeft, scrollHeaderRef.current);
+            forceScroll(mergedScrollLeft, scrollBodyRef.current);
+            forceScroll(mergedScrollLeft, scrollSummaryRef.current);
+            forceScroll(mergedScrollLeft, stickyRef.current?.setScrollLeft);
+        }
+
+        if (currentTarget) {
+            const { scrollWidth, clientWidth } = currentTarget;
+            // There is no space to scroll
+            if (scrollWidth === clientWidth) {
+                return;
+            }
+            if (isRTL) {
+                setPingedLeft(-mergedScrollLeft < scrollWidth - clientWidth);
+                setPingedRight(-mergedScrollLeft > 0);
+            } else {
+                setPingedLeft(mergedScrollLeft > 0);
+                setPingedRight(mergedScrollLeft < scrollWidth - clientWidth);
+            }
+        }
+    };
+
+    const triggerOnScroll = () => {
+        if (horizonScroll && scrollBodyRef.current) {
+            onScroll({
+                currentTarget: scrollBodyRef.current,
+            } as React.UIEvent<HTMLDivElement>);
+        } else {
+            setPingedLeft(false);
+            setPingedRight(false);
+        }
+    };
+
+    const onFullTableResize = ({ width }: SizeInfo) => {
+        if (width !== componentWidth) {
+            triggerOnScroll();
+            setComponentWidth(
+                fullTableRef.current ? fullTableRef.current.offsetWidth : width
+            );
+        }
+    };
+
+    // Sync scroll bar when init or `horizonScroll`, `data` and `columns.length` changed
+    const mounted = useRef(false);
+    useEffect(() => {
+        // onFullTableResize will be trigger once when ResizeObserver is mounted
+        // This will reduce one duplicated triggerOnScroll time
+        if (mounted.current) {
+            triggerOnScroll();
+        }
+    }, [horizonScroll, data, columns.length]);
+    useEffect(() => {
+        mounted.current = true;
+    }, []);
+
+    // ===================== Effects ======================
+    const [scrollbarSize, setScrollbarSize] = useState(0);
+    const [supportSticky, setSupportSticky] = useState(true); // Only IE not support, we mark as support first
+
+    useEffect(() => {
+        setScrollbarSize(getTargetScrollBarSize?.(scrollBodyRef.current).width);
+        setSupportSticky(isStyleSupport?.('position', 'sticky'));
+    }, []);
+
+    // ====================== Render ======================
+    const TableComponent = getComponent(['table'], 'table');
+
+    // Table layout
+    const mergedTableLayout = useMemo<TableLayout>(() => {
+        if (tableLayout) {
+            return tableLayout;
+        }
+        // When scroll.x is max-content, no need to fix table layout
+        // it's width should stretch out to fit content
+        if (fixColumn) {
+            return scroll?.x === 'max-content' ? 'auto' : 'fixed';
+        }
+        if (
+            fixHeader ||
+            isSticky ||
+            flattenColumns.some(({ ellipsis }) => ellipsis)
+        ) {
+            return 'fixed';
+        }
+        return 'auto';
+    }, [fixHeader, fixColumn, flattenColumns, tableLayout, isSticky]);
+
+    let groupTableNode: React.ReactNode;
+
+    // Header props
+    const headerProps = {
+        colWidths,
+        columCount: flattenColumns.length,
+        stickyOffsets,
+        onHeaderRow,
+        fixHeader,
+        scroll,
+    };
+
+    // Empty
+    const emptyNode: React.ReactNode = useMemo(() => {
+        if (hasData) {
+            return null;
+        }
+
+        if (typeof emptyText === 'function') {
+            return emptyText();
+        }
+        return emptyText;
+    }, [hasData, emptyText]);
+
+    // Body
+    const bodyTable = (
+        <Body
+            data={mergedData}
+            measureColumnWidth={fixHeader || horizonScroll || isSticky}
+            expandedKeys={mergedExpandedKeys}
+            rowExpandable={rowExpandable}
+            getRowKey={getRowKey}
+            onRow={onRow}
+            emptyNode={emptyNode}
+            childrenColumnName={mergedChildrenColumnName}
+        />
+    );
+
+    const bodyColGroup = (
+        <ColGroup
+            colWidths={flattenColumns.map(({ width }) => width)}
+            columns={flattenColumns}
+        />
+    );
+
+    const customizeScrollBody = getComponent([
+        'body',
+    ]) as CustomizeScrollBody<RecordType>;
+
+    if (fixHeader || isSticky) {
+        // Fixed Header
+        let bodyContent: React.ReactNode;
+
+        if (typeof customizeScrollBody === 'function') {
+            bodyContent = customizeScrollBody(mergedData, {
+                scrollbarSize,
+                ref: scrollBodyRef,
+                onScroll,
+            });
+
+            headerProps.colWidths = flattenColumns.map(({ width }, index) => {
+                const colWidth =
+                    index === columns.length - 1
+                        ? (width as number) - scrollbarSize
+                        : width;
+                if (typeof colWidth === 'number' && !Number.isNaN(colWidth)) {
+                    return colWidth;
+                }
+                return 0;
+            }) as number[];
+        } else {
+            bodyContent = (
+                <div
+                    style={{
+                        ...scrollXStyle,
+                        ...scrollYStyle,
+                    }}
+                    onScroll={onScroll}
+                    ref={scrollBodyRef}
+                    className={styles.tableBody}
+                >
+                    <TableComponent
+                        style={{
+                            ...scrollTableStyle,
+                            tableLayout: mergedTableLayout,
+                        }}
+                    >
+                        {bodyColGroup}
+                        {bodyTable}
+                        {!fixFooter && summaryNode && (
+                            <Footer
+                                stickyOffsets={stickyOffsets}
+                                flattenColumns={flattenColumns}
+                            >
+                                {summaryNode}
+                            </Footer>
+                        )}
+                    </TableComponent>
+                </div>
+            );
+        }
+
+        // Fixed holder share the props
+        const fixedHolderProps = {
+            noData: !mergedData.length,
+            maxContentScroll: horizonScroll && scroll.x === 'max-content',
+            ...headerProps,
+            ...columnContext,
+            direction,
+            stickyClassName,
+            onScroll,
+        };
+
+        groupTableNode = (
+            <>
+                {/* Header Table */}
+                {showHeader !== false && (
+                    <FixedHolder
+                        {...fixedHolderProps}
+                        stickyTopOffset={offsetHeader}
+                        classNames={styles.tableHeader}
+                        ref={scrollHeaderRef}
+                    >
+                        {(fixedHolderPassProps) => (
+                            <>
+                                <Header {...fixedHolderPassProps} />
+                                {fixFooter === 'top' && (
+                                    <Footer {...fixedHolderPassProps}>
+                                        {summaryNode}
+                                    </Footer>
+                                )}
+                            </>
+                        )}
+                    </FixedHolder>
+                )}
+
+                {/* Body Table */}
+                {bodyContent}
+
+                {/* Summary Table */}
+                {fixFooter && fixFooter !== 'top' && (
+                    <FixedHolder
+                        {...fixedHolderProps}
+                        stickyBottomOffset={offsetSummary}
+                        classNames={styles.tableSummary}
+                        ref={scrollSummaryRef}
+                    >
+                        {(fixedHolderPassProps) => (
+                            <Footer {...fixedHolderPassProps}>
+                                {summaryNode}
+                            </Footer>
+                        )}
+                    </FixedHolder>
+                )}
+
+                {isSticky && (
+                    <StickyScrollBar
+                        ref={stickyRef}
+                        offsetScroll={offsetScroll}
+                        scrollBodyRef={scrollBodyRef}
+                        onScroll={onScroll}
+                        container={container}
+                    />
+                )}
+            </>
+        );
+    } else {
+        // Unique table
+        groupTableNode = (
+            <div
+                style={{
+                    ...scrollXStyle,
+                    ...scrollYStyle,
+                }}
+                className={styles.tableContent}
+                onScroll={onScroll}
+                ref={scrollBodyRef}
+            >
+                <TableComponent
+                    style={{
+                        ...scrollTableStyle,
+                        tableLayout: mergedTableLayout,
+                    }}
+                >
+                    {bodyColGroup}
+                    {showHeader !== false && (
+                        <Header {...headerProps} {...columnContext} />
+                    )}
+                    {bodyTable}
+                    {summaryNode && (
+                        <Footer
+                            stickyOffsets={stickyOffsets}
+                            flattenColumns={flattenColumns}
+                        >
+                            {summaryNode}
+                        </Footer>
+                    )}
+                </TableComponent>
+            </div>
+        );
+    }
+
+    const ariaProps = pickAttrs(props, { aria: true, data: true });
+
+    let fullTable = (
+        <div
+            className={mergeClasses([
+                styles.table,
+                { [styles.tableRtl]: direction === 'rtl' },
+                { [styles.tablePingLeft]: pingedLeft },
+                { [styles.tablePingRight]: pingedRight },
+                { ['table-layout-fixed']: tableLayout === 'fixed' },
+                { ['table-fixed-header']: fixHeader },
+                { [styles.tableFixedColumn]: fixColumn },
+                { ['table-scroll-horizontal']: horizonScroll },
+                {
+                    ['table-has-fix-left']:
+                        flattenColumns[0] && flattenColumns[0].fixed,
+                },
+                {
+                    ['table-has-fix-right']:
+                        flattenColumns[flattenColumns.length - 1] &&
+                        flattenColumns[flattenColumns.length - 1].fixed ===
+                            'right',
+                },
+                classNames,
+            ])}
+            style={style}
+            id={id}
+            ref={fullTableRef}
+            {...ariaProps}
+        >
+            <MemoTableContent
+                pingLeft={pingedLeft}
+                pingRight={pingedRight}
+                props={{ ...props, stickyOffsets, mergedExpandedKeys }}
+            >
+                {title && (
+                    <FrameWrapper classNames={styles.tableTitle}>
+                        {title(mergedData)}
+                    </FrameWrapper>
+                )}
+                <div className={styles.tableContainer}>{groupTableNode}</div>
+                {footer && (
+                    <FrameWrapper classNames={styles.tableFooter}>
+                        {footer(mergedData)}
+                    </FrameWrapper>
+                )}
+            </MemoTableContent>
+        </div>
+    );
+
+    if (horizonScroll) {
+        fullTable = (
+            <ResizeObserver onResize={onFullTableResize}>
+                {fullTable}
+            </ResizeObserver>
+        );
+    }
+
+    const TableContextValue = useMemo(
+        () => ({
+            getComponent,
+            scrollbarSize,
+            direction,
+            fixedInfoList: flattenColumns.map((_, colIndex) =>
+                getCellFixedInfo(
+                    colIndex,
+                    colIndex,
+                    flattenColumns,
+                    stickyOffsets,
+                    direction
+                )
+            ),
+            isSticky,
+        }),
+        [
+            getComponent,
+            scrollbarSize,
+            direction,
+            flattenColumns,
+            stickyOffsets,
+            direction,
+            isSticky,
+        ]
+    );
+
+    const BodyContextValue = useMemo(
+        () => ({
+            ...columnContext,
+            tableLayout: mergedTableLayout,
+            rowClassName,
+            expandedRowClassName,
+            expandIcon: mergedExpandIcon,
+            expandableType,
+            expandRowByClick,
+            expandedRowRender,
+            onTriggerExpand,
+            indentSize,
+        }),
+        [
+            columnContext,
+            mergedTableLayout,
+            rowClassName,
+            expandedRowClassName,
+            mergedExpandIcon,
+            expandableType,
+            expandRowByClick,
+            expandedRowRender,
+            onTriggerExpand,
+            indentSize,
+        ]
+    );
+
+    const ExpandedRowContextValue = useMemo(
+        () => ({
+            componentWidth,
+            fixHeader,
+            fixColumn,
+            horizonScroll,
+        }),
+        [componentWidth, fixHeader, fixColumn, horizonScroll]
+    );
+
+    const ResizeContextValue = useMemo(
+        () => ({ onColumnResize }),
+        [onColumnResize]
+    );
+
+    return (
+        <StickyContext.Provider value={supportSticky}>
+            <TableContext.Provider value={TableContextValue}>
+                <BodyContext.Provider value={BodyContextValue}>
+                    <ExpandedRowContext.Provider
+                        value={ExpandedRowContextValue}
+                    >
+                        <ResizeContext.Provider value={ResizeContextValue}>
+                            {fullTable}
+                        </ResizeContext.Provider>
+                    </ExpandedRowContext.Provider>
+                </BodyContext.Provider>
+            </TableContext.Provider>
+        </StickyContext.Provider>
+    );
+}
+
+OcTable.EXPAND_COLUMN = EXPAND_COLUMN;
+
+OcTable.Column = Column;
+
+OcTable.ColumnGroup = ColumnGroup;
+
+OcTable.Summary = FooterComponents;
+
+OcTable.defaultProps = {
+    rowKey: 'key',
+    emptyText: () => 'Nothing to see here.',
+};
+
+export default OcTable;
diff --git a/src/components/Table/Internal/OcTable.types.ts b/src/components/Table/Internal/OcTable.types.ts
new file mode 100644
index 000000000..c1b696d7b
--- /dev/null
+++ b/src/components/Table/Internal/OcTable.types.ts
@@ -0,0 +1,252 @@
+import type * as React from 'react';
+
+export type Key = React.Key;
+
+export type FixedType = 'left' | 'right' | boolean;
+
+export type DefaultRecordType = Record<string, any>;
+
+export type TableLayout = 'auto' | 'fixed';
+
+// ==================== Row =====================
+export type RowClassName<RecordType> = (
+    record: RecordType,
+    index: number,
+    indent: number
+) => string;
+
+// =================== Column ===================
+export interface CellType<RecordType> {
+    key?: Key;
+    classNames?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    column?: ColumnsType<RecordType>[number];
+    colSpan?: number;
+    rowSpan?: number;
+
+    /** Only used for table header */
+    hasSubColumns?: boolean;
+    colStart?: number;
+    colEnd?: number;
+}
+
+export interface RenderedCell<RecordType> {
+    props?: CellType<RecordType>;
+    children?: React.ReactNode;
+}
+
+export type DataIndex = string | number | readonly (string | number)[];
+
+export type CellEllipsisType = { showTitle?: boolean } | boolean;
+
+interface ColumnSharedType<RecordType> {
+    title?: React.ReactNode;
+    key?: Key;
+    classNames?: string;
+    fixed?: FixedType;
+    onHeaderCell?: GetComponentProps<ColumnsType<RecordType>[number]>;
+    ellipsis?: CellEllipsisType;
+    align?: AlignType;
+}
+
+export interface ColumnGroupType<RecordType>
+    extends ColumnSharedType<RecordType> {
+    children: ColumnsType<RecordType>;
+}
+
+export type AlignType = 'left' | 'center' | 'right';
+
+export interface ColumnType<RecordType> extends ColumnSharedType<RecordType> {
+    colSpan?: number;
+    dataIndex?: DataIndex;
+    render?: (
+        value: any,
+        record: RecordType,
+        index: number
+    ) => React.ReactNode | RenderedCell<RecordType>;
+    shouldCellUpdate?: (record: RecordType, prevRecord: RecordType) => boolean;
+    rowSpan?: number;
+    width?: number | string;
+    onCell?: GetComponentProps<RecordType>;
+}
+
+export type ColumnsType<RecordType = unknown> = readonly (
+    | ColumnGroupType<RecordType>
+    | ColumnType<RecordType>
+)[];
+
+export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
+
+export interface ColGroupProps<RecordType> {
+    colWidths: readonly (number | string)[];
+    columns?: readonly ColumnType<RecordType>[];
+    columCount?: number;
+}
+
+// ================= Fix Column =================
+export interface StickyOffsets {
+    left: readonly number[];
+    right: readonly number[];
+    isSticky?: boolean;
+}
+
+// ================= Customized =================
+export type GetComponentProps<DataType> = (
+    data: DataType,
+    index?: number
+) => React.HTMLAttributes<any> | React.TdHTMLAttributes<any>;
+
+type Component<P> =
+    | React.ComponentType<P>
+    | React.ForwardRefExoticComponent<P>
+    | React.FC<P>
+    | keyof React.ReactHTML;
+
+export type CustomizeComponent = Component<any>;
+
+export type CustomizeScrollBody<RecordType> = (
+    data: readonly RecordType[],
+    info: {
+        scrollbarSize: number;
+        ref: React.Ref<{ scrollLeft: number }>;
+        onScroll: (info: {
+            currentTarget?: HTMLElement;
+            scrollLeft?: number;
+        }) => void;
+    }
+) => React.ReactNode;
+
+export interface TableComponents<RecordType> {
+    table?: CustomizeComponent;
+    header?: {
+        wrapper?: CustomizeComponent;
+        row?: CustomizeComponent;
+        cell?: CustomizeComponent;
+    };
+    body?:
+        | CustomizeScrollBody<RecordType>
+        | {
+              wrapper?: CustomizeComponent;
+              row?: CustomizeComponent;
+              cell?: CustomizeComponent;
+          };
+}
+
+export type GetComponent = (
+    path: readonly string[],
+    defaultComponent?: CustomizeComponent
+) => CustomizeComponent;
+
+// =================== Expand ===================
+export type ExpandableType = false | 'row' | 'nest';
+
+export type ExpandedRowRender<ValueType> = (
+    record: ValueType,
+    index: number,
+    indent: number,
+    expanded: boolean
+) => React.ReactNode;
+
+export interface RenderExpandIconProps<RecordType> {
+    expanded: boolean;
+    record: RecordType;
+    expandable: boolean;
+    onExpand: TriggerEventHandler<RecordType>;
+}
+
+export type RenderExpandIcon<RecordType> = (
+    props: RenderExpandIconProps<RecordType>
+) => React.ReactNode;
+
+export interface ExpandableConfig<RecordType> {
+    expandedRowKeys?: readonly Key[];
+    defaultExpandedRowKeys?: readonly Key[];
+    expandedRowRender?: ExpandedRowRender<RecordType>;
+    expandRowByClick?: boolean;
+    expandIcon?: RenderExpandIcon<RecordType>;
+    onExpand?: (expanded: boolean, record: RecordType) => void;
+    onExpandedRowsChange?: (expandedKeys: readonly Key[]) => void;
+    defaultExpandAllRows?: boolean;
+    indentSize?: number;
+    showExpandColumn?: boolean;
+    expandedRowClassName?: RowClassName<RecordType>;
+    childrenColumnName?: string;
+    rowExpandable?: (record: RecordType) => boolean;
+    columnWidth?: number | string;
+    fixed?: FixedType;
+}
+
+// =================== Render ===================
+export type PanelRender<RecordType> = (
+    data: readonly RecordType[]
+) => React.ReactNode;
+
+// =================== Events ===================
+export type TriggerEventHandler<RecordType> = (
+    record: RecordType,
+    event: React.MouseEvent<HTMLElement>
+) => void;
+
+// =================== Sticky ===================
+export interface StickyScrollBarProps {
+    scrollBodyRef: React.RefObject<HTMLDivElement>;
+    onScroll: (params: { scrollLeft?: number }) => void;
+    offsetScroll: number;
+    container: HTMLElement | Window;
+}
+
+export interface TableSticky {
+    offsetHeader?: number;
+    offsetSummary?: number;
+    offsetScroll?: number;
+    getContainer?: () => Window | HTMLElement;
+}
+
+// =================== Table ===================
+export interface MemoTableContentProps {
+    children: React.ReactNode;
+    pingLeft: boolean;
+    pingRight: boolean;
+    props: any;
+}
+
+export interface OcTableProps<RecordType = unknown> {
+    classNames?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    data?: readonly RecordType[];
+    columns?: ColumnsType<RecordType>;
+    rowKey?: string | GetRowKey<RecordType>;
+    tableLayout?: TableLayout;
+
+    // Fixed Columns
+    scroll?: { x?: number | true | string; y?: number | string };
+
+    // expandableConfig
+    /** Config expand rows */
+    expandableConfig?: ExpandableConfig<RecordType>;
+    indentSize?: number;
+    rowClassName?: string | RowClassName<RecordType>;
+
+    // Additional Part
+    title?: PanelRender<RecordType>;
+    footer?: PanelRender<RecordType>;
+    summary?: (data: readonly RecordType[]) => React.ReactNode;
+
+    // Customize
+    id?: string;
+    showHeader?: boolean;
+    components?: TableComponents<RecordType>;
+    onRow?: GetComponentProps<RecordType>;
+    onHeaderRow?: GetComponentProps<readonly ColumnType<RecordType>[]>;
+    emptyText?: React.ReactNode | (() => React.ReactNode);
+
+    direction?: string;
+
+    transformColumns?: (
+        columns: ColumnsType<RecordType>
+    ) => ColumnsType<RecordType>;
+
+    sticky?: boolean | TableSticky;
+}
diff --git a/src/components/Table/Internal/Tests/Cell.test.tsx b/src/components/Table/Internal/Tests/Cell.test.tsx
new file mode 100644
index 000000000..66557bc1b
--- /dev/null
+++ b/src/components/Table/Internal/Tests/Cell.test.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import OcTable from '..';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Table.Cell', () => {
+    it('shouldCellUpdate', () => {
+        let reRenderTime = 0;
+
+        const Demo = () => {
+            const [, forceUpdate] = React.useState({});
+
+            return (
+                <>
+                    <OcTable
+                        data={[{ key: 'light' }]}
+                        columns={[
+                            {
+                                shouldCellUpdate: (record, prevRecord) =>
+                                    prevRecord.key !== record.key,
+                                dataIndex: 'key',
+                                render: (value) => {
+                                    reRenderTime += 1;
+                                    return value;
+                                },
+                            },
+                        ]}
+                        expandableConfig={{
+                            expandIcon: () => <div className="expand-icon" />,
+                        }}
+                    />
+                    <button
+                        type="button"
+                        onClick={() => {
+                            forceUpdate({});
+                        }}
+                    />
+                </>
+            );
+        };
+
+        const wrapper = mount(<Demo />);
+        reRenderTime = 0;
+
+        for (let i = 0; i < 100; i += 1) {
+            wrapper.find('button').simulate('click');
+            expect(reRenderTime).toEqual(0);
+        }
+    });
+
+    it('shouldCellUpdate not block classNames', () => {
+        let reRenderTime = 0;
+
+        const getColumns = (props?: object) => [
+            {
+                shouldCellUpdate: (
+                    record: { key: any },
+                    prevRecord: { key: any }
+                ) => prevRecord.key !== record.key,
+                dataIndex: 'key',
+                render: (value: any) => {
+                    reRenderTime += 1;
+                    return value;
+                },
+                ...props,
+            },
+        ];
+
+        const wrapper = mount(
+            <OcTable
+                data={[{ key: 'light' }]}
+                columns={getColumns()}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+            />
+        );
+
+        // Update className should re-render
+        reRenderTime = 0;
+        for (let i = 0; i < 10; i += 1) {
+            wrapper.setProps({
+                columns: getColumns({ classNames: 'test' }),
+            });
+        }
+
+        expect(reRenderTime).toEqual(1);
+    });
+});
diff --git a/src/components/Table/Internal/Tests/Colgroup.test.js b/src/components/Table/Internal/Tests/Colgroup.test.js
new file mode 100644
index 000000000..36ca125e0
--- /dev/null
+++ b/src/components/Table/Internal/Tests/Colgroup.test.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import OcTable, { INTERNAL_COL_DEFINE } from '..';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Table.ColGroup', () => {
+    it('internal props should render', () => {
+        const columns = [
+            {
+                key: 'test',
+                [INTERNAL_COL_DEFINE]: { className: 'show-in-col' },
+            },
+        ];
+
+        const wrapper = mount(
+            <OcTable
+                columns={columns}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+            />
+        );
+        expect(wrapper.find('colgroup col').props().className).toEqual(
+            'show-in-col'
+        );
+    });
+
+    it('correct key', () => {
+        const columns = [
+            {
+                key: 0,
+                width: 1,
+            },
+        ];
+
+        const wrapper = mount(
+            <OcTable
+                columns={columns}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+            />
+        );
+        expect(String(wrapper.find('colgroup col').key())).toEqual('0');
+    });
+});
diff --git a/src/components/Table/Internal/Tests/ExpandRow.test.js b/src/components/Table/Internal/Tests/ExpandRow.test.js
new file mode 100644
index 000000000..e3263fb57
--- /dev/null
+++ b/src/components/Table/Internal/Tests/ExpandRow.test.js
@@ -0,0 +1,634 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { act } from 'react-dom/test-utils';
+import { spyElementPrototype } from '../../../../tests/domHook';
+import OcTable from '..';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Table.Expand', () => {
+    const expandedRowRender = () => <p>extra data</p>;
+
+    const sampleColumns = [
+        { title: 'Name', dataIndex: 'name', key: 'name' },
+        { title: 'Age', dataIndex: 'age', key: 'age' },
+    ];
+
+    const sampleData = [
+        { key: 0, name: 'Lucy', age: 27 },
+        { key: 1, name: 'Jack', age: 28 },
+    ];
+
+    const createTable = (props) => (
+        <OcTable
+            columns={sampleColumns}
+            data={sampleData}
+            expandableConfig={{
+                expandIcon: () => <div className="expand-icon" />,
+            }}
+            {...props}
+        />
+    );
+
+    it('renders expand row correctly', () => {
+        const wrapper = mount(createTable({ expandedRowRender }));
+        expect(wrapper.find('tbody tr')).toHaveLength(2);
+    });
+
+    it('pass proper parameters to expandedRowRender', () => {
+        const rowRender = jest.fn(() => <div>expanded row</div>);
+        const expandableProps = (props) => ({
+            expandableConfig: { expandedRowRender: rowRender, ...props },
+        });
+        const wrapper = mount(createTable(expandableProps()));
+        wrapper.setProps(expandableProps({ expandedRowKeys: [0] }));
+        expect(rowRender).toHaveBeenLastCalledWith(sampleData[0], 0, 1, true);
+        wrapper.setProps(expandableProps({ expandedRowKeys: [] }));
+        expect(rowRender).toHaveBeenLastCalledWith(sampleData[0], 0, 1, false);
+    });
+
+    it('renders tree row correctly', () => {
+        const data = [
+            {
+                key: 0,
+                name: 'Lucy',
+                age: 27,
+                children: [{ key: 2, name: 'Jim', age: 1 }],
+            },
+            { key: 1, name: 'Jack', age: 28 },
+        ];
+        const wrapper = mount(
+            createTable({
+                data,
+                expandableConfig: { defaultExpandAllRows: true },
+            })
+        );
+        expect(wrapper.find('tbody tr')).toHaveLength(3);
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('renders tree row correctly with different children', () => {
+        const data = [
+            {
+                key: 0,
+                name: 'Lucy',
+                age: 27,
+                children: [{ key: 2, name: 'Jim', age: 1 }],
+            },
+            { key: 1, name: 'Jack', age: 28 },
+            { key: 2, name: 'Jack', age: 28, children: null },
+            { key: 3, name: 'Jack', age: 28, children: [] },
+            { key: 4, name: 'Jack', age: 28, children: undefined },
+            { key: 5, name: 'Jack', age: 28, children: false },
+        ];
+        const wrapper = mount(createTable({ data }));
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('not use nest when children is invalidate', () => {
+        const data = [
+            { key: 2, name: 'Jack', age: 28, children: null },
+            { key: 4, name: 'Jack', age: 28, children: undefined },
+            { key: 5, name: 'Jack', age: 28, children: false },
+        ];
+        const wrapper = mount(createTable({ data }));
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('childrenColumnName', () => {
+        const data = [
+            {
+                key: 0,
+                name: 'Lucy',
+                age: 27,
+                list: [{ key: 2, name: 'Jim', age: 1 }],
+            },
+            { key: 1, name: 'Jack', age: 28 },
+        ];
+        const wrapper = mount(
+            createTable({
+                data,
+                expandableConfig: {
+                    defaultExpandAllRows: true,
+                    childrenColumnName: 'list',
+                },
+            })
+        );
+        expect(wrapper.find('tbody tr')).toHaveLength(3);
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    describe('renders fixed column correctly', () => {
+        let domSpy;
+
+        beforeAll(() => {
+            domSpy = spyElementPrototype(HTMLDivElement, 'offsetWidth', {
+                get: () => 1128,
+            });
+        });
+
+        afterAll(() => {
+            domSpy.mockRestore();
+        });
+
+        it('work', () => {
+            const columns = [
+                { title: 'Name', dataIndex: 'name', key: 'name', fixed: true },
+                { title: 'Age', dataIndex: 'age', key: 'age' },
+                {
+                    title: 'Gender',
+                    dataIndex: 'gender',
+                    key: 'gender',
+                    fixed: 'right',
+                },
+            ];
+            const data = [
+                { key: 0, name: 'Lucy', age: 27, gender: 'F' },
+                { key: 1, name: 'Jack', age: 28, gender: 'M' },
+            ];
+            const wrapper = mount(
+                createTable({
+                    columns,
+                    data,
+                    scroll: { x: 903 },
+                    expandableConfig: {
+                        expandedRowRender,
+                        defaultExpandAllRows: true,
+                    },
+                })
+            );
+            act(() => {
+                wrapper
+                    .find('ResizeObserver')
+                    .first()
+                    .props()
+                    .onResize({ width: 1128 });
+            });
+            wrapper.update();
+            expect(wrapper.render()).toMatchSnapshot();
+        });
+    });
+
+    it('work in expandable fix', () => {
+        const columns = [
+            { title: 'Name', dataIndex: 'name', key: 'name' },
+            { title: 'Age', dataIndex: 'age', key: 'age' },
+            { title: 'Gender', dataIndex: 'gender', key: 'gender' },
+        ];
+        const data = [
+            { key: 0, name: 'Lucy', age: 27, gender: 'F' },
+            { key: 1, name: 'Jack', age: 28, gender: 'M' },
+        ];
+        const wrapper = mount(
+            createTable({
+                columns,
+                data,
+                scroll: { x: 903 },
+                expandableConfig: { expandedRowRender, fixed: true },
+            })
+        );
+        const wrapper2 = mount(
+            createTable({
+                columns,
+                data,
+                scroll: { x: 903 },
+                expandableConfig: {
+                    expandedRowRender,
+                    fixed: true,
+                    expandIconColumnIndex: 3,
+                },
+            })
+        );
+        expect(wrapper.render()).toMatchSnapshot();
+        expect(wrapper2.render()).toMatchSnapshot();
+    });
+
+    it('does not crash if scroll is not set', () => {
+        const columns = [
+            { title: 'Name', dataIndex: 'name', key: 'name' },
+            { title: 'Age', dataIndex: 'age', key: 'age' },
+            { title: 'Gender', dataIndex: 'gender', key: 'gender' },
+        ];
+        const data = [
+            { key: 0, name: 'Lucy', age: 27, gender: 'F' },
+            { key: 1, name: 'Jack', age: 28, gender: 'M' },
+        ];
+        const wrapper = mount(
+            createTable({
+                columns,
+                data,
+                scroll: {},
+                expandableConfig: { expandedRowRender, fixed: true },
+            })
+        );
+        const wrapper2 = mount(
+            createTable({
+                columns,
+                data,
+                expandableConfig: { expandedRowRender, fixed: true },
+            })
+        );
+        expect(wrapper.render()).toMatchSnapshot();
+        expect(wrapper2.render()).toMatchSnapshot();
+    });
+
+    it('expandable fix not when expandIconColumnIndex', () => {
+        const columns = [
+            { title: 'Name', dataIndex: 'name', key: 'name' },
+            { title: 'Age', dataIndex: 'age', key: 'age' },
+            { title: 'Gender', dataIndex: 'gender', key: 'gender' },
+        ];
+        const data = [
+            { key: 0, name: 'Lucy', age: 27, gender: 'F' },
+            { key: 1, name: 'Jack', age: 28, gender: 'M' },
+        ];
+        const wrapper = mount(
+            createTable({
+                columns,
+                data,
+                scroll: { x: 903 },
+                expandableConfig: {
+                    expandedRowRender,
+                    fixed: 'left',
+                    expandIconColumnIndex: 1,
+                },
+            })
+        );
+        const wrapper2 = mount(
+            createTable({
+                columns,
+                data,
+                scroll: { x: 903 },
+                expandableConfig: {
+                    expandedRowRender,
+                    fixed: 'right',
+                    expandIconColumnIndex: 2,
+                },
+            })
+        );
+        expect(wrapper.find('.table-has-fix-left').length).toBe(1);
+        expect(wrapper2.find('.table-has-fix-right').length).toBe(0);
+    });
+
+    describe('config expand column index', () => {
+        it('not show EXPAND_COLUMN if expandable is false', () => {
+            const wrapper = mount(
+                createTable({
+                    columns: [...sampleColumns, OcTable.EXPAND_COLUMN],
+                })
+            );
+
+            expect(wrapper.exists('.table-row-expand-icon-cell')).toBeFalsy();
+        });
+
+        it('renders expand icon to the specify column', () => {
+            const wrapper = mount(
+                createTable({
+                    expandableConfig: {
+                        expandedRowRender,
+                        expandIconColumnIndex: 1,
+                    },
+                })
+            );
+            expect(
+                wrapper.find('.table-row-expand-icon-cell').at(1)
+            ).toBeTruthy();
+        });
+
+        it('order with EXPAND_COLUMN', () => {
+            const wrapper = mount(
+                createTable({
+                    columns: [...sampleColumns, OcTable.EXPAND_COLUMN],
+                    expandableConfig: {
+                        expandedRowRender,
+                    },
+                })
+            );
+
+            expect(
+                wrapper.find('.table-row-expand-icon-cell').at(2)
+            ).toBeTruthy();
+        });
+
+        it('de-duplicate of EXPAND_COLUMN', () => {
+            const wrapper = mount(
+                createTable({
+                    columns: [
+                        OcTable.EXPAND_COLUMN,
+                        ...sampleColumns,
+                        OcTable.EXPAND_COLUMN,
+                    ],
+                    expandableConfig: {
+                        expandedRowRender,
+                    },
+                })
+            );
+
+            expect(
+                wrapper.find('.table-row-expand-icon-cell').at(0)
+            ).toBeTruthy();
+            expect(wrapper.find('tbody tr').first().find('td')).toHaveLength(3);
+        });
+    });
+
+    describe('hide expandColumn', () => {
+        it('should not render expand icon column when expandIconColumnIndex is negative', () => {
+            const wrapper = mount(
+                createTable({
+                    expandableConfig: {
+                        expandedRowRender,
+                        expandIconColumnIndex: -1,
+                    },
+                })
+            );
+            expect(wrapper.find('.table-row-expand-icon-cell').length).toBe(0);
+        });
+
+        it('showExpandColumn = false', () => {
+            const wrapper = mount(
+                createTable({
+                    expandableConfig: {
+                        expandedRowRender,
+                        showExpandColumn: false,
+                    },
+                })
+            );
+            expect(wrapper.find('.table-row-expand-icon-cell').length).toBe(0);
+        });
+    });
+
+    it('renders a custom icon', () => {
+        function CustomExpandIcon(props) {
+            return (
+                <a
+                    className="expand-row-icon"
+                    onClick={(e) => props.onExpand(props.record, e)}
+                >
+                    <i className="some-class" />
+                </a>
+            );
+        }
+        const wrapper = mount(
+            createTable({
+                expandableConfig: {
+                    expandedRowRender,
+                    expandIcon: ({ onExpand, record }) => (
+                        <CustomExpandIcon onExpand={onExpand} record={record} />
+                    ),
+                },
+            })
+        );
+        expect(wrapper.find('.expand-row-icon').length).toBeTruthy();
+    });
+
+    it('expand all rows by default', () => {
+        const wrapper = mount(
+            createTable({
+                expandedRowRender,
+                defaultExpandAllRows: true,
+            })
+        );
+        expect(wrapper.find('tbody tr')).toHaveLength(2);
+    });
+
+    it('expand rows by defaultExpandedRowKeys', () => {
+        const wrapper = mount(
+            createTable({
+                expandableConfig: {
+                    expandedRowRender,
+                    defaultExpandedRowKeys: [1],
+                },
+            })
+        );
+        expect(wrapper.find('tbody tr')).toHaveLength(3);
+        expect(wrapper.find('.table-expanded-row').at(2)).toBeTruthy();
+    });
+
+    it('controlled by expandedRowKeys', () => {
+        const wrapper = mount(
+            createTable({
+                expandableConfig: {
+                    expandedRowRender,
+                    expandedRowKeys: [0],
+                },
+            })
+        );
+        expect(wrapper.find('tbody tr')).toHaveLength(3);
+        expect(wrapper.find('.table-expanded-row').at(1)).toBeTruthy();
+
+        wrapper.setProps({ expandedRowKeys: [1] });
+        expect(wrapper.find('tbody tr')).toHaveLength(3);
+        expect(wrapper.find('.table-expanded-row').at(1)).toBeTruthy();
+        expect(wrapper.find('.table-expanded-row').at(3)).toBeTruthy();
+    });
+
+    it('renders expend row class correctly', () => {
+        const expandedRowClassName = jest
+            .fn()
+            .mockReturnValue('expand-row-test-class-name');
+        const wrapper = mount(
+            createTable({
+                expandableConfig: {
+                    expandedRowRender,
+                    expandedRowKeys: [0],
+                    expandedRowClassName,
+                },
+            })
+        );
+
+        expect(wrapper.find('.expand-row-test-class-name').at(1)).toBeTruthy();
+    });
+
+    it('fires expand change event', () => {
+        const onExpand = jest.fn();
+        const wrapper = mount(
+            createTable({
+                expandableConfig: {
+                    expandedRowRender,
+                    onExpand,
+                },
+            })
+        );
+        wrapper.find('.table-row-expand-icon').first().simulate('click');
+        expect(onExpand).toHaveBeenCalledWith(true, sampleData[0]);
+
+        wrapper.find('.table-row-expand-icon').first().simulate('click');
+        expect(onExpand).toHaveBeenCalledWith(false, sampleData[0]);
+    });
+
+    it('fires onExpandedRowsChange event', () => {
+        const onExpandedRowsChange = jest.fn();
+        const wrapper = mount(
+            createTable({
+                expandableConfig: {
+                    expandedRowRender,
+                    onExpandedRowsChange,
+                },
+            })
+        );
+        wrapper.find('.table-row-expand-icon').first().simulate('click');
+        expect(onExpandedRowsChange).toHaveBeenCalledWith([0]);
+    });
+
+    it('expandRowByClick', () => {
+        const onExpand = jest.fn();
+        const wrapper = mount(
+            createTable({
+                expandableConfig: {
+                    expandedRowRender,
+                    expandRowByClick: true,
+                    onExpand,
+                },
+            })
+        );
+        wrapper.find('tbody tr').first().simulate('click');
+        expect(onExpand).toHaveBeenCalledWith(true, sampleData[0]);
+
+        wrapper.find('tbody tr').first().simulate('click');
+        expect(onExpand).toHaveBeenCalledWith(false, sampleData[0]);
+    });
+
+    it('some rows should not be expandable', () => {
+        const wrapper = mount(
+            createTable({
+                expandableConfig: {
+                    expandedRowRender,
+                    rowExpandable: ({ key }) => key === 1,
+                },
+            })
+        );
+
+        expect(
+            wrapper.find('tbody tr').first().find('.table-row-spaced')
+        ).toBeTruthy();
+        expect(
+            wrapper.find('tbody tr').last().find('.table-row-collapsed')
+        ).toBeTruthy();
+    });
+
+    it('`defaultExpandAllRows` with `childrenColumnName`', () => {
+        const data = [
+            {
+                key: 0,
+                sub: [{ key: 1, sub: [{ key: 2 }] }],
+            },
+        ];
+        const wrapper = mount(
+            createTable({
+                data,
+                childrenColumnName: 'sub',
+                expandaexpandableConfigble: { defaultExpandAllRows: true },
+            })
+        );
+        expect(wrapper.find('tbody tr')).toHaveLength(1);
+    });
+
+    it('should be collapsible when use `expandIcon` & `expandRowByClick`', () => {
+        const data = [{ key: 0, name: 'Lucy', age: 27 }];
+        const onExpand = jest.fn();
+        const wrapper = mount(
+            createTable({
+                expandableConfig: {
+                    expandedRowRender,
+                    expandRowByClick: true,
+                    onExpand,
+                    expandIcon: ({ onExpand: onIconExpand, record }) => (
+                        <span
+                            className="custom-expand-icon"
+                            onClick={() => onIconExpand(record)}
+                        />
+                    ),
+                },
+                data,
+            })
+        );
+        expect(wrapper.find('.table-expanded-row').length).toBe(0);
+        wrapper.find('.custom-expand-icon').first().simulate('click');
+        expect(onExpand).toHaveBeenCalledWith(true, data[0]);
+        expect(onExpand).toHaveBeenCalledTimes(1);
+        expect(
+            wrapper.find('.table-expanded-row').first().getDOMNode().style
+                .display
+        ).toBe('');
+        wrapper.find('.custom-expand-icon').first().simulate('click');
+        expect(onExpand).toHaveBeenCalledWith(false, data[0]);
+        expect(onExpand).toHaveBeenCalledTimes(2);
+        expect(
+            wrapper.find('.table-expanded-row').first().getDOMNode().style
+                .display
+        ).toBe('none');
+    });
+
+    it('should be collapsible when `expandRowByClick` without custom `expandIcon`', () => {
+        const data = [{ key: 0, name: 'Lucy', age: 27 }];
+        const onExpand = jest.fn();
+        const wrapper = mount(
+            createTable({
+                expandableConfig: {
+                    expandedRowRender,
+                    expandRowByClick: true,
+                    onExpand,
+                },
+                data,
+            })
+        );
+        wrapper.find('.table-row-expand-icon').first().simulate('click');
+        expect(onExpand).toHaveBeenCalledWith(true, data[0]);
+        expect(onExpand).toHaveBeenCalledTimes(1);
+        wrapper.find('.table-row-expand-icon').first().simulate('click');
+        expect(onExpand).toHaveBeenCalledWith(false, data[0]);
+        expect(onExpand).toHaveBeenCalledTimes(2);
+    });
+
+    it('should be collapsible when `expandRowByClick` with custom `expandIcon` and event.stopPropagation', () => {
+        const data = [{ key: 0, name: 'Lucy', age: 27 }];
+        const onExpand = jest.fn();
+        const wrapper = mount(
+            createTable({
+                expandableConfig: {
+                    expandedRowRender,
+                    expandRowByClick: true,
+                    onExpand,
+                    expandIcon: ({ onExpand: onIconExpand, record }) => (
+                        <span
+                            className="custom-expand-icon"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                onIconExpand(record);
+                            }}
+                        />
+                    ),
+                },
+                data,
+            })
+        );
+        wrapper.find('.custom-expand-icon').first().simulate('click');
+        expect(onExpand).toHaveBeenCalledWith(true, data[0]);
+        expect(onExpand).toHaveBeenCalledTimes(1);
+        wrapper.find('.custom-expand-icon').first().simulate('click');
+        expect(onExpand).toHaveBeenCalledWith(false, data[0]);
+        expect(onExpand).toHaveBeenCalledTimes(2);
+    });
+
+    it('support invalid expandIcon', () => {
+        const data = [{ key: 0, name: 'Lucy', age: 27 }];
+        const onExpand = jest.fn();
+        const wrapper = mount(
+            createTable({
+                expandableConfig: {
+                    expandedRowRender,
+                    expandRowByClick: true,
+                    onExpand,
+                    expandIcon: () => null,
+                },
+                data,
+            })
+        );
+        expect(wrapper.find('.table-expanded-row').length).toBe(0);
+    });
+
+    it('warning for use `expandedRowRender` and nested table in the same time', () => {
+        mount(createTable({ expandedRowRender, data: [{ children: [] }] }));
+    });
+});
diff --git a/src/components/Table/Internal/Tests/FixedColumn.test.js b/src/components/Table/Internal/Tests/FixedColumn.test.js
new file mode 100644
index 000000000..e265454ec
--- /dev/null
+++ b/src/components/Table/Internal/Tests/FixedColumn.test.js
@@ -0,0 +1,241 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { act } from 'react-dom/test-utils';
+import OcTable from '..';
+import { ResizeObserver } from '../../../../shared/ResizeObserver/ResizeObserver';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Table.FixedColumn', () => {
+    const columns = [
+        {
+            title: 'title1',
+            dataIndex: 'a',
+            key: 'a',
+            width: 100,
+            fixed: 'left',
+        },
+        {
+            title: 'title2',
+            dataIndex: 'b',
+            key: 'b',
+            width: 100,
+            fixed: 'left',
+            ellipsis: true,
+            render: () => <span>1111</span>,
+        },
+        { title: 'title3', dataIndex: 'c', key: 'c' },
+        { title: 'title4', dataIndex: 'b', key: 'd' },
+        { title: 'title5', dataIndex: 'b', key: 'e' },
+        { title: 'title6', dataIndex: 'b', key: 'f' },
+        { title: 'title7', dataIndex: 'b', key: 'g' },
+        { title: 'title8', dataIndex: 'b', key: 'h' },
+        { title: 'title9', dataIndex: 'b', key: 'i' },
+        { title: 'title10', dataIndex: 'b', key: 'j' },
+        { title: 'title11', dataIndex: 'b', key: 'k' },
+        {
+            title: 'title12',
+            dataIndex: 'b',
+            key: 'l',
+            width: 100,
+            fixed: 'right',
+        },
+    ];
+    const data = [
+        { a: '123', b: 'xxxxxxxx', d: 3, key: '1' },
+        { a: 'cdd', b: 'edd12221', d: 3, key: '2' },
+        { a: '133', c: 'edd12221', d: 2, key: '3' },
+        { a: '133', c: 'edd12221', d: 2, key: '4' },
+        { a: '133', c: 'edd12221', d: 2, key: '5' },
+        { a: '133', c: 'edd12221', d: 2, key: '6' },
+        { a: '133', c: 'edd12221', d: 2, key: '7' },
+        { a: '133', c: 'edd12221', d: 2, key: '8' },
+        { a: '133', c: 'edd12221', d: 2, key: '9' },
+    ];
+
+    describe('renders correctly', () => {
+        [
+            { scrollName: 'scrollX', scroll: { x: 1200 } },
+            { scrollName: 'scrollXY', scroll: { x: 1200, y: 100 } },
+        ].forEach(({ scrollName, scroll }) => {
+            [
+                { name: 'with data', data },
+                { name: 'without data', data: [] },
+            ].forEach(({ name, data: testData }) => {
+                it(`${scrollName} - ${name}`, async () => {
+                    jest.useFakeTimers();
+                    const wrapper = mount(
+                        <OcTable
+                            columns={columns}
+                            data={testData}
+                            scroll={scroll}
+                            expandableConfig={{
+                                expandIcon: () => (
+                                    <div className="expand-icon" />
+                                ),
+                            }}
+                        />
+                    );
+
+                    act(() => {
+                        wrapper
+                            .find(ResizeObserver.Collection)
+                            .first()
+                            .props()
+                            .onBatchResize([
+                                {
+                                    data: wrapper
+                                        .find('table ResizeObserver')
+                                        .first()
+                                        .props().data,
+                                    size: { width: 93, offsetWidth: 93 },
+                                },
+                            ]);
+                    });
+                    await act(async () => {
+                        jest.runAllTimers();
+                        await Promise.resolve();
+                        wrapper.update();
+                    });
+                    expect(wrapper.render()).toMatchSnapshot();
+                    jest.useRealTimers();
+                });
+            });
+        });
+
+        it('all column has width should use it', () => {
+            const wrapper = mount(
+                <OcTable
+                    columns={[
+                        {
+                            title: 'title1',
+                            dataIndex: 'a',
+                            key: 'a',
+                            width: 100,
+                        },
+                        {
+                            title: 'title2',
+                            dataIndex: 'b',
+                            key: 'b',
+                            width: 100,
+                        },
+                    ]}
+                    data={[]}
+                    scroll={{ x: 'max-content' }}
+                    expandableConfig={{
+                        expandIcon: () => <div className="expand-icon" />,
+                    }}
+                />
+            );
+
+            expect(wrapper.find('colgroup').render()).toMatchSnapshot();
+        });
+    });
+
+    it('has correct scroll classNames when table resize', () => {
+        const wrapper = mount(
+            <OcTable
+                columns={columns}
+                data={data}
+                scroll={{ x: true }}
+                style={{ width: 2000 }}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+            />
+        );
+
+        // Use `onScroll` directly since simulate not support `currentTarget`
+        act(() => {
+            wrapper
+                .find('.table-content')
+                .props()
+                .onScroll({
+                    currentTarget: {
+                        scrollLeft: 10,
+                        scrollWidth: 200,
+                        clientWidth: 100,
+                    },
+                });
+        });
+        act(() => {
+            wrapper.update();
+        });
+        expect(wrapper.find('.table-ping-left').exists()).toBeTruthy();
+        expect(wrapper.find('.table-ping-right').exists()).toBeTruthy();
+
+        // Left
+        act(() => {
+            wrapper
+                .find('.table-content')
+                .props()
+                .onScroll({
+                    currentTarget: {
+                        scrollLeft: 0,
+                        scrollWidth: 200,
+                        clientWidth: 100,
+                    },
+                });
+        });
+        act(() => {
+            wrapper.update();
+        });
+        expect(wrapper.find('.table-ping-left').exists()).toBeFalsy();
+        expect(wrapper.find('.table-ping-right').exists()).toBeTruthy();
+
+        // Right
+        act(() => {
+            wrapper
+                .find('.table-content')
+                .props()
+                .onScroll({
+                    currentTarget: {
+                        scrollLeft: 100,
+                        scrollWidth: 200,
+                        clientWidth: 100,
+                    },
+                });
+        });
+        act(() => {
+            wrapper.update();
+        });
+        expect(wrapper.find('.table-ping-left').exists()).toBeTruthy();
+        expect(wrapper.find('.table-ping-right').exists()).toBeFalsy();
+    });
+
+    it('ellipsis will wrap additional dom', () => {
+        const myColumns = [{ ...columns[0], ellipsis: true }];
+        const wrapper = mount(
+            <OcTable
+                columns={myColumns}
+                data={data}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+            />
+        );
+
+        expect(wrapper.find('tr th').find('.table-cell-content')).toHaveLength(
+            1
+        );
+        expect(wrapper.find('tr td').find('.table-cell-content')).toHaveLength(
+            data.length
+        );
+    });
+
+    it('fixed column renders correctly RTL', () => {
+        const wrapper = mount(
+            <OcTable
+                columns={columns}
+                data={data}
+                direction="rtl"
+                scroll={{ x: 1 }}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+            />
+        );
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+});
diff --git a/src/components/Table/Internal/Tests/FixedHeader.test.js b/src/components/Table/Internal/Tests/FixedHeader.test.js
new file mode 100644
index 000000000..de1ed55c7
--- /dev/null
+++ b/src/components/Table/Internal/Tests/FixedHeader.test.js
@@ -0,0 +1,243 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { act } from 'react-dom/test-utils';
+import { spyElementPrototype } from '../../../../tests/domHook';
+import OcTable, { INTERNAL_COL_DEFINE } from '..';
+import { ResizeObserver } from '../../../../shared/ResizeObserver/ResizeObserver';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Table.FixedHeader', () => {
+    let domSpy;
+    let visible = true;
+
+    beforeAll(() => {
+        domSpy = spyElementPrototype(HTMLElement, 'offsetParent', {
+            get: () => (visible ? {} : null),
+        });
+    });
+
+    beforeEach(() => {
+        visible = true;
+    });
+
+    afterAll(() => {
+        domSpy.mockRestore();
+    });
+
+    it('should work', async () => {
+        jest.useFakeTimers();
+        const col1 = { dataIndex: 'light', width: 100 };
+        const col2 = { dataIndex: 'bamboo', width: 200 };
+        const col3 = { dataIndex: 'empty', width: 0 };
+        const wrapper = mount(
+            <OcTable
+                columns={[col1, col2, col3]}
+                data={[{ light: 'bamboo', bamboo: 'light', key: 1 }]}
+                scroll={{ y: 10 }}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+            />
+        );
+
+        wrapper
+            .find(ResizeObserver.Collection)
+            .first()
+            .props()
+            .onBatchResize([
+                {
+                    data: wrapper.find('ResizeObserver').at(0).props().data,
+                    size: { width: 100, offsetWidth: 100 },
+                },
+                {
+                    data: wrapper.find('ResizeObserver').at(1).props().data,
+                    size: { width: 200, offsetWidth: 200 },
+                },
+                {
+                    data: wrapper.find('ResizeObserver').at(2).props().data,
+                    size: { width: 0, offsetWidth: 0 },
+                },
+            ]);
+
+        await act(async () => {
+            jest.runAllTimers();
+            await Promise.resolve();
+            wrapper.update();
+        });
+
+        expect(
+            wrapper.find('.table-header table').props().style.visibility
+        ).toBeFalsy();
+
+        expect();
+        expect(wrapper.find('colgroup col').at(0).props().style.width).toEqual(
+            100
+        );
+        expect(wrapper.find('colgroup col').at(1).props().style.width).toEqual(
+            200
+        );
+        expect(wrapper.find('colgroup col').at(2).props().style.width).toEqual(
+            100
+        );
+
+        // Update columns
+        wrapper.setProps({ columns: [col2, col1] });
+        wrapper.update();
+
+        expect(wrapper.find('colgroup col').at(0).props().style.width).toEqual(
+            200
+        );
+        expect(wrapper.find('colgroup col').at(1).props().style.width).toEqual(
+            100
+        );
+
+        jest.useRealTimers();
+    });
+
+    it('INTERNAL_COL_DEFINE', () => {
+        const col1 = {
+            dataIndex: 'light',
+            width: 100,
+            [INTERNAL_COL_DEFINE]: { className: 'test-internal' },
+        };
+        const col2 = { dataIndex: 'bamboo', width: 200 };
+        const wrapper = mount(
+            <OcTable
+                columns={[col1, col2]}
+                data={[{ light: 'bamboo', bamboo: 'light', key: 1 }]}
+                scroll={{ y: 10 }}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+            />
+        );
+
+        expect(
+            wrapper.find('table').last().find('colgroup col').first().props()
+                .className
+        ).toEqual('test-internal');
+        expect(
+            wrapper.find('table').first().find('colgroup col').first().props()
+                .className
+        ).toEqual('test-internal');
+    });
+
+    it('show header when data is null', () => {
+        const columns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                key: 'name',
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+                key: 'age',
+            },
+        ];
+
+        const wrapper = mount(
+            <OcTable
+                columns={columns}
+                data={[]}
+                scroll={{
+                    x: true,
+                    y: 100,
+                }}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+            />
+        );
+
+        expect(wrapper.find('.table-header table').props().style).toEqual(
+            expect.objectContaining({ visibility: null })
+        );
+    });
+
+    it('rtl', () => {
+        const wrapper = mount(
+            <OcTable
+                columns={[{ dataIndex: 'light', width: 100 }]}
+                data={[{ key: 0, light: 'bamboo' }]}
+                direction="rtl"
+                scroll={{
+                    y: 100,
+                }}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+            />
+        );
+
+        expect(wrapper.find('Header').props().stickyOffsets).toEqual(
+            expect.objectContaining({
+                isSticky: false,
+                left: [expect.anything(), expect.anything()],
+            })
+        );
+    });
+
+    it('invisible should not change width', async () => {
+        jest.useFakeTimers();
+
+        const col1 = { dataIndex: 'light', width: 93 };
+        const wrapper = mount(
+            <OcTable
+                columns={[col1]}
+                data={[{ light: 'bamboo', bamboo: 'light', key: 1 }]}
+                scroll={{ y: 10 }}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+            />
+        );
+
+        wrapper
+            .find(ResizeObserver.Collection)
+            .first()
+            .props()
+            .onBatchResize([
+                {
+                    data: wrapper.find('ResizeObserver').at(0).props().data,
+                    size: { width: 93, offsetWidth: 93 },
+                },
+            ]);
+        await act(async () => {
+            jest.runAllTimers();
+            await Promise.resolve();
+            wrapper.update();
+        });
+
+        expect(wrapper.find('FixedHolder col').first().props().style).toEqual(
+            expect.objectContaining({ width: 93 })
+        );
+
+        // Hide Table should not modify column width
+        visible = false;
+
+        wrapper
+            .find(ResizeObserver.Collection)
+            .first()
+            .props()
+            .onBatchResize([
+                {
+                    data: wrapper.find('ResizeObserver').at(0).props().data,
+                    size: { width: 0, offsetWidth: 0 },
+                },
+            ]);
+
+        act(() => {
+            jest.runAllTimers();
+            wrapper.update();
+        });
+
+        expect(wrapper.find('FixedHolder col').first().props().style).toEqual(
+            expect.objectContaining({ width: 93 })
+        );
+
+        jest.useRealTimers();
+    });
+});
diff --git a/src/components/Table/Internal/Tests/Hover.test.tsx b/src/components/Table/Internal/Tests/Hover.test.tsx
new file mode 100644
index 000000000..587cf2c7d
--- /dev/null
+++ b/src/components/Table/Internal/Tests/Hover.test.tsx
@@ -0,0 +1,174 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import OcTable from '..';
+import type { OcTableProps } from '../OcTable.types';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Table.Hover', () => {
+    const data = [
+        { key: 'key0', name: 'Lucy' },
+        { key: 'key1', name: 'Jack' },
+    ];
+    const createTable = (props?: OcTableProps) => {
+        const columns = [{ title: 'Name', dataIndex: 'name', key: 'name' }];
+
+        return (
+            <OcTable
+                columns={columns}
+                data={data}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+                {...props}
+            />
+        );
+    };
+
+    it('basic', () => {
+        const wrapper = mount(createTable());
+        wrapper.find('tbody td').first().simulate('mouseEnter');
+        expect(wrapper.exists('.table-cell-row-hover')).toBeTruthy();
+
+        wrapper.find('tbody td').first().simulate('mouseLeave');
+        expect(wrapper.exists('.table-cell-row-hover')).toBeFalsy();
+    });
+
+    it('works on shouldCellUpdate', () => {
+        const wrapper = mount(
+            createTable({
+                columns: [
+                    {
+                        title: 'Name',
+                        dataIndex: 'name',
+                        key: 'name',
+                        shouldCellUpdate: () => false,
+                    },
+                ],
+            })
+        );
+
+        wrapper.find('tbody td').first().simulate('mouseEnter');
+        expect(wrapper.exists('.table-cell-row-hover')).toBeTruthy();
+
+        wrapper.find('tbody td').first().simulate('mouseLeave');
+        expect(wrapper.exists('.table-cell-row-hover')).toBeFalsy();
+    });
+
+    it('onCell should work', () => {
+        const wrapper = mount(
+            createTable({
+                columns: [
+                    {
+                        dataIndex: 'name',
+                        onCell: (_, index) => {
+                            if (index === 0) {
+                                return {
+                                    rowSpan: 2,
+                                };
+                            }
+                            return { rowSpan: 0 };
+                        },
+                    },
+                    {
+                        dataIndex: 'key',
+                    },
+                ],
+            })
+        );
+
+        // Merge row check
+        expect(wrapper.find('tbody td')).toHaveLength(3);
+
+        // Hover 0-0
+        wrapper.find('tbody td').at(0).simulate('mouseEnter');
+        expect(wrapper.find('.table-cell-row-hover')).toHaveLength(3);
+
+        // Hover 0-1
+        wrapper.find('tbody td').at(1).simulate('mouseEnter');
+        expect(wrapper.find('.table-cell-row-hover')).toHaveLength(2);
+
+        // Mouse leave
+        wrapper.find('tbody td').at(1).simulate('mouseLeave');
+        expect(wrapper.exists('.table-cell-row-hover')).toBeFalsy();
+    });
+
+    describe('perf', () => {
+        it('legacy mode should render every time', () => {
+            let renderTimes = 0;
+
+            const wrapper = mount(
+                createTable({
+                    columns: [
+                        {
+                            render: () => {
+                                renderTimes += 1;
+                                return {
+                                    children: null,
+                                };
+                            },
+                        },
+                    ],
+                })
+            );
+
+            expect(wrapper.exists('.table-cell-row-hover')).toBeFalsy();
+
+            // Hover 0-0
+            renderTimes = 0;
+            wrapper.find('tbody td').at(0).simulate('mouseEnter');
+            expect(wrapper.find('.table-cell-row-hover')).toHaveLength(1);
+            expect(renderTimes).toBe(1);
+
+            // Hover 0-1
+            renderTimes = 0;
+            wrapper.find('tbody td').at(1).simulate('mouseEnter');
+            expect(wrapper.find('.table-cell-row-hover')).toHaveLength(1);
+            expect(renderTimes).toBe(2);
+
+            // Mouse leave
+            renderTimes = 0;
+            wrapper.find('tbody td').at(1).simulate('mouseLeave');
+            expect(wrapper.exists('.table-cell-row-hover')).toBeFalsy();
+            expect(renderTimes).toBe(1);
+        });
+
+        it('perf mode to save render times', () => {
+            let renderTimes = 0;
+
+            const wrapper = mount(
+                createTable({
+                    columns: [
+                        {
+                            render: () => {
+                                renderTimes += 1;
+                                return null;
+                            },
+                        },
+                    ],
+                })
+            );
+
+            expect(wrapper.exists('.table-cell-row-hover')).toBeFalsy();
+
+            // Hover 0-0
+            renderTimes = 0;
+            wrapper.find('tbody td').at(0).simulate('mouseEnter');
+            expect(wrapper.find('.table-cell-row-hover')).toHaveLength(1);
+            expect(renderTimes).toBe(0);
+
+            // Hover 0-1
+            renderTimes = 0;
+            wrapper.find('tbody td').at(1).simulate('mouseEnter');
+            expect(wrapper.find('.table-cell-row-hover')).toHaveLength(1);
+            expect(renderTimes).toBe(0);
+
+            // Mouse leave
+            renderTimes = 0;
+            wrapper.find('tbody td').at(1).simulate('mouseLeave');
+            expect(wrapper.exists('.table-cell-row-hover')).toBeFalsy();
+            expect(renderTimes).toBe(0);
+        });
+    });
+});
diff --git a/src/components/Table/Internal/Tests/Internal.test.js b/src/components/Table/Internal/Tests/Internal.test.js
new file mode 100644
index 000000000..870ea9137
--- /dev/null
+++ b/src/components/Table/Internal/Tests/Internal.test.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import OcTable from '..';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+// All follow test is only for internal usage which should be removed when refactor
+describe('Table.Internal', () => {
+    it('internal should pass `__PARENT_RENDER_ICON__` for expandable', () => {
+        const wrapper = mount(
+            <OcTable
+                columns={[{ dataIndex: 'key' }]}
+                data={[{ key: 233 }]}
+                expandableConfig={{
+                    __PARENT_RENDER_ICON__: true,
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+            />
+        );
+
+        expect(wrapper.find('.expand-icon')).toHaveLength(1);
+    });
+});
diff --git a/src/components/Table/Internal/Tests/Scroll.test.js b/src/components/Table/Internal/Tests/Scroll.test.js
new file mode 100644
index 000000000..47b2d4de4
--- /dev/null
+++ b/src/components/Table/Internal/Tests/Scroll.test.js
@@ -0,0 +1,157 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { act } from 'react-dom/test-utils';
+import { spyElementPrototypes } from '../../../../tests/domHook';
+import OcTable from '..';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Table.Scroll', () => {
+    const data = [
+        { key: 'key0', name: 'Lucy' },
+        { key: 'key1', name: 'Jack' },
+    ];
+    const createTable = (props) => {
+        const columns = [{ title: 'Name', dataIndex: 'name', key: 'name' }];
+
+        return (
+            <OcTable
+                columns={columns}
+                data={data}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+                {...props}
+            />
+        );
+    };
+
+    it('renders scroll.x is true', () => {
+        const wrapper = mount(createTable({ scroll: { x: 100 } }));
+        expect(wrapper.find('table').props().style.width).toEqual(100);
+        expect(wrapper.find('.table-content').props().style.overflow).toEqual(
+            'overlay'
+        );
+    });
+
+    it('renders scroll.x is a number', () => {
+        const wrapper = mount(createTable({ scroll: { x: 200 } }));
+        expect(wrapper.find('table').props().style.width).toEqual(200);
+    });
+
+    it('renders scroll.y is a number', () => {
+        const wrapper = mount(createTable({ scroll: { y: 200 } }));
+        expect(wrapper.find('.table-body').props().style.maxHeight).toEqual(
+            200
+        );
+    });
+
+    it('renders scroll.x and scroll.y are both true', () => {
+        const wrapper = mount(createTable({ scroll: { x: 200, y: 200 } }));
+        expect(wrapper.find('.table-body').props().style.overflow).toEqual(
+            'overlay'
+        );
+    });
+
+    it('fire scroll event', () => {
+        jest.useFakeTimers();
+        let scrollLeft = 0;
+        let scrollTop = 0;
+
+        const setScrollLeft = jest.fn((_, val) => {
+            scrollLeft = val;
+        });
+        const setScrollTop = jest.fn((_, val) => {
+            scrollTop = val;
+        });
+
+        const domSpy = spyElementPrototypes(HTMLDivElement, {
+            scrollLeft: {
+                get: () => scrollLeft,
+                set: setScrollLeft,
+            },
+            scrollTop: {
+                get: () => scrollTop,
+                set: setScrollTop,
+            },
+            scrollWidth: {
+                get: () => 200,
+            },
+            clientWidth: {
+                get: () => 100,
+            },
+        });
+
+        const newColumns = [
+            {
+                title: 'title1',
+                dataIndex: 'a',
+                key: 'a',
+                width: 100,
+                fixed: 'left',
+            },
+            { title: 'title2', dataIndex: 'b', key: 'b' },
+            { title: 'title3', dataIndex: 'c', key: 'c' },
+            {
+                title: 'title4',
+                dataIndex: 'd',
+                key: 'd',
+                width: 100,
+                fixed: 'right',
+            },
+        ];
+        const newData = [
+            { a: '123', b: 'xxxxxxxx', c: 3, d: 'hehe', key: '1' },
+            { a: 'cdd', b: 'edd12221', c: 3, d: 'haha', key: '2' },
+        ];
+        const wrapper = mount(
+            <OcTable
+                columns={newColumns}
+                data={newData}
+                scroll={{
+                    x: 200,
+                    y: 200,
+                }}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+            />
+        );
+
+        jest.runAllTimers();
+        // Use `onScroll` directly since simulate not support `currentTarget`
+        act(() => {
+            const headerDiv = wrapper.find('.table-header').instance();
+
+            const wheelEvent = new WheelEvent('wheel');
+            Object.defineProperty(wheelEvent, 'deltaX', {
+                get: () => 10,
+            });
+
+            headerDiv.dispatchEvent(wheelEvent);
+            jest.runAllTimers();
+        });
+
+        expect(setScrollLeft).toHaveBeenCalledWith(undefined, 10);
+        setScrollLeft.mockReset();
+
+        act(() => {
+            wrapper
+                .find('.table-body')
+                .props()
+                .onScroll({
+                    currentTarget: {
+                        scrollLeft: 33,
+                        scrollWidth: 200,
+                        clientWidth: 100,
+                    },
+                });
+        });
+        expect(setScrollLeft).toHaveBeenCalledWith(undefined, 33);
+        setScrollLeft.mockReset();
+
+        domSpy.mockRestore();
+        jest.useRealTimers();
+    });
+});
diff --git a/src/components/Table/Internal/Tests/Sticky.test.js b/src/components/Table/Internal/Tests/Sticky.test.js
new file mode 100644
index 000000000..4c7398401
--- /dev/null
+++ b/src/components/Table/Internal/Tests/Sticky.test.js
@@ -0,0 +1,492 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { spyElementPrototypes } from '../../../../tests/domHook';
+import OcTable from '..';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Table.Sticky', () => {
+    it('Sticky Header', () => {
+        jest.useFakeTimers();
+        const col1 = { dataIndex: 'light', width: 100 };
+        const col2 = { dataIndex: 'bamboo', width: 200 };
+
+        const TableDemo = (props) => {
+            return (
+                <div
+                    style={{
+                        height: 10000,
+                    }}
+                >
+                    <OcTable
+                        columns={[col1, col2]}
+                        data={[{ light: 'bamboo', bamboo: 'light', key: 1 }]}
+                        sticky
+                        expandableConfig={{
+                            expandIcon: () => <div className="expand-icon" />,
+                        }}
+                        {...props}
+                    />
+                </div>
+            );
+        };
+        const wrapper = mount(<TableDemo />);
+
+        expect(wrapper.find('.table-header').last().prop('style')).toEqual({
+            overflow: 'hidden',
+            top: 0,
+        });
+
+        expect(wrapper.find('.table-header').last().prop('className')).toBe(
+            'table-header table-sticky-holder'
+        );
+
+        wrapper.setProps({
+            sticky: {
+                offsetHeader: 10,
+            },
+        });
+
+        expect(wrapper.find('.table-header').last().prop('style')).toEqual({
+            overflow: 'hidden',
+            top: 10,
+        });
+
+        jest.useRealTimers();
+    });
+
+    it('Sticky scroll', async () => {
+        jest.useFakeTimers();
+        window.pageYOffset = 900;
+        document.documentElement.scrollTop = 200;
+        let scrollLeft = 100;
+        const domSpy = spyElementPrototypes(HTMLDivElement, {
+            scrollLeft: {
+                get: () => scrollLeft,
+                set: (left) => {
+                    scrollLeft = left;
+                },
+            },
+            scrollTop: {
+                get: () => 100,
+            },
+            scrollWidth: {
+                get: () => 200,
+            },
+            clientWidth: {
+                get: () => 100,
+            },
+            offsetHeight: {
+                get: () => 100,
+            },
+        });
+
+        const col1 = { dataIndex: 'light', width: 1000 };
+        const col2 = { dataIndex: 'bamboo', width: 2000 };
+        const wrapper = mount(
+            <OcTable
+                columns={[col1, col2]}
+                data={[
+                    { light: 'bamboo', bamboo: 'light', key: 1 },
+                    { light: 'bamboo', bamboo: 'light', key: 2 },
+                    { light: 'bamboo', bamboo: 'light', key: 3 },
+                    { light: 'bamboo', bamboo: 'light', key: 4 },
+                    { light: 'bamboo', bamboo: 'light', key: 6 },
+                    { light: 'bamboo', bamboo: 'light', key: 7 },
+                    { light: 'bamboo', bamboo: 'light', key: 8 },
+                    { light: 'bamboo', bamboo: 'light', key: 9 },
+                    { light: 'bamboo', bamboo: 'light', key: 10 },
+                    { light: 'bamboo', bamboo: 'light', key: 11 },
+                    { light: 'bamboo', bamboo: 'light', key: 12 },
+                    { light: 'bamboo', bamboo: 'light', key: 13 },
+                    { light: 'bamboo', bamboo: 'light', key: 15 },
+                    { light: 'bamboo', bamboo: 'light', key: 16 },
+                    { light: 'bamboo', bamboo: 'light', key: 17 },
+                    { light: 'bamboo', bamboo: 'light', key: 18 },
+                    { light: 'bamboo', bamboo: 'light', key: 19 },
+                    { light: 'bamboo', bamboo: 'light', key: 20 },
+                    { light: 'bamboo', bamboo: 'light', key: 21 },
+                    { light: 'bamboo', bamboo: 'light', key: 22 },
+                    { light: 'bamboo', bamboo: 'light', key: 23 },
+                    { light: 'bamboo', bamboo: 'light', key: 24 },
+                    { light: 'bamboo', bamboo: 'light', key: 25 },
+                    { light: 'bamboo', bamboo: 'light', key: 26 },
+                ]}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+                scroll={{
+                    x: 10000,
+                }}
+                sticky
+            />
+        );
+
+        await act(async () => {
+            jest.runAllTimers();
+            await Promise.resolve();
+        });
+
+        const oldInnerHeight = global.innerHeight;
+        const resizeEvent = new Event('resize');
+
+        global.innerHeight = 10000;
+
+        await act(async () => {
+            global.dispatchEvent(resizeEvent);
+            jest.runAllTimers();
+            await Promise.resolve();
+            wrapper.update();
+        });
+
+        await act(async () => {
+            global.innerHeight = oldInnerHeight;
+            global.dispatchEvent(resizeEvent);
+            jest.runAllTimers();
+            await Promise.resolve();
+            wrapper.update();
+        });
+
+        const mockFn = jest.fn();
+
+        wrapper.find('.table-sticky-scroll-bar').simulate('mousedown', {
+            persist: mockFn,
+            preventDefault: mockFn,
+            pageX: 0,
+        });
+
+        expect(mockFn).toHaveBeenCalledTimes(2);
+
+        expect(wrapper.find('.table-sticky-scroll-bar-active').length).toBe(1);
+
+        const mousemoveEvent = new Event('mousemove');
+
+        mousemoveEvent.buttons = 1;
+        mousemoveEvent.pageX = 50;
+
+        await act(async () => {
+            document.body.dispatchEvent(mousemoveEvent);
+            jest.runAllTimers();
+            await Promise.resolve();
+            wrapper.update();
+        });
+
+        expect(wrapper.find('.table-sticky-scroll-bar').prop('style')).toEqual({
+            width: '50px',
+            transform: 'translate3d(50.5px, 0, 0)',
+        });
+
+        await act(async () => {
+            mousemoveEvent.pageX = -50;
+            document.body.dispatchEvent(mousemoveEvent);
+
+            jest.runAllTimers();
+            await Promise.resolve();
+            wrapper.update();
+        });
+
+        expect(wrapper.find('.table-sticky-scroll-bar').prop('style')).toEqual({
+            width: '50px',
+            transform: 'translate3d(0px, 0, 0)',
+        });
+
+        await act(async () => {
+            mousemoveEvent.buttons = 0;
+            document.body.dispatchEvent(mousemoveEvent);
+
+            jest.runAllTimers();
+            await Promise.resolve();
+            wrapper.update();
+        });
+
+        expect(wrapper.find('.table-sticky-scroll-bar-active').length).toBe(0);
+
+        const mouseupEvent = new Event('mouseup');
+
+        document.body.dispatchEvent(mouseupEvent);
+
+        wrapper.unmount();
+
+        window.pageYOffset = 0;
+        mockFn.mockRestore();
+        domSpy.mockRestore();
+        jest.useRealTimers();
+    });
+
+    it('Sticky Header with border classname', () => {
+        jest.useFakeTimers();
+
+        const TableDemo = (props) => {
+            return (
+                <div
+                    style={{
+                        height: 10000,
+                    }}
+                >
+                    <OcTable
+                        columns={[
+                            {
+                                title: 'title1',
+                                dataIndex: 'a',
+                                key: 'a',
+                                width: 100,
+                                fixed: 'left',
+                            },
+                            { title: 'title2', dataIndex: 'b', key: 'b' },
+                            { title: 'title3', dataIndex: 'c', key: 'c' },
+                            {
+                                title: 'title4',
+                                dataIndex: 'd',
+                                key: 'd',
+                                width: 100,
+                                fixed: 'right',
+                            },
+                        ]}
+                        data={[
+                            {
+                                a: '123',
+                                b: 'xxxxxxxx',
+                                c: 3,
+                                d: 'hehe',
+                                key: '1',
+                            },
+                            {
+                                a: 'cdd',
+                                b: 'edd12221',
+                                c: 3,
+                                d: 'haha',
+                                key: '2',
+                            },
+                        ]}
+                        expandableConfig={{
+                            expandIcon: () => <div className="expand-icon" />,
+                        }}
+                        sticky
+                        scroll={{
+                            x: 10000,
+                        }}
+                        {...props}
+                    />
+                </div>
+            );
+        };
+        const wrapper = mount(<TableDemo />);
+
+        expect(
+            wrapper.find('.table-cell-fix-sticky').at(1).prop('style')
+        ).toEqual({
+            position: 'sticky',
+            right: 0,
+        });
+
+        expect(wrapper.find('.table-cell-fix-sticky').at(1)).not.toBe(
+            undefined
+        );
+
+        jest.useRealTimers();
+    });
+
+    it('Sticky Header with scroll-y', () => {
+        jest.useFakeTimers();
+
+        const TableDemo = (props) => {
+            return (
+                <div
+                    style={{
+                        height: 10000,
+                    }}
+                >
+                    <OcTable
+                        columns={[
+                            {
+                                title: 'title1',
+                                dataIndex: 'a',
+                                key: 'a',
+                                width: 100,
+                                fixed: 'left',
+                            },
+                            { title: 'title2', dataIndex: 'b', key: 'b' },
+                            { title: 'title3', dataIndex: 'c', key: 'c' },
+                            {
+                                title: 'title4',
+                                dataIndex: 'd',
+                                key: 'd',
+                                width: 100,
+                                fixed: 'right',
+                            },
+                        ]}
+                        data={[
+                            {
+                                a: '123',
+                                b: 'xxxxxxxx',
+                                c: 3,
+                                d: 'hehe',
+                                key: '1',
+                            },
+                            {
+                                a: 'cdd',
+                                b: 'edd12221',
+                                c: 3,
+                                d: 'haha',
+                                key: '2',
+                            },
+                        ]}
+                        expandableConfig={{
+                            expandIcon: () => <div className="expand-icon" />,
+                        }}
+                        sticky
+                        scroll={{
+                            x: 10000,
+                            y: 10,
+                        }}
+                        {...props}
+                    />
+                </div>
+            );
+        };
+        const wrapper = mount(<TableDemo />);
+
+        expect(
+            wrapper.find('.table-cell-fix-sticky').at(0).prop('style')
+        ).toEqual({
+            left: 0,
+            position: 'sticky',
+        });
+
+        jest.useRealTimers();
+    });
+
+    it('Sticky scroll with getContainer', async () => {
+        jest.useFakeTimers();
+        window.pageYOffset = 900;
+        document.documentElement.scrollTop = 200;
+        const container = document.createElement('p');
+        container.style = 'height: 500px;overflow: scroll';
+        document.body.appendChild(container);
+        let scrollLeft = 100;
+        const domSpy = spyElementPrototypes(HTMLDivElement, {
+            scrollLeft: {
+                get: () => scrollLeft,
+                set: (left) => {
+                    scrollLeft = left;
+                },
+            },
+            scrollTop: {
+                get: () => 100,
+            },
+            scrollWidth: {
+                get: () => 200,
+            },
+            clientWidth: {
+                get: () => 100,
+            },
+            offsetHeight: {
+                get: () => 1000,
+            },
+        });
+
+        const sectionSpy = spyElementPrototypes(HTMLParagraphElement, {
+            scrollLeft: {
+                get: () => scrollLeft,
+                set: (left) => {
+                    scrollLeft = left;
+                },
+            },
+            scrollTop: {
+                get: () => 100,
+            },
+            scrollWidth: {
+                get: () => 200,
+            },
+            clientWidth: {
+                get: () => 100,
+            },
+            clientHeight: {
+                get: () => 500,
+            },
+            offsetHeight: {
+                get: () => 100,
+            },
+        });
+
+        const col1 = { dataIndex: 'light', width: 1000 };
+        const col2 = { dataIndex: 'bamboo', width: 2000 };
+        const wrapper = mount(
+            <OcTable
+                columns={[col1, col2]}
+                data={[
+                    { light: 'bamboo', bamboo: 'light', key: 1 },
+                    { light: 'bamboo', bamboo: 'light', key: 2 },
+                    { light: 'bamboo', bamboo: 'light', key: 3 },
+                    { light: 'bamboo', bamboo: 'light', key: 4 },
+                    { light: 'bamboo', bamboo: 'light', key: 6 },
+                    { light: 'bamboo', bamboo: 'light', key: 7 },
+                    { light: 'bamboo', bamboo: 'light', key: 8 },
+                    { light: 'bamboo', bamboo: 'light', key: 9 },
+                    { light: 'bamboo', bamboo: 'light', key: 10 },
+                    { light: 'bamboo', bamboo: 'light', key: 11 },
+                    { light: 'bamboo', bamboo: 'light', key: 12 },
+                    { light: 'bamboo', bamboo: 'light', key: 13 },
+                    { light: 'bamboo', bamboo: 'light', key: 15 },
+                    { light: 'bamboo', bamboo: 'light', key: 16 },
+                    { light: 'bamboo', bamboo: 'light', key: 17 },
+                    { light: 'bamboo', bamboo: 'light', key: 18 },
+                    { light: 'bamboo', bamboo: 'light', key: 19 },
+                    { light: 'bamboo', bamboo: 'light', key: 20 },
+                    { light: 'bamboo', bamboo: 'light', key: 21 },
+                    { light: 'bamboo', bamboo: 'light', key: 22 },
+                    { light: 'bamboo', bamboo: 'light', key: 23 },
+                    { light: 'bamboo', bamboo: 'light', key: 24 },
+                    { light: 'bamboo', bamboo: 'light', key: 25 },
+                    { light: 'bamboo', bamboo: 'light', key: 26 },
+                ]}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+                scroll={{
+                    x: 10000,
+                }}
+                sticky={{
+                    getContainer: () => container,
+                }}
+            />,
+            {
+                attachTo: container,
+            }
+        );
+
+        await act(async () => {
+            jest.runAllTimers();
+            await Promise.resolve();
+        });
+
+        const mockFn = jest.fn();
+
+        const mousemoveEvent = new Event('mousemove');
+
+        mousemoveEvent.buttons = 1;
+        mousemoveEvent.pageX = 50;
+
+        await act(async () => {
+            document.body.dispatchEvent(mousemoveEvent);
+            jest.runAllTimers();
+            await Promise.resolve();
+            wrapper.update();
+        });
+
+        expect(wrapper.find('.table-sticky-scroll-bar').prop('style')).toEqual({
+            width: '50px',
+            transform: 'translate3d(50px, 0, 0)',
+        });
+
+        wrapper.unmount();
+
+        window.pageYOffset = 0;
+        domSpy.mockRestore();
+        sectionSpy.mockRestore();
+        mockFn.mockRestore();
+        jest.useRealTimers();
+    });
+});
diff --git a/src/components/Table/Internal/Tests/Summary.test.tsx b/src/components/Table/Internal/Tests/Summary.test.tsx
new file mode 100644
index 000000000..8fc90c75b
--- /dev/null
+++ b/src/components/Table/Internal/Tests/Summary.test.tsx
@@ -0,0 +1,161 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import OcTable from '..';
+import { OcTableProps, DefaultRecordType } from '../OcTable.types';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Table.Summary', () => {
+    const data = [
+        { key: 'key0', name: 'Lucy' },
+        { key: 'key1', name: 'Jack' },
+    ];
+    const createTable = (
+        props: JSX.IntrinsicAttributes &
+            Pick<
+                OcTableProps<DefaultRecordType>,
+                | 'classNames'
+                | 'style'
+                | 'children'
+                | 'data'
+                | 'columns'
+                | 'tableLayout'
+                | 'scroll'
+                | 'expandableConfig'
+                | 'indentSize'
+                | 'rowClassName'
+                | 'title'
+                | 'footer'
+                | 'summary'
+                | 'id'
+                | 'showHeader'
+                | 'components'
+                | 'onRow'
+                | 'onHeaderRow'
+                | 'direction'
+                | 'transformColumns'
+                | 'sticky'
+            > &
+            Partial<
+                Pick<OcTableProps<DefaultRecordType>, 'rowKey' | 'emptyText'>
+            > &
+            Partial<Pick<{ rowKey: string; emptyText: () => string }, never>>
+    ) => {
+        const columns = [{ title: 'Name', dataIndex: 'name', key: 'name' }];
+
+        return (
+            <OcTable
+                columns={columns}
+                data={data}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+                {...props}
+            />
+        );
+    };
+
+    it('render correctly', () => {
+        const wrapper = mount(
+            createTable({
+                summary: () => (
+                    <tr className="summary">
+                        <td>Good</td>
+                    </tr>
+                ),
+            })
+        );
+
+        expect(wrapper.find('tfoot').text()).toEqual('Good');
+    });
+
+    it('support data type', () => {
+        const wrapper = mount(
+            <OcTable
+                columns={[
+                    { dataIndex: 'a', fixed: 'left', width: 10 },
+                    { dataIndex: 'b', fixed: 'left', width: 20 },
+                    { dataIndex: 'c', width: 30 },
+                ]}
+                data={[{ key: 1, a: 2, b: 3, c: 4 }]}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+                summary={() => (
+                    <OcTable.Summary.Row>
+                        <OcTable.Summary.Cell colSpan={2} index={0}>
+                            Light
+                        </OcTable.Summary.Cell>
+                        <OcTable.Summary.Cell index={2}>
+                            Bamboo
+                        </OcTable.Summary.Cell>
+                        <OcTable.Summary.Cell index={3} align="right">
+                            112.5
+                        </OcTable.Summary.Cell>
+                    </OcTable.Summary.Row>
+                )}
+            />
+        );
+
+        expect(wrapper.find('tfoot').render()).toMatchSnapshot();
+    });
+
+    describe('fixed summary', () => {
+        const getSummaryTable = (fixed: boolean | 'top' | 'bottom') =>
+            mount(
+                <OcTable
+                    columns={[
+                        { dataIndex: 'a', fixed: 'left', width: 10 },
+                        { dataIndex: 'b', width: 20 },
+                        { dataIndex: 'c', fixed: 'right', width: 30 },
+                    ]}
+                    data={[{ key: 1, a: 2, b: 3, c: 4 }]}
+                    expandableConfig={{
+                        expandIcon: () => <div className="expand-icon" />,
+                    }}
+                    scroll={{ x: 100, y: 100 }}
+                    summary={() => (
+                        <OcTable.Summary fixed={fixed}>
+                            <OcTable.Summary.Row>
+                                <OcTable.Summary.Cell index={0}>
+                                    Light
+                                </OcTable.Summary.Cell>
+                                <OcTable.Summary.Cell index={1}>
+                                    Bamboo
+                                </OcTable.Summary.Cell>
+                                <OcTable.Summary.Cell index={2}>
+                                    Little
+                                </OcTable.Summary.Cell>
+                            </OcTable.Summary.Row>
+                        </OcTable.Summary>
+                    )}
+                />
+            );
+
+        it('fixed', () => {
+            const wrapper = getSummaryTable(false);
+
+            expect(wrapper.exists('tfoot.table-summary')).toBeTruthy();
+        });
+
+        it('fixed bottom', () => {
+            const wrapper = getSummaryTable('bottom');
+
+            expect(wrapper.exists('tfoot.table-summary')).toBeTruthy();
+        });
+
+        it('sticky', () => {
+            const wrapper = getSummaryTable(true);
+
+            expect(wrapper.exists('div.table-summary')).toBeTruthy();
+        });
+
+        it('fixed top', () => {
+            const wrapper = getSummaryTable('top');
+            expect(
+                wrapper.exists('.table-header tfoot.table-summary')
+            ).toBeTruthy();
+        });
+    });
+});
diff --git a/src/components/Table/Internal/Tests/Table.test.js b/src/components/Table/Internal/Tests/Table.test.js
new file mode 100644
index 000000000..794feeaff
--- /dev/null
+++ b/src/components/Table/Internal/Tests/Table.test.js
@@ -0,0 +1,1096 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import OcTable, { INTERNAL_COL_DEFINE } from '..';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Table.Basic', () => {
+    const data = [
+        { key: 'key0', name: 'Lucy' },
+        { key: 'key1', name: 'Jack' },
+    ];
+    const createTable = (props) => {
+        const columns = [{ title: 'Name', dataIndex: 'name', key: 'name' }];
+
+        return (
+            <OcTable
+                columns={columns}
+                data={data}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+                {...props}
+            />
+        );
+    };
+
+    describe('renders correctly', () => {
+        it('basic', () => {
+            const wrapper = mount(
+                createTable({
+                    classNames: 'test-class-name',
+                })
+            );
+            expect(wrapper.render()).toMatchSnapshot();
+        });
+
+        it('RTL', () => {
+            const wrapper = mount(
+                createTable({
+                    classNames: 'test-class-name',
+                    direction: 'rtl',
+                })
+            );
+            expect(wrapper.render()).toMatchSnapshot();
+        });
+
+        it('no columns', () => {
+            const wrapper = mount(createTable({ columns: [] }));
+            expect(wrapper.render()).toMatchSnapshot();
+        });
+
+        it('column children undefined', () => {
+            const wrapper = mount(
+                createTable({
+                    columns: [
+                        {
+                            title: 'Name',
+                            dataIndex: 'name',
+                            key: 'name',
+                            children: [],
+                        },
+                        {
+                            title: 'Age',
+                            dataIndex: 'age',
+                            key: 'age',
+                            children: undefined,
+                        },
+                    ],
+                })
+            );
+            expect(wrapper.render()).toMatchSnapshot();
+            expect(wrapper.find('th').at(0).text()).toEqual('Name');
+            expect(wrapper.find('th').at(1).text()).toEqual('Age');
+        });
+
+        it('falsy columns', () => {
+            const wrapper = mount(
+                createTable({
+                    columns: [
+                        {
+                            title: 'Name',
+                            dataIndex: 'name',
+                            key: 'name',
+                            children: [],
+                        },
+                        false,
+                    ],
+                })
+            );
+            expect(wrapper.render()).toMatchSnapshot();
+        });
+    });
+
+    describe('renders empty text correctly', () => {
+        it('ReactNode', () => {
+            const wrapper = mount(
+                createTable({ data: [], emptyText: 'No data' })
+            );
+            expect(
+                wrapper.find('.table-placeholder').hostNodes().text()
+            ).toEqual('No data');
+        });
+
+        it('renderProps', () => {
+            const wrapper = mount(
+                createTable({ data: [], emptyText: () => 'No data' })
+            );
+            expect(
+                wrapper.find('.table-placeholder').hostNodes().text()
+            ).toEqual('No data');
+        });
+
+        it('effect update', () => {
+            const App = () => {
+                const [emptyText, setEmptyText] = React.useState('light');
+                React.useEffect(() => {
+                    setEmptyText('bamboo');
+                }, []);
+                return (
+                    <OcTable
+                        emptyText={emptyText}
+                        expandableConfig={{
+                            expandIcon: () => <div className="expand-icon" />,
+                        }}
+                    />
+                );
+            };
+            const wrapper = mount(<App />);
+            wrapper.update();
+            expect(
+                wrapper.find('.table-placeholder').hostNodes().text()
+            ).toEqual('bamboo');
+        });
+    });
+
+    it('renders without header', () => {
+        const wrapper = mount(createTable({ showHeader: false }));
+        expect(wrapper.find('thead').length).toBeFalsy();
+    });
+
+    it('renders fixed header correctly', () => {
+        const wrapper = mount(createTable({ scroll: { y: 100 } }));
+        expect(wrapper.find('.table-header').length).toBeTruthy();
+    });
+
+    it('renders title correctly', () => {
+        const wrapper = mount(createTable({ title: () => <p>title</p> }));
+        expect(wrapper.find('.table-title').hostNodes().text()).toEqual(
+            'title'
+        );
+    });
+
+    it('renders footer correctly', () => {
+        const wrapper = mount(createTable({ footer: () => <p>footer</p> }));
+        expect(wrapper.find('.table-footer').hostNodes().text()).toEqual(
+            'footer'
+        );
+    });
+
+    it('renders with id correctly', () => {
+        const testId = 'test-identifier';
+        const wrapper = mount(createTable({ id: testId }));
+        expect(wrapper.find(`div#${testId}`).length).toBeTruthy();
+    });
+
+    it('renders data- &  aria- attributes', () => {
+        const miscProps = {
+            'data-test': 'names-table',
+            'aria-label': 'names-table-aria',
+        };
+        const wrapper = mount(createTable(miscProps));
+        const props = wrapper.find('div.table').props();
+        expect(props).toEqual(expect.objectContaining(miscProps));
+    });
+
+    describe('rowKey', () => {
+        it('uses record.key', () => {
+            const wrapper = mount(createTable());
+            expect(wrapper.find('BodyRow').at(0).key()).toBe('key0');
+            expect(wrapper.find('BodyRow').at(1).key()).toBe('key1');
+        });
+
+        it('sets by rowKey', () => {
+            const wrapper = mount(createTable({ rowKey: 'name' }));
+            expect(wrapper.find('BodyRow').at(0).key()).toBe('Lucy');
+            expect(wrapper.find('BodyRow').at(1).key()).toBe('Jack');
+        });
+
+        it('sets by rowKey function', () => {
+            const wrapper = mount(
+                createTable({ rowKey: (record) => `${record.key}1` })
+            );
+            expect(wrapper.find('BodyRow').at(0).key()).toBe('key01');
+            expect(wrapper.find('BodyRow').at(1).key()).toBe('key11');
+        });
+    });
+
+    it('renders tableLayout', () => {
+        const wrapper = mount(createTable({ tableLayout: 'fixed' }));
+        expect(wrapper.find('table').props().style.tableLayout).toEqual(
+            'fixed'
+        );
+        expect(wrapper.find('.table-layout-fixed').exists()).toBeTruthy();
+    });
+
+    it('renders ellipsis', () => {
+        const wrapper = mount(
+            createTable({
+                columns: [
+                    { title: 'title', ellipsis: true },
+                    {
+                        title: 'node title',
+                        ellipsis: true,
+                        render: () => <h1>233</h1>,
+                    },
+                ],
+            })
+        );
+
+        wrapper.find('td').forEach((td) => {
+            expect(td.hasClass('table-cell-ellipsis')).toBeTruthy();
+        });
+    });
+
+    it('renders ellipsis by showTitle option', () => {
+        const wrapper = mount(
+            createTable({
+                columns: [
+                    { title: 'title', ellipsis: { showTitle: true } },
+                    {
+                        title: 'node title',
+                        ellipsis: { showTitle: true },
+                        render: () => <h1>233</h1>,
+                    },
+                ],
+            })
+        );
+
+        wrapper.find('td').forEach((td) => {
+            expect(td.hasClass('table-cell-ellipsis')).toBeTruthy();
+        });
+    });
+
+    it('not renders ellipsis origin html title', () => {
+        const columns = [
+            { title: 'title', ellipsis: { showTitle: false } },
+            {
+                title: 'node title',
+                ellipsis: { showTitle: false },
+                render: () => <h1>233</h1>,
+            },
+        ];
+        const wrapper = mount(
+            createTable({
+                columns,
+            })
+        );
+
+        wrapper.find('.table-thead th').forEach((td) => {
+            expect(
+                td.getDOMNode().attributes.getNamedItem('title')
+            ).toBeTruthy();
+        });
+
+        wrapper.find('.table-tbody td').forEach((td) => {
+            expect(
+                td.getDOMNode().attributes.getNamedItem('title')
+            ).toBeFalsy();
+        });
+    });
+
+    it('renders column correctly', () => {
+        const columns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                key: 'name',
+                classNames: 'name-class',
+                width: 100,
+            },
+        ];
+        const wrapper = mount(createTable({ columns }));
+        wrapper.find('td').forEach((td, index) => {
+            expect(td.hasClass('name-class')).toBeTruthy();
+            expect(td.text()).toEqual(['Lucy', 'Jack'][index]);
+        });
+
+        expect(wrapper.find('col').props().style).toEqual(
+            expect.objectContaining({ width: 100 })
+        );
+    });
+
+    it('renders custom cell correctly', () => {
+        const columns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                render: (text) => <p>!!!{text}!!!</p>,
+            },
+        ];
+        const wrapper = mount(createTable({ columns }));
+        wrapper.find('td').forEach((td, index) => {
+            expect(td.text()).toEqual(['!!!Lucy!!!', '!!!Jack!!!'][index]);
+        });
+    });
+
+    describe('dataIndex', () => {
+        it("pass record to render when it's falsy", () => {
+            [null, undefined, '', []].forEach((dataIndex) => {
+                const cellRender = jest.fn();
+                const columns = [
+                    {
+                        title: 'Name',
+                        dataIndex,
+                        key: 'name',
+                        render: cellRender,
+                    },
+                ];
+                mount(createTable({ columns }));
+                expect(cellRender).toHaveBeenCalledWith(data[0], data[0], 0);
+            });
+        });
+
+        it('render text by path', () => {
+            const columns = [
+                { title: 'First Name', dataIndex: ['name', 'first'], key: 'a' },
+                { title: 'Last Name', dataIndex: ['name', 'last'], key: 'b' },
+            ];
+            const localData = [
+                { key: 'key0', name: { first: 'John', last: 'Doe' } },
+                { key: 'key1', name: { first: 'Terry', last: 'Garner' } },
+            ];
+            const wrapper = mount(createTable({ columns, data: localData }));
+
+            const targetData = [
+                ['John', 'Doe'],
+                ['Terry', 'Garner'],
+            ];
+
+            wrapper.find('tbody tr').forEach((tr, ri) => {
+                tr.find('td').forEach((td, di) => {
+                    expect(td.text()).toEqual(targetData[ri][di]);
+                });
+            });
+        });
+    });
+
+    it('render empty cell if text is empty object', () => {
+        const localData = [
+            { key: 'key0', name: {} },
+            { key: 'key1', name: 'Jack' },
+        ];
+        const wrapper = mount(createTable({ data: localData }));
+        expect(wrapper.find('table td').first().text()).toBe('');
+    });
+
+    it('renders colSpan correctly', () => {
+        const columns = [
+            {
+                title: 'Name',
+                dataIndex: 'firstName',
+                key: 'firstName',
+                colSpan: 2,
+                render: (text, record, index) => {
+                    const obj = {
+                        children: text,
+                        props: {},
+                    };
+                    if (index === 0) {
+                        obj.props.colSpan = 2;
+                    }
+                    return obj;
+                },
+            },
+            {
+                title: '',
+                dataIndex: 'lastName',
+                key: 'lastName',
+                colSpan: 0,
+                render: (text, record, index) => {
+                    const obj = {
+                        children: text,
+                        props: {},
+                    };
+                    if (index === 0) {
+                        obj.props.colSpan = 0;
+                    }
+                    return obj;
+                },
+            },
+        ];
+        const localData = [
+            { key: 'key0', firstName: 'John', lastName: 'Doe' },
+            { key: 'key1', firstName: 'Terry', lastName: 'Garner' },
+        ];
+        const wrapper = mount(createTable({ columns, data: localData }));
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('render with style & className & data-*', () => {
+        const columns = [
+            {
+                dataIndex: 'key',
+                render: (text) => ({
+                    props: {
+                        style: { background: 'red' },
+                        classNames: 'customize-render',
+                        'data-light': 'bamboo',
+                    },
+                    children: text,
+                }),
+            },
+        ];
+
+        const wrapper = mount(
+            <OcTable
+                columns={columns}
+                data={[{ key: '' }]}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+            />
+        );
+        const props = wrapper.find('td').props();
+        expect(props.style).toEqual(
+            expect.objectContaining({ background: 'red' })
+        );
+        expect(props.className.includes('customize-render')).toBeTruthy();
+        expect(props['data-light']).toEqual('bamboo');
+    });
+
+    it('renders rowSpan correctly', () => {
+        const columns = [
+            {
+                title: 'First Name',
+                dataIndex: 'firstName',
+                key: 'firstName',
+            },
+            {
+                title: 'Last Name',
+                dataIndex: 'lastName',
+                key: 'lastName',
+                render: (text, record, index) => {
+                    const obj = {
+                        children: text,
+                        props: {},
+                    };
+                    if (index === 0) {
+                        obj.props.rowSpan = 2;
+                    } else {
+                        obj.props.rowSpan = 0;
+                    }
+                    return obj;
+                },
+            },
+        ];
+        const localData = [
+            { key: 'key0', firstName: 'John', lastName: 'Doe' },
+            { key: 'key1', firstName: 'Terry', lastName: 'Garner' },
+        ];
+        const wrapper = mount(createTable({ columns, data: localData }));
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('renders correctly RowClassName as string', () => {
+        const wrapper = mount(
+            createTable({
+                rowClassName: 'test-row-class-name-asStr',
+            })
+        );
+
+        wrapper.find('tbody tr').forEach((tr) => {
+            expect(tr.hasClass('test-row-class-name-asStr')).toBeTruthy();
+        });
+        expect(wrapper.find('tbody tr').length).toBeTruthy();
+    });
+
+    it('renders correctly RowClassName as function', () => {
+        const wrapper = mount(
+            createTable({
+                rowClassName: () => 'test-row-class-name-asFn',
+            })
+        );
+
+        wrapper.find('tbody tr').forEach((tr) => {
+            expect(tr.hasClass('test-row-class-name-asFn')).toBeTruthy();
+        });
+        expect(wrapper.find('tbody tr').length).toBeTruthy();
+    });
+
+    describe('onRow', () => {
+        it('renders onRow correctly', () => {
+            const onRow = (record, index) => ({
+                id: `row-${record.key}`,
+                index,
+            });
+            const wrapper = mount(createTable({ onRow }));
+
+            expect(wrapper.find('tbody tr').length).toBeTruthy();
+            wrapper.find('tbody tr').forEach((tr, index) => {
+                expect(tr.props().id).toEqual(`row-${data[index].key}`);
+                expect(tr.simulate.bind(tr, 'click')).not.toThrowError();
+            });
+        });
+
+        it('onRow should keep update', () => {
+            const Test = () => {
+                const [count, setCount] = React.useState(0);
+
+                return (
+                    <div>
+                        <OcTable
+                            columns={[{ dataIndex: 'key' }]}
+                            data={[{ key: 0 }]}
+                            expandableConfig={{
+                                expandIcon: () => (
+                                    <div className="expand-icon" />
+                                ),
+                            }}
+                            onRow={() => ({
+                                onClick() {
+                                    setCount(count + 1);
+                                },
+                            })}
+                        />
+                        <span id="count">{count}</span>
+                    </div>
+                );
+            };
+            const wrapper = mount(<Test />);
+            for (let i = 0; i < 10; i += 1) {
+                wrapper.find('tbody tr td').last().simulate('click');
+                expect(wrapper.find('#count').text()).toEqual(String(i + 1));
+            }
+        });
+    });
+
+    it('renders column.onCell correctly', () => {
+        const onCell = (record) => ({
+            id: `cell-${record.name}`,
+        });
+        const columns = [
+            { title: 'Name', dataIndex: 'name', key: 'name', onCell },
+        ];
+        const wrapper = mount(createTable({ columns }));
+
+        expect(wrapper.find('tbody td')).toHaveLength(2);
+        wrapper.find('tbody td').forEach((td, index) => {
+            expect(td.props().id).toEqual(`cell-${data[index].name}`);
+        });
+    });
+
+    it('renders onHeaderRow correctly', () => {
+        const onHeaderRow = jest.fn((columns, index) => ({
+            id: `header-row-${index}`,
+        }));
+        const wrapper = mount(createTable({ onHeaderRow }));
+
+        expect(wrapper.find('thead tr').props().id).toEqual('header-row-0');
+        expect(onHeaderRow).toHaveBeenCalledWith(
+            [{ title: 'Name', dataIndex: 'name', key: 'name' }],
+            0
+        );
+    });
+
+    it('renders column.onHeaderCell', () => {
+        const onHeaderCell = (column) => ({
+            id: `header-cell-${column.key}`,
+        });
+        const columns = [
+            { title: 'Name', dataIndex: 'name', key: 'name', onHeaderCell },
+        ];
+        const wrapper = mount(createTable({ columns }));
+
+        expect(wrapper.find('thead th')).toHaveLength(1);
+        expect(wrapper.find('thead th').props().id).toEqual('header-cell-name');
+    });
+
+    describe('custom components', () => {
+        const MyTable = (props) => <table name="my-table" {...props} />;
+        const HeaderWrapper = (props) => (
+            <thead name="my-header-wrapper" {...props} />
+        );
+        const HeaderRow = (props) => <tr name="my-header-row" {...props} />;
+        const HeaderCell = (props) => <th name="my-header-cell" {...props} />;
+        const BodyWrapper = (props) => (
+            <tbody name="my-body-wrapper" {...props} />
+        );
+        const BodyRow = (props) => <tr name="my-body-row" {...props} />;
+        const BodyCell = (props) => <td name="my-body-cell" {...props} />;
+        const components = {
+            table: MyTable,
+            header: {
+                wrapper: HeaderWrapper,
+                row: HeaderRow,
+                cell: HeaderCell,
+            },
+            body: {
+                wrapper: BodyWrapper,
+                row: BodyRow,
+                cell: BodyCell,
+            },
+        };
+
+        it('renders correctly', () => {
+            const wrapper = mount(createTable({ components }));
+            expect(wrapper.render()).toMatchSnapshot();
+        });
+
+        it('renders fixed column and header correctly', () => {
+            const columns = [
+                {
+                    title: 'Name',
+                    dataIndex: 'name',
+                    key: 'name',
+                    fixed: 'left',
+                },
+                { title: 'Age', dataIndex: 'age', key: 'age' },
+                {
+                    title: 'Gender',
+                    dataIndex: 'gender',
+                    key: 'gender',
+                    fixed: 'right',
+                },
+            ];
+            const sampleData = [{ key: 0, name: 'Lucy', age: 27, gender: 'F' }];
+            const wrapper = mount(
+                createTable({
+                    columns,
+                    data: sampleData,
+                    components,
+                    scroll: { x: 100, y: 100 },
+                })
+            );
+            expect(wrapper.render()).toMatchSnapshot();
+        });
+
+        describe('scroll content', () => {
+            it('with scroll', () => {
+                const wrapper = mount(
+                    createTable({
+                        columns: [
+                            { dataIndex: 'a' },
+                            { dataIndex: 'b', width: 903 },
+                        ],
+                        components: {
+                            body: () => <h1>Bamboo</h1>,
+                        },
+                        scroll: { x: 100, y: 100 },
+                    })
+                );
+                expect(wrapper.render()).toMatchSnapshot();
+            });
+
+            it('without scroll', () => {
+                mount(
+                    createTable({
+                        components: {
+                            body: () => <h1>Bamboo</h1>,
+                        },
+                    })
+                );
+            });
+        });
+    });
+
+    it('align column', () => {
+        const columns = [
+            { title: 'Name', dataIndex: 'name', key: 'name' },
+            { title: 'Age', dataIndex: 'age', key: 'age', align: 'center' },
+        ];
+        const wrapper = mount(createTable({ columns }));
+        expect(wrapper.find('th').at(0).props().style.textAlign).toBeFalsy();
+        expect(wrapper.find('th').at(1).props().style.textAlign).toEqual(
+            'center'
+        );
+        expect(
+            wrapper.find('tbody tr').first().find('td').at(0).props().style
+                .textAlign
+        ).toBeFalsy();
+        expect(
+            wrapper.find('tbody tr').first().find('td').at(1).props().style
+                .textAlign
+        ).toEqual('center');
+    });
+
+    it('align column should not override cell style', () => {
+        const columns = [
+            {
+                title: 'Age',
+                dataIndex: 'age',
+                key: 'age',
+                align: 'center',
+                onCell: () => ({ style: { color: 'red' } }),
+                onHeaderCell: () => ({ style: { color: 'green' } }),
+            },
+        ];
+        const wrapper = mount(createTable({ columns }));
+        expect(wrapper.find('th').first().props().style).toEqual({
+            color: 'green',
+            textAlign: 'center',
+        });
+        expect(wrapper.find('td').first().props().style).toEqual({
+            color: 'red',
+            textAlign: 'center',
+        });
+    });
+
+    describe('row events', () => {
+        let spy;
+
+        beforeAll(() => {
+            spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+        });
+
+        afterEach(() => {
+            spy.mockReset();
+        });
+
+        afterAll(() => {
+            spy.mockRestore();
+        });
+
+        it('fires row click event', () => {
+            const onClick = jest.fn();
+            const wrapper = mount(createTable({ onRow: () => ({ onClick }) }));
+            const tr = wrapper.find('tbody tr').first();
+
+            tr.simulate('click');
+            expect(onClick).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    target: tr.instance(),
+                })
+            );
+        });
+
+        it('fires double row click event', () => {
+            const onDoubleClick = jest.fn();
+            const wrapper = mount(
+                createTable({ onRow: () => ({ onDoubleClick }) })
+            );
+            const tr = wrapper.find('tbody tr').first();
+
+            tr.first().simulate('doubleClick');
+            expect(onDoubleClick).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    target: tr.instance(),
+                })
+            );
+        });
+
+        it('fires row contextmenu event', () => {
+            const onContextMenu = jest.fn();
+            const wrapper = mount(
+                createTable({ onRow: () => ({ onContextMenu }) })
+            );
+            const tr = wrapper.find('tbody tr').first();
+
+            tr.first().simulate('contextMenu');
+            expect(onContextMenu).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    target: tr.instance(),
+                })
+            );
+        });
+
+        it('fires onRowMouseEnter', () => {
+            const onMouseEnter = jest.fn();
+            const wrapper = mount(
+                createTable({
+                    onRow: () => ({ onMouseEnter }),
+                })
+            );
+
+            const tr = wrapper.find('.table-row').first();
+
+            tr.simulate('mouseEnter');
+            expect(onMouseEnter).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    target: tr.instance(),
+                })
+            );
+        });
+
+        it('fires onRowMouseLeave', () => {
+            const onMouseLeave = jest.fn();
+            const wrapper = mount(
+                createTable({
+                    onRow: () => ({ onMouseLeave }),
+                })
+            );
+
+            const tr = wrapper.find('.table-row').first();
+
+            tr.simulate('mouseLeave');
+            expect(onMouseLeave).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    target: tr.instance(),
+                })
+            );
+        });
+    });
+
+    it('columns without key', () => {
+        const wrapper = mount(
+            createTable({
+                columns: [{ dataIndex: null }],
+            })
+        );
+
+        expect(wrapper.find('tbody WrappedCell').first().key()).toBeTruthy();
+    });
+
+    it('syntactic sugar', () => {
+        const { Column, ColumnGroup } = OcTable;
+        expect(
+            mount(
+                <OcTable
+                    expandableConfig={{
+                        expandIcon: () => <div className="expand-icon" />,
+                    }}
+                >
+                    <ColumnGroup title="total">
+                        <Column title="Name" dataIndex="name" />
+                    </ColumnGroup>
+                    Invalidate Column
+                </OcTable>
+            ).render()
+        ).toMatchSnapshot();
+    });
+
+    describe('internal api', () => {
+        describe('transformColumns', () => {
+            it('basic', () => {
+                const wrapper = mount(
+                    createTable({
+                        transformColumns: (columns) => [
+                            { title: 'before' },
+                            ...columns,
+                            { title: 'after' },
+                        ],
+                    })
+                );
+
+                expect(wrapper.render()).toMatchSnapshot();
+            });
+
+            // Used to check if is expand column
+            // We'd better to move selection into table also
+            it('internal columnType', () => {
+                let existExpandColumn = false;
+
+                mount(
+                    createTable({
+                        expandableConfig: {
+                            expandedRowRender: () => null,
+                        },
+                        transformColumns: (columns) => {
+                            existExpandColumn = columns.some(
+                                (col) =>
+                                    col[INTERNAL_COL_DEFINE]?.columnType ===
+                                    'EXPAND_COLUMN'
+                            );
+                            return columns;
+                        },
+                    })
+                );
+
+                expect(existExpandColumn).toBeTruthy();
+            });
+        });
+    });
+
+    it('column render array', () => {
+        const wrapper = mount(
+            <OcTable
+                columns={[
+                    {
+                        dataIndex: 'test',
+                        render: () => [<span className="test" key="test" />],
+                    },
+                ]}
+                data={[{ key: 1 }]}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+            />
+        );
+        expect(wrapper.find('.test')).toHaveLength(1);
+    });
+
+    it('component body should pass `data-row-key`', () => {
+        const wrapper = mount(
+            <OcTable
+                columns={[{ dataIndex: 'test' }]}
+                components={{ body: { row: (props) => <tr {...props} /> } }}
+                data={[{ test: 'bamboo', key: 'light' }]}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+            />
+        );
+
+        expect(wrapper.find('tr').last().props()['data-row-key']).toEqual(
+            'light'
+        );
+    });
+
+    it('render with state change', () => {
+        class Test extends React.Component {
+            state = {
+                change: false,
+                columns: [
+                    {
+                        render: () => String(this.state.change),
+                    },
+                ],
+            };
+
+            render() {
+                return (
+                    <OcTable
+                        columns={this.state.columns}
+                        data={[{ key: 1 }]}
+                        expandableConfig={{
+                            expandIcon: () => <div className="expand-icon" />,
+                        }}
+                    />
+                );
+            }
+        }
+
+        const wrapper = mount(<Test />);
+        expect(wrapper.find('td').text()).toEqual('false');
+
+        wrapper.setState({ change: true });
+        expect(wrapper.find('td').text()).toEqual('true');
+    });
+
+    it('not crash with raw data', () => {
+        expect(() => {
+            mount(
+                createTable({
+                    data: [122, null, '2333', true, undefined],
+                })
+            );
+        }).not.toThrow();
+    });
+
+    describe('shouldCellUpdate', () => {
+        it('basic', () => {
+            const record = { key: 1 };
+            let shouldUpdate = false;
+            let renderTimes = 0;
+            let prev;
+            let next;
+
+            const Demo = ({ records }) => {
+                const [, forceUpdate] = React.useState({});
+
+                return (
+                    <>
+                        <OcTable
+                            data={records}
+                            expandableConfig={{
+                                expandIcon: () => (
+                                    <div className="expand-icon" />
+                                ),
+                            }}
+                            columns={[
+                                {
+                                    dataIndex: 'key',
+                                    shouldCellUpdate: (
+                                        nextRecord,
+                                        prevRecord
+                                    ) => {
+                                        next = nextRecord;
+                                        prev = prevRecord;
+                                        return shouldUpdate;
+                                    },
+                                    render() {
+                                        renderTimes += 1;
+                                        return null;
+                                    },
+                                },
+                            ]}
+                        />
+                        <button
+                            type="button"
+                            onClick={() => {
+                                forceUpdate({});
+                            }}
+                        />
+                    </>
+                );
+            };
+
+            const wrapper = mount(<Demo records={[record]} />);
+            renderTimes = 0;
+
+            wrapper.find('button').simulate('click');
+            expect(renderTimes).toEqual(0);
+
+            shouldUpdate = true;
+            wrapper.find('button').simulate('click');
+            expect(renderTimes).toEqual(1);
+
+            // Should update match prev & next
+            const newRecord = { ...record, next: true };
+            wrapper.setProps({ records: [newRecord] });
+            // wrapper.update();
+            expect(prev).toBe(record);
+            expect(next).toBe(newRecord);
+        });
+    });
+
+    it('render index in tree table', () => {
+        const tColumns = [
+            {
+                title: 'Key',
+                dataIndex: 'key',
+            },
+            {
+                title: 'XXX',
+                key: 'xxx',
+                render: (value, record, index) => index,
+            },
+        ];
+
+        const tData = [
+            { key: 'row0', children: [{ key: 'row0-0' }, { key: 'row0-1' }] },
+            { key: 'row1', children: [{ key: 'row1-0' }, { key: 'row1-1' }] },
+        ];
+        const wrapper = mount(
+            <OcTable
+                columns={tColumns}
+                expandableConfig={{
+                    defaultExpandAllRows: true,
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+                data={tData}
+            />
+        );
+
+        const trs = wrapper.find('BodyRow');
+
+        expect(trs.at(0).find('Cell').at(1).text()).toEqual('0');
+        expect(trs.at(1).find('Cell').at(1).text()).toEqual('0');
+        expect(trs.at(2).find('Cell').at(1).text()).toEqual('1');
+        expect(trs.at(3).find('Cell').at(1).text()).toEqual('1');
+        expect(trs.at(4).find('Cell').at(1).text()).toEqual('0');
+        expect(trs.at(5).find('Cell').at(1).text()).toEqual('1');
+    });
+
+    it('hover the tree table', () => {
+        const tColumns = [
+            {
+                title: 'Key',
+                dataIndex: 'key',
+            },
+        ];
+
+        const tData = [
+            { key: 'row0', children: [{ key: 'row0-0' }, { key: 'row0-1' }] },
+            { key: 'row1', children: [{ key: 'row1-0' }, { key: 'row1-1' }] },
+        ];
+        const wrapper = mount(
+            <OcTable
+                columns={tColumns}
+                expandableConfig={{
+                    defaultExpandAllRows: true,
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+                data={tData}
+            />
+        );
+
+        const trs = wrapper.find('.table-row');
+
+        trs.forEach((tr, index) => {
+            tr.find('.table-cell').at(0).simulate('mouseEnter');
+            const currentClassName = wrapper
+                .find('.table-row')
+                .at(index)
+                .find('.table-cell')
+                .at(0)
+                .getElement().props.className;
+
+            expect(currentClassName.includes('table-cell-row-hover')).toEqual(
+                true
+            );
+            expect(wrapper.find('.table-cell-row-hover')).toHaveLength(1);
+        });
+    });
+});
diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.test.js.snap b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.test.js.snap
new file mode 100644
index 000000000..9b63c9497
--- /dev/null
+++ b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.test.js.snap
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1559c1accdf534b66b92143f1494456b7e58e64d0ffece0752f1d11c788e0641
+size 8681167
diff --git a/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.test.js.snap b/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.test.js.snap
new file mode 100644
index 000000000..793ff61d7
--- /dev/null
+++ b/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.test.js.snap
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ea60e84e71d1f6faa572bbfef9ef6fc851abbb08214fac68a496942f0ba05de2
+size 248587044
diff --git a/src/components/Table/Internal/Tests/__snapshots__/Summary.test.tsx.snap b/src/components/Table/Internal/Tests/__snapshots__/Summary.test.tsx.snap
new file mode 100644
index 000000000..98b3e26ad
--- /dev/null
+++ b/src/components/Table/Internal/Tests/__snapshots__/Summary.test.tsx.snap
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e2f238111b7c687799c5ba323727242496658a2c37320f4cf7c75bf0be87e83e
+size 11664
diff --git a/src/components/Table/Internal/Tests/__snapshots__/Table.test.js.snap b/src/components/Table/Internal/Tests/__snapshots__/Table.test.js.snap
new file mode 100644
index 000000000..9feadea5d
--- /dev/null
+++ b/src/components/Table/Internal/Tests/__snapshots__/Table.test.js.snap
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b2778a2f6c526125df20d97d852f7494158c107417b203a9ae51c8160fdcff0d
+size 1105372
diff --git a/src/components/Table/Internal/Tests/utils/getScrollBarSize.ts b/src/components/Table/Internal/Tests/utils/getScrollBarSize.ts
new file mode 100644
index 000000000..bb12934b0
--- /dev/null
+++ b/src/components/Table/Internal/Tests/utils/getScrollBarSize.ts
@@ -0,0 +1,3 @@
+export default () => 15;
+
+export const getTargetScrollBarSize = () => ({ width: 15, height: 15 });
diff --git a/src/components/Table/Internal/Utilities/expandUtil.tsx b/src/components/Table/Internal/Utilities/expandUtil.tsx
new file mode 100644
index 000000000..7c1f3a58b
--- /dev/null
+++ b/src/components/Table/Internal/Utilities/expandUtil.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { mergeClasses } from '../../../../shared/utilities';
+import type { RenderExpandIconProps, Key, GetRowKey } from '../OcTable.types';
+
+import styles from '../octable.module.scss';
+
+export function renderExpandIcon<RecordType>({
+    record,
+    onExpand,
+    expanded,
+    expandable,
+}: RenderExpandIconProps<RecordType>) {
+    const expandClassName = styles.tableRowExpandIcon;
+
+    if (!expandable) {
+        return (
+            <span
+                className={mergeClasses([
+                    expandClassName,
+                    styles.tableRowSpaced,
+                ])}
+            />
+        );
+    }
+
+    const onClick: React.MouseEventHandler<HTMLElement> = (event) => {
+        onExpand(record, event);
+        event.stopPropagation();
+    };
+
+    return (
+        <span
+            className={mergeClasses([
+                expandClassName,
+                { [styles.tableRowExpanded]: expanded },
+                { [styles.tableRowCollapsed]: !expanded },
+            ])}
+            onClick={onClick}
+        />
+    );
+}
+
+export function findAllChildrenKeys<RecordType>(
+    data: readonly RecordType[],
+    getRowKey: GetRowKey<RecordType>,
+    childrenColumnName: string
+): Key[] {
+    const keys: Key[] = [];
+
+    function dig(list: readonly RecordType[]) {
+        (list || []).forEach((item, index) => {
+            keys.push(getRowKey(item, index));
+
+            dig((item as any)[childrenColumnName]);
+        });
+    }
+
+    dig(data);
+
+    return keys;
+}
diff --git a/src/components/Table/Internal/Utilities/fixUtil.ts b/src/components/Table/Internal/Utilities/fixUtil.ts
new file mode 100644
index 000000000..a1294e211
--- /dev/null
+++ b/src/components/Table/Internal/Utilities/fixUtil.ts
@@ -0,0 +1,69 @@
+import type { StickyOffsets, FixedType } from '../OcTable.types';
+
+export interface FixedInfo {
+    fixLeft: number | false;
+    fixRight: number | false;
+    lastFixLeft: boolean;
+    firstFixRight: boolean;
+
+    // For Rtl Direction
+    lastFixRight: boolean;
+    firstFixLeft: boolean;
+
+    isSticky: boolean;
+}
+
+export function getCellFixedInfo(
+    colStart: number,
+    colEnd: number,
+    columns: readonly { fixed?: FixedType }[],
+    stickyOffsets: StickyOffsets,
+    direction: string
+): FixedInfo {
+    const startColumn = columns[colStart] || {};
+    const endColumn = columns[colEnd] || {};
+
+    let fixLeft: number;
+    let fixRight: number;
+
+    if (startColumn.fixed === 'left') {
+        fixLeft = stickyOffsets.left[colStart];
+    } else if (endColumn.fixed === 'right') {
+        fixRight = stickyOffsets.right[colEnd];
+    }
+
+    let lastFixLeft: boolean = false;
+    let firstFixRight: boolean = false;
+
+    let lastFixRight: boolean = false;
+    let firstFixLeft: boolean = false;
+
+    const nextColumn = columns[colEnd + 1];
+    const prevColumn = columns[colStart - 1];
+
+    if (direction === 'rtl') {
+        if (fixLeft !== undefined) {
+            const prevFixLeft = prevColumn && prevColumn.fixed === 'left';
+            firstFixLeft = !prevFixLeft;
+        } else if (fixRight !== undefined) {
+            const nextFixRight = nextColumn && nextColumn.fixed === 'right';
+            lastFixRight = !nextFixRight;
+        }
+    } else if (fixLeft !== undefined) {
+        const nextFixLeft = nextColumn && nextColumn.fixed === 'left';
+        lastFixLeft = !nextFixLeft;
+    } else if (fixRight !== undefined) {
+        const prevFixRight = prevColumn && prevColumn.fixed === 'right';
+        firstFixRight = !prevFixRight;
+    }
+
+    return {
+        fixLeft,
+        fixRight,
+        lastFixLeft,
+        firstFixRight,
+        lastFixRight,
+        firstFixLeft,
+        isSticky: stickyOffsets.isSticky,
+    };
+}
diff --git a/src/components/Table/Internal/Utilities/valueUtil.tsx b/src/components/Table/Internal/Utilities/valueUtil.tsx
new file mode 100644
index 000000000..b4285e44c
--- /dev/null
+++ b/src/components/Table/Internal/Utilities/valueUtil.tsx
@@ -0,0 +1,92 @@
+import type { Key, DataIndex } from '../OcTable.types';
+
+const INTERNAL_KEY_PREFIX = 'OC_TABLE_KEY';
+
+function toArray<T>(arr: T | readonly T[]): T[] {
+    if (arr === undefined || arr === null) {
+        return [];
+    }
+    return (Array.isArray(arr) ? arr : [arr]) as T[];
+}
+
+export function getPathValue<ValueType, ObjectType extends object>(
+    record: ObjectType,
+    path: DataIndex
+): ValueType {
+    // Skip if path is empty
+    if (!path && typeof path !== 'number') {
+        return record as unknown as ValueType;
+    }
+
+    const pathList = toArray(path);
+
+    let current: ValueType | ObjectType = record;
+
+    for (let i = 0; i < pathList.length; i += 1) {
+        if (!current) {
+            return null;
+        }
+
+        const prop = pathList[i];
+        current = (current as any)[prop];
+    }
+
+    return current as ValueType;
+}
+
+interface GetColumnKeyColumn {
+    key?: Key;
+    dataIndex?: DataIndex;
+}
+
+export function getColumnsKey(columns: readonly GetColumnKeyColumn[]) {
+    const columnKeys: React.Key[] = [];
+    const keys: Record<React.Key, boolean> = {};
+
+    columns.forEach((column) => {
+        const { key, dataIndex } = column || {};
+
+        let mergedKey =
+            key || toArray(dataIndex).join('-') || INTERNAL_KEY_PREFIX;
+        while (keys[mergedKey]) {
+            mergedKey = `${mergedKey}_next`;
+        }
+        keys[mergedKey] = true;
+
+        columnKeys.push(mergedKey);
+    });
+
+    return columnKeys;
+}
+
+export function mergeObject<ReturnObject extends object>(
+    ...objects: Partial<ReturnObject>[]
+): ReturnObject {
+    const merged: Partial<ReturnObject> = {};
+
+    /* eslint-disable no-param-reassign */
+    function fillProps(obj: object, clone: object) {
+        if (clone) {
+            Object.keys(clone).forEach((key) => {
+                const value = (clone as any)[key];
+                if (value && typeof value === 'object') {
+                    (obj as any)[key] = (obj as any)[key] || {};
+                    fillProps((obj as any)[key], value);
+                } else {
+                    (obj as any)[key] = value;
+                }
+            });
+        }
+    }
+    /* eslint-enable */
+
+    objects.forEach((clone) => {
+        fillProps(merged, clone);
+    });
+
+    return merged as ReturnObject;
+}
+
+export function validateValue<T>(val: T) {
+    return val !== null && val !== undefined;
+}
diff --git a/src/components/Table/Internal/constant.ts b/src/components/Table/Internal/constant.ts
new file mode 100644
index 000000000..9ee29777c
--- /dev/null
+++ b/src/components/Table/Internal/constant.ts
@@ -0,0 +1,2 @@
+export const EXPAND_COLUMN = {} as const;
+export const INTERNAL_COL_DEFINE = 'OC_TABLE_INTERNAL_COL_DEFINE';
diff --git a/src/components/Table/Internal/index.ts b/src/components/Table/Internal/index.ts
new file mode 100644
index 000000000..1cc82e7ad
--- /dev/null
+++ b/src/components/Table/Internal/index.ts
@@ -0,0 +1,9 @@
+import OcTable from './OcTable';
+import { FooterComponents as Summary } from './Footer';
+import Column from './Column';
+import ColumnGroup from './ColumnGroup';
+import { INTERNAL_COL_DEFINE } from './constant';
+
+export { Summary, Column, ColumnGroup, INTERNAL_COL_DEFINE };
+
+export default OcTable;
diff --git a/src/components/Table/Internal/octable.module.scss b/src/components/Table/Internal/octable.module.scss
new file mode 100644
index 000000000..fd25b170f
--- /dev/null
+++ b/src/components/Table/Internal/octable.module.scss
@@ -0,0 +1,494 @@
+@mixin scrollBars() {
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+        background-color: transparent;
+        height: 16px;
+        width: 16px;
+    }
+
+    &::-webkit-scrollbar-corner {
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-track {
+        -webkit-box-shadow: none;
+        background-color: transparent;
+    }
+
+    @supports (overflow: overlay) {
+        overflow: overlay;
+
+        &:focus-within,
+        &:focus-visible,
+        &:hover,
+        &:hover:focus {
+            &::-webkit-scrollbar {
+                display: block;
+                height: 16px;
+                width: 16px;
+            }
+
+            &::-webkit-scrollbar-button {
+                display: none;
+            }
+
+            &::-webkit-scrollbar-corner {
+                background-color: transparent;
+            }
+
+            &::-webkit-scrollbar-track {
+                background-color: transparent;
+            }
+
+            &::-webkit-scrollbar-track-piece {
+                background-color: transparent;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                background-color: transparent;
+                border: 5px solid transparent;
+                border-radius: 24px;
+                box-shadow: 4px 0px 0px 4px rgba(105, 113, 127, 0.7) inset;
+            }
+        }
+    }
+
+    @supports not (overflow: overlay) {
+        overflow: auto;
+
+        &:focus-within,
+        &:focus-visible,
+        &:hover,
+        &:hover:focus {
+            -ms-overflow-style: none;
+            scrollbar-width: thin;
+
+            &::-webkit-scrollbar {
+                background-color: $table-background-color;
+                height: 16px;
+                width: 16px;
+            }
+
+            &::-webkit-scrollbar-corner {
+                background-color: $table-background-color;
+                border: 1px solid $table-background-color;
+                border-bottom-right-radius: $table-border-radius;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                background-color: transparent;
+                border: 5px solid transparent;
+                border-radius: 24px;
+                box-shadow: 4px 0px 0px 4px rgba(105, 113, 127, 0.7) inset;
+            }
+
+            &::-webkit-scrollbar-track {
+                -webkit-box-shadow: none;
+                background-color: $table-background-color;
+            }
+        }
+    }
+}
+
+.table {
+    position: relative;
+    box-sizing: border-box;
+    color: $table-foreground-color;
+    font-size: $table-font-size;
+    line-height: $table-line-height;
+
+    &-rtl {
+        direction: rtl;
+    }
+
+    table {
+        width: 100%;
+        border-spacing: 0px;
+        border-radius: $table-border-radius;
+    }
+
+    th,
+    td {
+        position: relative;
+        box-sizing: border-box;
+        padding: $table-cell-padding;
+        white-space: normal;
+        word-break: break-word;
+        border-top: 0;
+        border-left: 0;
+        transition: box-shadow 0.3s;
+
+        &.table-rtl {
+            border-right: 0;
+            border-left: $table-border;
+        }
+    }
+
+    &-cell {
+        background-color: $table-background-color;
+
+        &-fix-left,
+        &-fix-right {
+            z-index: 1;
+        }
+
+        &-fix-right:last-child:not(&-fix-sticky) {
+            border-right-color: transparent;
+        }
+
+        &.table-rtl {
+            &-fix-right:last-child {
+                border-right-color: $table-border-color;
+            }
+            &-fix-left:last-child {
+                border-left-color: transparent;
+            }
+        }
+
+        &-fix-left-first {
+            &.table-rtl {
+                box-shadow: 1px 0 0 $table-border-color;
+            }
+        }
+
+        &-fix-left-first:after,
+        &-fix-left-last:after {
+            position: absolute;
+            top: 0;
+            right: -1px;
+            bottom: -1px;
+            width: 20px;
+            transform: translateX(100%);
+            transition: box-shadow 0.3s;
+            content: '';
+            pointer-events: none;
+        }
+
+        &-fix-right-first,
+        &-fix-right-last {
+            box-shadow: -1px 0 0 $table-border-color;
+
+            &.table-rtl {
+                box-shadow: none;
+            }
+
+            &:after {
+                position: absolute;
+                top: 0;
+                bottom: -1px;
+                left: -1px;
+                width: 20px;
+                transform: translateX(-100%);
+                transition: box-shadow 0.3s;
+                content: '';
+                pointer-events: none;
+            }
+        }
+
+        &.table-cell-ellipsis {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+
+            div:first-of-type {
+                display: block;
+                overflow-x: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                word-break: keep-all;
+            }
+
+            &.table-cell-fix-left-first,
+            &.table-cell-fix-left-last,
+            &.table-cell-fix-right-first &.table-cell-fix-right-last {
+                overflow: visible;
+
+                .table-cell-content {
+                    display: block;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+        }
+
+        &:last-of-type {
+            border-right: none;
+        }
+
+        &-row-hover {
+            background-color: $table-background-alternate-color;
+
+            &:first-of-type {
+                &:before {
+                    border-left: 2px solid $table-border-active-color;
+                }
+            }
+
+            &:last-of-type {
+                &:before {
+                    border-right: 2px solid $table-border-active-color;
+                    width: 100%;
+                }
+            }
+
+            &:before {
+                border-bottom: 2px solid $table-border-active-color;
+                border-top: 2px solid $table-border-active-color;
+                content: '';
+                height: 100%;
+                left: 0;
+                pointer-events: none;
+                position: absolute;
+                top: 0;
+                width: calc(100% + 2px);
+                z-index: 2;
+            }
+        }
+    }
+
+    &-ping-left {
+        .table-cell-fix-left-first:after,
+        .table-cell-fix-left-last:after {
+            box-shadow: $table-fixed-left-box-shadow;
+        }
+    }
+
+    &-ping-right {
+        .table-cell-fix-right-first:after,
+        .table-cell-fix-right-last:after {
+            box-shadow: $table-fixed-right-box-shadow;
+        }
+    }
+
+    &-expand-icon-col {
+        width: 84px;
+    }
+
+    &-row-expand-icon-cell {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+    }
+
+    thead {
+        td,
+        th {
+            text-align: left;
+        }
+
+        tr:first-of-type {
+            th {
+                font-size: $table-header-font-size;
+            }
+
+            th:first-of-type {
+                border-top-left-radius: $table-border-radius;
+            }
+
+            th:last-of-type {
+                border-top-right-radius: $table-border-radius;
+                border-right: none;
+            }
+
+            th.table-cell-scrollbar {
+                background-color: $table-background-color;
+                border-right: 1px solid $table-background-color;
+                border-left: 1px solid $table-background-color;
+                border-top-right-radius: $table-border-radius;
+
+                &:after {
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    left: -1px;
+                    width: 1px;
+                    content: '';
+
+                    &.table-rtl {
+                        right: -1px;
+                        left: auto;
+                    }
+                }
+            }
+        }
+    }
+
+    &-header {
+        border-top-left-radius: $table-border-radius;
+        border-top-right-radius: $table-border-radius;
+        color: $table-header-foreground-color;
+    }
+
+    &-placeholder {
+        &:nth-child(odd) td {
+            background-color: $table-background-color !important;
+        }
+
+        text-align: center;
+    }
+
+    tbody {
+        tr {
+            &:last-of-type {
+                td {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+
+    &-alternate {
+        tbody {
+            tr {
+                &:nth-child(odd) {
+                    td {
+                        background-color: $table-background-alternate-color;
+                    }
+                }
+            }
+        }
+    }
+
+    &-container {
+        color: $table-foreground-color;
+    }
+
+    &-content {
+        @include scrollBars();
+
+        color: $table-foreground-color;
+    }
+
+    &-body {
+        @include scrollBars();
+
+        border-bottom-left-radius: $table-border-radius;
+        border-bottom-right-radius: $table-border-radius;
+    }
+
+    &-fixed-column &-body:after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+        content: '';
+    }
+
+    &-expanded-row {
+        .table-cell {
+            box-shadow: inset 0 15px 17px -7px $table-background-alternate-color;
+        }
+
+        &-fixed {
+            box-sizing: border-box;
+            margin: $table-cell-margin;
+            margin-right: -$table-padding-horizontal - 2;
+            padding: $table-cell-padding;
+
+            &:after {
+                position: absolute;
+                top: 0;
+                right: 1px;
+                bottom: 0;
+                width: 0;
+                content: '';
+            }
+        }
+    }
+
+    &-row-expand-icon {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        color: #aaa;
+        line-height: 16px;
+        text-align: center;
+        vertical-align: middle;
+        border: 1px solid currentColor;
+        cursor: pointer;
+
+        &.table-row-expanded:after {
+            content: '-';
+        }
+
+        &.table-row-collapsed:after {
+            content: '+';
+        }
+
+        &.table-row-spaced {
+            visibility: hidden;
+        }
+    }
+
+    &-title {
+        background: $table-header-background-color;
+        color: $table-header-foreground-color;
+        font-size: $table-header-font-size;
+        line-height: $table-header-line-height;
+        padding: $table-cell-padding;
+        border-bottom: $table-border;
+        border-top-left-radius: $table-border-radius;
+        border-top-right-radius: $table-border-radius;
+    }
+
+    &-footer {
+        background: $table-footer-background-color;
+        color: $table-footer-foreground-color;
+        font-size: $table-footer-font-size;
+        line-height: $table-footer-line-height;
+        padding: $table-cell-padding;
+        border-top: $table-border;
+        border-bottom-left-radius: $table-border-radius;
+        border-bottom-right-radius: $table-border-radius;
+    }
+
+    tfoot {
+        td {
+            background-color: $table-background-color;
+        }
+    }
+
+    &-summary {
+        box-shadow: 0 -1px $table-border-color;
+        position: relative;
+        z-index: 2;
+    }
+
+    &-sticky {
+        &-holder {
+            position: sticky;
+            z-index: 3;
+        }
+        &-scroll {
+            position: sticky;
+            bottom: 0;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            border-top: $table-border;
+            opacity: 0.6;
+            transition: transform 0.1s ease-in 0s;
+            &:hover {
+                transform: scaleY(1.2);
+                transform-origin: center bottom;
+            }
+            &-bar {
+                height: 8px;
+                background-color: #bbb;
+                border-radius: 4px;
+                &:hover {
+                    background-color: #999;
+                }
+                &-active {
+                    background-color: #999;
+                }
+            }
+        }
+    }
+}
diff --git a/src/components/Table/Internal/stickyScrollBar.tsx b/src/components/Table/Internal/stickyScrollBar.tsx
new file mode 100644
index 000000000..cc003d6f1
--- /dev/null
+++ b/src/components/Table/Internal/stickyScrollBar.tsx
@@ -0,0 +1,198 @@
+import React, {
+    forwardRef,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from 'react';
+import { StickyScrollBarProps } from './OcTable.types';
+import {
+    getOffset,
+    getScrollBarSize,
+    mergeClasses,
+} from '../../../shared/utilities';
+import { useLayoutState } from './Hooks/useFrame';
+
+import styles from './octable.module.scss';
+
+const StickyScrollBar: React.ForwardRefRenderFunction<
+    unknown,
+    StickyScrollBarProps
+> = ({ scrollBodyRef, onScroll, offsetScroll, container }, ref) => {
+    const bodyScrollWidth = scrollBodyRef.current?.scrollWidth || 0;
+    const bodyWidth = scrollBodyRef.current?.clientWidth || 0;
+    const scrollBarWidth =
+        bodyScrollWidth && bodyWidth * (bodyWidth / bodyScrollWidth);
+
+    const scrollBarRef = useRef<HTMLDivElement>();
+    const [scrollState, setScrollState] = useLayoutState<{
+        scrollLeft: number;
+        isHiddenScrollBar: boolean;
+    }>({
+        scrollLeft: 0,
+        isHiddenScrollBar: false,
+    });
+    const refState = useRef<{
+        delta: number;
+        x: number;
+    }>({
+        delta: 0,
+        x: 0,
+    });
+    const [isActive, setActive] = useState(false);
+
+    const onMouseUp = (_event: MouseEvent): void => {
+        setActive(false);
+    };
+
+    const onMouseDown: React.MouseEventHandler<HTMLDivElement> = (_event) => {
+        _event.persist();
+        refState.current.delta = _event.pageX - scrollState.scrollLeft;
+        refState.current.x = 0;
+        setActive(true);
+        _event.preventDefault();
+    };
+
+    const onMouseMove = (_event: MouseEvent): void => {
+        const { buttons } = _event || (window?.event as any);
+        if (!isActive || buttons === 0) {
+            // If out body mouse up, we can set isActive false when mouse move
+            if (isActive) {
+                setActive(false);
+            }
+            return;
+        }
+        let left: number =
+            refState.current.x +
+            _event.pageX -
+            refState.current.x -
+            refState.current.delta;
+
+        if (left <= 0) {
+            left = 0;
+        }
+
+        if (left + scrollBarWidth >= bodyWidth) {
+            left = bodyWidth - scrollBarWidth;
+        }
+
+        onScroll({
+            scrollLeft: (left / bodyWidth) * (bodyScrollWidth + 2),
+        });
+
+        refState.current.x = _event.pageX;
+    };
+
+    const onContainerScroll = () => {
+        if (!scrollBodyRef.current) {
+            return;
+        }
+        const tableOffsetTop = getOffset(scrollBodyRef.current).top;
+        const tableBottomOffset =
+            tableOffsetTop + scrollBodyRef.current.offsetHeight;
+        const currentClientOffset =
+            container === window
+                ? document.documentElement.scrollTop + window.innerHeight
+                : getOffset(container as HTMLElement).top +
+                  (container as HTMLElement).clientHeight;
+
+        if (
+            tableBottomOffset - getScrollBarSize() <= currentClientOffset ||
+            tableOffsetTop >= currentClientOffset - offsetScroll
+        ) {
+            setScrollState((state) => ({
+                ...state,
+                isHiddenScrollBar: true,
+            }));
+        } else {
+            setScrollState((state) => ({
+                ...state,
+                isHiddenScrollBar: false,
+            }));
+        }
+    };
+
+    const setScrollLeft = (left: number) => {
+        setScrollState((state) => {
+            return {
+                ...state,
+                scrollLeft: (left / bodyScrollWidth) * bodyWidth || 0,
+            };
+        });
+    };
+
+    useImperativeHandle(ref, () => ({
+        setScrollLeft,
+    }));
+
+    useEffect(() => {
+        document?.body.addEventListener('mouseup', onMouseUp);
+        document?.body.addEventListener('mousemove', onMouseMove);
+        onContainerScroll();
+        return () => {
+            document?.body.removeEventListener('mouseup', onMouseUp);
+            document?.body.removeEventListener('mousemove', onMouseMove);
+        };
+    }, [scrollBarWidth, isActive]);
+
+    useEffect(() => {
+        container?.addEventListener('scroll', onContainerScroll);
+        window?.addEventListener('resize', onContainerScroll);
+
+        return () => {
+            container?.removeEventListener('scroll', onContainerScroll);
+            window?.removeEventListener('resize', onContainerScroll);
+        };
+    }, [container]);
+
+    useEffect(() => {
+        if (!scrollState.isHiddenScrollBar) {
+            setScrollState((state) => {
+                const bodyNode = scrollBodyRef.current;
+                if (!bodyNode) {
+                    return state;
+                }
+                return {
+                    ...state,
+                    scrollLeft:
+                        (bodyNode.scrollLeft / bodyNode.scrollWidth) *
+                        bodyNode.clientWidth,
+                };
+            });
+        }
+    }, [scrollState.isHiddenScrollBar]);
+
+    if (
+        bodyScrollWidth <= bodyWidth ||
+        !scrollBarWidth ||
+        scrollState.isHiddenScrollBar
+    ) {
+        return null;
+    }
+
+    return (
+        <div
+            style={{
+                height: getScrollBarSize(),
+                width: bodyWidth,
+                bottom: offsetScroll,
+            }}
+            className={styles.tableStickyScroll}
+        >
+            <div
+                onMouseDown={onMouseDown}
+                ref={scrollBarRef}
+                className={mergeClasses([
+                    styles.tableStickyScrollBar,
+                    { [styles.tableStickyScrollBarActive]: isActive },
+                ])}
+                style={{
+                    width: `${scrollBarWidth}px`,
+                    transform: `translate3d(${scrollState.scrollLeft}px, 0, 0)`,
+                }}
+            />
+        </div>
+    );
+};
+
+export default forwardRef(StickyScrollBar);
diff --git a/src/components/Table/Styles/bordered.scss b/src/components/Table/Styles/bordered.scss
new file mode 100644
index 000000000..5282f3de0
--- /dev/null
+++ b/src/components/Table/Styles/bordered.scss
@@ -0,0 +1,550 @@
+@import './size';
+@import './mixins';
+
+.table-wrapper {
+    .table {
+        &-bordered {
+            @include table-border();
+
+            .table-title {
+                border: $table-border;
+                border-bottom: 0;
+            }
+
+            table {
+                border-collapse: separate;
+                border-spacing: 0;
+
+                thead tr th,
+                tbody tr td,
+                tfoot tr th,
+                tfoot tr td {
+                    border-right: $table-border-width $table-border-style
+                        $table-border-color;
+
+                    &:last-of-type {
+                        border-right: none;
+                    }
+                }
+
+                thead {
+                    tr th {
+                        border-bottom: $table-border;
+                    }
+
+                    tr th {
+                        &:before {
+                            background-color: transparent !important;
+                        }
+                    }
+                }
+
+                // Fixed right should provide additional border
+                thead tr,
+                tbody tr,
+                tfoot tr {
+                    .table-cell-fix-right-first:after {
+                        border-right: $table-border-style;
+                    }
+                }
+
+                tbody {
+                    tr:not(:last-of-type) td {
+                        border-bottom: $table-border;
+                    }
+                }
+            }
+
+            table tbody tr td {
+                .table-expanded-row-fixed {
+                    margin: -$table-padding-vertical
+                        (-$table-padding-horizontal - 1);
+
+                    &:after {
+                        position: absolute;
+                        top: 0;
+                        right: 1px;
+                        bottom: 0;
+                        border-right: $table-border;
+                        content: '';
+                    }
+                }
+            }
+
+            &.table-scroll-horizontal {
+                .table-container .table-body {
+                    table tbody {
+                        tr.table-expanded-row,
+                        tr.table-placeholder {
+                            td {
+                                border-right: 0;
+                            }
+                        }
+                    }
+                }
+            }
+
+            &.table-middle {
+                .table-container {
+                    .table-content,
+                    .table-body {
+                        table tbody tr td {
+                            .table-expanded-row-fixed {
+                                margin: -$table-padding-vertical-md
+                                    (-$table-padding-horizontal-md - 1);
+                            }
+                        }
+                    }
+                }
+            }
+
+            &.table-small {
+                .table-container {
+                    .table-content,
+                    .table-body {
+                        table tbody tr td {
+                            .table-expanded-row-fixed {
+                                margin: -$table-padding-vertical-sm
+                                    (-$table-padding-horizontal-sm - 1);
+                            }
+                        }
+                    }
+                }
+            }
+
+            .table-footer {
+                border: $table-border;
+                border-top: 0;
+            }
+
+            .table-cell {
+                .table-container:first-child {
+                    border-top: 0;
+                }
+
+                &-scrollbar:not([rowspan]) {
+                    box-shadow: 0 1px 0 1px $table-header-background-color;
+                }
+            }
+        }
+
+        &-cell-bordered {
+            .table-title {
+                border: $table-border;
+                border-bottom: 0;
+            }
+
+            table {
+                border-collapse: separate;
+                border-spacing: 0;
+
+                thead tr th,
+                tfoot tr th {
+                    border-left: none;
+                    border-right: none;
+                }
+
+                tbody tr td,
+                tfoot tr td {
+                    &:first-of-type {
+                        border-left: none;
+                    }
+
+                    border-right: $table-border-width $table-border-style
+                        $table-border-color;
+
+                    &:last-of-type {
+                        border-right: none;
+                    }
+                }
+
+                thead {
+                    tr th {
+                        border-bottom: $table-border;
+                    }
+
+                    tr th {
+                        &:before {
+                            background-color: transparent !important;
+                        }
+                    }
+                }
+
+                tbody tr,
+                tfoot tr {
+                    .table-cell-fix-right-first:after {
+                        border-right: $table-border-style;
+                    }
+                }
+
+                tbody {
+                    tr:not(:last-of-type) td {
+                        border-bottom: $table-border;
+                    }
+                }
+            }
+
+            table tbody tr td {
+                .table-expanded-row-fixed {
+                    margin: -$table-padding-vertical
+                        (-$table-padding-horizontal - 1);
+
+                    &:after {
+                        position: absolute;
+                        top: 0;
+                        right: 1px;
+                        bottom: 0;
+                        border-right: $table-border;
+                        content: '';
+                    }
+                }
+            }
+
+            &.table-middle {
+                .table-container {
+                    .table-content,
+                    .table-body {
+                        table tbody tr td {
+                            .table-expanded-row-fixed {
+                                margin: -$table-padding-vertical-md
+                                    (-$table-padding-horizontal-md - 1);
+                            }
+                        }
+                    }
+                }
+            }
+
+            &.table-small {
+                .table-container {
+                    .table-content,
+                    .table-body {
+                        table tbody tr td {
+                            .table-expanded-row-fixed {
+                                margin: -$table-padding-vertical-sm
+                                    (-$table-padding-horizontal-sm - 1);
+                            }
+                        }
+                    }
+                }
+            }
+
+            .table-footer {
+                border: $table-border;
+                border-top: 0;
+            }
+
+            .table-cell {
+                .table-container:first-child {
+                    border-top: 0;
+                }
+
+                &-scrollbar:not([rowspan]) {
+                    box-shadow: 0 1px 0 1px $table-header-background-color;
+                }
+            }
+        }
+
+        &-header-bordered {
+            .table-title {
+                border: $table-border;
+                border-bottom: 0;
+            }
+
+            table {
+                border-collapse: separate;
+                border-spacing: 0;
+
+                thead tr th,
+                tfoot tr th {
+                    &:first-of-type {
+                        border-left: none;
+                    }
+
+                    border-right: $table-border-width $table-border-style
+                        $table-border-color;
+
+                    &:last-of-type {
+                        border-right: none;
+                    }
+                }
+
+                tbody tr td,
+                tfoot tr td {
+                    border-left: none;
+                    border-right: none;
+                }
+
+                thead {
+                    tr th {
+                        border-bottom: $table-border;
+                    }
+
+                    tr th {
+                        &:before {
+                            background-color: transparent !important;
+                        }
+                    }
+                }
+
+                thead tr,
+                tbody tr,
+                tfoot tr {
+                    .table-cell-fix-right-first:after {
+                        border-right: $table-border-style;
+                    }
+                }
+
+                tbody {
+                    tr td {
+                        border-bottom: none;
+                    }
+                }
+            }
+
+            table tbody tr td {
+                .table-expanded-row-fixed {
+                    margin: -$table-padding-vertical
+                        (-$table-padding-horizontal - 1);
+
+                    &:after {
+                        position: absolute;
+                        top: 0;
+                        right: 1px;
+                        bottom: 0;
+                        border-right: $table-border;
+                        content: '';
+                    }
+                }
+            }
+
+            &.table-middle {
+                .table-container {
+                    .table-content,
+                    .table-body {
+                        table tbody tr td {
+                            .table-expanded-row-fixed {
+                                margin: -$table-padding-vertical-md
+                                    (-$table-padding-horizontal-md - 1);
+                            }
+                        }
+                    }
+                }
+            }
+
+            &.table-small {
+                .table-container {
+                    .table-content,
+                    .table-body {
+                        table tbody tr td {
+                            .table-expanded-row-fixed {
+                                margin: -$table-padding-vertical-sm
+                                    (-$table-padding-horizontal-sm - 1);
+                            }
+                        }
+                    }
+                }
+            }
+
+            .table-footer {
+                border: $table-border;
+            }
+
+            .table-cell {
+                .table-container:first-child {
+                    border-top: 0;
+                }
+
+                &-scrollbar:not([rowspan]) {
+                    box-shadow: 0 1px 0 1px $table-header-background-color;
+                }
+            }
+        }
+
+        &-inner-bordered {
+            .table-title {
+                border: $table-border;
+                border-bottom: 0;
+            }
+
+            table {
+                border-collapse: separate;
+                border-spacing: 0;
+
+                thead tr th,
+                tbody tr td,
+                tfoot tr th,
+                tfoot tr td {
+                    &:first-of-type {
+                        border-left: none;
+                    }
+
+                    border-right: $table-border-width $table-border-style
+                        $table-border-color;
+
+                    &:last-of-type {
+                        border-right: none;
+                    }
+                }
+                thead {
+                    tr th {
+                        border-bottom: $table-border;
+                    }
+
+                    tr th {
+                        &:before {
+                            background-color: transparent !important;
+                        }
+                    }
+                }
+
+                thead tr,
+                tbody tr,
+                tfoot tr {
+                    .table-cell-fix-right-first:after {
+                        border-right: $table-border-style;
+                    }
+                }
+
+                tbody {
+                    tr:not(:last-of-type) td {
+                        border-bottom: $table-border;
+                    }
+                }
+            }
+
+            table tbody tr td {
+                .table-expanded-row-fixed {
+                    margin: -$table-padding-vertical
+                        (-$table-padding-horizontal - 1);
+
+                    &:after {
+                        position: absolute;
+                        top: 0;
+                        right: 1px;
+                        bottom: 0;
+                        border-right: $table-border;
+                        content: '';
+                    }
+                }
+            }
+
+            &.table-middle {
+                .table-container {
+                    .table-content,
+                    .table-body {
+                        table tbody tr td {
+                            .table-expanded-row-fixed {
+                                margin: -$table-padding-vertical-md
+                                    (-$table-padding-horizontal-md - 1);
+                            }
+                        }
+                    }
+                }
+            }
+
+            &.table-small {
+                .table-container {
+                    .table-content,
+                    .table-body {
+                        table tbody tr td {
+                            .table-expanded-row-fixed {
+                                margin: -$table-padding-vertical-sm
+                                    (-$table-padding-horizontal-sm - 1);
+                            }
+                        }
+                    }
+                }
+            }
+
+            .table-footer {
+                border: $table-border;
+                border-top: 0;
+            }
+
+            .table-cell {
+                .table-container:first-child {
+                    border-top: 0;
+                }
+
+                &-scrollbar:not([rowspan]) {
+                    box-shadow: 0 1px 0 1px $table-header-background-color;
+                }
+            }
+        }
+
+        &-outer-bordered {
+            @include table-border();
+        }
+
+        &-row-bordered {
+            .table-title {
+                border-bottom: $table-border;
+            }
+
+            table {
+                border-collapse: separate;
+                border-spacing: 0;
+
+                thead {
+                    tr th {
+                        border-bottom: $table-border;
+                    }
+
+                    tr th {
+                        &:before {
+                            background-color: transparent !important;
+                        }
+                    }
+                }
+
+                tbody {
+                    tr:not(:last-of-type) td {
+                        border-bottom: $table-border;
+                    }
+                }
+            }
+
+            &.table-middle {
+                .table-container {
+                    .table-content,
+                    .table-body {
+                        table tbody tr td {
+                            .table-expanded-row-fixed {
+                                margin: -$table-padding-vertical-md
+                                    (-$table-padding-horizontal-md - 1);
+                            }
+                        }
+                    }
+                }
+            }
+
+            &.table-small {
+                .table-container {
+                    .table-content,
+                    .table-body {
+                        table tbody tr td {
+                            .table-expanded-row-fixed {
+                                margin: -$table-padding-vertical-sm
+                                    (-$table-padding-horizontal-sm - 1);
+                            }
+                        }
+                    }
+                }
+            }
+
+            .table-footer {
+                border-top: $table-border;
+            }
+
+            .table-cell {
+                .table-container:first-child {
+                    border-top: 0;
+                }
+
+                &-scrollbar:not([rowspan]) {
+                    box-shadow: 0 1px 0 1px $table-header-background-color;
+                }
+            }
+        }
+    }
+}
diff --git a/src/components/Table/Styles/mixins.scss b/src/components/Table/Styles/mixins.scss
new file mode 100644
index 000000000..0da8823d7
--- /dev/null
+++ b/src/components/Table/Styles/mixins.scss
@@ -0,0 +1,51 @@
+$border-width: 1px;
+$border-color: var(--grey-color-20);
+$border: $border-width solid $border-color;
+
+@mixin clearfix() {
+    &:before {
+        display: table;
+        content: '';
+    }
+
+    &:after {
+        display: table;
+        clear: both;
+        content: '';
+    }
+}
+
+@mixin reset-component() {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: var(--text-primary-color);
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5715;
+    list-style: none;
+    font-feature-settings: 'tnum';
+}
+
+@mixin operation-unit() {
+    color: var(--primary-color);
+    text-decoration: none;
+    outline: none;
+    cursor: pointer;
+    transition: color 0.3s;
+
+    &:focus,
+    &:hover {
+        color: var(--primary-color-80);
+    }
+
+    &:active {
+        color: var(--primary-color-80);
+    }
+}
+
+@mixin table-border() {
+    border: $table-border;
+    border-radius: $table-border-radius;
+    box-shadow: $table-box-shadow;
+}
diff --git a/src/components/Table/Styles/rtl.scss b/src/components/Table/Styles/rtl.scss
new file mode 100644
index 000000000..1559eac0e
--- /dev/null
+++ b/src/components/Table/Styles/rtl.scss
@@ -0,0 +1,149 @@
+.table-wrapper {
+    &-rtl {
+        direction: rtl;
+    }
+
+    .table {
+        &-rtl {
+            direction: rtl;
+        }
+
+        table {
+            .table-wrapper-rtl & {
+                text-align: right;
+            }
+        }
+
+        &-thead {
+            > tr {
+                > th {
+                    &[colspan]:not([colspan='1']) {
+                        .table-wrapper-rtl & {
+                            text-align: center;
+                        }
+                    }
+
+                    &:not(:last-child):not(.table-selection-column):not(.table-row-expand-icon-cell):not([colspan])::before {
+                        .table-wrapper-rtl & {
+                            right: auto;
+                            left: 0;
+                        }
+                    }
+
+                    .table-wrapper-rtl & {
+                        text-align: right;
+                    }
+                }
+            }
+        }
+
+        &-tbody {
+            > tr {
+                .table-wrapper:only-child {
+                    .table.table-rtl {
+                        margin: -$table-padding-vertical
+                            ($table-padding-horizontal + ceil(14 * 1.4)) -$table-padding-vertical -$table-padding-horizontal;
+                    }
+                }
+            }
+        }
+
+        &-pagination {
+            &-left {
+                .table-wrapper.table-wrapper-rtl & {
+                    justify-content: flex-end;
+                }
+            }
+
+            &-right {
+                .table-wrapper.table-wrapper-rtl & {
+                    justify-content: flex-start;
+                }
+            }
+        }
+
+        &-column-sorter {
+            .table-wrapper-rtl & {
+                margin-right: 4px;
+                margin-left: 0;
+            }
+        }
+
+        &-filter-column-title {
+            .table-wrapper-rtl & {
+                padding: $table-padding-vertical $table-padding-horizontal
+                    $table-padding-vertical 2.3em;
+            }
+        }
+
+        &-thead tr th.table-column-has-sorters {
+            .table-filter-column-title {
+                .table-rtl & {
+                    padding: 0 0 0 2.3em;
+                }
+            }
+        }
+
+        &-filter-trigger {
+            .table-wrapper-rtl & {
+                margin: -4px 4px -4px (-$table-padding-horizontal / 2);
+            }
+        }
+
+        &-filter-dropdown {
+            &,
+            &-submenu {
+                .table-checkbox-wrapper + span {
+                    .table-dropdown-rtl,
+                    .table-dropdown-menu-submenu-rtl {
+                        padding-right: 8px;
+                        padding-left: 0;
+                    }
+                }
+            }
+        }
+
+        &-selection {
+            .table-wrapper-rtl & {
+                text-align: center;
+            }
+        }
+
+        &-row-indent {
+            .table-wrapper-rtl & {
+                float: right;
+            }
+        }
+
+        &-row-expand-icon {
+            .table-wrapper-rtl & {
+                float: right;
+            }
+
+            .table-row-indent + & {
+                .table-wrapper-rtl & {
+                    margin-right: 0;
+                    margin-left: $space-xs;
+                }
+            }
+
+            &:after {
+                .table-wrapper-rtl & {
+                    transform: rotate(-90deg);
+                }
+            }
+
+            &-collapsed:before {
+                .table-wrapper-rtl & {
+                    transform: rotate(180deg);
+                }
+            }
+
+            &-collapsed:after {
+                .table-wrapper-rtl & {
+                    transform: rotate(0deg);
+                }
+            }
+        }
+    }
+}
diff --git a/src/components/Table/Styles/size.scss b/src/components/Table/Styles/size.scss
new file mode 100644
index 000000000..60f166680
--- /dev/null
+++ b/src/components/Table/Styles/size.scss
@@ -0,0 +1,113 @@
+.table-wrapper {
+    .table {
+        font-size: $table-font-size;
+
+        thead tr th,
+        tbody tr td,
+        tfoot tr th,
+        tfoot tr td {
+            padding: $table-padding-vertical $table-padding-horizontal;
+        }
+
+        &-title {
+            padding: $table-padding-vertical $table-padding-horizontal;
+        }
+
+        &-filter-trigger {
+            margin-right: -($table-padding-horizontal / 2);
+        }
+
+        &-expanded-row-fixed {
+            margin: -$table-padding-vertical -$table-padding-horizontal;
+        }
+
+        &-tbody {
+            .table-wrapper:only-child {
+                .table {
+                    margin: -$table-padding-vertical -$table-padding-horizontal -$table-padding-vertical
+                        ($table-padding-horizontal + ceil((14 * 1.4)));
+                }
+            }
+        }
+
+        &-selection-column {
+            padding-inline-start: 0;
+        }
+
+        &-medium {
+            font-size: $table-font-size-md;
+
+            thead tr th,
+            tbody tr td,
+            tfoot tr th,
+            tfoot tr td {
+                padding: $table-padding-vertical-md $table-padding-horizontal-md;
+            }
+
+            .table-title {
+                padding: $table-padding-vertical-md $table-padding-horizontal-md;
+            }
+
+            .table-filter-trigger {
+                margin-right: -($table-padding-horizontal-md / 2);
+            }
+
+            .table-expanded-row-fixed {
+                margin: -$table-padding-vertical-md -$table-padding-horizontal-md;
+            }
+
+            .table-tbody {
+                .table-wrapper:only-child {
+                    .table {
+                        margin: -$table-padding-vertical-md -$table-padding-horizontal-md -$table-padding-vertical-md
+                            ($table-padding-horizontal-md + ceil((14 * 1.4)));
+                    }
+                }
+            }
+
+            .table-selection-column {
+                padding-inline-start: ($table-padding-horizontal-md / 4);
+            }
+        }
+
+        &-small {
+            font-size: $table-font-size-sm;
+
+            thead tr th,
+            tbody tr td,
+            tfoot tr th,
+            tfoot tr td {
+                padding: $table-padding-vertical-sm $table-padding-horizontal-sm;
+            }
+
+            .table-title {
+                padding: $table-padding-vertical-sm $table-padding-horizontal-sm;
+            }
+
+            .table-footer {
+                padding: $table-padding-vertical-sm $table-padding-horizontal-sm;
+            }
+
+            .table-filter-trigger {
+                margin-right: -($table-padding-horizontal-sm / 2);
+            }
+
+            .table-expanded-row-fixed {
+                margin: -$table-padding-vertical-sm -$table-padding-horizontal-sm;
+            }
+
+            .table-tbody {
+                .table-wrapper:only-child {
+                    .table {
+                        margin: -$table-padding-vertical-sm -$table-padding-horizontal-sm -$table-padding-vertical-sm
+                            ($table-padding-horizontal-sm + ceil((14 * 1.4)));
+                    }
+                }
+            }
+
+            .table-selection-column {
+                padding-inline-start: ($table-padding-horizontal-sm / 4);
+            }
+        }
+    }
+}
diff --git a/src/components/Table/Styles/table.module.scss b/src/components/Table/Styles/table.module.scss
new file mode 100644
index 000000000..fdb617490
--- /dev/null
+++ b/src/components/Table/Styles/table.module.scss
@@ -0,0 +1,814 @@
+@import './mixins';
+
+.table-wrapper {
+    --table-background-color: var(--background-color);
+    --table-foreground-color: var(--text-primary-color);
+    --table-background-alternate-color: var(--grey-color-10);
+    --table-border-color: var(--grey-color-20);
+    --table-border-active-color: var(--primary-color);
+    --table-header-background-color: var(--background-color);
+    --table-header-foreground-color: var(--text-primary-color);
+    --table-header-icon-color: var(--primary-color);
+    --table-header-icon-hover-color: var(--primary-color-80);
+    --table-header-cell-split-color: var(--grey-color-20);
+    --table-body-sort-background-color: var(--background-color);
+    --table-header-sort-background-color: var(--background-color);
+    --table-header-sort-active-background-color: var(--grey-color-10);
+    --table-header-filter-background-color: var(--background-color);
+    --table-header-filter-active-background-color: var(--grey-color-10);
+    --table-header-filter-dropdown-background-color: var(--background-color);
+    --table-header-filter-buttons-background-color: var(--background-color);
+    --table-expand-icon-background-color: var(--background-color);
+    --table-row-hover-background-color: var(--grey-color-10);
+    --table-row-selected-background-color: var(--grey-color-10);
+    --table-row-selected-hover-background-color: var(--grey-color-10);
+    --table-row-selected-foregroud-color: var(--text-primary-color);
+    --table-row-expanded-background-color: var(--grey-color-10);
+    --table-body-selected-sort-background-color: var(--grey-color-10);
+    --table-footer-background-color: var(--background-color);
+    --table-footer-foreground-color: var(--text-primary-color);
+
+    --table-border-radius: 8px;
+    --table-border-style: solid;
+    --table-border-width: 1px;
+    --table-padding-vertical: 16px;
+    --table-padding-horizontal: 16px;
+    --table-padding-vertical-md: 12px;
+    --table-padding-horizontal-md: 8px;
+    --table-padding-vertical-sm: 8px;
+    --table-padding-horizontal-sm: 8px;
+    --table-box-shadow: 0 1px 2px rgba(15, 20, 31, 0.08),
+        0 2px 8px rgba(15, 20, 31, 0.08);
+    --table-fixed-left-box-shadow: inset 32px 0 8px -32px rgba(15, 20, 31, 0.08);
+    --table-fixed-right-box-shadow: inset -32px 0 8px -32px
+        rgba(15, 20, 31, 0.08);
+    --table-header-font-size: 16px;
+    --table-header-line-height: 24px;
+    --table-footer-font-size: 16px;
+    --table-footer-line-height: 24px;
+    --table-font-size: 14px;
+    --table-font-size-md: 14px;
+    --table-font-size-sm: 14px;
+    --table-line-height: 20px;
+    --table-selection-column-width: 32px;
+
+    clear: both;
+    max-width: 100%;
+    @include clearfix();
+
+    .table {
+        @include reset-component();
+        position: relative;
+        font-size: $table-font-size;
+        background: $table-background-color;
+
+        table {
+            width: 100%;
+            text-align: left;
+            border-collapse: separate;
+            border-spacing: 0;
+        }
+
+        &-thead tr {
+            &:first-of-type {
+                th {
+                    font-size: $table-header-font-size;
+                }
+            }
+        }
+
+        &-thead tr th,
+        &-tbody tr td,
+        tfoot tr th,
+        tfoot tr td {
+            position: relative;
+            padding: $table-padding-vertical $table-padding-horizontal;
+            overflow-wrap: break-word;
+        }
+
+        &-cell-ellipsis {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            word-break: keep-all;
+
+            &.table-cell-fix-left-last,
+            &.table-cell-fix-right-first {
+                overflow: visible;
+
+                .table-cell-content {
+                    display: block;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+
+            .table-column-title {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                word-break: keep-all;
+            }
+        }
+
+        &-title {
+            background: $table-header-background-color;
+            color: $table-header-foreground-color;
+            font-size: $text-font-size-5;
+            line-height: $text-line-height-4;
+            padding: $table-padding-vertical $table-padding-horizontal;
+        }
+
+        &-footer {
+            background: $table-footer-background-color;
+            color: $table-footer-foreground-color;
+            padding: $table-padding-vertical $table-padding-horizontal;
+        }
+
+        &-thead {
+            tr {
+                th {
+                    position: relative;
+                    color: $table-header-foreground-color;
+                    font-weight: 500;
+                    text-align: left;
+                    background: $table-header-background-color;
+                    transition: background 0.3s ease;
+
+                    &[colspan]:not([colspan='1']) {
+                        text-align: center;
+                    }
+
+                    &:not(:last-child):not(.table-selection-column):not(.table-row-expand-icon-cell):not([colspan]):before {
+                        position: absolute;
+                        top: 50%;
+                        right: 0;
+                        width: 1px;
+                        height: 1.6em;
+                        background-color: $table-header-cell-split-color;
+                        transform: translateY(-50%);
+                        transition: background-color 0.3s;
+                        content: '';
+                    }
+                }
+            }
+
+            tr:not(:last-child) > th {
+                &[colspan] {
+                    border-bottom: 0;
+                }
+            }
+        }
+
+        &-tbody {
+            tr {
+                td {
+                    transition: background 0.3s;
+
+                    .table-wrapper:only-child,
+                    .table-expanded-row-fixed > .table-wrapper:only-child {
+                        .table {
+                            margin: -$table-padding-vertical -$table-padding-horizontal -$table-padding-vertical
+                                ($table-padding-horizontal + ceil(14px * 1.4));
+
+                            &-tbody > tr:last-child > td {
+                                border-bottom: 0;
+
+                                &:first-child,
+                                &:last-child {
+                                    border-radius: 0;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                &.table-row:hover td,
+                td.table-cell-row-hover {
+                    background: $table-row-hover-background-color;
+                }
+
+                &.table-row-selected {
+                    td {
+                        background: $table-row-selected-background-color;
+                        border-color: rgba(0, 0, 0, 0.03);
+                    }
+
+                    &:hover {
+                        td {
+                            background: $table-row-selected-hover-background-color;
+                        }
+                    }
+                }
+            }
+        }
+
+        &-summary {
+            box-shadow: 0 -1px $table-border-color;
+            position: relative;
+            z-index: 2;
+
+            div {
+                box-shadow: 0 -$table-border-width 0 $table-border-color;
+            }
+
+            tr {
+                th,
+                td {
+                    border-bottom: $table-border-width $table-border-style
+                        $table-border-color;
+                }
+            }
+        }
+
+        &-pagination {
+            display: flex;
+            flex-wrap: wrap;
+            margin: 16px 0;
+            row-gap: $space-xs;
+
+            * {
+                flex: none;
+            }
+
+            &-left {
+                justify-content: flex-start;
+            }
+
+            &-center {
+                justify-content: center;
+            }
+
+            &-right {
+                justify-content: flex-end;
+            }
+        }
+
+        &-thead th.table-column-has-sorters {
+            outline: none;
+            cursor: pointer;
+            transition: all 0.3s;
+
+            &:hover {
+                background: $table-header-sort-active-background-color;
+
+                &:before {
+                    background-color: transparent !important;
+                }
+            }
+
+            &:focus-visible {
+                color: var(--primary-color);
+            }
+
+            &.table-cell-fix-left:hover,
+            &.table-cell-fix-right:hover {
+                background: $table-fixed-header-sort-active-background-color;
+            }
+        }
+
+        &-thead th.table-column-sort {
+            background: $table-header-sort-background-color;
+
+            &:before {
+                background-color: transparent !important;
+            }
+        }
+
+        td {
+            &.table-column-sort {
+                background: $table-body-sort-backgroud-color;
+            }
+        }
+
+        &-column-title {
+            position: relative;
+            z-index: 1;
+            flex: 1;
+        }
+
+        &-column-sorters {
+            display: flex;
+            flex: auto;
+            align-items: center;
+            justify-content: space-between;
+
+            &:after {
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                content: '';
+            }
+        }
+
+        &-column-sorter {
+            margin-left: 8px;
+            color: $table-header-icon-color;
+            font-size: 0;
+            transition: color 0.3s;
+
+            &-inner {
+                display: inline-flex;
+                flex-direction: column;
+                align-items: center;
+            }
+
+            &-up,
+            &-down {
+                font-size: 14px;
+
+                &.active {
+                    color: var(--primary-color);
+                }
+            }
+
+            &-up + &-down {
+                margin-top: -0.3em;
+            }
+        }
+
+        &-column-sorters:hover &-column-sorter {
+            color: $table-header-icon-hover-color;
+        }
+
+        &-filter-column {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        &-filter-trigger {
+            position: relative;
+            display: flex;
+            align-items: center;
+            margin: -4px (-$table-padding-horizontal / 2) -4px 4px;
+            padding: 0 4px;
+            color: $table-header-icon-color;
+            font-size: $table-font-size-sm;
+            border-radius: $table-border-radius;
+            cursor: pointer;
+            transition: all 0.3s;
+
+            &:hover {
+                color: $text-color-secondary;
+                background: $table-header-filter-active-background-color;
+            }
+
+            &.active {
+                color: var(--primary-color);
+            }
+        }
+
+        &-filter-dropdown {
+            &-tree {
+                padding: 8px 8px 0;
+
+                .tree-treenode .tree-node-content-wrapper:hover {
+                    background-color: $tree-node-hover-bg;
+                }
+
+                .tree-treenode-checkbox-checked .tree-node-content-wrapper {
+                    &,
+                    &:hover {
+                        background-color: $tree-node-selected-bg;
+                    }
+                }
+            }
+
+            &-search {
+                padding: 8px;
+                border-bottom: $table-border-width $table-border-color
+                    $table-border-style;
+
+                &-input {
+                    input {
+                        min-width: 140px;
+                    }
+                    .icon {
+                        opacity: $disabled-alpha-value;
+                    }
+                }
+            }
+
+            &-checkall {
+                width: 100%;
+                margin-bottom: 4px;
+                margin-left: 4px;
+            }
+
+            &-submenu > ul {
+                max-height: calc(100vh - 130px);
+                overflow-x: hidden;
+                overflow-y: auto;
+            }
+
+            &,
+            &-submenu {
+                .checkbox-wrapper + span {
+                    padding-left: 8px;
+                }
+            }
+
+            &-btns {
+                display: flex;
+                justify-content: space-between;
+                padding: 7px 8px;
+                overflow: hidden;
+                background-color: $table-header-filter-buttons-background-color;
+                border-top: $table-border-width $table-border-style
+                    $table-border-color;
+            }
+        }
+
+        &-selection-col {
+            width: $table-selection-column-width;
+        }
+
+        &-bordered &-selection-col {
+            width: $table-selection-column-width + 18px;
+        }
+
+        &-cell-bordered &-selection-col {
+            width: $table-selection-column-width + 18px;
+        }
+
+        &-header-bordered &-selection-col {
+            width: $table-selection-column-width + 18px;
+        }
+
+        &-inner-bordered &-selection-col {
+            width: $table-selection-column-width + 18px;
+        }
+
+        &-outer-bordered &-selection-col {
+            width: $table-selection-column-width + 18px;
+        }
+
+        &-row-bordered &-selection-col {
+            width: $table-selection-column-width + 18px;
+        }
+
+        table tr th,
+        table tr td {
+            &.table-selection-column {
+                padding-right: $space-xs;
+                padding-left: $space-xs;
+                text-align: center;
+
+                .table-radio-wrapper {
+                    margin-right: 0;
+                }
+            }
+        }
+
+        table tr th {
+            &.table-selection-column.table-cell-fix-left {
+                z-index: 3;
+            }
+        }
+
+        table tr th {
+            &.table-selection-column:after {
+                background-color: transparent !important;
+            }
+        }
+
+        .selection-checkbox,
+        .selection-radiobutton {
+            margin: 0 16px;
+            label {
+                span {
+                    margin-left: 0;
+                }
+            }
+        }
+
+        &-alternate {
+            tbody {
+                tr {
+                    &:nth-child(odd) {
+                        td {
+                            background-color: $table-background-alternate-color;
+                        }
+                    }
+                }
+            }
+        }
+
+        &-selection {
+            position: relative;
+            display: inline-flex;
+            flex-direction: column;
+
+            &-extra {
+                position: absolute;
+                top: 0;
+                z-index: 1;
+                cursor: pointer;
+                transition: all 0.3s;
+                margin-inline-start: 100%;
+                padding-inline-start: ($table-padding-horizontal / 4);
+
+                .icon {
+                    color: $table-header-icon-color;
+                    font-size: 10px;
+
+                    &:hover {
+                        color: $table-header-icon-hover-color;
+                    }
+                }
+            }
+        }
+
+        &-expand-icon-col {
+            width: 84px;
+        }
+
+        &-row-expand-icon-cell {
+            align-items: center;
+            display: flex;
+            justify-content: center;
+        }
+
+        &-row-indent {
+            float: left;
+            height: 1px;
+        }
+
+        &-row-expand-icon {
+            @include operation-unit();
+
+            position: relative;
+            display: inline-flex;
+            float: left;
+            box-sizing: border-box;
+            width: 18px;
+            height: 18px;
+            padding: 0;
+            margin: 2px 16px 0 16px;
+            color: inherit;
+            line-height: 18px;
+            background: $table-expand-icon-background-color;
+            border: 2px $table-border-style var(--grey-color-70);
+            border-radius: 4px;
+            outline: none;
+            transform: scale((unit(22) / unit(18)));
+            transition: all 0.3s;
+            user-select: none;
+
+            &:focus,
+            &:hover,
+            &:active {
+                border-color: $table-header-icon-color;
+            }
+
+            &:before,
+            &:after {
+                position: absolute;
+                background: currentcolor;
+                transition: transform 0.3s ease-out;
+                content: '';
+            }
+
+            &:before {
+                top: 6px;
+                right: 3px;
+                left: 3px;
+                height: 2px;
+            }
+
+            &:after {
+                top: 3px;
+                bottom: 3px;
+                left: 6px;
+                width: 2px;
+                transform: rotate(90deg);
+            }
+
+            &-collapsed:before {
+                transform: rotate(-180deg);
+            }
+
+            &-collapsed:after {
+                transform: rotate(0deg);
+            }
+
+            &-spaced {
+                &:before,
+                &:after {
+                    display: none;
+                    content: none;
+                }
+                background: transparent;
+                border: 0;
+                visibility: hidden;
+            }
+
+            .table-row-indent + & {
+                margin-top: ((14 * 20 - 2 * 3) / 2) -
+                    ceil(((14 * 1.4 - 2 * 3) / 2));
+                margin-right: $space-s;
+            }
+        }
+
+        tr {
+            &.table-expanded-row {
+                &,
+                &:hover {
+                    td {
+                        background: $table-row-expanded-background-color;
+                    }
+                }
+
+                .table-descriptions-view {
+                    display: flex;
+
+                    table {
+                        flex: auto;
+                        width: auto;
+                    }
+                }
+            }
+
+            &:last-of-type {
+                td {
+                    &:first-of-type {
+                        border-bottom-left-radius: $table-border-radius;
+                    }
+                    &:last-of-type {
+                        border-bottom-right-radius: $table-border-radius;
+                    }
+                }
+            }
+        }
+
+        .table-expanded-row-fixed {
+            position: relative;
+            margin: -$table-padding-vertical -$table-padding-horizontal;
+            padding: $table-padding-vertical $table-padding-horizontal;
+        }
+
+        &-tbody tr {
+            &.table-placeholder {
+                text-align: center;
+
+                &:nth-child(odd) td {
+                    background-color: $table-background-color;
+                }
+                .table-empty & {
+                    opacity: $disabled-alpha-value;
+                }
+            }
+        }
+
+        &-cell-fix-left,
+        &-cell-fix-right {
+            position: sticky !important;
+            z-index: 2;
+            background: $table-background-color;
+        }
+
+        &-cell-fix-left-first:after,
+        &-cell-fix-left-last:after {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: -1px;
+            width: 30px;
+            transform: translateX(100%);
+            transition: box-shadow 0.3s;
+            content: '';
+            pointer-events: none;
+        }
+
+        &-cell-fix-right-first:after,
+        &-cell-fix-right-last:after {
+            position: absolute;
+            top: 0;
+            bottom: -1px;
+            left: 0;
+            width: 30px;
+            transform: translateX(-100%);
+            transition: box-shadow 0.3s;
+            content: '';
+            pointer-events: none;
+        }
+
+        .table-container {
+            &:before,
+            &:after {
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                z-index: 1;
+                width: 30px;
+                transition: box-shadow 0.3s;
+                content: '';
+                pointer-events: none;
+            }
+
+            &:before {
+                left: 0;
+            }
+
+            &:after {
+                right: 0;
+            }
+        }
+
+        &-ping-left {
+            &:not(.table-has-fix-left) .table-container {
+                position: relative;
+
+                &:before {
+                    box-shadow: inset 32px 0 8px -32px rgba(15, 20, 31, 0.08);
+                }
+            }
+
+            .table-cell-fix-left-first:after,
+            .table-cell-fix-left-last:after {
+                box-shadow: inset 32px 0 8px -32px rgba(15, 20, 31, 0.08);
+            }
+
+            .table-cell-fix-left-last:before {
+                background-color: transparent !important;
+            }
+        }
+
+        &-ping-right {
+            &:not(.table-has-fix-right) .table-container {
+                position: relative;
+
+                &:after {
+                    box-shadow: inset -32px 0 8px -32px rgba(15, 20, 31, 0.08);
+                }
+            }
+
+            .table-cell-fix-right-first:after,
+            .table-cell-fix-right-last:after {
+                box-shadow: inset -32px 0 8px -32px rgba(15, 20, 31, 0.08);
+            }
+        }
+
+        &-sticky {
+            &-holder {
+                position: sticky;
+                z-index: 3;
+                background: $table-background-color;
+            }
+
+            &-scroll {
+                position: sticky;
+                bottom: 0;
+                z-index: 3;
+                display: flex;
+                align-items: center;
+                background: lighten(#d9dce1, 80%);
+                border-top: 1px solid $table-border-color;
+                opacity: 0.6;
+
+                &:hover {
+                    transform-origin: center bottom;
+                }
+
+                &-bar {
+                    height: 8px;
+                    background-color: $table-sticky-scroll-bar-background-color;
+                    border-radius: $table-sticky-scroll-bar-radius;
+
+                    &:hover {
+                        background-color: $table-sticky-scroll-bar-active-background-color;
+                    }
+
+                    &-active {
+                        background-color: $table-sticky-scroll-bar-active-background-color;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media all and (-ms-high-contrast: none) {
+    .table-wrapper {
+        .table {
+            &-ping-left {
+                .table-cell-fix-left-last:after {
+                    box-shadow: none !important;
+                }
+            }
+
+            &-ping-right {
+                .table-cell-fix-right-first:after {
+                    box-shadow: none !important;
+                }
+            }
+        }
+    }
+}
+
+@import './size';
+@import './bordered';
+@import './rtl';
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
new file mode 100644
index 000000000..4ab31d0d0
--- /dev/null
+++ b/src/components/Table/Table.stories.tsx
@@ -0,0 +1,1581 @@
+import React, { Component, FC, useEffect, useRef, useState } from 'react';
+import { Stories } from '@storybook/addon-docs';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Link } from '../Link';
+import { Stack } from '../Stack';
+import { Avatar } from '../Avatar';
+import Table from './index';
+import type { ColumnsType } from './Table.types';
+import { ResizeObserver } from '../../shared/ResizeObserver/ResizeObserver';
+import { VariableSizeGrid as Grid } from 'react-window';
+import { mergeClasses } from '../../shared/utilities';
+import { PaginationLayoutOptions } from '../Pagination';
+import { Tooltip, TooltipTheme } from '../Tooltip';
+
+export default {
+    title: 'Table',
+    parameters: {
+        docs: {
+            page: (): JSX.Element => (
+                <main>
+                    <article>
+                        <section>
+                            <h1>Table</h1>
+                            <p>
+                                A table displays columns and rows of data.
+                                Specify the <code>dataSource</code> of Table as
+                                an array of data objects.
+                            </p>
+                            <h2>Best practices</h2>
+                            <h3>Layout</h3>
+                            <ul>
+                                <li>
+                                    You may add borders, title and footer for
+                                    table.
+                                </li>
+                                <li>
+                                    There are three sizes: <code>small</code>,{' '}
+                                    <code>medium</code>, and <code>large</code>.
+                                </li>
+                                <li>The header and/or columns may be fixed.</li>
+                                <li>
+                                    Group table head with{' '}
+                                    <code>columns[n].children</code>.
+                                </li>
+                                <li>
+                                    The pagination may be positioned using a
+                                    simple array:{' '}
+                                    <code>['topRight', 'none']</code>, or{' '}
+                                    <code>['none', bottomRight']</code>
+                                </li>
+                                <li>
+                                    Rows may be selectable by marking the first
+                                    column as a selectable via a property in
+                                    your <code>dataSource</code>. You can use{' '}
+                                    <code>rowSelection.type</code> to set
+                                    selection type. Default is{' '}
+                                    <code>checkbox</code>.
+                                </li>
+                                <li>
+                                    Rows may be expandable via the{' '}
+                                    <code>expandableConfig</code> prop.
+                                </li>
+                                <li>
+                                    Ellipsis cell content via setting{' '}
+                                    <code>column.ellipsis</code>. Ellipsis cell
+                                    content via setting{' '}
+                                    <code>column.ellipsis.showTitle</code>, use
+                                    a <code>Tooltip</code> with its{' '}
+                                    <code>portaled</code> prop enabled instead
+                                    of the html title attribute.
+                                </li>
+                                <li>
+                                    Table column title supports{' '}
+                                    <code>colSpan</code> that set in column.
+                                    Table cell supports <code>colSpan</code> and{' '}
+                                    <code>rowSpan</code> that set in render
+                                    return object. When each of them is set to
+                                    0, the cell will not be rendered.
+                                </li>
+                                <li>
+                                    Display tree structure data in Table when
+                                    there is field key children in{' '}
+                                    <code>dataSource</code>, customize{' '}
+                                    <code>childrenColumnName</code> property to
+                                    avoid tree table structure. You can control
+                                    the indent width by setting{' '}
+                                    <code>indentSize</code>.
+                                </li>
+                                <li>Tables may be nested.</li>
+                                <li>
+                                    Set <code>Summary</code> content by{' '}
+                                    <code>summary</code> prop. You can fixed it
+                                    by setting the <code>Table.Summary</code>{' '}
+                                    <code>fixed</code> prop.
+                                </li>
+                            </ul>
+                            <h3>Content</h3>
+                            <ul>
+                                <li>
+                                    Display a collection of structured data.
+                                </li>
+                                <li>Sort, search, paginate, filter data.</li>
+                            </ul>
+                        </section>
+                        <section>
+                            <Stories includePrimary title="" />
+                        </section>
+                    </article>
+                </main>
+            ),
+        },
+    },
+    argTypes: {},
+} as ComponentMeta<typeof Component>;
+
+interface DataType {
+    key: React.Key;
+    name: string;
+    profile: string[];
+    initials: string;
+    title: string;
+    tel: string;
+    phone: string;
+    location: string;
+    level: number;
+    description?: string;
+    children?: DataType[];
+}
+
+interface ExpandedDataType {
+    key: React.Key;
+    availability: string;
+    details: string;
+    reviewed: string;
+}
+
+const data: DataType[] = [
+    {
+        key: '1',
+        name: 'Anamika Musafir',
+        profile: ['Anamika Musafir', 'AM', 'Beacon, NY'],
+        initials: 'AM',
+        title: 'Senior Sales Engineer',
+        tel: '123456',
+        phone: '123456',
+        location: 'Beacon, NY',
+        level: 78,
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+    {
+        key: '2',
+        name: 'Chandra Garg',
+        profile: ['Chandra Garg', 'CG', 'Delhi, Delhi'],
+        initials: 'CG',
+        title: 'Sales Executive',
+        tel: '123456',
+        phone: '123456',
+        location: 'Delhi, Delhi',
+        level: 86,
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+    {
+        key: '3',
+        name: 'Clarey Fike',
+        profile: ['Clarey Fike', 'CF', 'New York, NA'],
+        initials: 'CF',
+        title: 'Regional Sales VP',
+        tel: '123456',
+        phone: '123456',
+        location: 'New York, NA',
+        level: 95,
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+    {
+        key: '4',
+        name: 'Cobbey Deevey',
+        profile: ['Cobbey Deevey', 'CD', 'Atlanta, GA'],
+        initials: 'CD',
+        title: 'Sales Director',
+        tel: '123456',
+        phone: '123456',
+        location: 'Atlanta, GA',
+        level: 66,
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+    {
+        key: '5',
+        name: 'Dave Shaw',
+        profile: ['Dave Shaw', 'DS', 'San Diego, USA'],
+        initials: 'DS',
+        title: 'Sales Engineer Manager',
+        tel: '123456',
+        phone: '123456',
+        location: 'San Diego, USA',
+        level: 72,
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+    {
+        key: '6',
+        name: 'Farida Ashfaq',
+        profile: ['Farida Ashfaq', 'FA', 'Mumbai, Maharashtra'],
+        initials: 'FA',
+        title: 'Sales Executive',
+        tel: '123456',
+        phone: '123456',
+        location: 'Mumbai, Maharashtra',
+        level: 97,
+        description: null,
+    },
+    {
+        key: '7',
+        name: 'Frank Baptist',
+        profile: ['Frank Baptist', 'FB', 'Houston, Texas Area'],
+        initials: 'FB',
+        title: 'Sales Engineer',
+        tel: '123456',
+        phone: '123456',
+        location: 'Houston, Texas Area',
+        level: 87,
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+    {
+        key: '8',
+        name: 'Jerome Feng',
+        profile: ['Jerome Feng', 'JF', 'Irvine, CA'],
+        initials: 'JF',
+        title: 'Sales Engineer',
+        tel: '123456',
+        phone: '123456',
+        location: 'Irvine, CA',
+        level: 88,
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+    {
+        key: '9',
+        name: 'Julie Tharoor',
+        profile: ['Julie Tharoor', 'JT', 'Bangalore, Karnataka'],
+        initials: 'JT',
+        title: 'Sales Executive',
+        tel: '123456',
+        phone: '123456',
+        location: 'Bangalore, Karnataka',
+        level: 52,
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+    {
+        key: '10',
+        name: 'Nikita Gagan',
+        profile: ['Nikita Gagan', 'NG', 'Delhi, Delhi'],
+        initials: 'NG',
+        title: 'Sales Executive',
+        tel: '123456',
+        phone: '123456',
+        location: 'Delhi, Delhi',
+        level: 97,
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+    {
+        key: '11',
+        name: 'Peter Rege',
+        profile: ['Peter Rege', 'PR'],
+        initials: 'PR',
+        title: 'Sales Representative',
+        tel: '123456',
+        phone: '123456',
+        location: null,
+        level: 97,
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+    {
+        key: '12',
+        name: 'Revathi Roy',
+        profile: ['Revathi Roy', 'RR', 'San Francisco Bay Area'],
+        initials: 'RR',
+        title: 'Senior Sales Engineer',
+        tel: '123456',
+        phone: '123456',
+        location: 'San Francisco Bay Area',
+        level: 74,
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+    {
+        key: '13',
+        name: 'Urbanus Laurens',
+        profile: ['Urbanus Laurens', 'UL', 'Salt Lake City, UT'],
+        initials: 'UL',
+        title: 'Account Executive',
+        tel: '123456',
+        phone: '123456',
+        location: 'Salt Lake City, UT',
+        level: 76,
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+    {
+        key: '14',
+        name: 'Vance Renner',
+        profile: ['Vance Renner', 'VR', 'St Louis, MO'],
+        initials: 'VR',
+        title: 'Senior Account Executive',
+        tel: '123456',
+        phone: '123456',
+        location: 'St Louis, MO',
+        level: 90,
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+    {
+        key: '15',
+        name: 'Zarla Greener',
+        profile: ['Zarla Greener', 'ZG', 'Chicago, IL'],
+        initials: 'ZG',
+        title: 'Sales Manager',
+        tel: '123456',
+        phone: '123456',
+        location: 'Chicago, IL',
+        level: 79,
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+    {
+        key: '16',
+        name: 'Dave Doe',
+        profile: ['Dave Doe', 'DS', 'San Diego, USA'],
+        initials: 'DS',
+        title: 'Sales Engineer Manager',
+        tel: '123456',
+        phone: '123456',
+        location: 'San Diego, USA',
+        level: 72,
+        description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+];
+
+const colSpanData: DataType[] = [
+    {
+        key: '1',
+        name: 'Anamika Musafir',
+        profile: ['Anamika Musafir', 'AM', 'Beacon, NY'],
+        initials: 'AM',
+        title: 'Senior Sales Engineer',
+        tel: '123456',
+        phone: '123456',
+        location: 'Beacon, NY',
+        level: 78,
+    },
+    {
+        key: '2',
+        name: 'Chandra Garg',
+        profile: ['Chandra Garg', 'CG', 'Delhi, Delhi'],
+        initials: 'CG',
+        title: 'Sales Executive',
+        tel: '123456',
+        phone: '123456',
+        location: 'Delhi, Delhi',
+        level: 86,
+    },
+    {
+        key: '3',
+        name: 'Clarey Fike',
+        profile: ['Clarey Fike', 'CF', 'New York, NA'],
+        initials: 'CF',
+        title: 'Regional Sales VP',
+        tel: '123456',
+        phone: '123456',
+        location: 'New York, NA',
+        level: 95,
+    },
+    {
+        key: '4',
+        name: 'Cobbey Deevey',
+        profile: ['Cobbey Deevey', 'CD', 'Atlanta, GA'],
+        initials: 'CD',
+        title: 'Sales Director',
+        tel: '123456',
+        phone: '123456',
+        location: 'Atlanta, GA',
+        level: 66,
+    },
+    {
+        key: '5',
+        name: 'Dave Shaw',
+        profile: ['Dave Shaw', 'DS', 'San Diego, USA'],
+        initials: 'DS',
+        title: 'Sales Engineer Manager',
+        tel: '123456',
+        phone: '123456',
+        location: 'San Diego, USA',
+        level: 72,
+    },
+];
+
+const treeData: DataType[] = [
+    {
+        key: 1,
+        name: 'Anamika Musafir',
+        profile: ['Anamika Musafir', 'AM', 'Beacon, NY'],
+        initials: 'AM',
+        title: 'Senior Sales Engineer',
+        tel: '123456',
+        phone: '123456',
+        location: 'Beacon, NY',
+        level: 78,
+        children: [
+            {
+                key: 11,
+                name: 'Chandra Garg',
+                profile: ['Chandra Garg', 'CG', 'Delhi, Delhi'],
+                initials: 'CG',
+                title: 'Sales Executive',
+                tel: '123456',
+                phone: '123456',
+                location: 'Delhi, Delhi',
+                level: 86,
+            },
+            {
+                key: 12,
+                name: 'Clarey Fike',
+                profile: ['Clarey Fike', 'CF', 'New York, NA'],
+                initials: 'CF',
+                title: 'Regional Sales VP',
+                tel: '123456',
+                phone: '123456',
+                location: 'New York, NA',
+                level: 95,
+                children: [
+                    {
+                        key: 121,
+                        name: 'Cobbey Deevey',
+                        profile: ['Cobbey Deevey', 'CD', 'Atlanta, GA'],
+                        initials: 'CD',
+                        title: 'Sales Director',
+                        tel: '123456',
+                        phone: '123456',
+                        location: 'Atlanta, GA',
+                        level: 66,
+                    },
+                ],
+            },
+            {
+                key: 13,
+                name: 'Dave Shaw',
+                profile: ['Dave Shaw', 'DS', 'San Diego, USA'],
+                initials: 'DS',
+                title: 'Sales Engineer Manager',
+                tel: '123456',
+                phone: '123456',
+                location: 'San Diego, USA',
+                level: 72,
+                children: [
+                    {
+                        key: 131,
+                        name: 'Zarla Greener',
+                        profile: ['Zarla Greener', 'ZG', 'Chicago, IL'],
+                        initials: 'ZG',
+                        title: 'Sales Manager',
+                        tel: '123456',
+                        phone: '123456',
+                        location: 'Chicago, IL',
+                        level: 79,
+                        children: [
+                            {
+                                key: 1311,
+                                name: 'Urbanus Laurens',
+                                profile: [
+                                    'Urbanus Laurens',
+                                    'UL',
+                                    'Salt Lake City, UT',
+                                ],
+                                initials: 'UL',
+                                title: 'Account Executive',
+                                tel: '123456',
+                                phone: '123456',
+                                location: 'Salt Lake City, UT',
+                                level: 76,
+                            },
+                            {
+                                key: 1312,
+                                name: 'Vance Renner',
+                                profile: ['Vance Renner', 'VR', 'St Louis, MO'],
+                                initials: 'VR',
+                                title: 'Senior Account Executive',
+                                tel: '123456',
+                                phone: '123456',
+                                location: 'St Louis, MO',
+                                level: 90,
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        key: 2,
+        name: 'Dave Doe',
+        profile: ['Dave Doe', 'DS', 'San Diego, USA'],
+        initials: 'DS',
+        title: 'Sales Engineer Manager',
+        tel: '123456',
+        phone: '123456',
+        location: 'San Diego, USA',
+        level: 72,
+    },
+];
+
+const basicCols: ColumnsType<DataType> = [
+    {
+        title: 'Role',
+        dataIndex: 'title',
+    },
+    {
+        title: 'Profile',
+        dataIndex: 'profile',
+        render: (text: string[]) => (
+            <Stack direction="horizontal" gap="s">
+                <Avatar alt={text[0]} theme="green" type="round">
+                    {text[1]}
+                </Avatar>
+                <Stack direction="vertical" gap="xxs">
+                    <Link variant="primary">{text[0]}</Link>
+                    {text[2]}
+                </Stack>
+            </Stack>
+        ),
+    },
+    {
+        title: 'Level',
+        dataIndex: 'level',
+    },
+];
+
+const sharedOnCell = (_: DataType, index: number) => {
+    if (index === 4) {
+        return { colSpan: 0 };
+    }
+
+    return {};
+};
+
+const colSpanCols: ColumnsType<DataType> = [
+    {
+        title: 'Role',
+        dataIndex: 'title',
+        onCell: (_, index) => ({
+            colSpan: (index as number) < 4 ? 1 : 5,
+        }),
+    },
+    {
+        title: 'Level',
+        dataIndex: 'level',
+        onCell: sharedOnCell,
+    },
+    {
+        title: 'Home phone',
+        colSpan: 2,
+        dataIndex: 'tel',
+        onCell: (_, index) => {
+            if (index === 2) {
+                return { rowSpan: 2 };
+            }
+            if (index === 3) {
+                return { rowSpan: 0 };
+            }
+            if (index === 4) {
+                return { colSpan: 0 };
+            }
+
+            return {};
+        },
+    },
+    {
+        title: 'Phone',
+        colSpan: 0,
+        dataIndex: 'phone',
+        onCell: sharedOnCell,
+    },
+    {
+        title: 'Location',
+        dataIndex: 'location',
+        onCell: sharedOnCell,
+    },
+];
+
+const ellipsisCols: ColumnsType<DataType> = [
+    {
+        title: 'Role',
+        dataIndex: 'title',
+    },
+    {
+        title: 'Profile',
+        dataIndex: 'profile',
+        render: (text: string[]) => (
+            <Stack direction="horizontal" gap="s">
+                <Avatar alt={text[0]} theme="green" type="round">
+                    {text[1]}
+                </Avatar>
+                <Stack direction="vertical" gap="xxs">
+                    <Link variant="primary">{text[0]}</Link>
+                    {text[2]}
+                </Stack>
+            </Stack>
+        ),
+    },
+    {
+        title: 'Level',
+        dataIndex: 'level',
+    },
+    {
+        title: 'Column 3',
+        key: '3',
+        dataIndex: 'location',
+        width: 72,
+        ellipsis: true,
+    },
+    {
+        title: 'Column 4',
+        key: '4',
+        dataIndex: 'location',
+        width: 72,
+        ellipsis: true,
+    },
+    {
+        title: 'Column 5',
+        key: '5',
+        dataIndex: 'location',
+        width: 72,
+        ellipsis: true,
+    },
+    {
+        title: 'Column 6',
+        dataIndex: 'location',
+        key: '6',
+        width: 72,
+        ellipsis: true,
+    },
+    {
+        title: 'Column 7',
+        key: '7',
+        dataIndex: 'location',
+        width: 72,
+        ellipsis: true,
+    },
+    {
+        title: 'Column 8',
+        key: '8',
+        dataIndex: 'location',
+        width: 72,
+        ellipsis: true,
+    },
+];
+
+const ellipsisTooltipCols: ColumnsType<DataType> = [
+    {
+        title: 'Role',
+        dataIndex: 'title',
+    },
+    {
+        title: 'Profile',
+        dataIndex: 'profile',
+        render: (text: string[]) => (
+            <Stack direction="horizontal" gap="s">
+                <Avatar alt={text[0]} theme="green" type="round">
+                    {text[1]}
+                </Avatar>
+                <Stack direction="vertical" gap="xxs">
+                    <Link variant="primary">{text[0]}</Link>
+                    {text[2]}
+                </Stack>
+            </Stack>
+        ),
+    },
+    {
+        title: 'Level',
+        dataIndex: 'level',
+    },
+    {
+        title: 'Column 3',
+        key: '3',
+        dataIndex: 'location',
+        width: 72,
+        ellipsis: {
+            showTitle: false,
+        },
+        render: (location: string) => (
+            <Tooltip content={location} portal theme={TooltipTheme.dark}>
+                {location}
+            </Tooltip>
+        ),
+    },
+    {
+        title: 'Column 4',
+        key: '4',
+        dataIndex: 'location',
+        width: 72,
+        ellipsis: {
+            showTitle: false,
+        },
+        render: (location: string) => (
+            <Tooltip content={location} portal theme={TooltipTheme.dark}>
+                {location}
+            </Tooltip>
+        ),
+    },
+    {
+        title: 'Column 5',
+        key: '5',
+        dataIndex: 'location',
+        width: 72,
+        ellipsis: {
+            showTitle: false,
+        },
+        render: (location: string) => (
+            <Tooltip content={location} portal theme={TooltipTheme.dark}>
+                {location}
+            </Tooltip>
+        ),
+    },
+    {
+        title: 'Column 6',
+        dataIndex: 'location',
+        key: '6',
+        width: 72,
+        ellipsis: {
+            showTitle: false,
+        },
+        render: (location: string) => (
+            <Tooltip content={location} portal theme={TooltipTheme.dark}>
+                {location}
+            </Tooltip>
+        ),
+    },
+    {
+        title: 'Column 7',
+        key: '7',
+        dataIndex: 'location',
+        width: 72,
+        ellipsis: {
+            showTitle: false,
+        },
+        render: (location: string) => (
+            <Tooltip content={location} portal theme={TooltipTheme.dark}>
+                {location}
+            </Tooltip>
+        ),
+    },
+    {
+        title: 'Column 8',
+        key: '8',
+        dataIndex: 'location',
+        width: 72,
+        ellipsis: {
+            showTitle: false,
+        },
+        render: (location: string) => (
+            <Tooltip content={location} portal theme={TooltipTheme.dark}>
+                {location}
+            </Tooltip>
+        ),
+    },
+];
+
+const filterCols: ColumnsType<DataType> = [
+    {
+        title: 'Role',
+        dataIndex: 'title',
+    },
+    {
+        title: 'Profile',
+        dataIndex: 'profile',
+        render: (text: string[]) => (
+            <Stack direction="horizontal" gap="s">
+                <Avatar alt={text[0]} theme="green" type="round">
+                    {text[1]}
+                </Avatar>
+                <Stack direction="vertical" gap="xxs">
+                    <Link variant="primary">{text[0]}</Link>
+                    {text[2]}
+                </Stack>
+            </Stack>
+        ),
+        filters: [
+            {
+                text: 'Dave',
+                value: 'Dave',
+            },
+            {
+                text: 'Nikita',
+                value: 'Nikita',
+            },
+            {
+                text: 'Submenu',
+                value: 'Submenu',
+                children: [
+                    {
+                        text: 'Shaw',
+                        value: 'Shaw',
+                    },
+                    {
+                        text: 'Gagan',
+                        value: 'Gagan',
+                    },
+                ],
+            },
+        ],
+        filterMode: 'tree',
+        filterSearch: true,
+        onFilter: (value: string, profile) => profile.name.indexOf(value) === 0,
+    },
+    {
+        title: 'Level',
+        dataIndex: 'level',
+    },
+];
+
+const fixedCols: ColumnsType<DataType> = [
+    {
+        title: 'Role',
+        dataIndex: 'title',
+        fixed: 'left',
+        width: 144,
+    },
+    {
+        title: 'Profile',
+        dataIndex: 'profile',
+        render: (text: string[]) => (
+            <Stack direction="horizontal" gap="s">
+                <Avatar alt={text[0]} theme="green" type="round">
+                    {text[1]}
+                </Avatar>
+                <Stack direction="vertical" gap="xxs">
+                    <Link variant="primary">{text[0]}</Link>
+                    {text[2]}
+                </Stack>
+            </Stack>
+        ),
+        fixed: 'left',
+        width: 320,
+    },
+    {
+        title: 'Level',
+        key: 'level',
+        dataIndex: 'level',
+        width: 72,
+    },
+    {
+        title: 'Column 3',
+        key: '3',
+        dataIndex: 'location',
+        width: 124,
+    },
+    {
+        title: 'Column 4',
+        key: '4',
+        dataIndex: 'location',
+        width: 124,
+    },
+    {
+        title: 'Column 5',
+        key: '5',
+        dataIndex: 'location',
+        width: 124,
+    },
+    {
+        title: 'Column 6',
+        dataIndex: 'location',
+        key: '6',
+        width: 124,
+    },
+    {
+        title: 'Column 7',
+        key: '7',
+        dataIndex: 'location',
+        width: 124,
+    },
+    {
+        title: 'Column 8',
+        key: '8',
+        dataIndex: 'location',
+        width: 124,
+    },
+    {
+        title: 'Action',
+        key: 'operation',
+        fixed: 'right',
+        width: 88,
+        render: () => <Link variant="primary">Action</Link>,
+    },
+];
+
+const groupingCols: ColumnsType<DataType> = [
+    {
+        title: 'Role',
+        dataIndex: 'title',
+        fixed: 'left',
+        width: 144,
+    },
+    {
+        title: 'Profile',
+        dataIndex: 'profile',
+        render: (text: string[]) => (
+            <Stack direction="horizontal" gap="s">
+                <Avatar alt={text[0]} theme="green" type="round">
+                    {text[1]}
+                </Avatar>
+                <Stack direction="vertical" gap="xxs">
+                    <Link variant="primary">{text[0]}</Link>
+                    {text[2]}
+                </Stack>
+            </Stack>
+        ),
+        fixed: 'left',
+        width: 320,
+    },
+    {
+        title: 'Level',
+        key: 'level',
+        dataIndex: 'level',
+        width: 72,
+        align: 'center',
+    },
+    {
+        classNames: 'grouped-th',
+        title: 'Pipeline',
+        key: 'pipeline',
+        dataIndex: 'pipeline',
+        width: 256,
+        children: [
+            {
+                title: 'Grouped 1',
+                key: '1',
+                dataIndex: 'Grouped 1',
+                width: 128,
+            },
+            {
+                title: 'Grouped 2',
+                key: '2',
+                dataIndex: 'Grouped 2',
+                width: 128,
+            },
+        ],
+    },
+    {
+        classNames: 'grouped-th',
+        title: 'Plan',
+        key: 'plan',
+        dataIndex: 'plan',
+        width: 512,
+        children: [
+            {
+                title: 'Grouped 5',
+                key: '5',
+                dataIndex: 'Grouped 5',
+                width: 128,
+            },
+            {
+                title: 'Grouped 6',
+                dataIndex: 'Grouped 6',
+                key: '6',
+                width: 128,
+            },
+            {
+                title: 'Grouped 7',
+                key: '7',
+                dataIndex: 'Grouped 7',
+                width: 128,
+            },
+            {
+                title: 'Grouped 8',
+                key: '8',
+                dataIndex: 'Grouped 8',
+                width: 128,
+            },
+        ],
+    },
+    {
+        title: 'Action',
+        key: 'operation',
+        fixed: 'right',
+        width: 88,
+        render: () => <Link variant="primary">Action</Link>,
+    },
+];
+
+const orderSelectAndExpandCols: ColumnsType<DataType> = [
+    {
+        title: 'Role',
+        dataIndex: 'title',
+    },
+    Table.EXPAND_COLUMN,
+    {
+        title: 'Profile',
+        dataIndex: 'profile',
+        render: (text: string[]) => (
+            <Stack direction="horizontal" gap="s">
+                <Avatar alt={text[0]} theme="green" type="round">
+                    {text[1]}
+                </Avatar>
+                <Stack direction="vertical" gap="xxs">
+                    <Link variant="primary">{text[0]}</Link>
+                    {text[2]}
+                </Stack>
+            </Stack>
+        ),
+    },
+    Table.SELECTION_COLUMN,
+    {
+        title: 'Level',
+        dataIndex: 'level',
+    },
+];
+
+const sortCols: ColumnsType<DataType> = [
+    {
+        title: 'Role',
+        dataIndex: 'title',
+    },
+    {
+        title: 'Profile',
+        dataIndex: 'profile',
+        render: (text: string[]) => (
+            <Stack direction="horizontal" gap="s">
+                <Avatar alt={text[0]} theme="green" type="round">
+                    {text[1]}
+                </Avatar>
+                <Stack direction="vertical" gap="xxs">
+                    <Link variant="primary">{text[0]}</Link>
+                    {text[2]}
+                </Stack>
+            </Stack>
+        ),
+    },
+    {
+        title: 'Level',
+        dataIndex: 'level',
+        sorter: (a, b) => a.level - b.level,
+        sortDirections: ['ascend', 'descend'],
+    },
+];
+
+const treeCols: ColumnsType<DataType> = [
+    {
+        title: 'Role',
+        dataIndex: 'title',
+        key: 'title',
+    },
+    {
+        title: 'Level',
+        dataIndex: 'level',
+        key: 'level',
+        width: '12%',
+    },
+    {
+        title: 'Location',
+        dataIndex: 'location',
+        width: '30%',
+        key: 'location',
+    },
+];
+
+const responsiveCols: ColumnsType<DataType> = [
+    {
+        title: 'Role (Show always)',
+        dataIndex: 'title',
+    },
+    {
+        title: 'Profile (show at medium)',
+        dataIndex: 'profile',
+        render: (text: string[]) => (
+            <Stack direction="horizontal" gap="s">
+                <Avatar alt={text[0]} theme="green" type="round">
+                    {text[1]}
+                </Avatar>
+                <Stack direction="vertical" gap="xxs">
+                    <Link variant="primary">{text[0]}</Link>
+                    {text[2]}
+                </Stack>
+            </Stack>
+        ),
+        responsive: ['md'],
+    },
+    {
+        title: 'Level (Show at large)',
+        dataIndex: 'level',
+        responsive: ['lg'],
+    },
+];
+
+const sortMultipleCols: ColumnsType<DataType> = [
+    {
+        title: 'Role',
+        dataIndex: 'title',
+        sorter: {
+            compare: (a, b) => a.title.localeCompare(b.title),
+            multiple: 3,
+        },
+        sortDirections: ['ascend', 'descend'],
+    },
+    {
+        title: 'Profile',
+        dataIndex: 'profile',
+        render: (text: string[]) => (
+            <Stack direction="horizontal" gap="s">
+                <Avatar alt={text[0]} theme="green" type="round">
+                    {text[1]}
+                </Avatar>
+                <Stack direction="vertical" gap="xxs">
+                    <Link variant="primary">{text[0]}</Link>
+                    {text[2]}
+                </Stack>
+            </Stack>
+        ),
+        sorter: {
+            compare: (a, b) => a.profile[0].localeCompare(b.profile[0]),
+            multiple: 2,
+        },
+        sortDirections: ['ascend', 'descend'],
+    },
+    {
+        title: 'Level',
+        dataIndex: 'level',
+        sorter: {
+            compare: (a, b) => a.level - b.level,
+            multiple: 1,
+        },
+        sortDirections: ['ascend', 'descend'],
+    },
+];
+
+const virtualCols = [
+    { title: 'A', dataIndex: 'key', width: 150 },
+    { title: 'B', dataIndex: 'key' },
+    { title: 'C', dataIndex: 'key' },
+    { title: 'D', dataIndex: 'key' },
+    { title: 'E', dataIndex: 'key', width: 200 },
+    { title: 'F', dataIndex: 'key', width: 100 },
+];
+
+const virtualData = Array.from({ length: 100000 }, (_, key) => ({ key }));
+
+const expandedRowRender = () => {
+    const columns: ColumnsType<ExpandedDataType> = [
+        {
+            title: 'Availability',
+            dataIndex: 'availability',
+            key: 'availability',
+        },
+        { title: 'Details', dataIndex: 'details', key: 'details' },
+        { title: 'Reviewed', dataIndex: 'reviewed', key: 'reviewed' },
+    ];
+
+    const data: ExpandedDataType[] = [];
+    for (let i = 0; i < 3; ++i) {
+        data.push({
+            key: i,
+            availability: 'Available',
+            details: 'Some details about this profile.',
+            reviewed: 'Yes',
+        });
+    }
+    return (
+        <Table
+            bordered
+            columns={columns}
+            dataSource={data}
+            pagination={false}
+            size="small"
+        />
+    );
+};
+
+const rowSelection = {
+    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
+        console.log(
+            `selectedRowKeys: ${selectedRowKeys}`,
+            'selectedRows: ',
+            selectedRows
+        );
+    },
+    getCheckboxProps: (record: DataType) => ({
+        disabled: record.name === 'Cobbey Deevey',
+        profile: record.name,
+    }),
+};
+
+const Table_Base_Story: ComponentStory<typeof Table> = (args) => {
+    return <Table {...args} />;
+};
+
+const Table_Wrapped_Story: ComponentStory<typeof Table> = (args) => {
+    return (
+        <div style={{ width: 900, height: 2000 }}>
+            <Table {...args} />
+        </div>
+    );
+};
+
+const VirtualTable = (props: Parameters<typeof Table>[0]) => {
+    const { columns, scroll } = props;
+    const [tableWidth, setTableWidth] = useState(0);
+
+    const widthColumnCount = columns!.filter(({ width }) => !width).length;
+    const mergedColumns = columns!.map((column) => {
+        if (column.width) {
+            return column;
+        }
+
+        return {
+            ...column,
+            width: Math.floor(tableWidth / widthColumnCount),
+        };
+    });
+
+    const gridRef = useRef<any>();
+    const [connectObject] = useState<any>(() => {
+        const obj = {};
+        Object.defineProperty(obj, 'scrollLeft', {
+            get: () => null,
+            set: (scrollLeft: number) => {
+                if (gridRef.current) {
+                    gridRef.current.scrollTo({ scrollLeft });
+                }
+            },
+        });
+
+        return obj;
+    });
+
+    const resetVirtualGrid = () => {
+        gridRef.current?.resetAfterIndices({
+            columnIndex: 0,
+            shouldForceUpdate: true,
+        });
+    };
+
+    useEffect(() => resetVirtualGrid, [tableWidth]);
+
+    const renderVirtualList = (
+        rawData: object[],
+        { scrollbarSize, ref, onScroll }: any
+    ) => {
+        ref.current = connectObject;
+        const totalHeight = rawData.length * 54;
+
+        return (
+            <Grid
+                ref={gridRef}
+                className="virtual-grid"
+                columnCount={mergedColumns.length}
+                columnWidth={(index: number) => {
+                    const { width } = mergedColumns[index];
+                    return totalHeight > scroll!.y! &&
+                        index === mergedColumns.length - 1
+                        ? (width as number) - scrollbarSize - 1
+                        : (width as number);
+                }}
+                height={scroll!.y as number}
+                rowCount={rawData.length}
+                rowHeight={() => 54}
+                width={tableWidth}
+                onScroll={({ scrollLeft }: { scrollLeft: number }) => {
+                    onScroll({ scrollLeft });
+                }}
+            >
+                {({
+                    columnIndex,
+                    rowIndex,
+                    style,
+                }: {
+                    columnIndex: number;
+                    rowIndex: number;
+                    style: React.CSSProperties;
+                }) => (
+                    <div
+                        className={mergeClasses([
+                            'virtual-table-cell',
+                            {
+                                'virtual-table-cell-last':
+                                    columnIndex === mergedColumns.length - 1,
+                            },
+                        ])}
+                        style={style}
+                    >
+                        {
+                            (rawData[rowIndex] as any)[
+                                (mergedColumns as any)[columnIndex].dataIndex
+                            ]
+                        }
+                    </div>
+                )}
+            </Grid>
+        );
+    };
+
+    return (
+        <ResizeObserver
+            onResize={({ width }) => {
+                setTableWidth(width);
+            }}
+        >
+            <Table
+                {...props}
+                classNames="virtual-table"
+                columns={mergedColumns}
+                pagination={false}
+                components={{
+                    body: renderVirtualList,
+                }}
+            />
+        </ResizeObserver>
+    );
+};
+
+export const Basic = Table_Base_Story.bind({});
+export const Bordered = Table_Base_Story.bind({});
+export const Cell_Bordered = Table_Base_Story.bind({});
+export const Header_Bordered = Table_Base_Story.bind({});
+export const Inner_Bordered = Table_Base_Story.bind({});
+export const Outer_Bordered = Table_Base_Story.bind({});
+export const Row_Bordered = Table_Base_Story.bind({});
+export const Small = Table_Base_Story.bind({});
+export const Medium = Table_Base_Story.bind({});
+export const Large = Table_Base_Story.bind({});
+export const Empty = Table_Base_Story.bind({});
+export const Header_Grouping = Table_Base_Story.bind({});
+export const Header_And_Footer = Table_Base_Story.bind({});
+export const Fixed_Header = Table_Wrapped_Story.bind({});
+export const Fixed_Columns = Table_Wrapped_Story.bind({});
+export const Fixed_Columns_and_Header = Table_Wrapped_Story.bind({});
+export const Selection = Table_Base_Story.bind({});
+export const Expandable_Row = Table_Base_Story.bind({});
+export const Order_Select_And_Expand_Column = Table_Base_Story.bind({});
+export const Colspan_Rows = Table_Base_Story.bind({});
+export const Sort = Table_Base_Story.bind({});
+export const Sort_Multiple = Table_Base_Story.bind({});
+export const Summary = Table_Base_Story.bind({});
+export const Filter = Table_Base_Story.bind({});
+export const Ellipsis = Table_Base_Story.bind({});
+export const Ellipsis_With_Tooltip = Table_Base_Story.bind({});
+export const Responsive = Table_Base_Story.bind({});
+export const Tree = Table_Base_Story.bind({});
+export const Nested = Table_Base_Story.bind({});
+
+export const Virtual_List: FC = () => {
+    return (
+        <VirtualTable
+            columns={virtualCols}
+            dataSource={virtualData}
+            scroll={{ y: 320, x: 900 }}
+        />
+    );
+};
+
+const tableArgs: Object = {
+    alternateRowColor: true,
+    bordered: true,
+    classNames: 'my-table-class',
+    id: 'myTableId',
+    columns: basicCols,
+    dataSource: data,
+    pagination: {
+        position: ['none', 'bottomRight'],
+        layout: [
+            PaginationLayoutOptions.Total,
+            PaginationLayoutOptions.Sizes,
+            PaginationLayoutOptions.Previous,
+            PaginationLayoutOptions.Pager,
+            PaginationLayoutOptions.Next,
+            PaginationLayoutOptions.Jumper,
+        ],
+        pageSizes: [8, 16],
+        total: 16,
+    },
+};
+
+Basic.args = {
+    ...tableArgs,
+    bordered: false,
+};
+
+Bordered.args = {
+    ...tableArgs,
+};
+
+Cell_Bordered.args = {
+    ...tableArgs,
+    bordered: false,
+    cellBordered: true,
+};
+
+Header_Bordered.args = {
+    ...tableArgs,
+    bordered: false,
+    headerBordered: true,
+};
+
+Inner_Bordered.args = {
+    ...tableArgs,
+    bordered: false,
+    innerBordered: true,
+};
+
+Outer_Bordered.args = {
+    ...tableArgs,
+    bordered: false,
+    outerBordered: true,
+};
+
+Row_Bordered.args = {
+    ...tableArgs,
+    bordered: false,
+    rowBordered: true,
+};
+
+Small.args = {
+    ...tableArgs,
+    size: 'small',
+};
+
+Medium.args = {
+    ...tableArgs,
+    size: 'medium',
+};
+
+Large.args = {
+    ...tableArgs,
+    size: 'large',
+};
+
+Empty.args = {
+    bordered: true,
+    columns: null,
+    dataSource: null,
+};
+
+Header_Grouping.args = {
+    ...tableArgs,
+    scroll: { x: 900 },
+    columns: groupingCols,
+};
+
+Header_And_Footer.args = {
+    ...tableArgs,
+    title: () => 'Header',
+    footer: () => 'Footer',
+};
+
+Fixed_Header.args = {
+    ...tableArgs,
+    scroll: { y: 320 },
+    sticky: true,
+};
+
+Fixed_Columns.args = {
+    ...tableArgs,
+    columns: fixedCols,
+    scroll: { x: 900 },
+    style: {
+        width: '100%',
+    },
+};
+
+Fixed_Columns_and_Header.args = {
+    ...tableArgs,
+    columns: fixedCols,
+    scroll: { x: 900, y: 320 },
+    style: {
+        width: '100%',
+    },
+    sticky: true,
+};
+
+Selection.args = {
+    ...tableArgs,
+    rowSelection: {
+        type: 'checkbox',
+        ...rowSelection,
+    },
+};
+
+Expandable_Row.args = {
+    ...tableArgs,
+    expandableConfig: {
+        expandedRowRender: (record: DataType) => (
+            <p style={{ margin: 0 }}>{record.description}</p>
+        ),
+        rowExpandable: (record: DataType) => record.name !== 'Farida Ashfaq',
+    },
+};
+
+Order_Select_And_Expand_Column.args = {
+    ...tableArgs,
+    columns: orderSelectAndExpandCols,
+    rowSelection: {
+        type: 'checkbox',
+        ...rowSelection,
+    },
+    expandableConfig: {
+        expandedRowRender: (record: DataType) => (
+            <p style={{ margin: 0 }}>{record.description}</p>
+        ),
+        rowExpandable: (record: DataType) => record.name !== 'Farida Ashfaq',
+    },
+};
+
+Colspan_Rows.args = {
+    ...tableArgs,
+    columns: colSpanCols,
+    dataSource: colSpanData,
+    pagination: false,
+};
+
+Sort.args = {
+    ...tableArgs,
+    columns: sortCols,
+};
+
+Sort_Multiple.args = {
+    ...tableArgs,
+    columns: sortMultipleCols,
+};
+
+Summary.args = {
+    ...tableArgs,
+    summary: (): JSX.Element => (
+        <Table.Summary fixed>
+            <Table.Summary.Row>
+                <Table.Summary.Cell index={0}>Summary</Table.Summary.Cell>
+                <Table.Summary.Cell index={1}>
+                    This is a summary content
+                </Table.Summary.Cell>
+            </Table.Summary.Row>
+        </Table.Summary>
+    ),
+};
+
+Filter.args = {
+    ...tableArgs,
+    columns: filterCols,
+};
+
+Ellipsis.args = {
+    ...tableArgs,
+    columns: ellipsisCols,
+};
+
+Ellipsis_With_Tooltip.args = {
+    ...tableArgs,
+    columns: ellipsisTooltipCols,
+};
+
+Responsive.args = {
+    ...tableArgs,
+    columns: responsiveCols,
+};
+
+Tree.args = {
+    ...tableArgs,
+    columns: treeCols,
+    dataSource: treeData,
+    pagination: false,
+};
+
+Nested.args = {
+    ...tableArgs,
+    expandableConfig: {
+        expandedRowRender,
+    },
+};
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
new file mode 100644
index 000000000..a302c8bc4
--- /dev/null
+++ b/src/components/Table/Table.tsx
@@ -0,0 +1,636 @@
+import React, {
+    forwardRef,
+    ReactNode,
+    useCallback,
+    useContext,
+    useMemo,
+    useRef,
+} from 'react';
+import type { Breakpoint } from '../../shared/utilities';
+import { mergeClasses, omit, scrollTo } from '../../shared/utilities';
+import OcTable, { Summary } from './Internal';
+import type { OcTableProps } from './Internal/OcTable.types';
+import { convertChildrenToColumns } from './Internal/Hooks/useColumns';
+import { Spinner, SpinnerSize } from '../Spinner';
+import { Pagination } from '../Pagination';
+import usePagination, {
+    DEFAULT_PAGE_SIZE,
+    getPaginationParam,
+} from './Hooks/usePagination';
+import useLazyKVMap from './Hooks/useLazyKVMap';
+import type {
+    ChangeEventInfo,
+    ColumnGroupType,
+    ColumnType,
+    ExpandableConfig,
+    ExpandType,
+    FilterValue,
+    GetRowKey,
+    SorterResult,
+    TableAction,
+    TableProps,
+} from './Table.types';
+import { EMPTY_LIST, ColumnsType, TablePaginationConfig } from './Table.types';
+import useSelection, {
+    SELECTION_ALL,
+    SELECTION_COLUMN,
+    SELECTION_INVERT,
+    SELECTION_NONE,
+} from './Hooks/useSelection';
+import type { SortState } from './Hooks/useSorter';
+import useSorter, { getSortData } from './Hooks/useSorter';
+import type { FilterState } from './Hooks/useFilter';
+import useFilter, { getFilterData } from './Hooks/useFilter';
+import useTitleColumns from './Hooks/useTitleColumns';
+import renderExpandIcon from './ExpandIcon';
+import SizeContext from './Internal/Context/SizeContext';
+import Column from './Internal/Column';
+import ColumnGroup from './Internal/ColumnGroup';
+import { useBreakpoint } from '../../hooks/useBreakpoint';
+import { useCanvasDirection } from '../../hooks/useCanvasDirection';
+import { Empty, EmptyMode } from '../Empty/index';
+
+import styles from './Styles/table.module.scss';
+
+export { ColumnsType, TablePaginationConfig };
+
+function InternalTable<RecordType extends object = any>(
+    props: TableProps<RecordType>,
+    ref: React.MutableRefObject<HTMLDivElement>
+) {
+    const {
+        alternateRowColor = true,
+        bordered,
+        cancelSortText,
+        cellBordered = false,
+        children,
+        classNames,
+        collapseText,
+        columns,
+        dataSource,
+        emptyText,
+        emptyTextDetails,
+        expandableConfig,
+        expandText,
+        filterCheckallText,
+        filterConfirmText,
+        filterEmptyText,
+        filterResetText,
+        filterSearchPlaceholderText,
+        getPopupContainer,
+        headerBordered = false,
+        indentSize,
+        innerBordered = false,
+        loading,
+        onChange,
+        outerBordered = false,
+        pagination,
+        rowBordered = false,
+        rowClassName,
+        rowKey,
+        rowSelection,
+        scroll,
+        selectInvertText,
+        selectionAllText,
+        selectNoneText,
+        showSorterTooltip = true,
+        size: customizeSize,
+        sortDirections,
+        style,
+        triggerAscText,
+        triggerDescText,
+    } = props;
+
+    const baseColumns: ColumnsType<RecordType> = useMemo(
+        () =>
+            columns ||
+            (convertChildrenToColumns(children) as ColumnsType<RecordType>),
+        [columns, children]
+    );
+    const needResponsive: boolean = useMemo(
+        () => baseColumns.some((col: ColumnType<RecordType>) => col.responsive),
+        [baseColumns]
+    );
+
+    const screens: Partial<Record<Breakpoint, boolean>> =
+        useBreakpoint(needResponsive);
+
+    const mergedColumns: (
+        | ColumnGroupType<RecordType>
+        | ColumnType<RecordType>
+    )[] = useMemo(() => {
+        const matched = new Set(
+            Object.keys(screens).filter((m: Breakpoint) => screens[m])
+        );
+
+        return baseColumns.filter(
+            (c) =>
+                !c.responsive ||
+                c.responsive.some((r: Breakpoint) => matched.has(r))
+        );
+    }, [baseColumns, screens]);
+
+    const tableProps = omit(props, [
+        'classNames',
+        'style',
+        'columns',
+    ]) as TableProps<RecordType>;
+
+    const size = useContext(SizeContext);
+    const htmlDir: string = useCanvasDirection();
+    const mergedSize = customizeSize || size;
+    const rawData: readonly RecordType[] = dataSource || EMPTY_LIST;
+
+    const mergedExpandableConfig: ExpandableConfig<RecordType> = {
+        ...expandableConfig,
+    };
+
+    const { childrenColumnName = 'children' } = mergedExpandableConfig;
+
+    const expandType: ExpandType = useMemo<ExpandType>(() => {
+        if (rawData.some((item) => (item as any)?.[childrenColumnName])) {
+            return 'nest';
+        }
+
+        if (expandableConfig?.expandedRowRender) {
+            return 'row';
+        }
+
+        return null;
+    }, [rawData]);
+
+    const internalRefs = {
+        body: useRef<HTMLDivElement>(),
+    };
+
+    // ============================ RowKey ============================
+    const getRowKey = useMemo<GetRowKey<RecordType>>(() => {
+        if (typeof rowKey === 'function') {
+            return rowKey;
+        }
+
+        return (record: RecordType) => (record as any)?.[rowKey as string];
+    }, [rowKey]);
+
+    const [getRecordByKey] = useLazyKVMap(
+        rawData,
+        childrenColumnName,
+        getRowKey
+    );
+
+    // ============================ Events =============================
+    const changeEventInfo: Partial<ChangeEventInfo<RecordType>> = {};
+
+    const triggerOnChange = (
+        info: Partial<ChangeEventInfo<RecordType>>,
+        action: TableAction,
+        reset: boolean = false
+    ) => {
+        const changeInfo = {
+            ...changeEventInfo,
+            ...info,
+        };
+
+        if (reset) {
+            changeEventInfo.resetPagination!();
+
+            // Reset event param
+            if (changeInfo.pagination!.currentPage) {
+                changeInfo.pagination!.currentPage = 1;
+            }
+
+            // Trigger pagination events
+            if (pagination) {
+                pagination.onCurrentChange?.(
+                    changeInfo.pagination!.currentPage!
+                );
+                pagination.onSizeChange?.(changeInfo.pagination!.pageSize!);
+            }
+        }
+
+        if (
+            scroll &&
+            scroll.scrollToFirstRowOnChange !== false &&
+            internalRefs.body.current
+        ) {
+            scrollTo(0, {
+                getContainer: () => internalRefs.body.current!,
+            });
+        }
+
+        onChange?.(
+            changeInfo.pagination!,
+            changeInfo.filters!,
+            changeInfo.sorter!,
+            {
+                currentDataSource: getFilterData(
+                    getSortData(
+                        rawData,
+                        changeInfo.sorterStates!,
+                        childrenColumnName
+                    ),
+                    changeInfo.filterStates!
+                ),
+                action,
+            }
+        );
+    };
+
+    // ============================ Sorter =============================
+    const onSorterChange = (
+        sorter: SorterResult<RecordType> | SorterResult<RecordType>[],
+        sorterStates: SortState<RecordType>[]
+    ) => {
+        triggerOnChange(
+            {
+                sorter,
+                sorterStates,
+            },
+            'sort',
+            false
+        );
+    };
+    const [transformSorterColumns, sortStates, sorterTitleProps, getSorters] =
+        useSorter<RecordType>({
+            cancelSortText,
+            mergedColumns,
+            onSorterChange,
+            sortDirections: sortDirections || ['ascend', 'descend'],
+            triggerAscText,
+            triggerDescText,
+            showSorterTooltip,
+        });
+    const sortedData = useMemo(
+        () => getSortData(rawData, sortStates, childrenColumnName),
+        [rawData, sortStates]
+    );
+
+    changeEventInfo.sorter = getSorters();
+    changeEventInfo.sorterStates = sortStates;
+
+    // ============================ Filter ============================
+    const onFilterChange = (
+        filters: Record<string, FilterValue>,
+        filterStates: FilterState<RecordType>[]
+    ) => {
+        triggerOnChange(
+            {
+                filters,
+                filterStates,
+            },
+            'filter',
+            true
+        );
+    };
+
+    const [transformFilterColumns, filterStates, getFilters] =
+        useFilter<RecordType>({
+            mergedColumns,
+            filterConfirmText,
+            filterResetText,
+            filterEmptyText,
+            filterCheckallText,
+            filterSearchPlaceholderText,
+            onFilterChange,
+            getPopupContainer,
+        });
+    const mergedData = getFilterData(sortedData, filterStates);
+
+    changeEventInfo.filters = getFilters();
+    changeEventInfo.filterStates = filterStates;
+
+    // ============================ Column ============================
+    const columnTitleProps = useMemo(
+        () => ({
+            ...sorterTitleProps,
+        }),
+        [sorterTitleProps]
+    );
+    const [transformTitleColumns] = useTitleColumns(columnTitleProps);
+
+    // ========================== Pagination ==========================
+    const onPaginationChange = (currentPage: number, pageSize: number) => {
+        triggerOnChange(
+            {
+                pagination: {
+                    ...changeEventInfo.pagination,
+                    currentPage,
+                    pageSize,
+                },
+            },
+            'paginate'
+        );
+    };
+
+    const [mergedPagination, resetPagination] = usePagination(
+        mergedData.length,
+        pagination,
+        onPaginationChange
+    );
+
+    changeEventInfo.pagination =
+        pagination === false
+            ? {}
+            : getPaginationParam(pagination, mergedPagination);
+
+    changeEventInfo.resetPagination = resetPagination;
+
+    // ============================= Data =============================
+    const pageData = useMemo<RecordType[]>(() => {
+        if (pagination === false || !mergedPagination.pageSize) {
+            return mergedData;
+        }
+
+        const {
+            currentPage = 1,
+            total,
+            pageSize = DEFAULT_PAGE_SIZE,
+        } = mergedPagination;
+
+        // Dynamic table data
+        if (mergedData.length < total!) {
+            if (mergedData.length > pageSize) {
+                return mergedData.slice(
+                    (currentPage - 1) * pageSize,
+                    currentPage * pageSize
+                );
+            }
+            return mergedData;
+        }
+
+        return mergedData.slice(
+            (currentPage - 1) * pageSize,
+            currentPage * pageSize
+        );
+    }, [
+        !!pagination,
+        mergedData,
+        mergedPagination?.currentPage,
+        mergedPagination?.pageSize,
+        mergedPagination?.total,
+    ]);
+
+    // ========================== Selections ==========================
+    const [transformSelectionColumns, selectedKeySet] =
+        useSelection<RecordType>(rowSelection, {
+            data: mergedData,
+            emptyText,
+            emptyTextDetails,
+            pageData,
+            getRowKey,
+            getRecordByKey,
+            expandType,
+            childrenColumnName,
+            getPopupContainer,
+            selectionAllText,
+            selectInvertText,
+            selectNoneText,
+        });
+
+    const internalRowClassName = (
+        record: RecordType,
+        index: number,
+        indent: number
+    ) => {
+        let mergedRowClassName;
+        if (typeof rowClassName === 'function') {
+            mergedRowClassName = mergeClasses([
+                rowClassName(record, index, indent),
+            ]);
+        } else {
+            mergedRowClassName = mergeClasses([rowClassName]);
+        }
+
+        return mergeClasses(
+            {
+                [styles.tableRowSelected]: selectedKeySet.has(
+                    getRowKey(record, index)
+                ),
+            },
+            mergedRowClassName
+        );
+    };
+
+    // ========================== Expandable ==========================
+
+    mergedExpandableConfig.expandIcon = renderExpandIcon(
+        expandText,
+        collapseText
+    );
+
+    // Indent size
+    if (typeof mergedExpandableConfig.indentSize !== 'number') {
+        mergedExpandableConfig.indentSize =
+            typeof indentSize === 'number' ? indentSize : 15;
+    }
+
+    // ============================ Render ============================
+    const transformColumns = useCallback(
+        (innerColumns: ColumnsType<RecordType>): ColumnsType<RecordType> =>
+            transformTitleColumns(
+                transformSelectionColumns(
+                    transformFilterColumns(transformSorterColumns(innerColumns))
+                )
+            ),
+        [
+            transformSorterColumns,
+            transformFilterColumns,
+            transformSelectionColumns,
+        ]
+    );
+
+    let topPaginationNode: React.ReactNode;
+    let bottomPaginationNode: React.ReactNode;
+    if (pagination !== false && mergedPagination?.total) {
+        let paginationSize: TablePaginationConfig['pageSize'];
+        if (mergedPagination.pageSize) {
+            paginationSize = mergedPagination.pageSize;
+        } else {
+            paginationSize = undefined;
+        }
+
+        const renderPagination = (position: string) => (
+            <Pagination
+                {...mergedPagination}
+                classNames={mergeClasses([
+                    styles.tablePagination,
+                    {
+                        [styles.tablePaginationLeft]:
+                            position.indexOf('left') !== -1,
+                    },
+                    {
+                        [styles.tablePaginationCenter]:
+                            position.indexOf('center') !== -1,
+                    },
+                    {
+                        [styles.tablePaginationRight]:
+                            position.indexOf('right') !== -1,
+                    },
+                    mergedPagination.className,
+                ])}
+                pageSize={paginationSize}
+                total={mergedPagination?.total}
+            />
+        );
+        const defaultPosition = htmlDir === 'rtl' ? 'left' : 'right';
+        const { position } = mergedPagination;
+        if (position !== null && Array.isArray(position)) {
+            const topPos = position.find((p) => p.indexOf('top') !== -1);
+            const bottomPos = position.find((p) => p.indexOf('bottom') !== -1);
+            const isDisable = position.every((p) => `${p}` === 'none');
+            if (!topPos && !bottomPos && !isDisable) {
+                bottomPaginationNode = renderPagination(defaultPosition);
+            }
+            if (topPos) {
+                topPaginationNode = renderPagination(
+                    topPos!.toLowerCase().replace('top', '')
+                );
+            }
+            if (bottomPos) {
+                bottomPaginationNode = renderPagination(
+                    bottomPos!.toLowerCase().replace('bottom', '')
+                );
+            }
+        } else {
+            bottomPaginationNode = renderPagination(defaultPosition);
+        }
+    }
+
+    if (typeof loading === 'boolean') {
+        return <Spinner size={SpinnerSize.Large} />;
+    } else if (typeof loading === 'object') {
+        return <Spinner size={SpinnerSize.Large} />;
+    }
+
+    const renderEmpty = (
+        emptyText: ReactNode,
+        emptyTextDetails?: string
+    ): ReactNode => {
+        if (typeof emptyText === 'string') {
+            if (emptyTextDetails) {
+                return (
+                    <Empty
+                        title={emptyText}
+                        description={emptyTextDetails}
+                        mode={EmptyMode.data}
+                    />
+                );
+            }
+            return <Empty title={emptyText} mode={EmptyMode.data} />;
+        } else {
+            return emptyText;
+        }
+    };
+
+    const wrapperClassNames: string = mergeClasses([
+        styles.tableWrapper,
+        { [styles.tableWrapperRtl]: htmlDir === 'rtl' },
+        classNames,
+    ]);
+    return (
+        <div ref={ref} className={wrapperClassNames} style={style}>
+            {topPaginationNode}
+            <OcTable<RecordType>
+                {...tableProps}
+                columns={mergedColumns as OcTableProps<RecordType>['columns']}
+                direction={htmlDir}
+                expandableConfig={mergedExpandableConfig}
+                classNames={mergeClasses([
+                    styles.table,
+                    { [styles.tableRtl]: htmlDir === 'rtl' },
+                    { [styles.tableMedium]: mergedSize === 'medium' },
+                    { [styles.tableSmall]: mergedSize === 'small' },
+                    { [styles.tableAlternate]: alternateRowColor },
+                    { [styles.tableBordered]: bordered },
+                    {
+                        [styles.tableCellBordered]:
+                            !bordered &&
+                            !rowBordered &&
+                            !innerBordered &&
+                            cellBordered,
+                    },
+                    {
+                        [styles.tableHeaderBordered]:
+                            !bordered &&
+                            !rowBordered &&
+                            !innerBordered &&
+                            headerBordered,
+                    },
+                    {
+                        [styles.tableInnerBordered]:
+                            !bordered && !rowBordered && innerBordered,
+                    },
+                    { [styles.tableOuterBordered]: !bordered && outerBordered },
+                    {
+                        [styles.tableRowBordered]:
+                            !bordered && !innerBordered && rowBordered,
+                    },
+                    { [styles.tableEmpty]: rawData.length === 0 },
+                ])}
+                data={pageData}
+                rowKey={getRowKey}
+                rowClassName={internalRowClassName}
+                emptyText={renderEmpty(emptyText, emptyTextDetails)}
+                transformColumns={
+                    transformColumns as OcTableProps<RecordType>['transformColumns']
+                }
+            />
+            {bottomPaginationNode}
+        </div>
+    );
+}
+
+const ForwardTable = forwardRef(InternalTable) as <
+    RecordType extends object = any
+>(
+    props: React.PropsWithChildren<TableProps<RecordType>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }
+) => React.ReactElement;
+
+type InternalTableType = typeof ForwardTable;
+
+interface TableInterface extends InternalTableType {
+    defaultProps?: Partial<TableProps<any>>;
+    SELECTION_COLUMN: typeof SELECTION_COLUMN;
+    EXPAND_COLUMN: typeof OcTable.EXPAND_COLUMN;
+    SELECTION_ALL: 'SELECT_ALL';
+    SELECTION_INVERT: 'SELECT_INVERT';
+    SELECTION_NONE: 'SELECT_NONE';
+    Column: typeof Column;
+    ColumnGroup: typeof ColumnGroup;
+    Summary: typeof Summary;
+}
+
+const Table = ForwardTable as TableInterface;
+
+Table.defaultProps = {
+    filterConfirmText: 'OK',
+    filterResetText: 'Reset',
+    filterEmptyText: 'No filters',
+    filterCheckallText: 'Select all items',
+    filterSearchPlaceholderText: 'Search in filters',
+    emptyText: 'Short Message Here',
+    emptyTextDetails:
+        'More detail on how might the user be able to get around this',
+    selectInvertText: 'Invert current page',
+    selectNoneText: 'Clear all data',
+    selectionAllText: 'Select all data',
+    expandText: 'Expand row',
+    collapseText: 'Collapse row',
+    triggerDescText: 'Click to sort descending',
+    triggerAscText: 'Click to sort ascending',
+    cancelSortText: 'Click to cancel sorting',
+    rowKey: 'key',
+};
+
+Table.SELECTION_COLUMN = SELECTION_COLUMN;
+Table.EXPAND_COLUMN = OcTable.EXPAND_COLUMN;
+Table.SELECTION_ALL = SELECTION_ALL;
+Table.SELECTION_INVERT = SELECTION_INVERT;
+Table.SELECTION_NONE = SELECTION_NONE;
+Table.Column = Column;
+Table.ColumnGroup = ColumnGroup;
+Table.Summary = Summary;
+
+export default Table;
diff --git a/src/components/Table/Table.types.tsx b/src/components/Table/Table.types.tsx
new file mode 100644
index 000000000..6bc167362
--- /dev/null
+++ b/src/components/Table/Table.types.tsx
@@ -0,0 +1,253 @@
+import type * as React from 'react';
+import type {
+    ColumnType as OcColumnType,
+    RenderedCell as OcRenderedCell,
+    FixedType,
+    OcTableProps,
+} from './Internal/OcTable.types';
+import { GetRowKey, ExpandableConfig } from './Internal/OcTable.types';
+import type { TooltipProps } from '../Tooltip/Tooltip.types';
+import type { CheckboxProps } from '../Selectors';
+import type { PaginationProps } from '../Pagination';
+import type { Breakpoint } from '../../shared/utilities';
+import { tuple } from '../../shared/utilities';
+import type { INTERNAL_SELECTION_ITEM } from './Hooks/useSelection';
+import { FilterState } from './Hooks/useFilter';
+import { SortState } from './Hooks/useSorter';
+import { SpinnerProps } from '../Spinner';
+import type { SizeType } from './Internal/Context/SizeContext';
+
+export { GetRowKey, ExpandableConfig };
+
+export type Key = React.Key;
+
+export type RowSelectionType = 'checkbox' | 'radio';
+
+export type SelectionItemSelectFn = (currentRowKeys: Key[]) => void;
+
+export type ExpandType = null | 'row' | 'nest';
+
+export type SortOrder = 'descend' | 'ascend' | null;
+
+const TableActions = tuple('paginate', 'sort', 'filter');
+export type TableAction = typeof TableActions[number];
+
+export type CompareFn<T> = (a: T, b: T, sortOrder?: SortOrder) => number;
+
+export interface ColumnFilterItem {
+    text: React.ReactNode;
+    value: string | number | boolean;
+    children?: ColumnFilterItem[];
+}
+
+export interface ColumnTitleProps<RecordType> {
+    filters?: Record<string, string[]>;
+    sortColumns?: { column: ColumnType<RecordType>; order: SortOrder }[];
+}
+
+export type ColumnTitle<RecordType> =
+    | React.ReactNode
+    | ((props: ColumnTitleProps<RecordType>) => React.ReactNode);
+
+export type FilterValue = (Key | boolean)[];
+export type FilterKey = Key[] | null;
+export type FilterSearchType =
+    | boolean
+    | ((input: string, record: {}) => boolean);
+export interface FilterConfirmProps {
+    closeDropdown: boolean;
+}
+
+export interface FilterDropdownProps {
+    clearFilters?: () => void;
+    confirm: (param?: FilterConfirmProps) => void;
+    filters?: ColumnFilterItem[];
+    selectedKeys: React.Key[];
+    setSelectedKeys: (selectedKeys: React.Key[]) => void;
+    visible: boolean;
+}
+
+export interface ColumnType<RecordType>
+    extends Omit<OcColumnType<RecordType>, 'title'> {
+    defaultFilteredValue?: FilterValue | null;
+    defaultSortOrder?: SortOrder;
+    filtered?: boolean;
+    filteredValue?: FilterValue | null;
+    filterDropdown?:
+        | React.ReactNode
+        | ((props: FilterDropdownProps) => React.ReactNode);
+    filterMode?: 'menu' | 'tree';
+    filterMultiple?: boolean;
+    filters?: ColumnFilterItem[];
+    filterSearch?: FilterSearchType;
+    onFilter?: (
+        value: string | number | boolean,
+        record: RecordType
+    ) => boolean;
+    filterDropdownVisible?: boolean;
+    filterResetToDefaultFilteredValue?: boolean;
+    onFilterDropdownVisibleChange?: (visible: boolean) => void;
+    /**
+     * Determines the breakpoint when the colomn will hide/show
+     */
+    responsive?: Breakpoint[];
+    showSorterTooltip?: boolean | TooltipProps;
+    sortDirections?: SortOrder[];
+    sorter?:
+        | boolean
+        | CompareFn<RecordType>
+        | {
+              compare?: CompareFn<RecordType>;
+              /** Config multiple sorter order priority */
+              multiple?: number;
+          };
+    sortOrder?: SortOrder;
+    title?: ColumnTitle<RecordType>;
+}
+
+export interface ColumnGroupType<RecordType>
+    extends Omit<ColumnType<RecordType>, 'dataIndex'> {
+    children: ColumnsType<RecordType>;
+}
+
+export type ColumnsType<RecordType = unknown> = (
+    | ColumnGroupType<RecordType>
+    | ColumnType<RecordType>
+)[];
+
+export interface SelectionItem {
+    key: string;
+    onSelect?: SelectionItemSelectFn;
+    text: React.ReactNode;
+}
+
+export type SelectionSelectFn<T> = (
+    record: T,
+    selected: boolean,
+    selectedRows: T[],
+    nativeEvent: Event
+) => void;
+
+export interface TableRowSelection<T> {
+    checkStrictly?: boolean;
+    columnWidth?: string | number;
+    columnTitle?: string | React.ReactNode;
+    defaultSelectedRowKeys?: Key[];
+    fixed?: FixedType;
+    getCheckboxProps?: (
+        record: T
+    ) => Partial<Omit<CheckboxProps, 'checked' | 'defaultChecked'>>;
+    hideSelectAll?: boolean;
+    /** Keep the selection keys in list
+     * even the key not exist in `dataSource` anymore
+     **/
+    preserveSelectedRowKeys?: boolean;
+    selectedRowKeys?: Key[];
+    selections?: INTERNAL_SELECTION_ITEM[] | boolean;
+    type?: RowSelectionType;
+    onChange?: (selectedRowKeys: Key[], selectedRows: T[]) => void;
+    onSelect?: SelectionSelectFn<T>;
+    renderCell?: (
+        value: boolean,
+        record: T,
+        index: number,
+        originNode: React.ReactNode
+    ) => React.ReactNode | OcRenderedCell<T>;
+}
+
+export type TransformColumns<RecordType> = (
+    columns: ColumnsType<RecordType>
+) => ColumnsType<RecordType>;
+
+export interface TableCurrentDataSource<RecordType> {
+    action: TableAction;
+    currentDataSource: RecordType[];
+}
+
+export interface SorterResult<RecordType> {
+    column?: ColumnType<RecordType>;
+    columnKey?: Key;
+    field?: Key | readonly Key[];
+    order?: SortOrder;
+}
+
+export type GetPopupContainer = (triggerNode: HTMLElement) => HTMLElement;
+
+type TablePaginationPosition =
+    | 'topLeft'
+    | 'topCenter'
+    | 'topRight'
+    | 'bottomLeft'
+    | 'bottomCenter'
+    | 'bottomRight';
+
+export interface TablePaginationConfig extends Omit<PaginationProps, 'total'> {
+    position?: TablePaginationPosition[];
+    total?: number;
+}
+
+// =================== Table ===================
+
+export const EMPTY_LIST: any[] = [];
+
+export interface ChangeEventInfo<RecordType> {
+    pagination: {
+        currentPage?: number;
+        pageSize?: number;
+        total: number;
+    };
+    filters: Record<string, FilterValue | null>;
+    sorter: SorterResult<RecordType> | SorterResult<RecordType>[];
+
+    filterStates: FilterState<RecordType>[];
+    sorterStates: SortState<RecordType>[];
+
+    resetPagination: Function;
+}
+
+export interface TableProps<RecordType>
+    extends Omit<
+        OcTableProps<RecordType>,
+        'data' | 'columns' | 'scroll' | 'emptyText'
+    > {
+    alternateRowColor?: boolean;
+    bordered?: boolean;
+    cancelSortText?: string;
+    cellBordered?: boolean;
+    collapseText?: string;
+    columns?: ColumnsType<RecordType>;
+    dataSource?: OcTableProps<RecordType>['data'];
+    emptyText?: React.ReactNode | (() => React.ReactNode);
+    emptyTextDetails?: string;
+    expandText?: string;
+    innerBordered?: boolean;
+    loading?: boolean | SpinnerProps;
+    pagination?: false | TablePaginationConfig;
+    filterCheckallText?: string;
+    filterConfirmText?: string;
+    filterEmptyText?: string;
+    filterResetText?: string;
+    filterSearchPlaceholderText?: string;
+    getPopupContainer?: GetPopupContainer;
+    headerBordered?: boolean;
+    onChange?: (
+        pagination: TablePaginationConfig,
+        filters: Record<string, FilterValue | null>,
+        sorter: SorterResult<RecordType> | SorterResult<RecordType>[],
+        extra: TableCurrentDataSource<RecordType>
+    ) => void;
+    outerBordered?: boolean;
+    rowBordered?: boolean;
+    rowSelection?: TableRowSelection<RecordType>;
+    scroll?: OcTableProps<RecordType>['scroll'] & {
+        scrollToFirstRowOnChange?: boolean;
+    };
+    selectionAllText?: string;
+    selectInvertText?: string;
+    selectNoneText?: string;
+    showSorterTooltip?: boolean | TooltipProps;
+    size?: SizeType;
+    sortDirections?: SortOrder[];
+    triggerAscText?: string;
+    triggerDescText?: string;
+}
diff --git a/src/components/Table/Tests/Table.expand.test.tsx b/src/components/Table/Tests/Table.expand.test.tsx
new file mode 100644
index 000000000..35ff0aced
--- /dev/null
+++ b/src/components/Table/Tests/Table.expand.test.tsx
@@ -0,0 +1,83 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Table from '../index';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const columns = [
+    {
+        title: 'Name',
+        key: 'name',
+        dataIndex: 'name',
+    },
+];
+
+const John = {
+    key: '1',
+    firstName: 'John',
+    lastName: 'Brown',
+    age: 32,
+};
+
+const Jim = {
+    key: '2',
+    firstName: 'Jim',
+    lastName: 'Green',
+    age: 42,
+};
+
+const data = [
+    {
+        ...John,
+
+        children: [
+            {
+                ...Jim,
+            },
+        ],
+    },
+];
+
+describe('Table.expand', () => {
+    beforeAll(() => {
+        Object.defineProperty(window, 'matchMedia', {
+            writable: true,
+            value: jest.fn().mockImplementation((query) => ({
+                matches: false,
+                media: query,
+                onchange: null,
+                addListener: jest.fn(), // Deprecated
+                removeListener: jest.fn(), // Deprecated
+                addEventListener: jest.fn(),
+                removeEventListener: jest.fn(),
+                dispatchEvent: jest.fn(),
+            })),
+        });
+    });
+
+    it('click to expand', () => {
+        const wrapper = mount(<Table columns={columns} dataSource={data} />);
+        wrapper.find('.table-row-expand-icon').last().simulate('click');
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('row indent padding should be 0px when indentSize defined as 0', () => {
+        const wrapper = mount(
+            <Table
+                indentSize={0}
+                columns={columns}
+                dataSource={data}
+                expandableConfig={{
+                    expandIcon: () => <div className="expand-icon" />,
+                }}
+            />
+        );
+        const button = wrapper.find('.table-row-expand-icon').at(0);
+        button.simulate('click');
+        expect(
+            wrapper.find('.indent-level-1').at(0).prop('style')
+        ).toHaveProperty('paddingLeft', '0px');
+    });
+});
diff --git a/src/components/Table/Tests/Table.filter.test.js b/src/components/Table/Tests/Table.filter.test.js
new file mode 100644
index 000000000..9b584c2b7
--- /dev/null
+++ b/src/components/Table/Tests/Table.filter.test.js
@@ -0,0 +1,411 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Table from '..';
+import { Tooltip } from '../../Tooltip';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Table.filter', () => {
+    beforeAll(() => {
+        Object.defineProperty(window, 'matchMedia', {
+            writable: true,
+            value: jest.fn().mockImplementation((query) => ({
+                matches: false,
+                media: query,
+                onchange: null,
+                addListener: jest.fn(), // Deprecated
+                removeListener: jest.fn(), // Deprecated
+                addEventListener: jest.fn(),
+                removeEventListener: jest.fn(),
+                dispatchEvent: jest.fn(),
+            })),
+        });
+    });
+
+    window.requestAnimationFrame = (callback) =>
+        window.setTimeout(callback, 16);
+    window.cancelAnimationFrame = window.clearTimeout;
+
+    const filterFn = (value, record) => record.name.indexOf(value) !== -1;
+    const column = {
+        title: 'Name',
+        dataIndex: 'name',
+        filters: [
+            { text: 'Boy', value: 'boy' },
+            { text: 'Girl', value: 'girl' },
+            {
+                text: 'Title',
+                value: 'title',
+                children: [
+                    { text: 'Designer', value: 'designer' },
+                    { text: 'Coder', value: 'coder' },
+                ],
+            },
+        ],
+        onFilter: filterFn,
+    };
+
+    const data = [
+        { key: 0, name: 'Jack' },
+        { key: 1, name: 'Lucy' },
+        { key: 2, name: 'Tom' },
+        { key: 3, name: 'Jerry' },
+    ];
+
+    const longData = [];
+    for (let i = 0; i < 100; i += 1) {
+        longData.push({
+            key: i.toString(),
+            name: 'name',
+        });
+    }
+
+    function createTable(props) {
+        return (
+            <Table
+                columns={[column]}
+                dataSource={data}
+                pagination={false}
+                {...props}
+            />
+        );
+    }
+
+    function renderedNames(wrapper) {
+        return wrapper.find('BodyRow').map((row) => row.props().record.name);
+    }
+
+    it('not show filter icon when undefined', () => {
+        const noFilterColumn = { ...column, filters: undefined };
+        delete noFilterColumn.onFilter;
+        const wrapper = mount(
+            createTable({
+                columns: [noFilterColumn],
+            })
+        );
+
+        expect(wrapper.find('.table-filter-column')).toHaveLength(0);
+    });
+
+    it('not show filter icon when filter and filterDropdown is undefined', () => {
+        const noFilterColumn = {
+            ...column,
+            filters: undefined,
+            filterDropdown: undefined,
+        };
+        delete noFilterColumn.onFilter;
+        const wrapper = mount(
+            createTable({
+                columns: [noFilterColumn],
+            })
+        );
+
+        expect(wrapper.find('.table-filter-column')).toHaveLength(0);
+    });
+
+    it('renders filter correctly', () => {
+        const wrapper = mount(createTable());
+
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('can be controlled by filteredValue', () => {
+        const wrapper = mount(
+            createTable({
+                columns: [
+                    {
+                        ...column,
+                        filteredValue: ['Lucy'],
+                    },
+                ],
+            })
+        );
+
+        expect(wrapper.find('tbody tr').length).toBe(1);
+        wrapper.setProps({
+            columns: [
+                {
+                    ...column,
+                    filteredValue: [],
+                },
+            ],
+        });
+        expect(wrapper.find('tbody tr').length).toBe(4);
+    });
+
+    it('should handle filteredValue and non-array filterValue as expected', () => {
+        const wrapper = mount(
+            createTable({
+                columns: [
+                    {
+                        ...column,
+                        filteredValue: ['Lucy', 12, true],
+                    },
+                ],
+            })
+        );
+        function getFilterMenu() {
+            return wrapper.find('FilterDropdown');
+        }
+
+        expect(getFilterMenu().props().filterState.filteredKeys).toEqual([
+            'Lucy',
+            '12',
+            'true',
+        ]);
+
+        wrapper.setProps({
+            columns: [
+                {
+                    ...column,
+                    filteredValue: null,
+                },
+            ],
+        });
+        expect(getFilterMenu().props().filterState.filteredKeys).toEqual(null);
+    });
+
+    it('can be controlled by filteredValue null', () => {
+        const wrapper = mount(
+            createTable({
+                columns: [
+                    {
+                        ...column,
+                        filteredValue: ['Lucy'],
+                    },
+                ],
+            })
+        );
+
+        expect(wrapper.find('tbody tr').length).toBe(1);
+        wrapper.setProps({
+            columns: [
+                {
+                    ...column,
+                    filteredValue: null,
+                },
+            ],
+        });
+        expect(wrapper.find('tbody tr').length).toBe(4);
+    });
+
+    it('can read defaults from defaultFilteredValue', () => {
+        const wrapper = mount(
+            createTable({
+                columns: [
+                    {
+                        ...column,
+                        defaultFilteredValue: ['Lucy'],
+                    },
+                ],
+            })
+        );
+        expect(wrapper.find('tbody tr').length).toBe(1);
+        expect(wrapper.find('tbody tr').text()).toBe('Lucy');
+
+        // Should properly ignore further defaultFilteredValue changes
+        wrapper.setProps({
+            columns: [
+                {
+                    ...column,
+                    defaultFilteredValue: [],
+                },
+            ],
+        });
+        expect(wrapper.find('tbody tr').length).toBe(1);
+        expect(wrapper.find('tbody tr').text()).toBe('Lucy');
+
+        // Should properly be overidden by non-null filteredValue
+        wrapper.setProps({
+            columns: [
+                {
+                    ...column,
+                    defaultFilteredValue: ['Lucy'],
+                    filteredValue: ['Tom'],
+                },
+            ],
+        });
+        expect(wrapper.find('tbody tr').length).toBe(1);
+        expect(wrapper.find('tbody tr').text()).toBe('Tom');
+
+        // Should properly be overidden by a null filteredValue
+        wrapper.setProps({
+            columns: [
+                {
+                    ...column,
+                    defaultFilteredValue: ['Lucy'],
+                    filteredValue: null,
+                },
+            ],
+        });
+        expect(wrapper.find('tbody tr').length).toBe(4);
+    });
+
+    it('works with grouping columns in controlled mode', () => {
+        const columns = [
+            {
+                title: 'group',
+                key: 'group',
+                children: [
+                    {
+                        title: 'Name',
+                        dataIndex: 'name',
+                        key: 'name',
+                        filters: [
+                            { text: 'Jack', value: 'Jack' },
+                            { text: 'Lucy', value: 'Lucy' },
+                        ],
+                        onFilter: filterFn,
+                        filteredValue: ['Jack'],
+                    },
+                    {
+                        title: 'Age',
+                        dataIndex: 'age',
+                        key: 'age',
+                    },
+                ],
+            },
+        ];
+        const testData = [
+            { key: 0, name: 'Jack', age: 11 },
+            { key: 1, name: 'Lucy', age: 20 },
+            { key: 2, name: 'Tom', age: 21 },
+            { key: 3, name: 'Jerry', age: 22 },
+        ];
+        const wrapper = mount(
+            <Table columns={columns} dataSource={testData} />
+        );
+
+        expect(renderedNames(wrapper)).toEqual(['Jack']);
+    });
+
+    it('renders custom filter icon as string correctly', () => {
+        const filterIcon = () => 'string';
+        const wrapper = mount(
+            createTable({
+                columns: [
+                    {
+                        ...column,
+                        filterIcon,
+                    },
+                ],
+            })
+        );
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('renders custom filter icon with right Tooltip title', () => {
+        const filterIcon = () => (
+            <Tooltip title="title" visible>
+                Tooltip
+            </Tooltip>
+        );
+        const wrapper = mount(
+            createTable({
+                columns: [
+                    {
+                        ...column,
+                        filterIcon,
+                    },
+                ],
+            })
+        );
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('pass visible prop to filterDropdown', () => {
+        const filterDropdownMock = jest.fn().mockReturnValue(<span>test</span>);
+        const filterDropdown = (...args) => filterDropdownMock(...args);
+
+        const Test = () => (
+            <Table
+                rowKey="name"
+                columns={[
+                    {
+                        title: 'Name',
+                        dataIndex: 'name',
+                        filterDropdown,
+                    },
+                ]}
+                dataSource={[
+                    {
+                        name: 'Jack',
+                    },
+                ]}
+            />
+        );
+
+        mount(<Test />);
+        expect(filterDropdownMock).toHaveBeenCalledWith(
+            expect.objectContaining({
+                visible: false,
+            })
+        );
+    });
+
+    it('should not crash', () => {
+        class TestTable extends React.Component {
+            state = {
+                cols: [],
+            };
+
+            componentDidMount() {
+                this.setState({
+                    cols: [
+                        {
+                            title: 'test',
+                            itemKey: 'test',
+                            filterDropdown: 123,
+                        },
+                    ],
+                });
+            }
+
+            render() {
+                const { cols } = this.state;
+                return (
+                    <Table
+                        columns={cols}
+                        dataSource={[]}
+                        scroll={{ x: 1000 }}
+                    />
+                );
+            }
+        }
+
+        mount(<TestTable />);
+    });
+
+    it('with onFilter', () => {
+        const onFilter = jest.fn((value, record) => record.key === value);
+        const columns = [{ dataIndex: 'key', filteredValue: [5], onFilter }];
+        const testData = [{ key: 1 }, { key: 3 }, { key: 5 }];
+        const wrapper = mount(
+            <Table columns={columns} dataSource={testData} />
+        );
+
+        expect(onFilter).toHaveBeenCalled();
+        expect(wrapper.find('tbody tr')).toHaveLength(1);
+    });
+
+    it('jsx work', () => {
+        const wrapper = mount(
+            <Table dataSource={data}>
+                <Table.Column
+                    title="Name"
+                    dataIndex="name"
+                    filters={[
+                        { text: 'Jack', value: 'Jack' },
+                        { text: 'Lucy', value: 'Lucy' },
+                    ]}
+                    onFilter={(value, record) => record.name.includes(value)}
+                    defaultFilteredValue={['Jack']}
+                />
+            </Table>
+        );
+
+        expect(wrapper.find('tbody tr')).toHaveLength(1);
+        expect(wrapper.find('tbody tr td').text()).toEqual('Jack');
+    });
+});
diff --git a/src/components/Table/Tests/Table.order.test.js b/src/components/Table/Tests/Table.order.test.js
new file mode 100644
index 000000000..6dd77cc63
--- /dev/null
+++ b/src/components/Table/Tests/Table.order.test.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Table from '../index';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Table.order', () => {
+    window.requestAnimationFrame = (callback) =>
+        window.setTimeout(callback, 16);
+    window.cancelAnimationFrame = window.clearTimeout;
+
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    afterEach(() => {
+        errorSpy.mockReset();
+    });
+
+    afterAll(() => {
+        errorSpy.mockRestore();
+    });
+
+    beforeAll(() => {
+        Object.defineProperty(window, 'matchMedia', {
+            writable: true,
+            value: jest.fn().mockImplementation((query) => ({
+                matches: false,
+                media: query,
+                onchange: null,
+                addListener: jest.fn(), // Deprecated
+                removeListener: jest.fn(), // Deprecated
+                addEventListener: jest.fn(),
+                removeEventListener: jest.fn(),
+                dispatchEvent: jest.fn(),
+            })),
+        });
+    });
+
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+        },
+    ];
+
+    const data = [
+        { key: 0, name: 'Jack' },
+        { key: 1, name: 'Lucy' },
+        { key: 2, name: 'Tom' },
+        { key: 3, name: 'Jerry' },
+    ];
+
+    function createTable(props = {}) {
+        return <Table columns={columns} dataSource={data} {...props} />;
+    }
+
+    it('auto fixed', () => {
+        const wrapper = mount(
+            createTable({
+                columns: [
+                    {
+                        dataIndex: 'name',
+                        fixed: true,
+                    },
+                    Table.SELECTION_COLUMN,
+                    {
+                        dataIndex: 'key',
+                    },
+                ],
+                rowSelection: {},
+            })
+        );
+
+        expect(wrapper.find('tr').last().find('td')).toHaveLength(3);
+        wrapper.unmount();
+    });
+});
diff --git a/src/components/Table/Tests/Table.pagination.test.js b/src/components/Table/Tests/Table.pagination.test.js
new file mode 100644
index 000000000..cf6d7f90c
--- /dev/null
+++ b/src/components/Table/Tests/Table.pagination.test.js
@@ -0,0 +1,152 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Table from '../index';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Table.table-pagination', () => {
+    beforeAll(() => {
+        Object.defineProperty(window, 'matchMedia', {
+            writable: true,
+            value: jest.fn().mockImplementation((query) => ({
+                matches: false,
+                media: query,
+                onchange: null,
+                addListener: jest.fn(), // Deprecated
+                removeListener: jest.fn(), // Deprecated
+                addEventListener: jest.fn(),
+                removeEventListener: jest.fn(),
+                dispatchEvent: jest.fn(),
+            })),
+        });
+    });
+
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+        },
+    ];
+
+    const data = [
+        { key: 0, name: 'Jack' },
+        { key: 1, name: 'Lucy' },
+        { key: 2, name: 'Tom' },
+        { key: 3, name: 'Jerry' },
+    ];
+
+    const longData = [];
+    for (let i = 0; i < 100; i += 1) {
+        longData.push({ key: i, name: `${i}` });
+    }
+
+    const pagination = { className: 'my-page', pageSize: 2 };
+
+    function createTable(props) {
+        return (
+            <Table
+                columns={columns}
+                dataSource={data}
+                pagination={pagination}
+                {...props}
+            />
+        );
+    }
+
+    function renderedNames(wrapper) {
+        return wrapper.find('BodyRow').map((row) => row.props().record.name);
+    }
+
+    it('renders pagination correctly', () => {
+        const wrapper = mount(createTable());
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('not crash when pageSize is undefined', () => {
+        expect(() => {
+            mount(createTable({ pagination: { pageSize: undefined } }));
+        }).not.toThrow();
+    });
+
+    it('repaginates when pageSize change', () => {
+        const wrapper = mount(createTable());
+
+        wrapper.setProps({ pagination: { pageSize: 1 } });
+        expect(renderedNames(wrapper)).toEqual(['Jack']);
+    });
+
+    it('should not crash when trigger onChange in render', () => {
+        function App() {
+            const [page, setPage] = React.useState({
+                currentPage: 1,
+                pageSize: 10,
+            });
+            const onChange = (currentPage, pageSize) => {
+                setPage({ currentPage, pageSize });
+            };
+            return (
+                <Table
+                    dataSource={[]}
+                    pagination={{
+                        ...page,
+                        onChange,
+                    }}
+                />
+            );
+        }
+        const wrapper = mount(<App />);
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('Accepts pagination as true', () => {
+        const wrapper = mount(createTable({ pagination: true }));
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('renders pagination topLeft and bottomRight', () => {
+        const wrapper = mount(
+            createTable({ pagination: ['topLeft', 'bottomRight'] })
+        );
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('should render pagination after last item on last page being removed', () => {
+        const total = data.length;
+        const paginationProp = {
+            pageSize: 1,
+            total,
+            currentPage: total,
+            position: ['topLeft', 'bottomLeft'],
+        };
+        const wrapper = mount(
+            createTable({
+                pagination: paginationProp,
+            })
+        );
+
+        wrapper.setProps({
+            dataSource: data.slice(total - 1),
+            pagination: { ...paginationProp, total: total - 1 },
+        });
+        expect(wrapper.find('.table-pagination')).toHaveLength(2);
+    });
+
+    it('should preserve table pagination className', () => {
+        const wrapper = mount(
+            <Table
+                data={[]}
+                columns={[]}
+                pagination={{
+                    className: 'my-pagination',
+                    total: 200,
+                    currentPage: 1,
+                    pageSize: 10,
+                }}
+            />
+        );
+        expect(wrapper.find('.table-pagination').prop('className')).toEqual(
+            'table-pagination table-pagination-right my-pagination pagination'
+        );
+    });
+});
diff --git a/src/components/Table/Tests/Table.rowSelection.test.js b/src/components/Table/Tests/Table.rowSelection.test.js
new file mode 100644
index 000000000..a21c6f79b
--- /dev/null
+++ b/src/components/Table/Tests/Table.rowSelection.test.js
@@ -0,0 +1,537 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Table from '../index';
+import { CheckBox } from '../../Selectors';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Table.rowSelection', () => {
+    window.requestAnimationFrame = (callback) =>
+        window.setTimeout(callback, 16);
+    window.cancelAnimationFrame = window.clearTimeout;
+
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    afterEach(() => {
+        errorSpy.mockReset();
+    });
+
+    afterAll(() => {
+        errorSpy.mockRestore();
+    });
+
+    beforeAll(() => {
+        Object.defineProperty(window, 'matchMedia', {
+            writable: true,
+            value: jest.fn().mockImplementation((query) => ({
+                matches: false,
+                media: query,
+                onchange: null,
+                addListener: jest.fn(), // Deprecated
+                removeListener: jest.fn(), // Deprecated
+                addEventListener: jest.fn(),
+                removeEventListener: jest.fn(),
+                dispatchEvent: jest.fn(),
+            })),
+        });
+    });
+
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+        },
+    ];
+
+    const data = [
+        { key: 0, name: 'Jack' },
+        { key: 1, name: 'Lucy' },
+        { key: 2, name: 'Tom' },
+        { key: 3, name: 'Jerry' },
+    ];
+
+    function createTable(props = {}) {
+        return (
+            <Table
+                columns={columns}
+                dataSource={data}
+                rowSelection={{}}
+                {...props}
+            />
+        );
+    }
+
+    function renderedNames(wrapper) {
+        return wrapper.find('BodyRow').map((row) => row.props().record.name);
+    }
+
+    function getSelections(wrapper) {
+        return wrapper
+            .find('BodyRow')
+            .map((row) => {
+                const { key } = row.props().record;
+                if (!row.find('input').at(0).props().checked) {
+                    return null;
+                }
+
+                return key;
+            })
+            .filter((key) => key !== null);
+    }
+
+    function getIndeterminateSelection(wrapper) {
+        return wrapper
+            .find('BodyRow')
+            .map((row) => {
+                const { key } = row.props().record;
+                return key;
+            })
+            .filter((key) => key !== null);
+    }
+
+    it('select default row', () => {
+        const wrapper = mount(
+            createTable({ rowSelection: { defaultSelectedRowKeys: [0] } })
+        );
+        const checkboxes = wrapper.find('input');
+
+        expect(getSelections(wrapper)).toEqual([0]);
+
+        checkboxes.at(1).simulate('change', { target: { checked: false } });
+        expect(getSelections(wrapper)).toEqual([]);
+
+        checkboxes.at(0).simulate('change', { target: { checked: true } });
+        expect(getSelections(wrapper)).toEqual([0, 1, 2, 3]);
+
+        checkboxes.at(0).simulate('change', { target: { checked: false } });
+        expect(getSelections(wrapper)).toEqual([]);
+    });
+
+    it('select by checkbox', () => {
+        const wrapper = mount(createTable());
+        const checkboxes = wrapper.find('input');
+        const checkboxAll = checkboxes.first();
+
+        checkboxAll.simulate('change', { target: { checked: true } });
+        expect(getSelections(wrapper)).toEqual([0, 1, 2, 3]);
+
+        checkboxes.at(1).simulate('change', { target: { checked: false } });
+        expect(getSelections(wrapper)).toEqual([1, 2, 3]);
+
+        checkboxes.at(1).simulate('change', { target: { checked: true } });
+        expect(getSelections(wrapper)).toEqual([0, 1, 2, 3]);
+    });
+
+    it('fires change & select events', () => {
+        const order = [];
+        const handleChange = jest.fn().mockImplementation(() => {
+            order.push('onChange');
+        });
+        const handleSelect = jest.fn().mockImplementation(() => {
+            order.push('onSelect');
+        });
+        const rowSelection = {
+            onChange: handleChange,
+            onSelect: handleSelect,
+        };
+        const wrapper = mount(createTable({ rowSelection }));
+
+        wrapper
+            .find('input')
+            .last()
+            .simulate('change', { target: { checked: true } });
+
+        expect(handleChange).toHaveBeenCalledWith(
+            [3],
+            [{ key: 3, name: 'Jerry' }]
+        );
+        expect(handleSelect.mock.calls.length).toBe(1);
+        expect(handleSelect.mock.calls[0][0]).toEqual({
+            key: 3,
+            name: 'Jerry',
+        });
+        expect(handleSelect.mock.calls[0][1]).toEqual(true);
+        expect(handleSelect.mock.calls[0][2]).toEqual([
+            { key: 3, name: 'Jerry' },
+        ]);
+        expect(handleSelect.mock.calls[0][3].type).toBe('change');
+        expect(order).toEqual(['onSelect', 'onChange']);
+    });
+
+    it('could hide selectAll checkbox and custom selection', () => {
+        const rowSelection = {
+            hideSelectAll: true,
+        };
+        const wrapper = mount(createTable({ rowSelection }));
+        expect(wrapper.find('.selection').exists()).toBeFalsy();
+    });
+
+    it('handles disabled checkbox correctly when dataSource changes', () => {
+        const rowSelection = {
+            getCheckboxProps: (record) => ({ disabled: record.disabled }),
+        };
+        const wrapper = mount(createTable({ rowSelection }));
+        const newData = [
+            { key: 0, name: 'Jack', disabled: true },
+            { key: 1, name: 'Lucy', disabled: true },
+        ];
+        wrapper.setProps({ dataSource: newData });
+        wrapper.find('input').forEach((checkbox) => {
+            expect(checkbox.props().disabled).toBe(true);
+        });
+    });
+
+    it('highlight selected row', () => {
+        const wrapper = mount(createTable());
+        wrapper
+            .find('input')
+            .at(1)
+            .simulate('change', { target: { checked: true } });
+        expect(
+            wrapper.find('tbody tr').at(0).hasClass('table-row-selected')
+        ).toBe(true);
+    });
+
+    it('fix selection column on the left', () => {
+        const wrapper = mount(
+            createTable({
+                rowSelection: { fixed: true },
+                scroll: { x: 903 },
+            })
+        );
+
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('fix expand on th left when selection column fixed on the left', () => {
+        const wrapper = mount(
+            createTable({
+                expandableConfig: {
+                    expandedRowRender() {
+                        return <div />;
+                    },
+                },
+                rowSelection: { fixed: true },
+                scroll: { x: 903 },
+            })
+        );
+
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('fix selection column on the left when any other column is fixed', () => {
+        const wrapper = mount(
+            createTable({
+                rowSelection: {},
+                columns: [
+                    {
+                        title: 'Name',
+                        dataIndex: 'name',
+                        fixed: 'left',
+                    },
+                ],
+                scroll: { x: 903 },
+            })
+        );
+
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('use column as selection column when key is `selection-column`', () => {
+        const wrapper = mount(
+            createTable({
+                rowSelection: {},
+                columns: [
+                    {
+                        title: 'Name',
+                        dataIndex: 'name',
+                        key: 'selection-column',
+                    },
+                ],
+            })
+        );
+
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('should keep all checked state when remove item from dataSource', () => {
+        const wrapper = mount(
+            <Table
+                rowSelection={{
+                    selectedRowKeys: [0, 1, 2, 3],
+                }}
+                columns={columns}
+                dataSource={data}
+            />
+        );
+        expect(wrapper.find(CheckBox).length).toBe(5);
+        wrapper.find(CheckBox).forEach((checkbox) => {
+            expect(checkbox.props().checked).toBe(true);
+        });
+        wrapper.setProps({
+            dataSource: data.slice(1),
+            rowSelection: {
+                selectedRowKeys: [1, 2, 3],
+            },
+        });
+        expect(wrapper.find(CheckBox).length).toBe(4);
+        wrapper.find(CheckBox).forEach((checkbox) => {
+            expect(checkbox.props().checked).toBe(true);
+        });
+    });
+
+    it('add columnTitle for rowSelection', () => {
+        const wrapper = mount(
+            <Table
+                columns={columns}
+                dataSource={data}
+                rowSelection={{
+                    columnTitle: 'title',
+                }}
+            />
+        );
+        expect(wrapper.find('thead tr th').at(0).text()).toBe('title');
+        wrapper.setProps({
+            rowSelection: {
+                type: 'radio',
+                columnTitle: 'title',
+            },
+        });
+        expect(wrapper.find('thead tr th').at(0).text()).toBe('title');
+    });
+
+    it('select by checkbox to trigger stopPropagation', () => {
+        const wrapper = mount(createTable());
+        expect(() => {
+            wrapper.find('span').at(10).simulate('click');
+        }).not.toThrow();
+    });
+
+    describe('supports children', () => {
+        const dataWithChildren = [
+            { key: 0, name: 'Jack' },
+            { key: 1, name: 'Lucy' },
+            { key: 2, name: 'Tom' },
+            {
+                key: 3,
+                name: 'Jerry',
+                children: [
+                    {
+                        key: 4,
+                        name: 'Jerry Jack',
+                    },
+                    {
+                        key: 5,
+                        name: 'Jerry Lucy',
+                    },
+                    {
+                        key: 6,
+                        name: 'Jerry Tom',
+                        children: [
+                            {
+                                key: 7,
+                                name: 'Jerry Tom Jack',
+                            },
+                            {
+                                key: 8,
+                                name: 'Jerry Tom Lucy',
+                            },
+                            {
+                                key: 9,
+                                name: 'Jerry Tom Tom',
+                            },
+                        ],
+                    },
+                ],
+            },
+        ];
+        describe('supports checkStrictly', () => {
+            it('should support `childrenColumnName`', () => {
+                const onChange = jest.fn();
+
+                const table = createTable({
+                    dataSource: [
+                        {
+                            key: 0,
+                            name: 'Jack',
+                            childList: [
+                                { key: 1, name: 'Light' },
+                                { key: 2, name: 'Bamboo' },
+                            ],
+                        },
+                    ],
+                    expandableConfig: {
+                        childrenColumnName: 'childList',
+                        defaultExpandAllRows: true,
+                    },
+                    rowSelection: {
+                        checkStrictly: false,
+                        onChange,
+                    },
+                });
+                const wrapper = mount(table);
+                const checkboxes = wrapper.find('input');
+                expect(checkboxes).toHaveLength(1 + 3);
+
+                checkboxes
+                    .at(1)
+                    .simulate('change', { target: { checked: true } });
+                expect(getSelections(wrapper)).toEqual([0, 1, 2]);
+            });
+        });
+    });
+
+    describe('cache with selected keys', () => {
+        it('default not cache', () => {
+            const onChange = jest.fn();
+            const wrapper = mount(
+                <Table
+                    dataSource={[{ name: 'light' }, { name: 'bamboo' }]}
+                    rowSelection={{ onChange }}
+                    rowKey="name"
+                />
+            );
+
+            wrapper
+                .find('tbody input')
+                .first()
+                .simulate('change', { target: { checked: true } });
+            expect(onChange).toHaveBeenCalledWith(
+                ['light'],
+                [{ name: 'light' }]
+            );
+
+            wrapper.setProps({ dataSource: [{ name: 'bamboo' }] });
+            wrapper
+                .find('tbody input')
+                .first()
+                .simulate('change', { target: { checked: true } });
+            expect(onChange).toHaveBeenCalledWith(
+                ['bamboo'],
+                [{ name: 'bamboo' }]
+            );
+        });
+
+        it('cache with preserveSelectedRowKeys', () => {
+            const onChange = jest.fn();
+            const wrapper = mount(
+                <Table
+                    dataSource={[{ name: 'light' }, { name: 'bamboo' }]}
+                    rowSelection={{ onChange, preserveSelectedRowKeys: true }}
+                    rowKey="name"
+                />
+            );
+
+            wrapper
+                .find('tbody input')
+                .first()
+                .simulate('change', { target: { checked: true } });
+            expect(onChange).toHaveBeenCalledWith(
+                ['light'],
+                [{ name: 'light' }]
+            );
+
+            wrapper.setProps({ dataSource: [{ name: 'bamboo' }] });
+            wrapper
+                .find('tbody input')
+                .first()
+                .simulate('change', { target: { checked: true } });
+            expect(onChange).toHaveBeenCalledWith(
+                ['light', 'bamboo'],
+                [{ name: 'light' }, { name: 'bamboo' }]
+            );
+        });
+
+        it('works with receive selectedRowKeys fron [] to undefined', () => {
+            const onChange = jest.fn();
+            const dataSource = [{ name: 'Jack' }];
+            const wrapper = mount(
+                <Table
+                    dataSource={dataSource}
+                    rowSelection={{ onChange, selectedRowKeys: [0] }}
+                    rowKey="name"
+                />
+            );
+
+            wrapper.setProps({
+                rowSelection: { onChange, selectedRowKeys: undefined },
+            });
+            wrapper
+                .find('tbody input')
+                .first()
+                .simulate('change', { target: { checked: true } });
+            expect(onChange).toHaveBeenCalledWith(['Jack'], [{ name: 'Jack' }]);
+        });
+
+        it('works with selectionType radio receive selectedRowKeys from [] to undefined', () => {
+            const onChange = jest.fn();
+            const dataSource = [{ name: 'Jack' }];
+            const wrapper = mount(
+                <Table
+                    dataSource={dataSource}
+                    rowSelection={{
+                        onChange,
+                        selectedRowKeys: [0],
+                        type: 'radio',
+                    }}
+                    rowKey="name"
+                />
+            );
+
+            wrapper.setProps({
+                rowSelection: {
+                    onChange,
+                    selectedRowKeys: undefined,
+                    type: 'radio',
+                },
+            });
+            wrapper
+                .find('tbody input')
+                .first()
+                .simulate('change', { target: { checked: true } });
+            expect(onChange).toHaveBeenCalledWith(['Jack'], [{ name: 'Jack' }]);
+        });
+
+        it('selectedRows and selectedKeys should keep sync in initial state', () => {
+            const dataSource = [
+                { name: 'Jack' },
+                { name: 'Tom' },
+                { name: 'Lucy' },
+                { name: 'John' },
+            ];
+            const onChange = jest.fn();
+            const rowSelection = {
+                preserveSelectedRowKeys: true,
+                onChange,
+                selectedRowKeys: ['Jack'],
+            };
+            const wrapper = mount(
+                <Table
+                    dataSource={dataSource.slice(0, 2)}
+                    rowSelection={rowSelection}
+                    rowKey="name"
+                    columns={[
+                        {
+                            title: 'Name',
+                            dataIndex: 'name',
+                            key: 'name',
+                        },
+                    ]}
+                />
+            );
+
+            wrapper.setProps({
+                dataSource: dataSource.slice(2, 4),
+            });
+            wrapper
+                .find('tbody input')
+                .first()
+                .simulate('change', { target: { checked: true } });
+            expect(onChange).toHaveBeenCalledWith(
+                ['Jack', 'Lucy'],
+                [{ name: 'Jack' }, { name: 'Lucy' }]
+            );
+        });
+    });
+});
diff --git a/src/components/Table/Tests/Table.sorter.test.js b/src/components/Table/Tests/Table.sorter.test.js
new file mode 100644
index 000000000..e63f243e1
--- /dev/null
+++ b/src/components/Table/Tests/Table.sorter.test.js
@@ -0,0 +1,932 @@
+import React from 'react';
+import Enzyme, { render, mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { eventKeys } from '../../../shared/utilities';
+import Table from '../index';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+jest.mock('react', () => ({
+    ...jest.requireActual('react'),
+    useLayoutEffect: jest.requireActual('react').useEffect,
+}));
+
+describe('Table.sorter', () => {
+    beforeAll(() => {
+        Object.defineProperty(window, 'matchMedia', {
+            writable: true,
+            value: jest.fn().mockImplementation((query) => ({
+                matches: false,
+                media: query,
+                onchange: null,
+                addListener: jest.fn(), // Deprecated
+                removeListener: jest.fn(), // Deprecated
+                addEventListener: jest.fn(),
+                removeEventListener: jest.fn(),
+                dispatchEvent: jest.fn(),
+            })),
+        });
+    });
+
+    const sorterFn = (a, b) => a.name[0].charCodeAt() - b.name[0].charCodeAt();
+
+    const column = {
+        title: 'Name',
+        dataIndex: 'name',
+        key: 'name',
+        sorter: sorterFn,
+    };
+
+    const data = [
+        { key: 0, name: 'Jack' },
+        { key: 1, name: 'Lucy' },
+        { key: 2, name: 'Tom' },
+        { key: 3, name: 'Jerry' },
+    ];
+
+    function createTable(tableProps, columnProps = {}) {
+        return (
+            <Table
+                columns={[
+                    {
+                        ...column,
+                        ...columnProps,
+                    },
+                ]}
+                dataSource={data}
+                pagination={false}
+                {...tableProps}
+            />
+        );
+    }
+
+    function renderedNames(wrapper) {
+        return wrapper.find('BodyRow').map((row) => row.props().record.name);
+    }
+
+    it('renders sorter icon correctly', () => {
+        const wrapper = render(createTable());
+        expect(wrapper.find('thead')).toMatchSnapshot();
+    });
+
+    it('default sort order ascend', () => {
+        const wrapper = mount(
+            createTable(
+                {},
+                {
+                    defaultSortOrder: 'ascend',
+                }
+            )
+        );
+
+        expect(renderedNames(wrapper)).toEqual([
+            'Jack',
+            'Jerry',
+            'Lucy',
+            'Tom',
+        ]);
+    });
+
+    it('default sort order descend', () => {
+        const wrapper = mount(
+            createTable(
+                {},
+                {
+                    defaultSortOrder: 'descend',
+                }
+            )
+        );
+
+        const getNameColumn = () => wrapper.find('th').at(0);
+
+        expect(renderedNames(wrapper)).toEqual([
+            'Tom',
+            'Lucy',
+            'Jack',
+            'Jerry',
+        ]);
+        expect(getNameColumn().prop('aria-sort')).toEqual('descending');
+    });
+
+    it('should change aria-sort when default sort order is set to descend', () => {
+        const wrapper = mount(
+            createTable(
+                {
+                    sortDirections: ['descend', 'ascend'],
+                },
+                {
+                    defaultSortOrder: 'descend',
+                }
+            )
+        );
+
+        const getNameColumn = () => wrapper.find('th').at(0);
+
+        // Test that it cycles through the order of sortDirections
+        expect(renderedNames(wrapper)).toEqual([
+            'Tom',
+            'Lucy',
+            'Jack',
+            'Jerry',
+        ]);
+        expect(getNameColumn().prop('aria-sort')).toEqual('descending');
+
+        wrapper.find('.table-column-sorters').simulate('click');
+        expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
+
+        wrapper.find('.table-column-sorters').simulate('click');
+        expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+    });
+
+    it('sort records', () => {
+        const wrapper = mount(createTable());
+
+        const getNameColumn = () => wrapper.find('th').at(0);
+
+        // first assert default state
+        expect(renderedNames(wrapper)).toEqual([
+            'Jack',
+            'Lucy',
+            'Tom',
+            'Jerry',
+        ]);
+        expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+
+        // ascend
+        wrapper.find('.table-column-sorters').simulate('click');
+        expect(renderedNames(wrapper)).toEqual([
+            'Jack',
+            'Jerry',
+            'Lucy',
+            'Tom',
+        ]);
+        expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
+
+        // descend
+        wrapper.find('.table-column-sorters').simulate('click');
+        expect(renderedNames(wrapper)).toEqual([
+            'Tom',
+            'Lucy',
+            'Jack',
+            'Jerry',
+        ]);
+        expect(getNameColumn().prop('aria-sort')).toEqual('descending');
+    });
+
+    it('sort records with keydown', () => {
+        const wrapper = mount(createTable());
+
+        // ascend
+        wrapper
+            .find('.table-column-has-sorters')
+            .simulate('keydown', { key: eventKeys.ENTER });
+        expect(renderedNames(wrapper)).toEqual([
+            'Jack',
+            'Jerry',
+            'Lucy',
+            'Tom',
+        ]);
+
+        // descend
+        wrapper
+            .find('.table-column-has-sorters')
+            .simulate('keydown', { key: eventKeys.ENTER });
+        expect(renderedNames(wrapper)).toEqual([
+            'Tom',
+            'Lucy',
+            'Jack',
+            'Jerry',
+        ]);
+    });
+
+    describe('can be controlled by sortOrder', () => {
+        it('single', () => {
+            const wrapper = mount(
+                createTable({
+                    columns: [{ ...column, sortOrder: 'ascend' }],
+                })
+            );
+            expect(renderedNames(wrapper)).toEqual([
+                'Jack',
+                'Jerry',
+                'Lucy',
+                'Tom',
+            ]);
+        });
+
+        it('invalidate mix with single & multiple sorters', () => {
+            const wrapper = mount(
+                createTable({
+                    columns: [
+                        {
+                            title: 'Name',
+                            dataIndex: 'name',
+                            sortOrder: 'ascend',
+                            sorter: {
+                                multiple: 1,
+                            },
+                        },
+                        {
+                            title: 'Name',
+                            dataIndex: 'name',
+                            sortOrder: 'ascend',
+                            sorter: {},
+                        },
+                    ],
+                })
+            );
+
+            expect(renderedNames(wrapper)).toEqual([
+                'Jack',
+                'Lucy',
+                'Tom',
+                'Jerry',
+            ]);
+        });
+    });
+
+    it('provides sortOrder in the sorterFn', () => {
+        let actualSortOrder;
+        mount(
+            createTable(
+                {},
+                {
+                    sortOrder: 'ascend',
+                    sorter: (a, b, sortOrder) => {
+                        actualSortOrder = sortOrder;
+                        return sorterFn(a, b);
+                    },
+                }
+            )
+        );
+        expect(actualSortOrder).toEqual('ascend');
+    });
+
+    it('can update column sortOrder', () => {
+        const wrapper = mount(
+            createTable({
+                columns: [column],
+            })
+        );
+        expect(renderedNames(wrapper)).toEqual([
+            'Jack',
+            'Lucy',
+            'Tom',
+            'Jerry',
+        ]);
+        wrapper.setProps({
+            columns: [{ ...column, sortOrder: 'ascend' }],
+        });
+        wrapper.update();
+        expect(renderedNames(wrapper)).toEqual([
+            'Jack',
+            'Jerry',
+            'Lucy',
+            'Tom',
+        ]);
+    });
+
+    it('fires change event', () => {
+        const handleChange = jest.fn();
+        const wrapper = mount(createTable({ onChange: handleChange }));
+
+        // ascent
+        wrapper.find('.table-column-sorters').simulate('click');
+        const sorter1 = handleChange.mock.calls[0][2];
+        expect(sorter1.column.dataIndex).toBe('name');
+        expect(sorter1.order).toBe('ascend');
+        expect(sorter1.field).toBe('name');
+        expect(sorter1.columnKey).toBe('name');
+
+        wrapper.find('.table-column-sorters').simulate('click');
+        const sorter2 = handleChange.mock.calls[1][2];
+        expect(sorter2.column.dataIndex).toBe('name');
+        expect(sorter2.order).toBe('descend');
+        expect(sorter2.field).toBe('name');
+        expect(sorter2.columnKey).toBe('name');
+
+        wrapper.find('.table-column-sorters').simulate('click');
+        const sorter3 = handleChange.mock.calls[2][2];
+        expect(sorter3.column).toBe(undefined);
+        expect(sorter3.order).toBe(undefined);
+        expect(sorter3.field).toBe('name');
+        expect(sorter3.columnKey).toBe('name');
+    });
+
+    it('works with grouping columns in controlled mode', () => {
+        const columns = [
+            {
+                title: 'group',
+                key: 'group',
+                children: [
+                    {
+                        title: 'Name',
+                        dataIndex: 'name',
+                        key: 'name',
+                        sorter: sorterFn,
+                        sortOrder: 'descend',
+                    },
+                    {
+                        title: 'Age',
+                        dataIndex: 'age',
+                        key: 'age',
+                    },
+                ],
+            },
+        ];
+        const testData = [
+            { key: 0, name: 'Jack', age: 11 },
+            { key: 1, name: 'Lucy', age: 20 },
+            { key: 2, name: 'Tom', age: 21 },
+            { key: 3, name: 'Jerry', age: 22 },
+        ];
+        const wrapper = mount(
+            <Table columns={columns} dataSource={testData} />
+        );
+
+        expect(renderedNames(wrapper)).toEqual([
+            'Tom',
+            'Lucy',
+            'Jack',
+            'Jerry',
+        ]);
+    });
+
+    it('Allow column title as render props with sortOrder argument', () => {
+        const title = ({ sortOrder }) => (
+            <div className="custom-title">{sortOrder}</div>
+        );
+        const columns = [
+            {
+                title,
+                key: 'group',
+                sorter: true,
+            },
+        ];
+        const testData = [
+            { key: 0, name: 'Jack', age: 11 },
+            { key: 1, name: 'Lucy', age: 20 },
+            { key: 2, name: 'Tom', age: 21 },
+            { key: 3, name: 'Jerry', age: 22 },
+        ];
+        const wrapper = mount(
+            <Table columns={columns} dataSource={testData} />
+        );
+        expect(wrapper.find('.custom-title').text()).toEqual('');
+        wrapper.find('.table-column-sorters').simulate('click');
+        expect(wrapper.find('.custom-title').text()).toEqual('ascend');
+        wrapper.find('.table-column-sorters').simulate('click');
+        expect(wrapper.find('.custom-title').text()).toEqual('descend');
+    });
+
+    it('should sort from beginning state when toggle from different columns', () => {
+        const columns = [
+            {
+                title: 'name',
+                dataIndex: 'name',
+                sorter: true,
+            },
+            {
+                title: 'age',
+                dataIndex: 'age',
+                sorter: true,
+            },
+        ];
+        const testData = [
+            { key: 0, name: 'Jack', age: 11 },
+            { key: 1, name: 'Lucy', age: 20 },
+            { key: 2, name: 'Tom', age: 21 },
+            { key: 3, name: 'Jerry', age: 22 },
+        ];
+        const wrapper = mount(
+            <Table columns={columns} dataSource={testData} />
+        );
+
+        const getNameColumn = () =>
+            wrapper.find('.table-column-has-sorters').at(0);
+        const getAgeColumn = () =>
+            wrapper.find('.table-column-has-sorters').at(1);
+
+        // sort name
+        getNameColumn().simulate('click');
+        expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
+        expect(getAgeColumn().prop('aria-sort')).toEqual(undefined);
+
+        // sort age
+        getAgeColumn().simulate('click');
+        expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+        expect(getAgeColumn().prop('aria-sort')).toEqual('ascending');
+    });
+
+    it('should toggle sort state when columns are put in render', () => {
+        const testData = [
+            { key: 0, name: 'Jack', age: 11 },
+            { key: 1, name: 'Lucy', age: 20 },
+            { key: 2, name: 'Tom', age: 21 },
+            { key: 3, name: 'Jerry', age: 22 },
+        ];
+        class TableTest extends React.Component {
+            state = {
+                pagination: {},
+            };
+
+            onChange = (pagination) => {
+                this.setState({ pagination });
+            };
+
+            render() {
+                const columns = [
+                    {
+                        title: 'name',
+                        dataIndex: 'name',
+                        sorter: true,
+                    },
+                ];
+                const { pagination } = this.state;
+                return (
+                    <Table
+                        columns={columns}
+                        pagination={pagination}
+                        dataSource={testData}
+                        onChange={this.onChange}
+                    />
+                );
+            }
+        }
+
+        const wrapper = mount(<TableTest />);
+
+        const getNameColumn = () => wrapper.find('th').at(0);
+
+        // sort name
+        getNameColumn().simulate('click');
+        expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
+
+        // sort name
+        getNameColumn().simulate('click');
+        expect(getNameColumn().prop('aria-sort')).toEqual('descending');
+
+        // sort name
+        getNameColumn().simulate('click');
+        expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+    });
+
+    it('should toggle sort state when columns with non primitive properties are put in render', () => {
+        const testData = [
+            { key: 0, name: 'Jack', age: 11 },
+            { key: 1, name: 'Lucy', age: 20 },
+            { key: 2, name: 'Tom', age: 21 },
+            { key: 3, name: 'Jerry', age: 22 },
+        ];
+        class TableTest extends React.Component {
+            state = {
+                pagination: {},
+            };
+
+            onChange = (pagination) => {
+                this.setState({ pagination });
+            };
+
+            render() {
+                const columns = [
+                    {
+                        title: 'name',
+                        dataIndex: 'name',
+                        sorter: true,
+                        render: (text) => text,
+                        array: ['1', '2', 3],
+                    },
+                ];
+                const { pagination } = this.state;
+                return (
+                    <Table
+                        columns={columns}
+                        pagination={pagination}
+                        dataSource={testData}
+                        onChange={this.onChange}
+                    />
+                );
+            }
+        }
+
+        const wrapper = mount(<TableTest />);
+
+        const getNameColumn = () => wrapper.find('th').at(0);
+
+        // sort name
+        getNameColumn().simulate('click');
+        expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
+
+        // sort name
+        getNameColumn().simulate('click');
+        expect(getNameColumn().prop('aria-sort')).toEqual('descending');
+
+        // sort name
+        getNameColumn().simulate('click');
+        expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+    });
+
+    it('should toggle sort state when columns with key are put in render', () => {
+        const testData = [
+            { key: 0, name: 'Jack', age: 11 },
+            { key: 1, name: 'Lucy', age: 20 },
+            { key: 2, name: 'Tom', age: 21 },
+            { key: 3, name: 'Jerry', age: 22 },
+        ];
+        class TableTest extends React.Component {
+            state = {
+                pagination: {},
+            };
+
+            onChange = (pagination) => {
+                this.setState({ pagination });
+            };
+
+            render() {
+                const columns = [
+                    {
+                        title: 'name',
+                        dataIndex: 'name',
+                        sorter: true,
+                        key: 'a',
+                        style: {
+                            fontSize: 18,
+                        },
+                    },
+                ];
+                const { pagination } = this.state;
+                return (
+                    <Table
+                        columns={columns}
+                        pagination={pagination}
+                        dataSource={testData}
+                        onChange={this.onChange}
+                    />
+                );
+            }
+        }
+
+        const wrapper = mount(<TableTest />);
+        const getNameColumn = () => wrapper.find('th').at(0);
+        expect(
+            getNameColumn()
+                .find('.table-column-sorter-up')
+                .at(0)
+                .hasClass('active')
+        ).toBeFalsy();
+        expect(
+            getNameColumn()
+                .find('.table-column-sorter-down')
+                .at(0)
+                .hasClass('active')
+        ).toBeFalsy();
+        expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+
+        // sort name
+        getNameColumn().simulate('click');
+        expect(
+            getNameColumn()
+                .find('.table-column-sorter-up')
+                .at(0)
+                .hasClass('active')
+        ).toBeTruthy();
+        expect(
+            getNameColumn()
+                .find('.table-column-sorter-down')
+                .at(0)
+                .hasClass('active')
+        ).toBeFalsy();
+        expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
+
+        // sort name
+        getNameColumn().simulate('click');
+        expect(
+            getNameColumn()
+                .find('.table-column-sorter-up')
+                .at(0)
+                .hasClass('active')
+        ).toBeFalsy();
+        expect(
+            getNameColumn()
+                .find('.table-column-sorter-down')
+                .at(0)
+                .hasClass('active')
+        ).toBeTruthy();
+        expect(getNameColumn().prop('aria-sort')).toEqual('descending');
+
+        // sort name
+        getNameColumn().simulate('click');
+        expect(
+            getNameColumn()
+                .find('.table-column-sorter-up')
+                .at(0)
+                .hasClass('active')
+        ).toBeFalsy();
+        expect(
+            getNameColumn()
+                .find('.table-column-sorter-down')
+                .at(0)
+                .hasClass('active')
+        ).toBeFalsy();
+        expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+    });
+
+    it('should first sort by descend, then ascend, then cancel sort', () => {
+        const wrapper = mount(
+            createTable({
+                sortDirections: ['descend', 'ascend'],
+            })
+        );
+        const getNameColumn = () => wrapper.find('th').at(0);
+
+        // descend
+        getNameColumn().simulate('click');
+        expect(renderedNames(wrapper)).toEqual([
+            'Tom',
+            'Lucy',
+            'Jack',
+            'Jerry',
+        ]);
+        expect(getNameColumn().prop('aria-sort')).toEqual('descending');
+
+        // ascend
+        getNameColumn().simulate('click');
+        expect(renderedNames(wrapper)).toEqual([
+            'Jack',
+            'Jerry',
+            'Lucy',
+            'Tom',
+        ]);
+        expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
+
+        // cancel sort
+        getNameColumn().simulate('click');
+        expect(renderedNames(wrapper)).toEqual([
+            'Jack',
+            'Lucy',
+            'Tom',
+            'Jerry',
+        ]);
+        expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+    });
+
+    it('should first sort by descend, then cancel sort', () => {
+        const wrapper = mount(
+            createTable({
+                sortDirections: ['descend'],
+            })
+        );
+
+        const getNameColumn = () => wrapper.find('th').at(0);
+
+        // default
+        expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+
+        // descend
+        getNameColumn().simulate('click');
+        expect(renderedNames(wrapper)).toEqual([
+            'Tom',
+            'Lucy',
+            'Jack',
+            'Jerry',
+        ]);
+        expect(getNameColumn().prop('aria-sort')).toEqual('descending');
+
+        // cancel sort
+        getNameColumn().simulate('click');
+        expect(renderedNames(wrapper)).toEqual([
+            'Jack',
+            'Lucy',
+            'Tom',
+            'Jerry',
+        ]);
+        expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+    });
+
+    it('should first sort by descend, then cancel sort. (column prop)', () => {
+        const wrapper = mount(
+            createTable(
+                {},
+                {
+                    sortDirections: ['descend'],
+                }
+            )
+        );
+
+        const getNameColumn = () => wrapper.find('th').at(0);
+
+        // default
+        expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+
+        // descend
+        getNameColumn().simulate('click');
+        expect(renderedNames(wrapper)).toEqual([
+            'Tom',
+            'Lucy',
+            'Jack',
+            'Jerry',
+        ]);
+        expect(getNameColumn().prop('aria-sort')).toEqual('descending');
+
+        // cancel sort
+        getNameColumn().simulate('click');
+        expect(renderedNames(wrapper)).toEqual([
+            'Jack',
+            'Lucy',
+            'Tom',
+            'Jerry',
+        ]);
+        expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+    });
+
+    it('should support onHeaderCell in sort column', () => {
+        const onClick = jest.fn();
+        const wrapper = mount(
+            <Table
+                columns={[
+                    {
+                        title: 'title',
+                        onHeaderCell: () => ({ onClick }),
+                        sorter: true,
+                    },
+                ]}
+            />
+        );
+        wrapper.find('th').simulate('click');
+        expect(onClick).toHaveBeenCalled();
+    });
+
+    it('should not being inifinite loop when using Table.Column with sortOrder', () => {
+        class Demo extends React.Component {
+            componentDidMount() {
+                this.setState({});
+            }
+
+            render() {
+                return (
+                    <Table dataSource={[]}>
+                        <Table.Column
+                            title="Age"
+                            dataIndex="age"
+                            sorter
+                            sortOrder="ascend"
+                            key="age"
+                        />
+                    </Table>
+                );
+            }
+        }
+        expect(() => {
+            mount(<Demo />);
+        }).not.toThrow();
+    });
+
+    it('should support defaultOrder in Column', () => {
+        const wrapper = mount(
+            <Table dataSource={[{ key: '1', age: 1 }]}>
+                <Table.Column
+                    title="Age"
+                    dataIndex="age"
+                    sorter
+                    defaultSortOrder="ascend"
+                    key="age"
+                />
+            </Table>
+        );
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('invalidate sorter should not display sorter button', () => {
+        const wrapper = mount(
+            <Table
+                columns={[
+                    {
+                        title: 'Name',
+                        dataIndex: 'name',
+                        key: 'name',
+                        sorter: false,
+                    },
+                    {
+                        title: 'Age',
+                        dataIndex: 'age',
+                        key: 'age',
+                        sorter: null,
+                    },
+                    {
+                        title: 'Address',
+                        dataIndex: 'address',
+                        key: 'address',
+                        sorter: undefined,
+                    },
+                ]}
+            />
+        );
+
+        expect(wrapper.find('.table-column-sorter-inner')).toHaveLength(0);
+    });
+
+    it('table with sugar column', () => {
+        const wrapper = mount(
+            <Table>
+                <Table.Column
+                    title="Chinese Score"
+                    dataIndex="chinese"
+                    sorter={{
+                        compare: (a, b) => a.chinese - b.chinese,
+                        multiple: 3,
+                    }}
+                />
+                <Table.Column
+                    title="Math Score"
+                    dataIndex="math"
+                    sorter={{
+                        compare: (a, b) => a.math - b.math,
+                        multiple: 2,
+                    }}
+                />
+            </Table>
+        );
+
+        wrapper.find('th').first().simulate('click');
+
+        expect(wrapper.find('th.table-column-sort')).toHaveLength(1);
+    });
+
+    it('surger should support sorterOrder', () => {
+        const wrapper = mount(
+            <Table>
+                <Table.Column
+                    key="name"
+                    title="Name"
+                    dataIndex="name"
+                    sortOrder="ascend"
+                    sorter
+                />
+            </Table>
+        );
+
+        expect(
+            wrapper.find('.table-column-sorter-up').last().hasClass('active')
+        ).toBeTruthy();
+        expect(
+            wrapper.find('.table-column-sorter-down').last().hasClass('active')
+        ).toBeFalsy();
+    });
+
+    it('onChange with correct sorter for multiple', () => {
+        const groupColumns = [
+            {
+                title: 'Math Score',
+                dataIndex: 'math',
+                sorter: { multiple: 1 },
+            },
+            {
+                title: 'English Score',
+                dataIndex: 'english',
+                sorter: { multiple: 2 },
+            },
+        ];
+
+        const groupData = [
+            {
+                key: '1',
+                name: 'John Brown',
+                chinese: 98,
+                math: 60,
+                english: 70,
+            },
+        ];
+
+        const onChange = jest.fn();
+        const wrapper = mount(
+            <Table
+                columns={groupColumns}
+                data={groupData}
+                onChange={onChange}
+            />
+        );
+
+        function clickToMatchExpect(index, sorter) {
+            wrapper.find('.table-column-sorters').at(index).simulate('click');
+
+            expect(onChange).toHaveBeenCalledWith(
+                expect.anything(),
+                expect.anything(),
+                expect.objectContaining(sorter),
+                expect.anything()
+            );
+
+            onChange.mockReset();
+        }
+
+        // First
+        clickToMatchExpect(0, { field: 'math', order: 'ascend' });
+        clickToMatchExpect(0, { field: 'math', order: 'descend' });
+        clickToMatchExpect(0, { field: 'math', order: undefined });
+
+        // Last
+        clickToMatchExpect(1, { field: 'english', order: 'ascend' });
+        clickToMatchExpect(1, { field: 'english', order: 'descend' });
+        clickToMatchExpect(1, { field: 'english', order: undefined });
+    });
+});
diff --git a/src/components/Table/Tests/Table.test.js b/src/components/Table/Tests/Table.test.js
new file mode 100644
index 000000000..b05902d77
--- /dev/null
+++ b/src/components/Table/Tests/Table.test.js
@@ -0,0 +1,228 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Table from '..';
+import { render } from '../../../tests/Utilities';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const { Column, ColumnGroup } = Table;
+
+describe('Table', () => {
+    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    afterAll(() => {
+        warnSpy.mockRestore();
+    });
+
+    beforeAll(() => {
+        Object.defineProperty(window, 'matchMedia', {
+            writable: true,
+            value: jest.fn().mockImplementation((query) => ({
+                matches: false,
+                media: query,
+                onchange: null,
+                addListener: jest.fn(), // Deprecated
+                removeListener: jest.fn(), // Deprecated
+                addEventListener: jest.fn(),
+                removeEventListener: jest.fn(),
+                dispatchEvent: jest.fn(),
+            })),
+        });
+    });
+
+    it('renders JSX correctly', () => {
+        const data = [
+            {
+                key: '1',
+                firstName: 'John',
+                lastName: 'Brown',
+                age: 32,
+            },
+            {
+                key: '2',
+                firstName: 'Jim',
+                lastName: 'Green',
+                age: 42,
+            },
+        ];
+
+        const wrapper = mount(
+            <Table dataSource={data} pagination={false}>
+                <ColumnGroup title="Name">
+                    <Column
+                        title="First Name"
+                        dataIndex="firstName"
+                        key="firstName"
+                    />
+                    <Column
+                        title="Last Name"
+                        dataIndex="lastName"
+                        key="lastName"
+                    />
+                </ColumnGroup>
+                <Column title="Age" dataIndex="age" key="age" />
+                {'invalid child'}
+            </Table>
+        );
+
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('updates columns when receiving props', () => {
+        const columns = [
+            {
+                title: 'Name',
+                key: 'name',
+                dataIndex: 'name',
+            },
+        ];
+        const wrapper = mount(<Table columns={columns} />);
+        const newColumns = [
+            {
+                title: 'Title',
+                key: 'title',
+                dataIndex: 'title',
+            },
+        ];
+        wrapper.setProps({ columns: newColumns });
+
+        expect(wrapper.find('th').text()).toEqual('Title');
+    });
+
+    it('renders custom components correctly when it changes', () => {
+        const BodyWrapper1 = (props) => <tbody id="wrapper1" {...props} />;
+        const BodyWrapper2 = (props) => <tbody id="wrapper2" {...props} />;
+        const wrapper = mount(
+            <Table components={{ body: { wrapper: BodyWrapper1 } }} />
+        );
+        wrapper.setProps({ components: { body: { wrapper: BodyWrapper2 } } });
+        expect(wrapper.find('tbody').props().id).toBe('wrapper2');
+    });
+
+    it('support onHeaderCell', () => {
+        const onClick = jest.fn();
+        const wrapper = mount(
+            <Table
+                columns={[
+                    { title: 'title', onHeaderCell: () => ({ onClick }) },
+                ]}
+            />
+        );
+        wrapper.find('th').simulate('click');
+        expect(onClick).toHaveBeenCalled();
+    });
+
+    it('should not crash when column children is empty', () => {
+        mount(
+            <Table
+                columns={[
+                    {
+                        dataIndex: 'name',
+                        children: undefined,
+                    },
+                ]}
+                dataSource={[]}
+            />
+        );
+    });
+
+    it('should not crash when dataSource is array with none-object items', () => {
+        mount(
+            <Table
+                columns={[
+                    {
+                        title: 'name',
+                    },
+                ]}
+                dataSource={['1', 2, undefined, {}, null, true, false, 0]}
+            />
+        );
+    });
+
+    it('prevent touch event', () => {
+        const wrapper = mount(
+            <Table
+                columns={[
+                    {
+                        dataIndex: 'name',
+                        children: undefined,
+                    },
+                ]}
+                dataSource={[]}
+            />
+        );
+        wrapper.simulate('touchmove');
+    });
+
+    it('renders ellipsis by showTitle option', () => {
+        const data = [
+            {
+                id: '1',
+                age: 32,
+            },
+            {
+                id: '2',
+                age: 42,
+            },
+        ];
+        const columns = [
+            { title: 'id', dataKey: 'id', ellipsis: { showTitle: false } },
+            { title: 'age', dataKey: 'age', ellipsis: { showTitle: false } },
+        ];
+        const wrapper = mount(<Table columns={columns} dataSource={data} />);
+        wrapper
+            .find('table-tbody')
+            .find('td')
+            .forEach((td) => {
+                expect(td.hasClass('table-cell-ellipsis')).toBeTruthy();
+            });
+    });
+
+    it('not renders ellipsis origin html title', () => {
+        const data = [
+            {
+                id: '1',
+                age: 32,
+            },
+            {
+                id: '2',
+                age: 42,
+            },
+        ];
+        const columns = [
+            { title: 'id', dataKey: 'id', ellipsis: { showTitle: true } },
+            { title: 'age', dataKey: 'age', ellipsis: { showTitle: true } },
+        ];
+        const wrapper = mount(<Table columns={columns} dataSource={data} />);
+
+        wrapper.find('.table-thead th').forEach((td) => {
+            expect(
+                td.getDOMNode().attributes.getNamedItem('title')
+            ).toBeTruthy();
+        });
+
+        wrapper.find('.table-tbody td').forEach((td) => {
+            expect(
+                td.getDOMNode().attributes.getNamedItem('title')
+            ).toBeFalsy();
+        });
+    });
+
+    it('should support ref', () => {
+        warnSpy.mockReset();
+        const columns = [
+            {
+                title: 'Name',
+                key: 'name',
+                dataIndex: 'name',
+            },
+        ];
+        const Wrapper = () => {
+            const ref = React.useRef();
+            return <Table ref={ref} columns={columns} />;
+        };
+        render(<Wrapper />);
+        expect(warnSpy).not.toBeCalled();
+    });
+});
diff --git a/src/components/Table/Tests/__snapshots__/Table.expand.test.tsx.snap b/src/components/Table/Tests/__snapshots__/Table.expand.test.tsx.snap
new file mode 100644
index 000000000..f77e02f5c
--- /dev/null
+++ b/src/components/Table/Tests/__snapshots__/Table.expand.test.tsx.snap
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:32a97916027a6bfa291ddfb1c46438d3f64c1716aae40593db0f449bb115016f
+size 229516
diff --git a/src/components/Table/Tests/__snapshots__/Table.filter.test.js.snap b/src/components/Table/Tests/__snapshots__/Table.filter.test.js.snap
new file mode 100644
index 000000000..6a1fda098
--- /dev/null
+++ b/src/components/Table/Tests/__snapshots__/Table.filter.test.js.snap
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8d427af3b7c63f46644adada76e0f53a9241d53a979b322df0e3f262e25bc5b5
+size 605465
diff --git a/src/components/Table/Tests/__snapshots__/Table.pagination.test.js.snap b/src/components/Table/Tests/__snapshots__/Table.pagination.test.js.snap
new file mode 100644
index 000000000..4ef670120
--- /dev/null
+++ b/src/components/Table/Tests/__snapshots__/Table.pagination.test.js.snap
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:353d03d5f9273e61440004ed6ecfd391abcf64bc5df6adf2f5c81897d58f0032
+size 2036710
diff --git a/src/components/Table/Tests/__snapshots__/Table.rowSelection.test.js.snap b/src/components/Table/Tests/__snapshots__/Table.rowSelection.test.js.snap
new file mode 100644
index 000000000..079de3635
--- /dev/null
+++ b/src/components/Table/Tests/__snapshots__/Table.rowSelection.test.js.snap
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dc22d0c9c4bd8a302e15cc741a46c90ab54f5d24acfd9d05242b4a09a9a44c6e
+size 25484754
diff --git a/src/components/Table/Tests/__snapshots__/Table.sorter.test.js.snap b/src/components/Table/Tests/__snapshots__/Table.sorter.test.js.snap
new file mode 100644
index 000000000..c70f719e7
--- /dev/null
+++ b/src/components/Table/Tests/__snapshots__/Table.sorter.test.js.snap
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:55b32da3b10537c2a14d6a2ffa72784d845f9ea43cc1bd9c488b8647b1b83e03
+size 843343
diff --git a/src/components/Table/Tests/__snapshots__/Table.test.js.snap b/src/components/Table/Tests/__snapshots__/Table.test.js.snap
new file mode 100644
index 000000000..c97918eaf
--- /dev/null
+++ b/src/components/Table/Tests/__snapshots__/Table.test.js.snap
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4b5993d3947235f3ec4e3aa66904aa70f2d51495229b45726196fc97b5a6be97
+size 246728
diff --git a/src/components/Table/Tests/__snapshots__/empty.test.tsx.snap b/src/components/Table/Tests/__snapshots__/empty.test.tsx.snap
new file mode 100644
index 000000000..295e8c0f5
--- /dev/null
+++ b/src/components/Table/Tests/__snapshots__/empty.test.tsx.snap
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ec0d9dc5f0a8bf106a822959b297abf86b9dc2ca25d7cb0a2aa62292b825af16
+size 7897624
diff --git a/src/components/Table/Tests/empty.test.tsx b/src/components/Table/Tests/empty.test.tsx
new file mode 100644
index 000000000..bebc11795
--- /dev/null
+++ b/src/components/Table/Tests/empty.test.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import Enzyme, { render } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Table from '../index';
+import type { FixedType } from '../Internal/OcTable.types';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const columns = [
+    { title: 'Column 1', dataIndex: 'address', key: '1' },
+    { title: 'Column 2', dataIndex: 'address', key: '2' },
+    { title: 'Column 3', dataIndex: 'address', key: '3' },
+    { title: 'Column 4', dataIndex: 'address', key: '4' },
+    { title: 'Column 5', dataIndex: 'address', key: '5' },
+    { title: 'Column 6', dataIndex: 'address', key: '6' },
+    { title: 'Column 7', dataIndex: 'address', key: '7' },
+    { title: 'Column 8', dataIndex: 'address', key: '8' },
+];
+
+const columnsFixed = [
+    {
+        title: 'Full Name',
+        width: 100,
+        dataIndex: 'name',
+        key: 'name',
+        fixed: 'left' as FixedType,
+    },
+    {
+        title: 'Age',
+        width: 100,
+        dataIndex: 'age',
+        key: 'age',
+        fixed: 'left' as FixedType,
+    },
+    { title: 'Column 1', dataIndex: 'address', key: '1' },
+    { title: 'Column 2', dataIndex: 'address', key: '2' },
+    { title: 'Column 3', dataIndex: 'address', key: '3' },
+    { title: 'Column 4', dataIndex: 'address', key: '4' },
+    { title: 'Column 5', dataIndex: 'address', key: '5' },
+    { title: 'Column 6', dataIndex: 'address', key: '6' },
+    { title: 'Column 7', dataIndex: 'address', key: '7' },
+    { title: 'Column 8', dataIndex: 'address', key: '8' },
+    {
+        title: 'Action',
+        key: 'address',
+        width: 100,
+        fixed: 'right' as FixedType,
+    },
+];
+
+describe('Table', () => {
+    it('renders empty table', () => {
+        const wrapper = render(
+            <Table dataSource={[]} columns={columns} pagination={false} />
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders empty table with fixed columns', () => {
+        const wrapper = render(
+            <Table
+                dataSource={[]}
+                columns={columnsFixed}
+                pagination={false}
+                scroll={{ x: 1 }}
+            />
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders empty table with custom emptyText', () => {
+        const wrapper = render(
+            <Table
+                dataSource={[]}
+                columns={columns}
+                pagination={false}
+                emptyText={'custom empty text'}
+            />
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders empty table without emptyText when loading', () => {
+        const wrapper = render(
+            <Table dataSource={[]} columns={columns} loading />
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+});
diff --git a/src/components/Table/Tests/type.test.tsx b/src/components/Table/Tests/type.test.tsx
new file mode 100644
index 000000000..1780a1cf2
--- /dev/null
+++ b/src/components/Table/Tests/type.test.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Table from '../Table';
+import type { ColumnProps } from '../index';
+
+const { Column, ColumnGroup } = Table;
+
+describe('Table.typescript', () => {
+    it('Column', () => {
+        const table = (
+            <Table>
+                <Column dataIndex="test" title="test" />
+            </Table>
+        );
+        expect(table).toBeTruthy();
+    });
+    it('ColumnGroup', () => {
+        const table = (
+            <Table>
+                <Column dataIndex="test" title="test" />
+                <ColumnGroup>
+                    <Column dataIndex="test" title="test" />
+                </ColumnGroup>
+            </Table>
+        );
+        expect(table).toBeTruthy();
+    });
+    it('selections', () => {
+        const table = (
+            <Table rowSelection={{ selections: [Table.SELECTION_ALL] }} />
+        );
+        expect(table).toBeTruthy();
+    });
+
+    it('generic', () => {
+        interface RecordType {
+            key: string;
+        }
+        const table = <Table<RecordType> dataSource={[{ key: 'Bamboo' }]} />;
+        expect(table).toBeTruthy();
+    });
+});
+
+describe('Table.typescript types', () => {
+    it('ColumnProps', () => {
+        interface User {
+            name: string;
+        }
+
+        const columns: ColumnProps<User>[] = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+            },
+        ];
+
+        expect(columns).toBeTruthy();
+    });
+});
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
new file mode 100644
index 000000000..40b7b735e
--- /dev/null
+++ b/src/components/Table/index.tsx
@@ -0,0 +1,17 @@
+import Table, { TablePaginationConfig } from './Table';
+
+export { ColumnProps } from './Internal/Column';
+export {
+    ColumnsType,
+    ColumnType,
+    ColumnGroupType,
+    ExpandableConfig,
+    FilterConfirmProps,
+    FilterValue,
+    SorterResult,
+    TableProps,
+    TableRowSelection,
+} from './Table.types';
+export { TablePaginationConfig };
+
+export default Table;
diff --git a/src/components/Table/utlities.ts b/src/components/Table/utlities.ts
new file mode 100644
index 000000000..b228ad482
--- /dev/null
+++ b/src/components/Table/utlities.ts
@@ -0,0 +1,39 @@
+import type {
+    ColumnType,
+    ColumnTitle,
+    ColumnTitleProps,
+    Key,
+} from './Table.types';
+
+export function getColumnKey<RecordType>(
+    column: ColumnType<RecordType>,
+    defaultKey: string
+): Key {
+    if ('key' in column && column.key !== undefined && column.key !== null) {
+        return column.key;
+    }
+    if (column.dataIndex) {
+        return (
+            Array.isArray(column.dataIndex)
+                ? column.dataIndex.join('.')
+                : column.dataIndex
+        ) as Key;
+    }
+
+    return defaultKey;
+}
+
+export function getColumnPos(index: number, pos?: string) {
+    return pos ? `${pos}-${index}` : `${index}`;
+}
+
+export function renderColumnTitle<RecordType>(
+    title: ColumnTitle<RecordType>,
+    props: ColumnTitleProps<RecordType>
+) {
+    if (typeof title === 'function') {
+        return title(props);
+    }
+
+    return title;
+}
diff --git a/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap b/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
index c76e7b135..a0e38e4ff 100644
--- a/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
+++ b/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
@@ -1,171 +1,3 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Panel tabs snapshot 1`] = `
-<div>
-  <div
-    className="tab-wrap"
-    role="tablist"
-    value="tab1"
-  >
-    <button
-      aria-label="Tab 1"
-      aria-selected={true}
-      className="tab active"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-      <span
-        className="label"
-      >
-        Tab 1
-      </span>
-      <div
-        className="tab-indicator"
-        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
-        data-flip-id="tabIndicator"
-        data-portal-key="portal"
-      />
-    </button>
-    <button
-      aria-label="Tab 2"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-      <span
-        className="label"
-      >
-        Tab 2
-      </span>
-    </button>
-    <button
-      aria-label="Tab 3"
-      aria-selected={false}
-      className="tab"
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-      <span
-        className="label"
-      >
-        Tab 3
-      </span>
-    </button>
-    <button
-      aria-label="Tab 4"
-      aria-selected={false}
-      className="tab"
-      disabled={true}
-      onClick={[Function]}
-      role="tab"
-    >
-      <span
-        aria-hidden={false}
-        className="icon icon-wrapper"
-        role="presentation"
-      >
-        <svg
-          role="presentation"
-          style={
-            Object {
-              "height": "20px",
-              "width": "20px",
-            }
-          }
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-            style={
-              Object {
-                "fill": "currentColor",
-              }
-            }
-          />
-        </svg>
-      </span>
-      <span
-        className="label"
-      >
-        Tab 4
-      </span>
-    </button>
-  </div>
-</div>
-`;
+version https://git-lfs.github.com/spec/v1
+oid sha256:9ab7c2374ef51604482bc10d3d45c162f804dc8f712e64cea4811d767daf14df
+size 4095
diff --git a/src/components/Tree/DirectoryTree.tsx b/src/components/Tree/DirectoryTree.tsx
new file mode 100644
index 000000000..220b49122
--- /dev/null
+++ b/src/components/Tree/DirectoryTree.tsx
@@ -0,0 +1,269 @@
+import React from 'react';
+import { debounce, mergeClasses } from '../../shared/utilities';
+import type OcTree from './Internal';
+import { conductExpandParent } from './Internal/util';
+import type { EventDataNode, DataNode, Key } from './Internal/OcTree.types';
+import {
+    convertDataToEntities,
+    convertTreeToData,
+} from './Internal/utils/treeUtil';
+import type { TreeProps, OcTreeNodeAttribute } from './Tree.types';
+import Tree from './Tree';
+import { calcRangeKeys, convertDirectoryKeysToNodes } from './Utils/dictUtil';
+import { Icon, IconName, IconSize } from '../Icon';
+import { useCanvasDirection } from '../../hooks/useCanvasDirection';
+
+import styles from './Styles/tree.module.scss';
+
+export type ExpandAction = false | 'click' | 'doubleClick';
+
+export interface DirectoryTreeProps extends TreeProps {
+    expandAction?: ExpandAction;
+}
+
+export interface DirectoryTreeState {
+    expandedKeys?: Key[];
+    selectedKeys?: Key[];
+}
+
+function getIcon(props: OcTreeNodeAttribute): React.ReactNode {
+    const { isLeaf, expanded } = props;
+    if (isLeaf) {
+        return (
+            <Icon
+                path={IconName.mdiFileDocumentOutline}
+                size={IconSize.Small}
+            />
+        );
+    }
+    return expanded ? (
+        <Icon path={IconName.mdiFolderOpenOutline} size={IconSize.Small} />
+    ) : (
+        <Icon path={IconName.mdiFolderOutline} size={IconSize.Small} />
+    );
+}
+
+function getTreeData({ treeData, children }: DirectoryTreeProps) {
+    return treeData || convertTreeToData(children);
+}
+
+const DirectoryTree: React.ForwardRefRenderFunction<
+    OcTree,
+    DirectoryTreeProps
+> = (
+    { defaultExpandAll, defaultExpandParent, defaultExpandedKeys, ...props },
+    ref
+) => {
+    // Shift click usage
+    const lastSelectedKey = React.useRef<Key>();
+
+    const cachedSelectedKeys = React.useRef<Key[]>();
+
+    const treeRef = React.createRef<OcTree>();
+
+    React.useImperativeHandle(ref, () => treeRef.current!);
+
+    const getInitExpandedKeys = () => {
+        const { keyEntities } = convertDataToEntities(getTreeData(props));
+
+        let initExpandedKeys: any;
+
+        // Expanded keys
+        if (defaultExpandAll) {
+            initExpandedKeys = Object.keys(keyEntities);
+        } else if (defaultExpandParent) {
+            initExpandedKeys = conductExpandParent(
+                props.expandedKeys || defaultExpandedKeys || [],
+                keyEntities
+            );
+        } else {
+            initExpandedKeys = props.expandedKeys || defaultExpandedKeys;
+        }
+        return initExpandedKeys;
+    };
+
+    const [selectedKeys, setSelectedKeys] = React.useState(
+        props.selectedKeys || props.defaultSelectedKeys || []
+    );
+    const [expandedKeys, setExpandedKeys] = React.useState(
+        getInitExpandedKeys()
+    );
+
+    React.useEffect(() => {
+        if ('selectedKeys' in props) {
+            setSelectedKeys(props.selectedKeys!);
+        }
+    }, [props.selectedKeys]);
+
+    React.useEffect(() => {
+        if ('expandedKeys' in props) {
+            setExpandedKeys(props.expandedKeys);
+        }
+    }, [props.expandedKeys]);
+
+    const expandFolderNode = (
+        event: React.MouseEvent<HTMLElement>,
+        node: any
+    ) => {
+        const { isLeaf } = node;
+
+        if (isLeaf || event.shiftKey || event.metaKey || event.ctrlKey) {
+            return;
+        }
+
+        // Call internal tree expand function
+        debounce(() => {
+            treeRef.current!.onNodeExpand(event as any, node);
+        }, 200);
+    };
+
+    const onExpand = (
+        keys: Key[],
+        info: {
+            node: EventDataNode<DataNode>;
+            expanded: boolean;
+            nativeEvent: MouseEvent;
+        }
+    ) => {
+        if (!('expandedKeys' in props)) {
+            setExpandedKeys(keys);
+        }
+        // Call origin function
+        return props.onExpand?.(keys, info);
+    };
+
+    const onClick = (
+        event: React.MouseEvent<HTMLElement>,
+        node: EventDataNode<DataNode>
+    ) => {
+        const { expandAction } = props;
+
+        // Expand the tree
+        if (expandAction === 'click') {
+            expandFolderNode(event, node);
+        }
+
+        props.onClick?.(event, node);
+    };
+
+    const onDoubleClick = (
+        event: React.MouseEvent<HTMLElement>,
+        node: EventDataNode<DataNode>
+    ) => {
+        const { expandAction } = props;
+
+        // Expand the tree
+        if (expandAction === 'doubleClick') {
+            expandFolderNode(event, node);
+        }
+
+        props.onDoubleClick?.(event, node);
+    };
+
+    const onSelect = (
+        keys: Key[],
+        event: {
+            event: 'select';
+            selected: boolean;
+            node: any;
+            selectedNodes: DataNode[];
+            nativeEvent: MouseEvent;
+        }
+    ) => {
+        const { multiple } = props;
+        const { node, nativeEvent } = event;
+        const { key = '' } = node;
+
+        const treeData = getTreeData(props);
+        // const newState: DirectoryTreeState = {};
+
+        // We need wrap this event since some value is not same
+        const newEvent: any = {
+            ...event,
+            selected: true, // Directory selected always true
+        };
+
+        // Windows / Mac single pick
+        const ctrlPick: boolean = nativeEvent?.ctrlKey || nativeEvent?.metaKey;
+        const shiftPick: boolean = nativeEvent?.shiftKey;
+
+        // Generate new selected keys
+        let newSelectedKeys: Key[];
+        if (multiple && ctrlPick) {
+            // Control click
+            newSelectedKeys = keys;
+            lastSelectedKey.current = key;
+            cachedSelectedKeys.current = newSelectedKeys;
+            newEvent.selectedNodes = convertDirectoryKeysToNodes(
+                treeData,
+                newSelectedKeys
+            );
+        } else if (multiple && shiftPick) {
+            // Shift click
+            newSelectedKeys = Array.from(
+                new Set([
+                    ...(cachedSelectedKeys.current || []),
+                    ...calcRangeKeys({
+                        treeData,
+                        expandedKeys,
+                        startKey: key,
+                        endKey: lastSelectedKey.current,
+                    }),
+                ])
+            );
+            newEvent.selectedNodes = convertDirectoryKeysToNodes(
+                treeData,
+                newSelectedKeys
+            );
+        } else {
+            // Single click
+            newSelectedKeys = [key];
+            lastSelectedKey.current = key;
+            cachedSelectedKeys.current = newSelectedKeys;
+            newEvent.selectedNodes = convertDirectoryKeysToNodes(
+                treeData,
+                newSelectedKeys
+            );
+        }
+
+        props.onSelect?.(newSelectedKeys, newEvent);
+        if (!('selectedKeys' in props)) {
+            setSelectedKeys(newSelectedKeys);
+        }
+    };
+    const htmlDir: string = useCanvasDirection();
+
+    const { classNames, ...otherProps } = props;
+
+    const connectClassNames = mergeClasses([
+        styles.treeDirectory,
+        { ['tree-directory-rtl']: htmlDir === 'rtl' },
+        classNames,
+    ]);
+
+    return (
+        <Tree
+            icon={getIcon}
+            ref={treeRef}
+            blockNode
+            {...otherProps}
+            classNames={connectClassNames}
+            expandedKeys={expandedKeys}
+            selectedKeys={selectedKeys}
+            onSelect={onSelect}
+            onClick={onClick}
+            onDoubleClick={onDoubleClick}
+            onExpand={onExpand}
+        />
+    );
+};
+
+const ForwardDirectoryTree = React.forwardRef(DirectoryTree);
+ForwardDirectoryTree.displayName = 'DirectoryTree';
+
+ForwardDirectoryTree.defaultProps = {
+    showIcon: true,
+    expandAction: 'click' as DirectoryTreeProps['expandAction'],
+};
+
+export default ForwardDirectoryTree;
diff --git a/src/components/Tree/Internal/DropIndicator.tsx b/src/components/Tree/Internal/DropIndicator.tsx
new file mode 100644
index 000000000..2a16701e4
--- /dev/null
+++ b/src/components/Tree/Internal/DropIndicator.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+export default function DropIndicator({
+    dropPosition,
+    dropLevelOffset,
+    indent,
+}: {
+    dropPosition: -1 | 0 | 1;
+    dropLevelOffset: number;
+    indent: number;
+}) {
+    const style: React.CSSProperties = {
+        pointerEvents: 'none',
+        position: 'absolute',
+        right: 0,
+        backgroundColor: 'red',
+        height: 2,
+    };
+    switch (dropPosition) {
+        case -1:
+            style.top = 0;
+            style.left = -dropLevelOffset * indent;
+            break;
+        case 1:
+            style.bottom = 0;
+            style.left = -dropLevelOffset * indent;
+            break;
+        case 0:
+            style.bottom = 0;
+            style.left = indent;
+            break;
+    }
+    return <div style={style} />;
+}
diff --git a/src/components/Tree/Internal/Indent.tsx b/src/components/Tree/Internal/Indent.tsx
new file mode 100644
index 000000000..8105e8147
--- /dev/null
+++ b/src/components/Tree/Internal/Indent.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { mergeClasses } from '../../../shared/utilities';
+
+import styles from './octree.module.scss';
+
+interface IndentProps {
+    level: number;
+    isStart: boolean[];
+    isEnd: boolean[];
+}
+
+const Indent = ({ level, isStart, isEnd }: IndentProps) => {
+    const baseClassName = styles.treeIndentUnit;
+    const list: React.ReactElement[] = [];
+    for (let i = 0; i < level; i += 1) {
+        list.push(
+            <span
+                key={i}
+                className={mergeClasses([
+                    baseClassName,
+                    { [`${baseClassName}-start`]: isStart[i] },
+                    { [`${baseClassName}-end`]: isEnd[i] },
+                ])}
+            />
+        );
+    }
+
+    return (
+        <span aria-hidden="true" className={styles.treeIndent}>
+            {list}
+        </span>
+    );
+};
+
+export default React.memo(Indent);
diff --git a/src/components/Tree/Internal/MotionTreeNode.tsx b/src/components/Tree/Internal/MotionTreeNode.tsx
new file mode 100644
index 000000000..e6208071d
--- /dev/null
+++ b/src/components/Tree/Internal/MotionTreeNode.tsx
@@ -0,0 +1,143 @@
+import React from 'react';
+import { useEffect } from 'react';
+import { mergeClasses } from '../../../shared/utilities';
+import CSSMotion from '../../Motion';
+import TreeNode from './TreeNode';
+import { FlattenNode, TreeNodeProps } from './OcTree.types';
+import { getTreeNodeProps, TreeNodeRequiredProps } from './utils/treeUtil';
+
+import styles from './octree.module.scss';
+
+interface MotionTreeNodeProps extends Omit<TreeNodeProps, 'domRef'> {
+    active: boolean;
+    motion?: any;
+    motionNodes?: FlattenNode[];
+    onMotionStart: () => void;
+    onMotionEnd: () => void;
+    motionType?: 'show' | 'hide';
+
+    treeNodeRequiredProps: TreeNodeRequiredProps;
+}
+
+const MotionTreeNode: React.ForwardRefRenderFunction<
+    HTMLDivElement,
+    MotionTreeNodeProps
+> = (
+    {
+        classNames,
+        style,
+        motion,
+        motionNodes,
+        motionType,
+        onMotionStart: onOriginMotionStart,
+        onMotionEnd: onOriginMotionEnd,
+        active,
+        treeNodeRequiredProps,
+        ...props
+    },
+    ref
+) => {
+    const [visible, setVisible] = React.useState(true);
+
+    const motionedRef = React.useRef(false);
+
+    const onMotionEnd = () => {
+        if (!motionedRef.current) {
+            onOriginMotionEnd();
+        }
+        motionedRef.current = true;
+    };
+
+    useEffect(() => {
+        if (motionNodes && motionType === 'hide' && visible) {
+            setVisible(false);
+        }
+    }, [motionNodes]);
+
+    useEffect(() => {
+        // Trigger motion only when patched
+        if (motionNodes) {
+            onOriginMotionStart();
+        }
+
+        return () => {
+            if (motionNodes) {
+                onMotionEnd();
+            }
+        };
+    }, []);
+
+    if (motionNodes) {
+        return (
+            <CSSMotion
+                ref={ref}
+                visible={visible}
+                {...motion}
+                motionAppear={motionType === 'show'}
+                onAppearEnd={onMotionEnd}
+                onLeaveEnd={onMotionEnd}
+            >
+                {(
+                    { classNames: motionClassName, style: motionStyle },
+                    motionRef
+                ) => (
+                    <div
+                        ref={motionRef}
+                        className={mergeClasses([
+                            'tree-treenode-motion',
+                            motionClassName,
+                        ])}
+                        style={motionStyle}
+                    >
+                        {motionNodes.map((treeNode: FlattenNode) => {
+                            const {
+                                data: { ...restProps },
+                                title,
+                                key,
+                                isStart,
+                                isEnd,
+                            } = treeNode;
+                            delete restProps.children;
+
+                            const treeNodeProps = getTreeNodeProps(
+                                key,
+                                treeNodeRequiredProps
+                            );
+
+                            return (
+                                <TreeNode
+                                    {...(restProps as Omit<
+                                        typeof restProps,
+                                        'children'
+                                    >)}
+                                    {...treeNodeProps}
+                                    title={title}
+                                    active={active}
+                                    data={treeNode.data}
+                                    key={key}
+                                    isStart={isStart}
+                                    isEnd={isEnd}
+                                />
+                            );
+                        })}
+                    </div>
+                )}
+            </CSSMotion>
+        );
+    }
+    return (
+        <TreeNode
+            domRef={ref}
+            classNames={classNames}
+            style={style}
+            {...props}
+            active={active}
+        />
+    );
+};
+
+MotionTreeNode.displayName = 'MotionTreeNode';
+
+const RefMotionTreeNode = React.forwardRef(MotionTreeNode);
+
+export default RefMotionTreeNode;
diff --git a/src/components/Tree/Internal/NodeList.tsx b/src/components/Tree/Internal/NodeList.tsx
new file mode 100644
index 000000000..7956d9b98
--- /dev/null
+++ b/src/components/Tree/Internal/NodeList.tsx
@@ -0,0 +1,419 @@
+import React from 'react';
+import VirtualList, { ListRef } from '../../VirtualList';
+import {
+    FlattenNode,
+    Key,
+    DataEntity,
+    DataNode,
+    ScrollTo,
+} from './OcTree.types';
+import MotionTreeNode from './MotionTreeNode';
+import { findExpandedKeys, getExpandRange } from './utils/diffUtil';
+import { getTreeNodeProps, getKey } from './utils/treeUtil';
+
+import styles from './octree.module.scss';
+
+const HIDDEN_STYLE = {
+    width: 0,
+    height: 0,
+    display: 'flex',
+    overflow: 'hidden',
+    opacity: 0,
+    border: 0,
+    padding: 0,
+    margin: 0,
+};
+
+const noop = () => {};
+
+export const MOTION_KEY = `OC_TREE_MOTION_${Math.random()}`;
+
+const MotionNode: DataNode = {
+    key: MOTION_KEY,
+};
+
+export const MotionEntity: DataEntity = {
+    key: MOTION_KEY,
+    level: 0,
+    index: 0,
+    pos: '0',
+    node: MotionNode,
+    nodes: [MotionNode],
+};
+
+const MotionFlattenData: FlattenNode = {
+    parent: null,
+    children: [],
+    pos: MotionEntity.pos,
+    data: MotionNode,
+    title: null,
+    key: MOTION_KEY,
+    /** Hold empty list here since we do not use it */
+    isStart: [],
+    isEnd: [],
+};
+
+export interface NodeListRef {
+    scrollTo: ScrollTo;
+    getIndentWidth: () => number;
+}
+
+interface NodeListProps<TreeDataType> {
+    style: React.CSSProperties;
+    data: FlattenNode<TreeDataType>[];
+    motion: any;
+    focusable?: boolean;
+    activeItem: FlattenNode<TreeDataType>;
+    focused?: boolean;
+    tabIndex: number;
+    checkable?: boolean;
+    selectable?: boolean;
+    disabled?: boolean;
+
+    expandedKeys: Key[];
+    selectedKeys: Key[];
+    checkedKeys: Key[];
+    loadedKeys: Key[];
+    loadingKeys: Key[];
+    halfCheckedKeys: Key[];
+    keyEntities: Record<Key, DataEntity<any>>;
+
+    dragging: boolean;
+    dragOverNodeKey: Key;
+    dropPosition: number;
+
+    // Virtual list
+    height: number;
+    itemHeight: number;
+    virtual?: boolean;
+
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+    onActiveChange: (key: Key) => void;
+
+    onListChangeStart: () => void;
+    onListChangeEnd: () => void;
+}
+
+/**
+ * We only need get visible content items to play the animation.
+ */
+export function getMinimumRangeTransitionRange(
+    list: FlattenNode[],
+    virtual: boolean,
+    height: number,
+    itemHeight: number
+) {
+    if (virtual === false || !height) {
+        return list;
+    }
+
+    return list.slice(0, Math.ceil(height / itemHeight) + 1);
+}
+
+function itemKey(item: FlattenNode) {
+    const { key, pos } = item;
+    return getKey(key, pos);
+}
+
+function getAccessibilityPath(item: FlattenNode): string {
+    let path = String(item.data.key);
+    let current = item;
+
+    while (current.parent) {
+        current = current.parent;
+        path = `${current.data.key} > ${path}`;
+    }
+
+    return path;
+}
+
+const NodeList = React.forwardRef<NodeListRef, NodeListProps<any>>(
+    (props, ref) => {
+        const {
+            data,
+            selectable,
+            checkable,
+            expandedKeys,
+            selectedKeys,
+            checkedKeys,
+            loadedKeys,
+            loadingKeys,
+            halfCheckedKeys,
+            keyEntities,
+            disabled,
+
+            dragging,
+            dragOverNodeKey,
+            dropPosition,
+            motion,
+
+            height,
+            itemHeight,
+            virtual,
+
+            focusable,
+            activeItem,
+            focused,
+            tabIndex,
+
+            onKeyDown,
+            onFocus,
+            onBlur,
+            onActiveChange,
+
+            onListChangeStart,
+            onListChangeEnd,
+
+            ...domProps
+        } = props;
+
+        // =============================== Ref ================================
+        const listRef = React.useRef<ListRef>(null);
+        const indentMeasurerRef = React.useRef<HTMLDivElement>(null);
+        React.useImperativeHandle(ref, () => ({
+            scrollTo: (scroll: any) => {
+                listRef.current.scrollTo(scroll);
+            },
+            getIndentWidth: () => indentMeasurerRef.current.offsetWidth,
+        }));
+
+        // ============================== Motion ==============================
+        const [prevExpandedKeys, setPrevExpandedKeys] =
+            React.useState(expandedKeys);
+        const [prevData, setPrevData] = React.useState(data);
+        const [transitionData, setTransitionData] = React.useState(data);
+        const [transitionRange, setTransitionRange] = React.useState([]);
+        const [motionType, setMotionType] = React.useState<
+            'show' | 'hide' | null
+        >(null);
+
+        // When motion end but data change, this will makes data back to previous one
+        const dataRef = React.useRef(data);
+        dataRef.current = data;
+
+        function onMotionEnd() {
+            const latestData = dataRef.current;
+
+            setPrevData(latestData);
+            setTransitionData(latestData);
+            setTransitionRange([]);
+            setMotionType(null);
+
+            onListChangeEnd();
+        }
+
+        // Do animation if expanded keys changed
+        React.useEffect(() => {
+            setPrevExpandedKeys(expandedKeys);
+
+            const diffExpanded = findExpandedKeys(
+                prevExpandedKeys,
+                expandedKeys
+            );
+
+            if (diffExpanded.key !== null) {
+                if (diffExpanded.add) {
+                    const keyIndex = prevData.findIndex(
+                        ({ key }) => key === diffExpanded.key
+                    );
+
+                    const rangeNodes = getMinimumRangeTransitionRange(
+                        getExpandRange(prevData, data, diffExpanded.key),
+                        virtual,
+                        height,
+                        itemHeight
+                    );
+
+                    const newTransitionData: FlattenNode[] = prevData.slice();
+                    newTransitionData.splice(
+                        keyIndex + 1,
+                        0,
+                        MotionFlattenData
+                    );
+
+                    setTransitionData(newTransitionData);
+                    setTransitionRange(rangeNodes);
+                    setMotionType('show');
+                } else {
+                    const keyIndex = data.findIndex(
+                        ({ key }) => key === diffExpanded.key
+                    );
+
+                    const rangeNodes = getMinimumRangeTransitionRange(
+                        getExpandRange(data, prevData, diffExpanded.key),
+                        virtual,
+                        height,
+                        itemHeight
+                    );
+
+                    const newTransitionData: FlattenNode[] = data.slice();
+                    newTransitionData.splice(
+                        keyIndex + 1,
+                        0,
+                        MotionFlattenData
+                    );
+
+                    setTransitionData(newTransitionData);
+                    setTransitionRange(rangeNodes);
+                    setMotionType('hide');
+                }
+            } else if (prevData !== data) {
+                // If whole data changed, we just refresh the list
+                setPrevData(data);
+                setTransitionData(data);
+            }
+        }, [expandedKeys, data]);
+
+        // We should clean up motion if is changed by dragging
+        React.useEffect(() => {
+            if (!dragging) {
+                onMotionEnd();
+            }
+        }, [dragging]);
+
+        const mergedData = motion ? transitionData : data;
+
+        const treeNodeRequiredProps = {
+            expandedKeys,
+            selectedKeys,
+            loadedKeys,
+            loadingKeys,
+            checkedKeys,
+            halfCheckedKeys,
+            dragOverNodeKey,
+            dropPosition,
+            keyEntities,
+        };
+
+        return (
+            <>
+                {focused && activeItem && (
+                    <span style={HIDDEN_STYLE} aria-live="assertive">
+                        {getAccessibilityPath(activeItem)}
+                    </span>
+                )}
+
+                <div>
+                    <input
+                        style={HIDDEN_STYLE}
+                        disabled={focusable === false || disabled}
+                        tabIndex={focusable !== false ? tabIndex : null}
+                        onKeyDown={onKeyDown}
+                        onFocus={onFocus}
+                        onBlur={onBlur}
+                        value=""
+                        onChange={noop}
+                        aria-label="for screen reader"
+                    />
+                </div>
+
+                <div
+                    className={styles.treeTreenode}
+                    aria-hidden
+                    style={{
+                        position: 'absolute',
+                        pointerEvents: 'none',
+                        visibility: 'hidden',
+                        height: 0,
+                        overflow: 'hidden',
+                    }}
+                >
+                    <div className={styles.treeIndent}>
+                        <div
+                            ref={indentMeasurerRef}
+                            className={styles.treeIndentUnit}
+                        />
+                    </div>
+                </div>
+
+                <VirtualList<FlattenNode>
+                    {...domProps}
+                    data={mergedData}
+                    itemKey={itemKey}
+                    height={height}
+                    fullHeight={false}
+                    virtual={virtual}
+                    itemHeight={itemHeight}
+                    ref={listRef}
+                    onVisibleChange={(
+                        originList: Iterable<unknown>,
+                        fullList: any[]
+                    ) => {
+                        const originSet = new Set(originList);
+                        const restList = fullList.filter(
+                            (item) => !originSet.has(item)
+                        );
+
+                        // Motion node is not render. Skip motion
+                        if (
+                            restList.some(
+                                (item) => itemKey(item) === MOTION_KEY
+                            )
+                        ) {
+                            onMotionEnd();
+                        }
+                    }}
+                >
+                    {(treeNode: {
+                        data: any;
+                        pos?: any;
+                        title?: any;
+                        key?: any;
+                        isStart?: any;
+                        isEnd?: any;
+                    }) => {
+                        const {
+                            pos,
+                            data: { ...restProps },
+                            title,
+                            key,
+                            isStart,
+                            isEnd,
+                        } = treeNode;
+                        const mergedKey = getKey(key, pos);
+                        delete restProps.key;
+                        delete restProps.children;
+
+                        const treeNodeProps = getTreeNodeProps(
+                            mergedKey,
+                            treeNodeRequiredProps
+                        );
+
+                        return (
+                            <MotionTreeNode
+                                {...(restProps as Omit<
+                                    typeof restProps,
+                                    'children'
+                                >)}
+                                {...treeNodeProps}
+                                title={title}
+                                active={!!activeItem && key === activeItem.key}
+                                pos={pos}
+                                data={treeNode.data}
+                                isStart={isStart}
+                                isEnd={isEnd}
+                                motion={motion}
+                                motionNodes={
+                                    key === MOTION_KEY ? transitionRange : null
+                                }
+                                motionType={motionType}
+                                onMotionStart={onListChangeStart}
+                                onMotionEnd={onMotionEnd}
+                                treeNodeRequiredProps={treeNodeRequiredProps}
+                                onMouseMove={() => {
+                                    onActiveChange(null);
+                                }}
+                            />
+                        );
+                    }}
+                </VirtualList>
+            </>
+        );
+    }
+);
+
+NodeList.displayName = 'NodeList';
+
+export default NodeList;
diff --git a/src/components/Tree/Internal/OcTree.tsx b/src/components/Tree/Internal/OcTree.tsx
new file mode 100644
index 000000000..ac9cae707
--- /dev/null
+++ b/src/components/Tree/Internal/OcTree.tsx
@@ -0,0 +1,1394 @@
+import React from 'react';
+import {
+    CheckInfo,
+    DraggableConfig,
+    MAX_RETRY_TIMES,
+    OcTreeProps,
+    OcTreeState,
+} from './OcTree.types';
+import { eventKeys, mergeClasses, pickAttrs } from '../../../shared/utilities';
+import {
+    TreeContext,
+    NodeMouseEventHandler,
+    NodeDragEventHandler,
+} from './contextTypes';
+import {
+    getDragChildrenKeys,
+    parseCheckedKeys,
+    conductExpandParent,
+    calcSelectedKeys,
+    calcDropPosition,
+    arrAdd,
+    arrDel,
+    posToArr,
+} from './util';
+import {
+    DataNode,
+    Key,
+    FlattenNode,
+    EventDataNode,
+    NodeInstance,
+    ScrollTo,
+    BasicDataNode,
+} from './OcTree.types';
+import {
+    flattenTreeData,
+    convertTreeToData,
+    convertDataToEntities,
+    warningWithoutKey,
+    convertNodePropsToEventData,
+    getTreeNodeProps,
+    fillFieldNames,
+} from './utils/treeUtil';
+import NodeList, { MOTION_KEY, MotionEntity, NodeListRef } from './NodeList';
+import TreeNode from './TreeNode';
+import { conductCheck } from './utils/conductUtil';
+import DropIndicator from './DropIndicator';
+
+import styles from './octree.module.scss';
+
+class Tree<
+    TreeDataType extends DataNode | BasicDataNode = DataNode
+> extends React.Component<
+    OcTreeProps<TreeDataType>,
+    OcTreeState<TreeDataType>
+> {
+    static defaultProps = {
+        showLine: false,
+        showIcon: true,
+        selectable: true,
+        multiple: false,
+        checkable: false,
+        disabled: false,
+        checkStrictly: false,
+        draggable: false,
+        defaultExpandParent: true,
+        autoExpandParent: false,
+        defaultExpandAll: false,
+        defaultExpandedKeys: [],
+        defaultCheckedKeys: [],
+        defaultSelectedKeys: [],
+        dropIndicatorRender: DropIndicator,
+        allowDrop: () => true,
+        expandAction: false,
+    } as any;
+
+    static TreeNode = TreeNode;
+
+    destroyed: boolean = false;
+
+    delayedDragEnterLogic: Record<Key, number>;
+
+    loadingRetryTimes: Record<Key, number> = {};
+
+    state: OcTreeState<TreeDataType> = {
+        keyEntities: {},
+
+        indent: null,
+
+        selectedKeys: [],
+        checkedKeys: [],
+        halfCheckedKeys: [],
+        loadedKeys: [],
+        loadingKeys: [],
+        expandedKeys: [],
+
+        draggingNodeKey: null,
+        dragChildrenKeys: [],
+
+        // dropTargetKey is the key of abstract-drop-node
+        // the abstract-drop-node is the real drop node when drag and drop
+        // not the DOM drag over node
+        dropTargetKey: null,
+        dropPosition: null, // the drop position of abstract-drop-node, inside 0, top -1, bottom 1
+        dropContainerKey: null, // the container key of abstract-drop-node if dropPosition is -1 or 1
+        dropLevelOffset: null, // the drop level offset of abstract-drag-over-node
+        dropTargetPos: null, // the pos of abstract-drop-node
+        dropAllowed: true, // if drop to abstract-drop-node is allowed
+        // the abstract-drag-over-node
+        // if mouse is on the bottom of top dom node or no the top of the bottom dom node
+        // abstract-drag-over-node is the top node
+        dragOverNodeKey: null,
+
+        treeData: [],
+        flattenNodes: [],
+
+        focused: false,
+        activeKey: null,
+
+        listChanging: false,
+
+        prevProps: null,
+
+        fieldNames: fillFieldNames(),
+    };
+
+    dragStartMousePosition: { x: number; y: number } = null;
+
+    dragNode: NodeInstance<TreeDataType>;
+
+    currentMouseOverDroppableNodeKey: Key = null;
+
+    listRef = React.createRef<NodeListRef>();
+
+    componentDidMount(): void {
+        this.destroyed = false;
+        this.onUpdated();
+    }
+
+    componentDidUpdate(): void {
+        this.onUpdated();
+    }
+
+    onUpdated() {
+        const { activeKey } = this.props;
+
+        if (activeKey !== undefined && activeKey !== this.state.activeKey) {
+            this.setState({ activeKey });
+
+            if (activeKey !== null) {
+                this.scrollTo({ key: activeKey });
+            }
+        }
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('dragend', () => this.onWindowDragEnd);
+        this.destroyed = true;
+    }
+
+    static getDerivedStateFromProps(
+        props: OcTreeProps,
+        prevState: OcTreeState
+    ) {
+        const { prevProps } = prevState;
+        const newState: Partial<OcTreeState> = {
+            prevProps: props,
+        };
+
+        function needSync(name: string) {
+            return (
+                (!prevProps && name in props) ||
+                (prevProps && (prevProps as any)[name] !== (props as any)[name])
+            );
+        }
+
+        // ================== Tree Node ==================
+        let treeData: DataNode[];
+
+        // fieldNames
+        let { fieldNames } = prevState;
+        if (needSync('fieldNames')) {
+            fieldNames = fillFieldNames(props.fieldNames);
+            newState.fieldNames = fieldNames;
+        }
+
+        // Check if `treeData` or `children` changed and save into the state.
+        if (needSync('treeData')) {
+            ({ treeData } = props);
+        } else if (needSync('children')) {
+            treeData = convertTreeToData(props.children);
+        }
+
+        // Save flatten nodes info and convert `treeData` into keyEntities
+        if (treeData) {
+            newState.treeData = treeData;
+            const entitiesMap = convertDataToEntities(treeData, { fieldNames });
+            newState.keyEntities = {
+                [MOTION_KEY]: MotionEntity,
+                ...entitiesMap.keyEntities,
+            };
+
+            // Warning if treeNode not provide key
+            if (process.env.NODE_ENV !== 'production') {
+                warningWithoutKey(treeData, fieldNames);
+            }
+        }
+
+        const keyEntities = newState.keyEntities || prevState.keyEntities;
+
+        // ================ expandedKeys =================
+        if (
+            needSync('expandedKeys') ||
+            (prevProps && needSync('autoExpandParent'))
+        ) {
+            newState.expandedKeys =
+                props.autoExpandParent ||
+                (!prevProps && props.defaultExpandParent)
+                    ? conductExpandParent(props.expandedKeys, keyEntities)
+                    : props.expandedKeys;
+        } else if (!prevProps && props.defaultExpandAll) {
+            const cloneKeyEntities = { ...keyEntities };
+            delete cloneKeyEntities[MOTION_KEY];
+            newState.expandedKeys = Object.keys(cloneKeyEntities).map(
+                (key) => cloneKeyEntities[key].key
+            );
+        } else if (!prevProps && props.defaultExpandedKeys) {
+            newState.expandedKeys =
+                props.autoExpandParent || props.defaultExpandParent
+                    ? conductExpandParent(
+                          props.defaultExpandedKeys,
+                          keyEntities
+                      )
+                    : props.defaultExpandedKeys;
+        }
+
+        if (!newState.expandedKeys) {
+            delete newState.expandedKeys;
+        }
+
+        // ================ flattenNodes =================
+        if (treeData || newState.expandedKeys) {
+            const flattenNodes: FlattenNode[] = flattenTreeData(
+                treeData || prevState.treeData,
+                newState.expandedKeys || prevState.expandedKeys,
+                fieldNames
+            );
+            newState.flattenNodes = flattenNodes;
+        }
+
+        // ================ selectedKeys =================
+        if (props.selectable) {
+            if (needSync('selectedKeys')) {
+                newState.selectedKeys = calcSelectedKeys(
+                    props.selectedKeys,
+                    props
+                );
+            } else if (!prevProps && props.defaultSelectedKeys) {
+                newState.selectedKeys = calcSelectedKeys(
+                    props.defaultSelectedKeys,
+                    props
+                );
+            }
+        }
+
+        // ================= checkedKeys =================
+        if (props.checkable) {
+            let checkedKeyEntity;
+
+            if (needSync('checkedKeys')) {
+                checkedKeyEntity = parseCheckedKeys(props.checkedKeys) || {};
+            } else if (!prevProps && props.defaultCheckedKeys) {
+                checkedKeyEntity =
+                    parseCheckedKeys(props.defaultCheckedKeys) || {};
+            } else if (treeData) {
+                // If `treeData` changed, we also need check it
+                checkedKeyEntity = parseCheckedKeys(props.checkedKeys) || {
+                    checkedKeys: prevState.checkedKeys,
+                    halfCheckedKeys: prevState.halfCheckedKeys,
+                };
+            }
+
+            if (checkedKeyEntity) {
+                let { checkedKeys = [], halfCheckedKeys = [] } =
+                    checkedKeyEntity;
+
+                if (!props.checkStrictly) {
+                    const conductKeys = conductCheck(
+                        checkedKeys,
+                        true,
+                        keyEntities
+                    );
+                    ({ checkedKeys, halfCheckedKeys } = conductKeys);
+                }
+
+                newState.checkedKeys = checkedKeys;
+                newState.halfCheckedKeys = halfCheckedKeys;
+            }
+        }
+
+        // ================= loadedKeys ==================
+        if (needSync('loadedKeys')) {
+            newState.loadedKeys = props.loadedKeys;
+        }
+
+        return newState;
+    }
+
+    onNodeDragStart: NodeDragEventHandler<TreeDataType, HTMLDivElement> = (
+        event,
+        node
+    ) => {
+        const { expandedKeys, keyEntities } = this.state;
+        const { onDragStart } = this.props;
+        const { eventKey } = node.props;
+
+        this.dragNode = node;
+        this.dragStartMousePosition = {
+            x: event.clientX,
+            y: event.clientY,
+        };
+
+        const newExpandedKeys = arrDel(expandedKeys, eventKey);
+
+        this.setState({
+            draggingNodeKey: eventKey,
+            dragChildrenKeys: getDragChildrenKeys(eventKey, keyEntities),
+            indent: this.listRef.current.getIndentWidth(),
+        });
+
+        this.setExpandedKeys(newExpandedKeys);
+
+        window.addEventListener('dragend', () => this.onWindowDragEnd);
+
+        onDragStart?.({
+            event,
+            node: convertNodePropsToEventData<TreeDataType>(node.props),
+        });
+    };
+
+    /**
+     * [Legacy] Select handler is smaller than node,
+     * so that this will trigger when drag enter node or select handler.
+     * This is a little tricky if customize css without padding.
+     * Better for use mouse move event to refresh drag state.
+     * But let's just keep it to avoid event trigger logic change.
+     */
+    onNodeDragEnter = (
+        event: React.DragEvent<HTMLDivElement>,
+        node: NodeInstance<TreeDataType>
+    ) => {
+        const {
+            expandedKeys,
+            keyEntities,
+            dragChildrenKeys,
+            flattenNodes,
+            indent,
+        } = this.state;
+        const { onDragEnter, onExpand, allowDrop, direction } = this.props;
+        const { pos, eventKey } = node.props;
+        const { dragNode } = this;
+
+        // record the key of node which is latest entered, used in dragleave event.
+        if (this.currentMouseOverDroppableNodeKey !== eventKey) {
+            this.currentMouseOverDroppableNodeKey = eventKey;
+        }
+
+        if (!dragNode) {
+            this.resetDragState();
+            return;
+        }
+
+        const {
+            dropPosition,
+            dropLevelOffset,
+            dropTargetKey,
+            dropContainerKey,
+            dropTargetPos,
+            dropAllowed,
+            dragOverNodeKey,
+        } = calcDropPosition<TreeDataType>(
+            event,
+            dragNode,
+            node,
+            indent,
+            this.dragStartMousePosition,
+            allowDrop,
+            flattenNodes,
+            keyEntities,
+            expandedKeys,
+            direction
+        );
+
+        if (
+            // don't allow drop inside its children
+            dragChildrenKeys.indexOf(dropTargetKey) !== -1 ||
+            // don't allow drop when drop is not allowed caculated by calcDropPosition
+            !dropAllowed
+        ) {
+            this.resetDragState();
+            return;
+        }
+
+        // Side effect for delay drag
+        if (!this.delayedDragEnterLogic) {
+            this.delayedDragEnterLogic = {};
+        }
+        Object.keys(this.delayedDragEnterLogic).forEach((key) => {
+            clearTimeout(this.delayedDragEnterLogic[key]);
+        });
+
+        if (dragNode.props.eventKey !== node.props.eventKey) {
+            // hoist expand logic here
+            // since if logic is on the bottom
+            // it will be blocked by abstract dragover node check
+            //   => if you dragenter from top, you mouse will still be consider as in the top node
+            event.persist();
+            this.delayedDragEnterLogic[pos] = window.setTimeout(() => {
+                if (this.state.draggingNodeKey === null) return;
+
+                let newExpandedKeys = [...expandedKeys];
+                const entity = keyEntities[node.props.eventKey];
+
+                if (entity && (entity.children || []).length) {
+                    newExpandedKeys = arrAdd(expandedKeys, node.props.eventKey);
+                }
+
+                if (!('expandedKeys' in this.props)) {
+                    this.setExpandedKeys(newExpandedKeys);
+                }
+
+                onExpand?.(newExpandedKeys, {
+                    node: convertNodePropsToEventData(node.props),
+                    expanded: true,
+                    nativeEvent: event.nativeEvent,
+                });
+            }, 800);
+        }
+
+        // Skip if drag node is self
+        if (
+            dragNode.props.eventKey === dropTargetKey &&
+            dropLevelOffset === 0
+        ) {
+            this.resetDragState();
+            return;
+        }
+
+        // Update drag over node and drag state
+        this.setState({
+            dragOverNodeKey,
+            dropPosition,
+            dropLevelOffset,
+            dropTargetKey,
+            dropContainerKey,
+            dropTargetPos,
+            dropAllowed,
+        });
+
+        onDragEnter?.({
+            event,
+            node: convertNodePropsToEventData(node.props),
+            expandedKeys,
+        });
+    };
+
+    onNodeDragOver = (
+        event: React.DragEvent<HTMLDivElement>,
+        node: NodeInstance<TreeDataType>
+    ) => {
+        const {
+            dragChildrenKeys,
+            flattenNodes,
+            keyEntities,
+            expandedKeys,
+            indent,
+        } = this.state;
+        const { onDragOver, allowDrop, direction } = this.props;
+        const { dragNode } = this;
+
+        if (!dragNode) {
+            return;
+        }
+
+        const {
+            dropPosition,
+            dropLevelOffset,
+            dropTargetKey,
+            dropContainerKey,
+            dropAllowed,
+            dropTargetPos,
+            dragOverNodeKey,
+        } = calcDropPosition(
+            event,
+            dragNode,
+            node,
+            indent,
+            this.dragStartMousePosition,
+            allowDrop,
+            flattenNodes,
+            keyEntities,
+            expandedKeys,
+            direction
+        );
+
+        if (dragChildrenKeys.indexOf(dropTargetKey) !== -1 || !dropAllowed) {
+            // don't allow drop inside its children
+            // don't allow drop when drop is not allowed caculated by calcDropPosition
+            return;
+        }
+
+        // Update drag position
+
+        if (
+            dragNode.props.eventKey === dropTargetKey &&
+            dropLevelOffset === 0
+        ) {
+            if (
+                !(
+                    this.state.dropPosition === null &&
+                    this.state.dropLevelOffset === null &&
+                    this.state.dropTargetKey === null &&
+                    this.state.dropContainerKey === null &&
+                    this.state.dropTargetPos === null &&
+                    this.state.dropAllowed === false &&
+                    this.state.dragOverNodeKey === null
+                )
+            ) {
+                this.resetDragState();
+            }
+        } else if (
+            !(
+                dropPosition === this.state.dropPosition &&
+                dropLevelOffset === this.state.dropLevelOffset &&
+                dropTargetKey === this.state.dropTargetKey &&
+                dropContainerKey === this.state.dropContainerKey &&
+                dropTargetPos === this.state.dropTargetPos &&
+                dropAllowed === this.state.dropAllowed &&
+                dragOverNodeKey === this.state.dragOverNodeKey
+            )
+        ) {
+            this.setState({
+                dropPosition,
+                dropLevelOffset,
+                dropTargetKey,
+                dropContainerKey,
+                dropTargetPos,
+                dropAllowed,
+                dragOverNodeKey,
+            });
+        }
+
+        onDragOver?.({ event, node: convertNodePropsToEventData(node.props) });
+    };
+
+    onNodeDragLeave: NodeDragEventHandler<TreeDataType> = (event, node) => {
+        // if it is outside the droppable area
+        // currentMouseOverDroppableNodeKey will be updated in dragenter event when into another droppable receiver.
+        if (
+            this.currentMouseOverDroppableNodeKey === node.props.eventKey &&
+            !event.currentTarget.contains(event.relatedTarget as Node)
+        ) {
+            this.resetDragState();
+            this.currentMouseOverDroppableNodeKey = null;
+        }
+
+        const { onDragLeave } = this.props;
+
+        onDragLeave?.({
+            event,
+            node: convertNodePropsToEventData<TreeDataType>(node.props),
+        });
+    };
+
+    // since stopPropagation() is called in treeNode
+    // if onWindowDrag is called, whice means state is keeped, drag state should be cleared
+    onWindowDragEnd = (event: React.DragEvent<HTMLDivElement>) => {
+        this.onNodeDragEnd(event, null, true);
+        window.removeEventListener('dragend', () => this.onWindowDragEnd);
+    };
+
+    // if onNodeDragEnd is called, onWindowDragEnd won't be called since stopPropagation() is called
+    onNodeDragEnd: NodeDragEventHandler<TreeDataType> = (event, node) => {
+        const { onDragEnd } = this.props;
+        this.setState({
+            dragOverNodeKey: null,
+        });
+
+        this.cleanDragState();
+
+        onDragEnd?.({
+            event,
+            node: convertNodePropsToEventData<TreeDataType>(node.props),
+        });
+
+        this.dragNode = null;
+    };
+
+    onNodeDrop = (
+        event: React.DragEvent<HTMLDivElement>,
+        _node: any,
+        outsideTree: boolean = false
+    ) => {
+        const {
+            dragChildrenKeys,
+            dropPosition,
+            dropTargetKey,
+            dropTargetPos,
+            dropAllowed,
+        } = this.state;
+
+        if (!dropAllowed) return;
+
+        const { onDrop } = this.props;
+
+        this.setState({
+            dragOverNodeKey: null,
+        });
+        this.cleanDragState();
+
+        if (dropTargetKey === null) return;
+
+        const abstractDropNodeProps = {
+            ...getTreeNodeProps(dropTargetKey, this.getTreeNodeRequiredProps()),
+            active: this.getActiveItem()?.key === dropTargetKey,
+            data: this.state.keyEntities[dropTargetKey].node,
+        };
+        const posArr = posToArr(dropTargetPos);
+
+        const dropResult = {
+            event,
+            node: convertNodePropsToEventData(abstractDropNodeProps),
+            dragNode: this.dragNode
+                ? convertNodePropsToEventData(this.dragNode.props)
+                : null,
+            dragNodesKeys: [this.dragNode.props.eventKey].concat(
+                dragChildrenKeys
+            ),
+            dropToGap: dropPosition !== 0,
+            dropPosition: dropPosition + Number(posArr[posArr.length - 1]),
+        };
+
+        if (!outsideTree) {
+            onDrop?.(dropResult);
+        }
+
+        this.dragNode = null;
+    };
+
+    resetDragState() {
+        this.setState({
+            dragOverNodeKey: null,
+            dropPosition: null,
+            dropLevelOffset: null,
+            dropTargetKey: null,
+            dropContainerKey: null,
+            dropTargetPos: null,
+            dropAllowed: false,
+        });
+    }
+
+    cleanDragState = () => {
+        const { draggingNodeKey } = this.state;
+        if (draggingNodeKey !== null) {
+            this.setState({
+                draggingNodeKey: null,
+                dropPosition: null,
+                dropContainerKey: null,
+                dropTargetKey: null,
+                dropLevelOffset: null,
+                dropAllowed: true,
+                dragOverNodeKey: null,
+            });
+        }
+        this.dragStartMousePosition = null;
+        this.currentMouseOverDroppableNodeKey = null;
+    };
+
+    triggerExpandActionExpand: NodeMouseEventHandler = (e, treeNode) => {
+        const { expandedKeys, flattenNodes } = this.state;
+        const { expanded, key } = treeNode;
+
+        const node = flattenNodes.filter((nodeItem) => nodeItem.key === key)[0];
+        const eventNode = convertNodePropsToEventData<TreeDataType>({
+            ...getTreeNodeProps(key, this.getTreeNodeRequiredProps()),
+            data: node.data,
+        });
+
+        this.setExpandedKeys(
+            expanded ? arrDel(expandedKeys, key) : arrAdd(expandedKeys, key)
+        );
+        this.onNodeExpand(e as React.MouseEvent<HTMLDivElement>, eventNode);
+    };
+
+    onNodeClick: NodeMouseEventHandler = (e, treeNode) => {
+        const { onClick, expandAction } = this.props;
+
+        if (expandAction === 'click') {
+            this.triggerExpandActionExpand(e, treeNode);
+        }
+
+        onClick?.(e, treeNode);
+    };
+
+    onNodeDoubleClick: NodeMouseEventHandler = (e, treeNode) => {
+        const { onDoubleClick, expandAction } = this.props;
+
+        if (expandAction === 'doubleClick') {
+            this.triggerExpandActionExpand(e, treeNode);
+        }
+
+        onDoubleClick?.(e, treeNode);
+    };
+
+    onNodeSelect: NodeMouseEventHandler<TreeDataType> = (e, treeNode) => {
+        let { selectedKeys } = this.state;
+        const { keyEntities, fieldNames } = this.state;
+        const { onSelect, multiple } = this.props;
+        const { selected } = treeNode;
+        const key = (treeNode as any)[fieldNames.key];
+        const targetSelected = !selected;
+
+        // Update selected keys
+        if (!targetSelected) {
+            selectedKeys = arrDel(selectedKeys, key);
+        } else if (!multiple) {
+            selectedKeys = [key];
+        } else {
+            selectedKeys = arrAdd(selectedKeys, key);
+        }
+
+        // [Legacy] Not found related usage in doc or upper libs
+        const selectedNodes = selectedKeys
+            .map((selectedKey) => {
+                const entity = keyEntities[selectedKey];
+                if (!entity) return null;
+
+                return entity.node;
+            })
+            .filter((node) => node);
+
+        this.setUncontrolledState({ selectedKeys });
+
+        onSelect?.(selectedKeys, {
+            event: 'select',
+            selected: targetSelected,
+            node: treeNode,
+            selectedNodes,
+            nativeEvent: e.nativeEvent,
+        });
+    };
+
+    onNodeCheck = (
+        e: React.MouseEvent<HTMLSpanElement>,
+        treeNode: EventDataNode<TreeDataType>,
+        checked: boolean
+    ) => {
+        const {
+            keyEntities,
+            checkedKeys: oriCheckedKeys,
+            halfCheckedKeys: oriHalfCheckedKeys,
+        } = this.state;
+        const { checkStrictly, onCheck } = this.props;
+        const { key } = treeNode;
+
+        // Prepare trigger arguments
+        let checkedObj;
+        const eventObj: Partial<CheckInfo<TreeDataType>> = {
+            event: 'check',
+            node: treeNode,
+            checked,
+            nativeEvent: e.nativeEvent,
+        };
+
+        if (checkStrictly) {
+            const checkedKeys = checked
+                ? arrAdd(oriCheckedKeys, key)
+                : arrDel(oriCheckedKeys, key);
+            const halfCheckedKeys = arrDel(oriHalfCheckedKeys, key);
+            checkedObj = { checked: checkedKeys, halfChecked: halfCheckedKeys };
+
+            eventObj.checkedNodes = checkedKeys
+                .map((checkedKey) => keyEntities[checkedKey])
+                .filter((entity) => entity)
+                .map((entity) => entity.node);
+
+            this.setUncontrolledState({ checkedKeys });
+        } else {
+            // Always fill first
+            let { checkedKeys, halfCheckedKeys } = conductCheck(
+                [...oriCheckedKeys, key],
+                true,
+                keyEntities
+            );
+
+            // If remove, we do it again to correction
+            if (!checked) {
+                const keySet = new Set(checkedKeys);
+                keySet.delete(key);
+                ({ checkedKeys, halfCheckedKeys } = conductCheck(
+                    Array.from(keySet),
+                    { checked: false, halfCheckedKeys },
+                    keyEntities
+                ));
+            }
+
+            checkedObj = checkedKeys;
+
+            // [Legacy] This is used for `tree-select`
+            eventObj.checkedNodes = [];
+            eventObj.checkedNodesPositions = [];
+            eventObj.halfCheckedKeys = halfCheckedKeys;
+
+            checkedKeys.forEach((checkedKey) => {
+                const entity = keyEntities[checkedKey];
+                if (!entity) return;
+
+                const { node, pos } = entity;
+
+                eventObj.checkedNodes.push(node);
+                eventObj.checkedNodesPositions.push({ node, pos });
+            });
+
+            this.setUncontrolledState(
+                {
+                    checkedKeys,
+                },
+                false,
+                {
+                    halfCheckedKeys,
+                }
+            );
+        }
+
+        onCheck?.(checkedObj, eventObj as CheckInfo<TreeDataType>);
+    };
+
+    onNodeLoad = (treeNode: EventDataNode<TreeDataType>) => {
+        const { key } = treeNode;
+
+        const loadPromise = new Promise<void>((resolve, reject) => {
+            // We need to get the latest state of loading/loaded keys
+            this.setState(({ loadedKeys = [], loadingKeys = [] }): any => {
+                const { loadData, onLoad } = this.props;
+
+                if (
+                    !loadData ||
+                    loadedKeys.indexOf(key) !== -1 ||
+                    loadingKeys.indexOf(key) !== -1
+                ) {
+                    return null;
+                }
+
+                // Process load data
+                const promise = loadData(treeNode);
+                promise
+                    .then(() => {
+                        const { loadedKeys: currentLoadedKeys } = this.state;
+                        const newLoadedKeys = arrAdd(currentLoadedKeys, key);
+
+                        // onLoad should trigger before internal setState to avoid `loadData` trigger twice.
+                        onLoad?.(newLoadedKeys, {
+                            event: 'load',
+                            node: treeNode,
+                        });
+
+                        this.setUncontrolledState({
+                            loadedKeys: newLoadedKeys,
+                        });
+                        this.setState((prevState) => ({
+                            loadingKeys: arrDel(prevState.loadingKeys, key),
+                        }));
+
+                        resolve();
+                    })
+                    .catch((e) => {
+                        this.setState((prevState) => ({
+                            loadingKeys: arrDel(prevState.loadingKeys, key),
+                        }));
+
+                        // If exceed max retry times, we give up retry
+                        this.loadingRetryTimes[key] =
+                            (this.loadingRetryTimes[key] || 0) + 1;
+                        if (this.loadingRetryTimes[key] >= MAX_RETRY_TIMES) {
+                            const { loadedKeys: currentLoadedKeys } =
+                                this.state;
+
+                            this.setUncontrolledState({
+                                loadedKeys: arrAdd(currentLoadedKeys, key),
+                            });
+                            resolve();
+                        }
+
+                        reject(e);
+                    });
+
+                return {
+                    loadingKeys: arrAdd(loadingKeys, key),
+                };
+            });
+        });
+
+        // Not care warning if we ignore this
+        loadPromise.catch(() => {});
+
+        return loadPromise;
+    };
+
+    onNodeMouseEnter: NodeMouseEventHandler<TreeDataType> = (event, node) => {
+        const { onMouseEnter } = this.props;
+
+        onMouseEnter?.({ event, node });
+    };
+
+    onNodeMouseLeave: NodeMouseEventHandler<TreeDataType> = (event, node) => {
+        const { onMouseLeave } = this.props;
+
+        onMouseLeave?.({ event, node });
+    };
+
+    onNodeContextMenu: NodeMouseEventHandler<TreeDataType> = (event, node) => {
+        const { onRightClick } = this.props;
+        if (onRightClick) {
+            event.preventDefault();
+            onRightClick({ event, node });
+        }
+    };
+
+    onFocus: React.FocusEventHandler<HTMLDivElement> = (...args) => {
+        const { onFocus } = this.props;
+        this.setState({ focused: true });
+
+        onFocus?.(...args);
+    };
+
+    onBlur: React.FocusEventHandler<HTMLDivElement> = (...args) => {
+        const { onBlur } = this.props;
+        this.setState({ focused: false });
+        this.onActiveChange(null);
+
+        onBlur?.(...args);
+    };
+
+    getTreeNodeRequiredProps = () => {
+        const {
+            expandedKeys,
+            selectedKeys,
+            loadedKeys,
+            loadingKeys,
+            checkedKeys,
+            halfCheckedKeys,
+            dragOverNodeKey,
+            dropPosition,
+            keyEntities,
+        } = this.state;
+        return {
+            expandedKeys: expandedKeys || [],
+            selectedKeys: selectedKeys || [],
+            loadedKeys: loadedKeys || [],
+            loadingKeys: loadingKeys || [],
+            checkedKeys: checkedKeys || [],
+            halfCheckedKeys: halfCheckedKeys || [],
+            dragOverNodeKey,
+            dropPosition,
+            keyEntities: keyEntities,
+        };
+    };
+
+    // =========================== Expanded ===========================
+    /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */
+    setExpandedKeys = (expandedKeys: Key[]) => {
+        const { treeData, fieldNames } = this.state;
+
+        const flattenNodes: FlattenNode<TreeDataType>[] =
+            flattenTreeData<TreeDataType>(treeData, expandedKeys, fieldNames);
+        this.setUncontrolledState(
+            {
+                expandedKeys,
+                flattenNodes,
+            },
+            true
+        );
+    };
+
+    onNodeExpand = (
+        e: React.MouseEvent<HTMLDivElement>,
+        treeNode: EventDataNode<TreeDataType>
+    ) => {
+        let { expandedKeys } = this.state;
+        const { listChanging, fieldNames } = this.state;
+        const { onExpand, loadData } = this.props;
+        const { expanded } = treeNode;
+        const key = (treeNode as any)[fieldNames.key];
+
+        // Do nothing when motion is in progress
+        if (listChanging) {
+            return;
+        }
+
+        // Update selected keys
+        const index = expandedKeys.indexOf(key);
+        const targetExpanded = !expanded;
+
+        if (targetExpanded) {
+            expandedKeys = arrAdd(expandedKeys, key);
+        } else {
+            expandedKeys = arrDel(expandedKeys, key);
+        }
+
+        this.setExpandedKeys(expandedKeys);
+
+        onExpand?.(expandedKeys, {
+            node: treeNode,
+            expanded: targetExpanded,
+            nativeEvent: e.nativeEvent,
+        });
+
+        // Async Load data
+        if (targetExpanded && loadData) {
+            const loadPromise = this.onNodeLoad(treeNode);
+            if (loadPromise) {
+                loadPromise
+                    .then(() => {
+                        // [Legacy] Refresh logic
+                        const newFlattenTreeData =
+                            flattenTreeData<TreeDataType>(
+                                this.state.treeData,
+                                expandedKeys,
+                                fieldNames
+                            );
+                        this.setUncontrolledState({
+                            flattenNodes: newFlattenTreeData,
+                        });
+                    })
+                    .catch(() => {
+                        const { expandedKeys: currentExpandedKeys } =
+                            this.state;
+                        const expandedKeysToRestore = arrDel(
+                            currentExpandedKeys,
+                            key
+                        );
+                        this.setExpandedKeys(expandedKeysToRestore);
+                    });
+            }
+        }
+    };
+
+    onListChangeStart = () => {
+        this.setUncontrolledState({
+            listChanging: true,
+        });
+    };
+
+    onListChangeEnd = () => {
+        setTimeout(() => {
+            this.setUncontrolledState({
+                listChanging: false,
+            });
+        });
+    };
+
+    // =========================== Keyboard ===========================
+    onActiveChange = (newActiveKey: Key) => {
+        const { activeKey } = this.state;
+        const { onActiveChange } = this.props;
+
+        if (activeKey === newActiveKey) {
+            return;
+        }
+
+        this.setState({ activeKey: newActiveKey });
+        if (newActiveKey !== null) {
+            this.scrollTo({ key: newActiveKey });
+        }
+
+        onActiveChange?.(newActiveKey);
+    };
+
+    getActiveItem = () => {
+        const { activeKey, flattenNodes } = this.state;
+        if (activeKey === null) {
+            return null;
+        }
+
+        return flattenNodes.find(({ key }) => key === activeKey) || null;
+    };
+
+    offsetActiveKey = (offset: number) => {
+        const { flattenNodes, activeKey } = this.state;
+
+        let index = flattenNodes.findIndex(({ key }) => key === activeKey);
+
+        // Align with index
+        if (index === -1 && offset < 0) {
+            index = flattenNodes.length;
+        }
+
+        index = (index + offset + flattenNodes.length) % flattenNodes.length;
+
+        const item = flattenNodes[index];
+        if (item) {
+            const { key } = item;
+            this.onActiveChange(key);
+        } else {
+            this.onActiveChange(null);
+        }
+    };
+
+    onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
+        const { activeKey, expandedKeys, checkedKeys, fieldNames } = this.state;
+        const { onKeyDown, checkable, selectable } = this.props;
+
+        // >>>>>>>>>> Direction
+        switch (event.key) {
+            case eventKeys.ARROWUP: {
+                this.offsetActiveKey(-1);
+                event.preventDefault();
+                break;
+            }
+            case eventKeys.ARROWDOWN: {
+                this.offsetActiveKey(1);
+                event.preventDefault();
+                break;
+            }
+        }
+
+        // >>>>>>>>>> Expand & Selection
+        const activeItem = this.getActiveItem();
+        if (activeItem && activeItem.data) {
+            const treeNodeRequiredProps = this.getTreeNodeRequiredProps();
+
+            const expandable =
+                activeItem.data.isLeaf === false ||
+                !!((activeItem.data as any)[fieldNames.children] || []).length;
+            const eventNode = convertNodePropsToEventData<TreeDataType>({
+                ...getTreeNodeProps(activeKey, treeNodeRequiredProps),
+                data: activeItem.data,
+                active: true,
+            });
+
+            switch (event.key) {
+                // >>> Expand
+                case eventKeys.ARROWLEFT: {
+                    // Collapse if possible
+                    if (expandable && expandedKeys.includes(activeKey)) {
+                        this.onNodeExpand(
+                            {} as React.MouseEvent<HTMLDivElement>,
+                            eventNode
+                        );
+                    } else if (activeItem.parent) {
+                        this.onActiveChange(activeItem.parent.key);
+                    }
+                    event.preventDefault();
+                    break;
+                }
+                case eventKeys.ARROWRIGHT: {
+                    // Expand if possible
+                    if (expandable && !expandedKeys.includes(activeKey)) {
+                        this.onNodeExpand(
+                            {} as React.MouseEvent<HTMLDivElement>,
+                            eventNode
+                        );
+                    } else if (
+                        activeItem.children &&
+                        activeItem.children.length
+                    ) {
+                        this.onActiveChange(activeItem.children[0].key);
+                    }
+                    event.preventDefault();
+                    break;
+                }
+
+                // Selection
+                case eventKeys.ENTER:
+                case eventKeys.SPACE: {
+                    if (
+                        checkable &&
+                        !eventNode.disabled &&
+                        eventNode.checkable !== false &&
+                        !eventNode.disableCheckbox
+                    ) {
+                        this.onNodeCheck(
+                            {} as React.MouseEvent<HTMLDivElement>,
+                            eventNode,
+                            !checkedKeys.includes(activeKey)
+                        );
+                    } else if (
+                        !checkable &&
+                        selectable &&
+                        !eventNode.disabled &&
+                        eventNode.selectable !== false
+                    ) {
+                        this.onNodeSelect(
+                            {} as React.MouseEvent<HTMLDivElement>,
+                            eventNode
+                        );
+                    }
+                    break;
+                }
+            }
+        }
+
+        onKeyDown?.(event);
+    };
+
+    /**
+     * Only update the value which is not in props
+     */
+    setUncontrolledState = (
+        state: Partial<OcTreeState<TreeDataType>>,
+        atomic: boolean = false,
+        forceState: Partial<OcTreeState<TreeDataType>> | null = null
+    ) => {
+        if (!this.destroyed) {
+            let needSync = false;
+            let allPassed = true;
+            const newState = {};
+
+            Object.keys(state).forEach((name) => {
+                if (name in this.props) {
+                    allPassed = false;
+                    return;
+                }
+
+                needSync = true;
+                (newState as any)[name] = (state as any)[name];
+            });
+
+            if (needSync && (!atomic || allPassed)) {
+                this.setState({
+                    ...newState,
+                    ...forceState,
+                } as OcTreeState<TreeDataType>);
+            }
+        }
+    };
+
+    scrollTo: ScrollTo = (scroll: { key: Key }) => {
+        this.listRef.current.scrollTo(scroll);
+    };
+
+    render() {
+        const {
+            focused,
+            flattenNodes,
+            keyEntities,
+            draggingNodeKey,
+            activeKey,
+            dropLevelOffset,
+            dropContainerKey,
+            dropTargetKey,
+            dropPosition,
+            dragOverNodeKey,
+            indent,
+        } = this.state;
+        const {
+            classNames,
+            style,
+            showLine,
+            focusable,
+            tabIndex = 0,
+            selectable,
+            showIcon,
+            icon,
+            switcherIcon,
+            draggable,
+            checkable,
+            checkStrictly,
+            disabled,
+            motion,
+            loadData,
+            filterTreeNode,
+            height,
+            itemHeight,
+            virtual,
+            titleRender,
+            dropIndicatorRender,
+            onContextMenu,
+            onScroll,
+            direction,
+            rootClassName,
+            rootStyle,
+        } = this.props;
+        const domProps: React.HTMLAttributes<HTMLDivElement> = pickAttrs(
+            this.props,
+            {
+                aria: true,
+                data: true,
+            }
+        );
+
+        // It's better move to hooks but we just simply keep here
+        let draggableConfig: DraggableConfig;
+        if (draggable) {
+            if (typeof draggable === 'object') {
+                draggableConfig = draggable;
+            } else if (typeof draggable === 'function') {
+                draggableConfig = {
+                    nodeDraggable: draggable,
+                };
+            } else {
+                draggableConfig = {};
+            }
+        }
+
+        return (
+            <TreeContext.Provider
+                value={{
+                    selectable,
+                    showIcon,
+                    icon,
+                    switcherIcon,
+                    draggable: draggableConfig,
+                    draggingNodeKey,
+                    checkable,
+                    checkStrictly,
+                    disabled,
+                    keyEntities,
+                    dropLevelOffset,
+                    dropContainerKey,
+                    dropTargetKey,
+                    dropPosition,
+                    dragOverNodeKey,
+                    indent,
+                    direction,
+                    dropIndicatorRender,
+
+                    loadData,
+                    filterTreeNode,
+
+                    titleRender,
+
+                    onNodeClick: this.onNodeClick,
+                    onNodeDoubleClick: this.onNodeDoubleClick,
+                    onNodeExpand: this.onNodeExpand,
+                    onNodeSelect: this.onNodeSelect,
+                    onNodeCheck: this.onNodeCheck,
+                    onNodeLoad: this.onNodeLoad,
+                    onNodeMouseEnter: this.onNodeMouseEnter,
+                    onNodeMouseLeave: this.onNodeMouseLeave,
+                    onNodeContextMenu: this.onNodeContextMenu,
+                    onNodeDragStart: this.onNodeDragStart,
+                    onNodeDragEnter: this.onNodeDragEnter,
+                    onNodeDragOver: this.onNodeDragOver,
+                    onNodeDragLeave: this.onNodeDragLeave,
+                    onNodeDragEnd: this.onNodeDragEnd,
+                    onNodeDrop: this.onNodeDrop,
+                }}
+            >
+                <div
+                    role="tree"
+                    className={mergeClasses([
+                        styles.tree,
+                        classNames,
+                        rootClassName,
+                        { [styles.treeShowLine]: showLine },
+                        { [styles.treeFocused]: focused },
+                        { [styles.treeActiveFocused]: activeKey !== null },
+                    ])}
+                    style={rootStyle}
+                >
+                    <NodeList
+                        ref={this.listRef}
+                        style={style}
+                        data={flattenNodes}
+                        disabled={disabled}
+                        selectable={selectable}
+                        checkable={!!checkable}
+                        motion={motion}
+                        dragging={draggingNodeKey !== null}
+                        height={height}
+                        itemHeight={itemHeight}
+                        virtual={virtual}
+                        focusable={focusable}
+                        focused={focused}
+                        tabIndex={tabIndex}
+                        activeItem={this.getActiveItem()}
+                        onFocus={this.onFocus}
+                        onBlur={this.onBlur}
+                        onKeyDown={this.onKeyDown}
+                        onActiveChange={this.onActiveChange}
+                        onListChangeStart={this.onListChangeStart}
+                        onListChangeEnd={this.onListChangeEnd}
+                        onContextMenu={onContextMenu}
+                        onScroll={onScroll}
+                        {...this.getTreeNodeRequiredProps()}
+                        {...domProps}
+                    />
+                </div>
+            </TreeContext.Provider>
+        );
+    }
+}
+
+export default Tree;
diff --git a/src/components/Tree/Internal/OcTree.types.ts b/src/components/Tree/Internal/OcTree.types.ts
new file mode 100644
index 000000000..31c35d5df
--- /dev/null
+++ b/src/components/Tree/Internal/OcTree.types.ts
@@ -0,0 +1,343 @@
+import React from 'react';
+import {
+    NodeMouseEventHandler,
+    NodeDragEventParams,
+    NodeMouseEventParams,
+    TreeContextProps,
+} from './contextTypes';
+
+export const DEFAULT_TREE_NODE_TITLE: string = '---';
+export const MAX_RETRY_TIMES: number = 10;
+export const TREE_NODE_ICON_OPEN: string = 'open';
+export const TREE_NODE_ICON_CLOSE: string = 'close';
+
+export { ScrollTo } from '../../VirtualList/VirtualList.types';
+
+export interface TreeNodeProps<TreeDataType extends BasicDataNode = DataNode> {
+    eventKey?: Key; // Pass by parent `cloneElement`
+    classNames?: string;
+    style?: React.CSSProperties;
+
+    // By parent
+    expanded?: boolean;
+    selected?: boolean;
+    checked?: boolean;
+    loaded?: boolean;
+    loading?: boolean;
+    halfChecked?: boolean;
+    title?: React.ReactNode | ((data: TreeDataType) => React.ReactNode);
+    dragOver?: boolean;
+    dragOverGapTop?: boolean;
+    dragOverGapBottom?: boolean;
+    pos?: string;
+    domRef?: React.Ref<HTMLDivElement>;
+    /** New added in Tree for easy data access */
+    data?: TreeDataType;
+    isStart?: boolean[];
+    isEnd?: boolean[];
+    active?: boolean;
+    onMouseMove?: React.MouseEventHandler<HTMLDivElement>;
+
+    // By user
+    isLeaf?: boolean;
+    checkable?: boolean;
+    selectable?: boolean;
+    disabled?: boolean;
+    disableCheckbox?: boolean;
+    icon?: IconType;
+    switcherIcon?: IconType;
+    children?: React.ReactNode;
+}
+
+export interface InternalTreeNodeProps extends TreeNodeProps {
+    context?: TreeContextProps;
+}
+
+export interface TreeNodeState {
+    dragNodeHighlight: boolean;
+}
+
+/** For fieldNames, we provide a abstract interface */
+export interface BasicDataNode {
+    checkable?: boolean;
+    disabled?: boolean;
+    disableCheckbox?: boolean;
+    icon?: IconType;
+    isLeaf?: boolean;
+    selectable?: boolean;
+    switcherIcon?: IconType;
+
+    /** Set style of TreeNode. This is not recommend if you don't have any force requirement */
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+/** Provide a wrap type define for developer to wrap with customize fieldNames data type */
+export type FieldDataNode<
+    T,
+    ChildFieldName extends string = 'children'
+> = BasicDataNode &
+    T &
+    Partial<Record<ChildFieldName, FieldDataNode<T, ChildFieldName>[]>>;
+
+export type DataNode = FieldDataNode<{
+    key: string | number;
+    title?: React.ReactNode | ((data: DataNode) => React.ReactNode);
+}>;
+
+export type EventDataNode<TreeDataType> = {
+    key: React.Key;
+    expanded: boolean;
+    selected: boolean;
+    checked: boolean;
+    loaded: boolean;
+    loading: boolean;
+    halfChecked: boolean;
+    dragOver: boolean;
+    dragOverGapTop: boolean;
+    dragOverGapBottom: boolean;
+    pos: string;
+    active: boolean;
+} & TreeDataType;
+
+export type IconType =
+    | React.ReactNode
+    | ((props: TreeNodeProps) => React.ReactNode);
+
+export type Key = string | number;
+
+export type NodeElement = React.ReactElement<TreeNodeProps> & {
+    selectHandle?: HTMLSpanElement;
+    type: {
+        isTreeNode: boolean;
+    };
+};
+
+export type NodeInstance<TreeDataType extends BasicDataNode = DataNode> =
+    React.Component<TreeNodeProps<TreeDataType>> & {
+        selectHandle?: HTMLSpanElement;
+    };
+
+export interface Entity {
+    node: NodeElement;
+    index: number;
+    key: Key;
+    pos: string;
+    parent?: Entity;
+    children?: Entity[];
+}
+
+export interface DataEntity<TreeDataType extends BasicDataNode = DataNode>
+    extends Omit<Entity, 'node' | 'parent' | 'children'> {
+    node: TreeDataType;
+    nodes: TreeDataType[];
+    parent?: DataEntity<TreeDataType>;
+    children?: DataEntity<TreeDataType>[];
+    level: number;
+}
+
+export interface FlattenNode<TreeDataType extends BasicDataNode = DataNode> {
+    parent: FlattenNode<TreeDataType> | null;
+    children: FlattenNode<TreeDataType>[];
+    pos: string;
+    data: TreeDataType;
+    title: React.ReactNode;
+    key: Key;
+    isStart: boolean[];
+    isEnd: boolean[];
+}
+
+export type GetKey<RecordType> = (record: RecordType, index?: number) => Key;
+
+export type GetCheckDisabled<RecordType> = (record: RecordType) => boolean;
+
+export interface FieldNames {
+    title?: string;
+    /** @private Internal usage for `tree-select`, safe to remove if no need */
+    _title?: string[];
+    key?: string;
+    children?: string;
+}
+
+export interface CheckInfo<TreeDataType extends BasicDataNode = DataNode> {
+    event: 'check';
+    node: EventDataNode<TreeDataType>;
+    checked: boolean;
+    nativeEvent: MouseEvent;
+    checkedNodes: TreeDataType[];
+    checkedNodesPositions?: { node: TreeDataType; pos: string }[];
+    halfCheckedKeys?: Key[];
+}
+
+export interface AllowDropOptions<
+    TreeDataType extends BasicDataNode = DataNode
+> {
+    dragNode: TreeDataType;
+    dropNode: TreeDataType;
+    dropPosition: -1 | 0 | 1;
+}
+export type AllowDrop<TreeDataType extends BasicDataNode = DataNode> = (
+    options: AllowDropOptions<TreeDataType>
+) => boolean;
+
+export type DraggableFn = (node: DataNode) => boolean;
+export type DraggableConfig = {
+    icon?: React.ReactNode | false;
+    nodeDraggable?: DraggableFn;
+};
+
+export type ExpandAction = false | 'click' | 'doubleClick';
+
+export interface OcTreeProps<TreeDataType extends BasicDataNode = DataNode> {
+    classNames?: string;
+    style?: React.CSSProperties;
+    focusable?: boolean;
+    activeKey?: Key;
+    tabIndex?: number;
+    children?: React.ReactNode;
+    treeData?: TreeDataType[]; // Generate treeNode by children
+    fieldNames?: FieldNames;
+    showLine?: boolean;
+    showIcon?: boolean;
+    icon?: IconType;
+    selectable?: boolean;
+    expandAction?: ExpandAction;
+    disabled?: boolean;
+    multiple?: boolean;
+    checkable?: boolean | React.ReactNode;
+    checkStrictly?: boolean;
+    draggable?: DraggableFn | boolean | DraggableConfig;
+    defaultExpandParent?: boolean;
+    autoExpandParent?: boolean;
+    defaultExpandAll?: boolean;
+    defaultExpandedKeys?: Key[];
+    expandedKeys?: Key[];
+    defaultCheckedKeys?: Key[];
+    checkedKeys?: Key[] | { checked: Key[]; halfChecked: Key[] };
+    defaultSelectedKeys?: Key[];
+    selectedKeys?: Key[];
+    allowDrop?: AllowDrop<TreeDataType>;
+    titleRender?: (node: TreeDataType) => React.ReactNode;
+    dropIndicatorRender?: (props: {
+        dropPosition: -1 | 0 | 1;
+        dropLevelOffset: number;
+        indent: number;
+        direction: string;
+    }) => React.ReactNode;
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    onContextMenu?: React.MouseEventHandler<HTMLDivElement>;
+    onClick?: NodeMouseEventHandler;
+    onDoubleClick?: NodeMouseEventHandler;
+    onScroll?: React.UIEventHandler<HTMLElement>;
+    onExpand?: (
+        expandedKeys: Key[],
+        info: {
+            node: EventDataNode<TreeDataType>;
+            expanded: boolean;
+            nativeEvent: MouseEvent;
+        }
+    ) => void;
+    onCheck?: (
+        checked: { checked: Key[]; halfChecked: Key[] } | Key[],
+        info: CheckInfo<TreeDataType>
+    ) => void;
+    onSelect?: (
+        selectedKeys: Key[],
+        info: {
+            event: 'select';
+            selected: boolean;
+            node: EventDataNode<TreeDataType>;
+            selectedNodes: TreeDataType[];
+            nativeEvent: MouseEvent;
+        }
+    ) => void;
+    onLoad?: (
+        loadedKeys: Key[],
+        info: {
+            event: 'load';
+            node: EventDataNode<TreeDataType>;
+        }
+    ) => void;
+    loadData?: (treeNode: EventDataNode<TreeDataType>) => Promise<any>;
+    loadedKeys?: Key[];
+    onMouseEnter?: (info: NodeMouseEventParams<TreeDataType>) => void;
+    onMouseLeave?: (info: NodeMouseEventParams<TreeDataType>) => void;
+    onRightClick?: (info: {
+        event: React.MouseEvent;
+        node: EventDataNode<TreeDataType>;
+    }) => void;
+    onDragStart?: (info: NodeDragEventParams<TreeDataType>) => void;
+    onDragEnter?: (
+        info: NodeDragEventParams<TreeDataType> & { expandedKeys: Key[] }
+    ) => void;
+    onDragOver?: (info: NodeDragEventParams<TreeDataType>) => void;
+    onDragLeave?: (info: NodeDragEventParams<TreeDataType>) => void;
+    onDragEnd?: (info: NodeDragEventParams<TreeDataType>) => void;
+    onDrop?: (
+        info: NodeDragEventParams<TreeDataType> & {
+            dragNode: EventDataNode<TreeDataType>;
+            dragNodesKeys: Key[];
+            dropToGap: boolean;
+            dropPosition: number;
+        }
+    ) => void;
+    /**
+     * Used for `tree-select` only.
+     * Do not use in your production code directly since this will be refactor.
+     */
+    onActiveChange?: (key: Key) => void;
+    filterTreeNode?: (treeNode: EventDataNode<TreeDataType>) => boolean;
+    motion?: any;
+    switcherIcon?: IconType;
+
+    // Virtual List
+    height?: number;
+    itemHeight?: number;
+    virtual?: boolean;
+
+    // direction for drag logic
+    direction?: string;
+
+    rootClassName?: string;
+    rootStyle?: React.CSSProperties;
+}
+
+export interface OcTreeState<TreeDataType extends BasicDataNode = DataNode> {
+    keyEntities: Record<Key, DataEntity<TreeDataType>>;
+
+    indent: number | null;
+
+    selectedKeys: Key[];
+    checkedKeys: Key[];
+    halfCheckedKeys: Key[];
+    loadedKeys: Key[];
+    loadingKeys: Key[];
+    expandedKeys: Key[];
+
+    draggingNodeKey: React.Key;
+    dragChildrenKeys: Key[];
+
+    // for details see comment in Tree.state
+    dropPosition: -1 | 0 | 1 | null;
+    dropLevelOffset: number | null;
+    dropContainerKey: Key | null;
+    dropTargetKey: Key | null;
+    dropTargetPos: string | null;
+    dropAllowed: boolean;
+    dragOverNodeKey: Key | null;
+
+    treeData: TreeDataType[];
+    flattenNodes: FlattenNode<TreeDataType>[];
+
+    focused: boolean;
+    activeKey: Key;
+
+    // Record if list is changing
+    listChanging: boolean;
+
+    prevProps: OcTreeProps;
+
+    fieldNames: FieldNames;
+}
diff --git a/src/components/Tree/Internal/TreeNode.tsx b/src/components/Tree/Internal/TreeNode.tsx
new file mode 100644
index 000000000..a5ad441a8
--- /dev/null
+++ b/src/components/Tree/Internal/TreeNode.tsx
@@ -0,0 +1,641 @@
+import React from 'react';
+import {
+    DEFAULT_TREE_NODE_TITLE,
+    InternalTreeNodeProps,
+    TREE_NODE_ICON_CLOSE,
+    TREE_NODE_ICON_OPEN,
+    TreeNodeProps,
+    TreeNodeState,
+} from './OcTree.types';
+import { mergeClasses, pickAttrs } from '../../../shared/utilities';
+import { TreeContext } from './contextTypes';
+import Indent from './Indent';
+import { convertNodePropsToEventData } from './utils/treeUtil';
+
+import styles from './octree.module.scss';
+
+class InternalTreeNode extends React.Component<
+    InternalTreeNodeProps,
+    TreeNodeState
+> {
+    public state = {
+        dragNodeHighlight: false,
+    };
+
+    public selectHandle: HTMLSpanElement;
+
+    // Isomorphic needn't load data in server side
+    componentDidMount() {
+        this.syncLoadData(this.props);
+    }
+
+    componentDidUpdate() {
+        this.syncLoadData(this.props);
+    }
+
+    onSelectorClick = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+        // Click trigger before select/check operation
+        const {
+            context: { onNodeClick },
+        } = this.props;
+        onNodeClick(e, convertNodePropsToEventData(this.props));
+
+        if (this.isSelectable()) {
+            this.onSelect(e);
+        } else {
+            this.onCheck(e);
+        }
+    };
+
+    onSelectorDoubleClick = (
+        e: React.MouseEvent<HTMLSpanElement, MouseEvent>
+    ) => {
+        const {
+            context: { onNodeDoubleClick },
+        } = this.props;
+        onNodeDoubleClick(e, convertNodePropsToEventData(this.props));
+    };
+
+    onSelect = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+        if (this.isDisabled()) return;
+
+        const {
+            context: { onNodeSelect },
+        } = this.props;
+        e.preventDefault();
+        onNodeSelect(e, convertNodePropsToEventData(this.props));
+    };
+
+    onCheck = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+        if (this.isDisabled()) return;
+
+        const { disableCheckbox, checked } = this.props;
+        const {
+            context: { onNodeCheck },
+        } = this.props;
+
+        if (!this.isCheckable() || disableCheckbox) return;
+
+        e.preventDefault();
+        const targetChecked = !checked;
+        onNodeCheck(e, convertNodePropsToEventData(this.props), targetChecked);
+    };
+
+    onMouseEnter = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+        const {
+            context: { onNodeMouseEnter },
+        } = this.props;
+        onNodeMouseEnter(e, convertNodePropsToEventData(this.props));
+    };
+
+    onMouseLeave = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+        const {
+            context: { onNodeMouseLeave },
+        } = this.props;
+        onNodeMouseLeave(e, convertNodePropsToEventData(this.props));
+    };
+
+    onContextMenu = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+        const {
+            context: { onNodeContextMenu },
+        } = this.props;
+        onNodeContextMenu(e, convertNodePropsToEventData(this.props));
+    };
+
+    onDragStart = (e: React.DragEvent<HTMLDivElement>) => {
+        const {
+            context: { onNodeDragStart },
+        } = this.props;
+
+        e.stopPropagation();
+        this.setState({
+            dragNodeHighlight: true,
+        });
+        onNodeDragStart(e, this);
+
+        try {
+            // ie throw error
+            // firefox-need-it
+            e.dataTransfer.setData('text/plain', '');
+        } catch (error) {
+            // empty
+        }
+    };
+
+    onDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
+        const {
+            context: { onNodeDragEnter },
+        } = this.props;
+
+        e.preventDefault();
+        e.stopPropagation();
+        onNodeDragEnter(e, this);
+    };
+
+    onDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+        const {
+            context: { onNodeDragOver },
+        } = this.props;
+
+        e.preventDefault();
+        e.stopPropagation();
+        onNodeDragOver(e, this);
+    };
+
+    onDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+        const {
+            context: { onNodeDragLeave },
+        } = this.props;
+
+        e.stopPropagation();
+        onNodeDragLeave(e, this);
+    };
+
+    onDragEnd = (e: React.DragEvent<HTMLDivElement>) => {
+        const {
+            context: { onNodeDragEnd },
+        } = this.props;
+
+        e.stopPropagation();
+        this.setState({
+            dragNodeHighlight: false,
+        });
+        onNodeDragEnd(e, this);
+    };
+
+    onDrop = (e: React.DragEvent<HTMLDivElement>) => {
+        const {
+            context: { onNodeDrop },
+        } = this.props;
+
+        e.preventDefault();
+        e.stopPropagation();
+        this.setState({
+            dragNodeHighlight: false,
+        });
+        onNodeDrop(e, this);
+    };
+
+    // Disabled item still can be switch
+    onExpand: React.MouseEventHandler<HTMLDivElement> = (e) => {
+        const {
+            loading,
+            context: { onNodeExpand },
+        } = this.props;
+        if (loading) return;
+        onNodeExpand(e, convertNodePropsToEventData(this.props));
+    };
+
+    // Drag usage
+    setSelectHandle = (node: HTMLSpanElement) => {
+        this.selectHandle = node;
+    };
+
+    getNodeState = () => {
+        const { expanded } = this.props;
+
+        if (this.isLeaf()) {
+            return null;
+        }
+
+        return expanded ? TREE_NODE_ICON_OPEN : TREE_NODE_ICON_CLOSE;
+    };
+
+    hasChildren = () => {
+        const { eventKey } = this.props;
+        const {
+            context: { keyEntities },
+        } = this.props;
+        const { children } = keyEntities[eventKey] || {};
+
+        return !!(children || []).length;
+    };
+
+    isLeaf = () => {
+        const { isLeaf, loaded } = this.props;
+        const {
+            context: { loadData },
+        } = this.props;
+
+        const hasChildren = this.hasChildren();
+
+        if (isLeaf === false) {
+            return false;
+        }
+
+        return (
+            isLeaf ||
+            (!loadData && !hasChildren) ||
+            (loadData && loaded && !hasChildren)
+        );
+    };
+
+    isDisabled = () => {
+        const { disabled } = this.props;
+        const {
+            context: { disabled: treeDisabled },
+        } = this.props;
+
+        return !!(treeDisabled || disabled);
+    };
+
+    isCheckable = () => {
+        const { checkable } = this.props;
+        const {
+            context: { checkable: treeCheckable },
+        } = this.props;
+
+        // Return false if tree or treeNode is not checkable
+        if (!treeCheckable || checkable === false) return false;
+        return treeCheckable;
+    };
+
+    // Load data to avoid default expanded tree without data
+    syncLoadData = (
+        props: Readonly<InternalTreeNodeProps> &
+            Readonly<{ children?: React.ReactNode }>
+    ) => {
+        const { expanded, loading, loaded } = props;
+        const {
+            context: { loadData, onNodeLoad },
+        } = this.props;
+
+        if (loading) {
+            return;
+        }
+
+        // read from state to avoid loadData at same time
+        if (loadData && expanded && !this.isLeaf()) {
+            // We needn't reload data when has children in sync logic
+            // It's only needed in node expanded
+            if (!this.hasChildren() && !loaded) {
+                onNodeLoad(convertNodePropsToEventData(this.props));
+            }
+        }
+    };
+
+    isSelectable() {
+        const { selectable } = this.props;
+        const {
+            context: { selectable: treeSelectable },
+        } = this.props;
+
+        // Ignore when selectable is undefined or null
+        if (typeof selectable === 'boolean') {
+            return selectable;
+        }
+
+        return treeSelectable;
+    }
+
+    isDraggable = () => {
+        const {
+            data,
+            context: { draggable },
+        } = this.props;
+
+        return !!(
+            draggable &&
+            (!draggable.nodeDraggable || draggable.nodeDraggable(data))
+        );
+    };
+
+    // ==================== Render: Drag Handler ====================
+    renderDragHandler = () => {
+        const {
+            context: { draggable },
+        } = this.props;
+
+        return draggable?.icon ? (
+            <span className={styles.treeDraggableIcon}>{draggable.icon}</span>
+        ) : null;
+    };
+
+    // ====================== Render: Switcher ======================
+    renderSwitcherIconDom = (isLeaf: boolean) => {
+        const { switcherIcon: switcherIconFromProps } = this.props;
+        const {
+            context: { switcherIcon: switcherIconFromCtx },
+        } = this.props;
+
+        const switcherIcon = switcherIconFromProps || switcherIconFromCtx;
+        // if switcherIconDom is null, no render switcher span
+        if (typeof switcherIcon === 'function') {
+            return switcherIcon({ ...this.props, isLeaf });
+        }
+        return switcherIcon;
+    };
+
+    // Switcher
+    renderSwitcher = () => {
+        const { expanded } = this.props;
+
+        if (this.isLeaf()) {
+            // if switcherIconDom is null, no render switcher span
+            const switcherIconDom = this.renderSwitcherIconDom(true);
+
+            return switcherIconDom !== false ? (
+                <span
+                    className={mergeClasses([
+                        styles.treeSwitcher,
+                        styles.treeSwitcherNoop,
+                    ])}
+                >
+                    {switcherIconDom}
+                </span>
+            ) : null;
+        }
+
+        const switcherCls = mergeClasses([
+            styles.treeSwitcher,
+            `tree-switcher_${
+                expanded ? TREE_NODE_ICON_OPEN : TREE_NODE_ICON_CLOSE
+            }`,
+        ]);
+
+        const switcherIconDom = this.renderSwitcherIconDom(false);
+
+        return switcherIconDom !== false ? (
+            <span onClick={this.onExpand} className={switcherCls}>
+                {switcherIconDom}
+            </span>
+        ) : null;
+    };
+
+    // ====================== Render: Checkbox ======================
+    // Checkbox
+    renderCheckbox = () => {
+        const { checked, halfChecked, disableCheckbox } = this.props;
+        const disabled = this.isDisabled();
+        const checkable = this.isCheckable();
+
+        if (!checkable) return null;
+
+        // [Legacy] Custom element should be separate with `checkable` in future
+        const $custom = typeof checkable !== 'boolean' ? checkable : null;
+
+        return (
+            <span
+                className={mergeClasses([
+                    styles.treeCheckbox,
+                    checked && styles.treeCheckboxChecked,
+                    !checked && halfChecked && styles.treeCheckboxIndeterminate,
+                    (disabled || disableCheckbox) &&
+                        styles.treeCheckboxDisabled,
+                ])}
+                onClick={this.onCheck}
+            >
+                {$custom}
+            </span>
+        );
+    };
+
+    // ==================== Render: Title + Icon ====================
+    renderIcon = () => {
+        const { loading } = this.props;
+
+        return (
+            <span
+                className={mergeClasses([
+                    styles.treeIconEle,
+                    `tree-icon__${this.getNodeState() || 'docu'}`,
+                    loading && styles.treeIconLoading,
+                ])}
+            />
+        );
+    };
+
+    // Icon + Title
+    renderSelector = () => {
+        const { dragNodeHighlight } = this.state;
+        const { title, selected, icon, loading, data } = this.props;
+        const {
+            context: { showIcon, icon: treeIcon, loadData, titleRender },
+        } = this.props;
+        const disabled = this.isDisabled();
+
+        const wrapClass = styles.treeNodeContentWrapper;
+
+        // Icon - Still show loading icon when loading without showIcon
+        let $icon;
+
+        if (showIcon) {
+            const currentIcon = icon || treeIcon;
+
+            $icon = currentIcon ? (
+                <span
+                    className={mergeClasses([
+                        styles.treeIconEle,
+                        styles.treeIconCustomize,
+                    ])}
+                >
+                    {typeof currentIcon === 'function'
+                        ? currentIcon(this.props)
+                        : currentIcon}
+                </span>
+            ) : (
+                this.renderIcon()
+            );
+        } else if (loadData && loading) {
+            $icon = this.renderIcon();
+        }
+
+        // Title
+        let titleNode: React.ReactNode;
+        if (typeof title === 'function') {
+            titleNode = title(data);
+        } else if (titleRender) {
+            titleNode = titleRender(data);
+        } else {
+            titleNode = title;
+        }
+
+        const $title = <span className={styles.treeTitle}>{titleNode}</span>;
+
+        return (
+            <span
+                ref={this.setSelectHandle}
+                title={typeof title === 'string' ? title : ''}
+                className={mergeClasses([
+                    `${wrapClass}`,
+                    `${wrapClass}-${this.getNodeState() || 'normal'}`,
+                    !disabled &&
+                        (selected || dragNodeHighlight) &&
+                        styles.treeNodeSelected,
+                ])}
+                onMouseEnter={this.onMouseEnter}
+                onMouseLeave={this.onMouseLeave}
+                onContextMenu={this.onContextMenu}
+                onClick={this.onSelectorClick}
+                onDoubleClick={this.onSelectorDoubleClick}
+            >
+                {$icon}
+                {$title}
+                {this.renderDropIndicator()}
+            </span>
+        );
+    };
+
+    // =================== Render: Drop Indicator ===================
+    renderDropIndicator = () => {
+        const { disabled, eventKey } = this.props;
+        const {
+            context: {
+                draggable,
+                dropLevelOffset,
+                dropPosition,
+                indent,
+                dropIndicatorRender,
+                dragOverNodeKey,
+                direction,
+            },
+        } = this.props;
+        const rootDraggable = draggable !== false;
+        // allowDrop is calculated in Tree.tsx, there is no need for calc it here
+        const showIndicator =
+            !disabled && rootDraggable && dragOverNodeKey === eventKey;
+        return showIndicator
+            ? dropIndicatorRender({
+                  dropPosition,
+                  dropLevelOffset,
+                  indent,
+                  direction,
+              })
+            : null;
+    };
+
+    // =========================== Render ===========================
+    render() {
+        const {
+            eventKey,
+            classNames,
+            style,
+            dragOver,
+            dragOverGapTop,
+            dragOverGapBottom,
+            isLeaf,
+            isStart,
+            isEnd,
+            expanded,
+            selected,
+            checked,
+            halfChecked,
+            loading,
+            domRef,
+            active,
+            data,
+            onMouseMove,
+            selectable,
+            ...otherProps
+        } = this.props;
+        const {
+            context: {
+                filterTreeNode,
+                keyEntities,
+                dropContainerKey,
+                dropTargetKey,
+                draggingNodeKey,
+            },
+        } = this.props;
+        const disabled = this.isDisabled();
+        const dataOrAriaAttributeProps = pickAttrs(otherProps, {
+            aria: true,
+            data: true,
+        });
+        const { level } = keyEntities[eventKey] || {};
+        const isEndNode = isEnd[isEnd.length - 1];
+
+        const mergedDraggable = this.isDraggable();
+        const draggableWithoutDisabled = !disabled && mergedDraggable;
+
+        const dragging = draggingNodeKey === eventKey;
+        const ariaSelected =
+            selectable !== undefined
+                ? { 'aria-selected': !!selectable }
+                : undefined;
+
+        return (
+            <div
+                ref={domRef}
+                className={mergeClasses([
+                    classNames,
+                    styles.treeTreenode,
+                    { [styles.treeTreenodeDisabled]: disabled },
+                    {
+                        [`tree-treenode-switcher-${
+                            expanded ? 'open' : 'close'
+                        }`]: !isLeaf,
+                    },
+                    { ['tree-treenode-checkbox-checked']: checked },
+                    {
+                        ['tree-treenode-checkbox-indeterminate']: halfChecked,
+                    },
+                    { ['tree-treenode-selected']: selected },
+                    { ['tree-treenode-loading']: loading },
+                    { ['tree-treenode-active']: active },
+                    { ['tree-treenode-leaf-last']: isEndNode },
+                    {
+                        ['tree-treenode-draggable']: draggableWithoutDisabled,
+                    },
+
+                    dragging,
+                    { [styles.dropTarget]: dropTargetKey === eventKey },
+                    { [styles.dropContainer]: dropContainerKey === eventKey },
+                    { ['drag-over']: !disabled && dragOver },
+                    { ['drag-over-gap-top']: !disabled && dragOverGapTop },
+                    {
+                        ['drag-over-gap-bottom']:
+                            !disabled && dragOverGapBottom,
+                    },
+                    {
+                        [styles.filterNode]:
+                            filterTreeNode &&
+                            filterTreeNode(
+                                convertNodePropsToEventData(this.props)
+                            ),
+                    },
+                ])}
+                style={style}
+                // Draggable config
+                draggable={draggableWithoutDisabled}
+                aria-grabbed={dragging}
+                onDragStart={
+                    draggableWithoutDisabled ? this.onDragStart : undefined
+                }
+                // Drop config
+                onDragEnter={mergedDraggable ? this.onDragEnter : undefined}
+                onDragOver={mergedDraggable ? this.onDragOver : undefined}
+                onDragLeave={mergedDraggable ? this.onDragLeave : undefined}
+                onDrop={mergedDraggable ? this.onDrop : undefined}
+                onDragEnd={mergedDraggable ? this.onDragEnd : undefined}
+                onMouseMove={onMouseMove}
+                {...ariaSelected}
+                {...dataOrAriaAttributeProps}
+            >
+                <Indent level={level} isStart={isStart} isEnd={isEnd} />
+                {this.renderDragHandler()}
+                {this.renderSwitcher()}
+                {this.renderCheckbox()}
+                {this.renderSelector()}
+            </div>
+        );
+    }
+}
+
+const ContextTreeNode: React.FC<TreeNodeProps> = (props) => (
+    <TreeContext.Consumer>
+        {(context) => <InternalTreeNode {...props} context={context} />}
+    </TreeContext.Consumer>
+);
+
+ContextTreeNode.displayName = 'TreeNode';
+
+ContextTreeNode.defaultProps = {
+    title: DEFAULT_TREE_NODE_TITLE,
+};
+
+(ContextTreeNode as any).isTreeNode = 1;
+
+export { InternalTreeNode };
+
+export default ContextTreeNode;
diff --git a/src/components/Tree/Internal/contextTypes.ts b/src/components/Tree/Internal/contextTypes.ts
new file mode 100644
index 000000000..2246e2798
--- /dev/null
+++ b/src/components/Tree/Internal/contextTypes.ts
@@ -0,0 +1,95 @@
+import React from 'react';
+import {
+    IconType,
+    Key,
+    DataEntity,
+    EventDataNode,
+    NodeInstance,
+    DataNode,
+    BasicDataNode,
+} from './OcTree.types';
+import { DraggableConfig } from './OcTree.types';
+
+export type NodeMouseEventParams<
+    TreeDataType extends BasicDataNode = DataNode,
+    T = HTMLSpanElement
+> = {
+    event: React.MouseEvent<T>;
+    node: EventDataNode<TreeDataType>;
+};
+export type NodeDragEventParams<
+    TreeDataType extends BasicDataNode = DataNode,
+    T = HTMLDivElement
+> = {
+    event: React.DragEvent<T>;
+    node: EventDataNode<TreeDataType>;
+};
+
+export type NodeMouseEventHandler<
+    TreeDataType extends BasicDataNode = DataNode,
+    T = HTMLSpanElement
+> = (e: React.MouseEvent<T>, node: EventDataNode<TreeDataType>) => void;
+export type NodeDragEventHandler<
+    TreeDataType extends BasicDataNode = DataNode,
+    T = HTMLDivElement
+> = (
+    e: React.DragEvent<T>,
+    node: NodeInstance<TreeDataType>,
+    outsideTree?: boolean
+) => void;
+
+export interface TreeContextProps<
+    TreeDataType extends BasicDataNode = DataNode
+> {
+    selectable: boolean;
+    showIcon: boolean;
+    icon: IconType;
+    switcherIcon: IconType;
+    draggable?: DraggableConfig;
+    draggingNodeKey?: React.Key;
+    checkable: boolean | React.ReactNode;
+    checkStrictly: boolean;
+    disabled: boolean;
+    keyEntities: Record<Key, DataEntity<any>>;
+    // for details see comment in Tree.state (Tree.tsx)
+    dropLevelOffset?: number;
+    dropContainerKey: Key | null;
+    dropTargetKey: Key | null;
+    dropPosition: -1 | 0 | 1 | null;
+    indent: number | null;
+    dropIndicatorRender: (props: {
+        dropPosition: -1 | 0 | 1;
+        dropLevelOffset: number;
+        indent: any;
+        direction: string;
+    }) => React.ReactNode;
+    dragOverNodeKey: Key | null;
+    direction: string;
+
+    loadData: (treeNode: EventDataNode<TreeDataType>) => Promise<void>;
+    filterTreeNode: (treeNode: EventDataNode<TreeDataType>) => boolean;
+    titleRender?: (node: any) => React.ReactNode;
+
+    onNodeClick: NodeMouseEventHandler<TreeDataType>;
+    onNodeDoubleClick: NodeMouseEventHandler<TreeDataType>;
+    onNodeExpand: NodeMouseEventHandler<TreeDataType>;
+    onNodeSelect: NodeMouseEventHandler<TreeDataType>;
+    onNodeCheck: (
+        e: React.MouseEvent<HTMLSpanElement>,
+        treeNode: EventDataNode<TreeDataType>,
+        checked: boolean
+    ) => void;
+    onNodeLoad: (treeNode: EventDataNode<TreeDataType>) => void;
+    onNodeMouseEnter: NodeMouseEventHandler<TreeDataType>;
+    onNodeMouseLeave: NodeMouseEventHandler<TreeDataType>;
+    onNodeContextMenu: NodeMouseEventHandler<TreeDataType>;
+    onNodeDragStart: NodeDragEventHandler<any, any>;
+    onNodeDragEnter: NodeDragEventHandler<any, any>;
+    onNodeDragOver: NodeDragEventHandler<any, any>;
+    onNodeDragLeave: NodeDragEventHandler<any, any>;
+    onNodeDragEnd: NodeDragEventHandler<any, any>;
+    onNodeDrop: NodeDragEventHandler<any, any>;
+}
+
+export const TreeContext: React.Context<TreeContextProps<any> | null> =
+    React.createContext(null);
diff --git a/src/components/Tree/Internal/index.ts b/src/components/Tree/Internal/index.ts
new file mode 100644
index 000000000..01706652d
--- /dev/null
+++ b/src/components/Tree/Internal/index.ts
@@ -0,0 +1,12 @@
+import Tree from './OcTree';
+import TreeNode from './TreeNode';
+import type {
+    BasicDataNode,
+    FieldDataNode,
+    TreeNodeProps,
+    OcTreeProps,
+} from './OcTree.types';
+
+export { TreeNode };
+export type { OcTreeProps, TreeNodeProps, BasicDataNode, FieldDataNode };
+export default Tree;
diff --git a/src/components/Tree/Internal/octree.module.scss b/src/components/Tree/Internal/octree.module.scss
new file mode 100644
index 000000000..3a9ff857d
--- /dev/null
+++ b/src/components/Tree/Internal/octree.module.scss
@@ -0,0 +1,235 @@
+.tree {
+    margin: 0;
+    border: 1px solid transparent;
+
+    &-focused:not(&-active-focused) {
+        border-color: cyan;
+    }
+
+    // padding: 5px;
+    &-treenode {
+        margin: 0;
+        padding: 0;
+        line-height: 24px;
+        white-space: nowrap;
+        list-style: none;
+        outline: 0;
+        .draggable {
+            color: #333;
+            -moz-user-select: none;
+            -khtml-user-select: none;
+            -webkit-user-select: none;
+            user-select: none;
+            /* Required to make elements draggable in old WebKit */
+            // -khtml-user-drag: element;
+            // -webkit-user-drag: element;
+        }
+
+        &.dragging {
+            background: rgba(100, 100, 255, 0.1);
+        }
+
+        &.drop-container {
+            > .draggable:after {
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                box-shadow: inset 0 0 0 2px red;
+                content: '';
+            }
+            & ~ .tree-treenode {
+                border-left: 2px solid chocolate;
+            }
+        }
+        &.drop-target {
+            background-color: yellowgreen;
+            & ~ .tree-treenode {
+                border-left: none;
+            }
+        }
+        &.filter-node {
+            > .tree-node-content-wrapper {
+                color: #a60000 !important;
+                font-weight: bold !important;
+            }
+        }
+        ul {
+            margin: 0;
+            padding: 0 0 0 18px;
+        }
+        .tree-node-content-wrapper {
+            position: relative;
+            display: inline-block;
+            height: 24px;
+            margin: 0;
+            padding: 0;
+            text-decoration: none;
+            vertical-align: top;
+            cursor: pointer;
+        }
+        span {
+            &.tree-switcher,
+            &.tree-checkbox,
+            &.tree-iconEle {
+                display: inline-block;
+                width: 16px;
+                height: 16px;
+                margin-right: 2px;
+                line-height: 16px;
+                vertical-align: -0.125em;
+                background-color: transparent;
+                background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABhCAYAAABRe6o8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAK0dJREFUeNrsfQl8VNX1/5l9ksm+ELJB2ANECGtYVEAQaZBSFdAW0dpaKbi0WhX9Va1/S/+K2k+1iCztT4sFW6lKkUV2RLZAQHaSQBJCMllJJtvsM2/e75775k3evHkzTCZEAubweczMu/d7ZzLznXPvOff7zsjS7nudhXZaxZd/kKXf//9Cwgkf1xha2QOnS2DzofNw5FwZjM/KgFkTh8Idw/tBz7hImb9xQsV1W9czJf73zTsPek7I5XL3oQCFQkkOBSiV3C2eG/rz9z19Q8Wh7T5+kX3i7c9g6ojekDs6A1796Vg4XVoPe/ILYMnKzbDmxQfZaaMH+pApVFy3Sdupp8cKH6rJ8QQ55pBjvPvcEXJ8To415LDzHbOXH/OAZLK2t/vBbbcFHOOz3LOeMViW5QgYLImwTcrai0MSrdm4H/708ztgwtA0D+6OYb1hysh+kDtuEPxjWx59jUIyhYq7lc2k38HaGk5KtmniR4Au7Z5g34cnZHLF6vTRkyCuzyCAuATurKF+kuFy0aSK4/uXsy5moZuIkkbI94RCplidlZYDvZP7QUx8LD3f1NA46Up1yaRz+qPLSZ+FhIRrvDxgsCTC22DIp1Kp6OORX42GM/ef8sLh9IkeTEwi4fNNyu5Lb7Hf4VW/ZXFaDRV3qxPQcjUfEoaNkWxrLi0CW1MvVhMzOOD74GJci8Nj4lZkzn6UfKAMgLkZdv7+JU/79P95B+IG3gaFm9auNjcZlHKF/EPxGPO2ZC2O0EStmD6aOL4oBixghGpo5EgWr4F+8QOgX69M2Hn889Wkr3LDvefoGPL2kE/syXgcYpRKlQ/5uD7eOFy74fTpj0R8/8kj+sOsCUNofykcThYHLQfhVwW/gi1VW8HG2iVxt7q5GCewLukjLCERmos/g7rjr7PCo/XKVuH6Xa1QqTjyWQwAVytg53tLYfrGWs+x8/+/QNuwD/Z1T9Ve065SoVxx94g5YNY1Q6O9Giz2Vjhy7AA98D6ewzbsg33dUzXnAYMlnzQBFXDn3rsgb8YhihOST0hS3jBwwLVbMM83c/xgWLfrJMydku2DO2g8CJ/b/gNmpQmWXXgL7HY7zB/8sA+us2zTgXNs3oVyv+3jhvSC2XdkyTp7HMZpB5axSy/ww7SQkDXc53ztqUMQ2XsmvW93Mov6jL2TEKwFoPEqrl4o6ahtfBXgvj9yjze+RumSkj0RLh/bt4g88CzqnXbXotv65IBN2wqt5gYyAsfvv489QG//2vo091zkn1wrhyEpo+Hk5SN0DCXvpYIhny8BORx9o7ZPhO9+fNyLfBfmnffBYdSKgUMwz4fR7ZN/2SiJW1exDkyEfGazGaw2B7x77B1YMPQRH1xnGZLmzYW5wBAPxDid4CREcNht4HTYyJfBBn/dWoTE6fRxGKcNXE5ru147YgQBxEOxaX0AWuoAHBbvjg7BuNhG+mDfsvxvHhISUE7G6BmXDk3WBrC5rFBUUsA1uOObMwWn6O2gfoOBdTYA9pWX5T3kIWCw5BMTkMfx5o98QhySA6NWDByu9XzHCrgUixTugfg58PaFZWAlH1JLcxP8aeybkrjONCFpdBHRUF9bQUnjsFlDHkdIvmDGwb7tJSBiPF5SIR+lJMsmV10Tmc+d4FmX4fSOz//PpwUkdIIyNoVihOPJlLJRKo0SjOYWcAHj8Xy88Y+XVj4KDnBCTFgSxXieK1jyyWRiAnI49HxCE5NPiMN83Z6TZUE935bDBbS/FG5G2gz4bf9nQW5Uwp9y3oR5Q+dJ4jqVgALS0CnGTRr+cSjjCMkXzDg8AdtzCAlIUwYOO9isZrBZuIM3vL/7yw30wPsO0sdlsZIp3+UQvw4H+RtsNguZjSx+Xyu22YgntVvtmINxeAgYLPmE+R5vnJxGu/7IJ8RhsnjH8WI4fF4f8Pn2nSyBTQfP0v5SOJ1KR9d8Zx87A49lPwaR2khJ3LXsxIkTbDC3kh++2/PFxPWgj1PS+0Pv/lmUQP7Gv9Y4CUnp7RoHp1PWaWnXIZyCzXbnebPJRDwXruUs9Ghb21k8gQhtw6ibLHksjOuiF/ksDDcGGcRKyP180Wx68MY/ttIvCxmDkpkbQ8l7svaSTwp3LfKhYWoEk8WYr0M8Rq1S5Fu34wQmlT07G6HirmWjRo2SBXMrZeih+GkXSVN84QS9L/Qw7R2H93zBjtPRKbimyby5qUafHR0RAbbmBuKZXBDJr9f37IHpT7m9IQnytDER0FyjpxivXGSdeXN9Y022JloHLfYmEoK4vJ7Pbuden4z4uxhNItQ311CMIA3TfvJ1BIdJ4p/njoOn3v8KXl6zHb49fZm4Zgb2nyqF332wGX617DOYP30UiJPJoeKC8YChmHitxpOmvVOweNptzzh8ENKeQ+gBF28oWllfkA9MeAKARgcOhwOq3+QiZD4arn5rFm3DPtgXMcLXsPP3ZSsvNpyCSCYW1BBGXreDEnbhiSn0wPt4DtuwD/ZFjMcDirfJgrVQcTyZMFmM+TpMmWDUyu/pLnl4ql8PFiruWh4wFBOS5sKpwx7S4JRK5oeQxhGSL5hxAqVhAmF4I7Fvw5kKwxvKo7teSx07BViVHhxNdaBfeg/nZNThoIojgUd8GuiP7gLsixivARuhofZC0xunlAdfy0qZAA2qKmiy14PdxX0x1XItxKgTIF6RAqcqDwL2RQz1irgf90M29IChkLCr5AHL85ezVy9tbtdrTxwwC3qNeVrG7wWP+CA/YtXMjFfG9UtaEjcgGzTRsWR9L6M5QScjA1uTAQyXTkFeSe2yX28tW3ryqTFGib3giIlLU19JHxW/pG/MUNBpogFUMpoTlDtkYLQ1QWnTeag40bDs0CuVS0l/I3JPdqPUMOvX/VM+NfcnDHqyLahqOV8G44dmwL1uVcuebf/VzH94geRXu1sNc33FCISA+J7pyNH3rbtSnxmSHD0pPVbXH9v1jabS89XN+17aW/lX8rAUl3yEgKwEAT1jjHqxxzOJAyInRaeG0zFaqsyldRdb9514u84zBqdFcIsRKj4mEQtDoh+nkYTkLWRVTBaSZDEJDIbcVu7Wie1W6LMsvY1QIeLQkjJzmAm/fg9mj4qCR0Yp4cP7tJB36TJsPnAJlqxUYCBhc/9RPkIG3OtF3KMEt9IXx7Z3DdiRabirjtMeQ0KhRyJELCREexGgkrgvsmBzbzfjtjK2k36B5no6BjkKCdHIGHWSY4BAUdMmRgiSRCwjyvGEiEMSrd+8Hf72eDrcNZDx4Cb3t8HkPlaYOYiBf372Een5Cx81TCi4zloDduVxgjWhJ2OXU3IY3EfQJlrGtWsMjoBuEpU7h4NcoQBFhO/OSNi5J8mHLfoC+MEJBQlF/cd74XhVC08i3AVwhg8CB/HWytbzoGw+CVMyagih5ZJqmPbiuj1gYBu7+pTwYdB6wGMLs6/LGEouE855MEoif3o+JJHLLsqgczgF7auk/cRqGDEO1244ffIkssTdBaxMxeXDokeBMzILNKUrYHLvavjxAC3tj6ICMa46YjocMebBuuLf0W25GelPQmzJmz64W90DXk89oEIuWz0pMx0GpcVBAiflg/pGmFSkN0zaX1ixnHGxAfWAoYzB7ZG5p8+AOkCXRLjvxqEaRkqKxW0oeuMwcLh3mJLinJpUD/k8pJZrwBk1nOJy+1+l/aVwSD6hGuar0q8kcZ2ZB+wK46AeMC5rhOThtKAesOCa47lY1+KYcO3qp340HIYMjAMj+Ug++FpPj3/n6ek5bMM+2DfYMYqauQPv+xuDEpBfSwXaE6YkEm0B8jiaLtg+0Yd8uDMixmHUOq4Xt0Z0cEGSb54qbhzF5SQ30P5SOFTDNBgMYBKoYaRwt7oHvB56QJVCseLROzPBwJDAshVgywE97PhpmudYv1dP27AP9gWRHtDfGLjli0czCQH8jcF5QHfgEFAHiCQS70HzAYfbpNQwYhymTPIuWbjna5X2Uor6AxRzVB/hpYYR4nDaramsgbraq9DS3AjPjXxeEnere0A+ES118HpA8WGsPtSGd9gXTRyQAmQxBVctHGGQdGivFXJ98DG2YR/sixiv1yAaw+bkMHZCODwOHNf7HYPzgO6oNaAOkBLJ6e0B3bhAahgxDvN1m884KQ4DB5nL5kNqxdVvKW5rcaKXGkaIk1LDSOFudQ/Y0a041AP26RELda0oEkDFimB6t3jfxz7YFzHC1yAeg8fh7dGTeg+hpcZQejyZ0xJwb9eFbp11+npAiuPUMMO+zPYRJIhxmCzGfB2mTDBqxYAD1244faIHQxLJLJXwTVkMbC5Ng5cFahghDgOO+QT30Nz/criTT0nibtWdEJvhNGurPwnhkYnQUnIlqNesigwDTVyUlxhBrlCOUqmV0NTgAifrHRpYbS54Ok+Q9CDeMSVeSTHCcf2NgXiefPx44jG4KNidr/OkWvjAgXgTFz3cJHIx3h5QhCvqfRuwh+8PiONVLTRf55DTqFVlugJK/eee6RpJtP5CmqQapr24zvJcN1oRba49CpFpCaAMTw76NTdePAtys9FHD2gnrDET19dGHi5/jOf01dy2b1pyPApRyRStAhewPnpAqTHM1J2Gtb1m8lg8hjsP6E4Wi8jHT58eErGMKA8YGo5LEv+C5vUwZYJRa06yhazdouj0iR4MSSSlhgkF11l5txupiNbE4VruIET16hv086giI8FqqPaagp1W83kSyGWjgspi95ZRWchijvdgP9vRCpFqOSGRE1xWy0VvGkiPgXjEfXpPpOexeAxKQPE2WbAWKo4nk0fVcug8PLnDvad7z1A6fYo92Pp1//QsOXjcFwT3wrdlkNMvA+524/Zs+69sfeFR2nH+wws6de12IxXR2oRsuFq4jkS6MSDzc722DwHDldBQ0uClhjEbajbr65uyI8KiocFI1pPUg3GEaTA0e+7ja4oI14K+vplivLyxaAzOIj2C2jmbbfD5rATJMbrVMG4PeK1bMe7l1dvYVx++nXo+saE065O8RpxaO3Wc2nMfs3IohoiE+KD/XkO5Hpqq9TB09gZOQRCelJzz3s6q2dkZUFjvAIPFQZXNW+e2Te2zvqiGuDAVZCaoYNOpMjj62+kprLm22uMR/IzhtU4k3xGpMZShqlpCxQk8GUzN/Qn1ZLuJJ8srcXuyNjUMCuFcUp7seqphbmZFdFTanVB+dA9oI4LXHmJfhhEs4Sx1DYaSM2/sUitfmzIwFfRyFupMDrjnX3raHE6mzBSdCtKilLDrgh6wL2K852rpMczu6RjH6OFnDDoFv56bLIypgf6TiQ65jEqqX95Y6ukaCKeOwTwj4sgU0+LywqElZeawuc9+AFNHpMKUoT3gsbv7gr7GCPlnC2DZ2m3w1lNzmNrCozLxFIy4F5d/QXG5BLfYF8fyuGCm4I6sAW+0Ijospp+MYXTspbz89kgHIDJxmOfRmFUn7fm/HvGO4+lVGrN93JLstDjIjNeQz1AJODnKwAkGsxW2nqsiHjdvWdnyX7+DGOGIHRnDqzbMtcgn8/cxSZAvPae3uw2g6pjeh3z/+no/vPDj4dAzVkXCczvU110FnUoBM4cnw9j+PeCLvXnwwF3jWCEJQ8V11hqwKyiih+Suvh75RxMhxdIygE/1j731THTGkEm6pHS6TWWq05c2Xz6/r/Ljl4Ravus2hrJd5JNgoCZBS75UMircczQ5vMj36O5HYe3da0mzzGvanfncB/D8rOEQHyGDxsYm8qY7qKQHnw8vNI8k0drdWanw6qovYOPbT+FULxPjHLEuiEiKapsFagjOyvrgOssDYn4OUyTSpqDt3+c4HTHijaiWj3ixQkKSFysBJLV8Ys93PcZQtod8MtHnieTrPTrD4+kqjldA+pheHvJ5uC1YLdIaL9mpkBSrhEZDE9iIFxMGQi6yesUjITERZowaQPoXwdwpo71wzhgWwpLCodqip3vCuC3Xt2d/MLMmiG2ReeE6ywNicjiYPN/3NU6oJpRVwUI2JD1gR8ZQctwJjnw+V7mx3ONH9/4c1k5dK0k+fnze9pDAYfKQHmCxWD2ez2tI8hivzDKZTDAsIx6253FEEuKiMmMp+YRqmGf7PweZyUOgubrJC9eZa8CuMM6Kb1rZ1ro6v+0NBRfg97+5A2JjY2X8+yvaRvPcb29tP946rAcMmnyit8VzJQCSbg+Zbqet9SIfTr+0XYDLLy2DBVMzoIG8aYFSQE5CwrSkCDhbWuWDQ5OqDfP32R/74G71vWAXw8BL8/p5Zg7+YBgXVDZY4W8F5L3aVUGWOo0sT0IpC6W2n4S1Ww/oS8AA5JP5MNCbXVLkqz5WBS5TW1JoTL8MqK4zgVbOXTfsj4TYVtXQCtkDUnxwaFK1YaRwt7oHZJ3cLCKswcPSrTG8pJJ7/C2TCsyWYkpCqXWxuLbfpu3rvNrDlTEwe8KjPrX9vL4IrGtxnC58xaNTMoFRkQWfg3jfZvdSza0HvK1PHKzdV7jaYDIr5TJ5W33AoMknmoJl7j8HPZ/QfMgnDEImZMLpigbQasNAofC9eJ1/LVqtFs5fMcAUsp4T48zVRugb399LDTMkfSgYq4w+uFveAzq8lzE8+Rhyh+G2NaB30SHQl1RDQUGBlOfzqe23fsZJr+Nv0/ZJ1vYTTrsd0gMGSz7xO+NscYKeBB6UhHev9Us+IW5CVj/49lwVNFoZCA/XuasoeC8BwsLCwOiUwb4z5TBh2EAfnKOKrBEJ2XDN99Hsj2BIGkc+W4XFBxeMx7leOyo3YhzGYfd4PtThIflMxPsYyREbEwY/e2AW3Dt5FrBkWm5ubvZd6thdi7BeH1/bz2Zryz1iXT/+oG2kD/ZFjOg1SOoBUQfIawID6gFDIR+PY5oZT57vWuRD+2bHZuWrj98Dh4uugkWmhuiYGEo4lPNrNBqIjo4mLjwMjpc2wgsL7sb+Gikce5WF+rw6qDlYBXWHa4CtZSRxt7wHtNuJp+M+dCQeHrwipcUKEElWIj2HAiWglAlr+1mxhouzLe949NBBepw8eoq2YR9a2y9IPSCSDvWAQn2gWA/IETAE8glxTiOSsJISLxD5+C9MbeFJ5cw7RsCqbefhVIURXJoI6NkzBeThUXCuygJ/21EAU8ZkwdXiUzpB1BQq7tb2gMRjoYdxuPmF5LM6uIO2IzldeCtNQGFtP5uVrKfNjZ42fgr+eNoB2oZ9VGEqT20/D4l5PSD53FHzhwdvSEL+Md5iH7VapAcUb5MFa6HiKJkunVKsX/oErYzwlagywj8emEErI0iQKFTcLesBGeKZcL2HJOTJR3dX3Ao4/OydDHftiN+9aHdtPzKHgEKw8/KH0p+K3CVXZpev7ee1m+NHU4jG6wIl9YDiH48J1kLF8Tb/4QX4tZDhpZNSl0/iPq5QuCDY170m7vuIXrtMjWi7DcxubonJh+f5c5iukSQfV9svG99UK+O992xymL0ehynCweJsq+3nWUcG0BSiHtCzWyWlB/y+1TACcgVVG0ZIQt46Qw3TXusqNaJd7qAhEPnwnMspTcBAtf2qL7d9MRJSe/rU9vN4OD96wDmb6wW9IiX1gJ1WG6YRVPju4CIFoi01XjgkFdaGmbiIqw2zYKQSls8Og2MlZbDtYDG8vEoBq16YZyP9JNUwC9/hasM8QnAf+OK+NzVMV6gR7SJRsMPpSz7P1Mhw60B/UzDW6Yv7NOrVcRHToRkMYMTPT7AG5O2Fs/fT2n55DTu52n6COLjo3cUrY9J2vjo7OwLqyQyOesCZ/6n2eh5eU5igYWBTQT3FwBsPdE5tGCTfhejxnu2SwZX/8YIhiT7dvB1W/yId7uzHgNPWQr6hdsjp7YTx6VaYMdAJ6zd8DPPnPeajhgkF11lrt65QI5rBKJj1Jh8SzsG0BSH2AASUqu23+PjdPrX9eir7+NT2a5tbO6gH5En08fZGdy4u1ic5/WC/7ZK1YertRtiebyZ91ISDsZJqGJngumBUtdxOPN8qQqLbCYlMNgYssj5gDUsBhaUMtLaLMDa1hoZ1i9/dAPtXPONRwwhxlxSJYIhty/XFGKsI7oAPLlgP2F5FNP3z3Z6PtxROfUSlWf7GD2Yc3oIZx2FqhQ/eWndNomKR8fDwcKkm+77flb8zcSmjsY7aTWv7pWnI36EV1PYzN8Hxpt18bb93xEFeh/WAvAcLuCcsURsGyVcA8dB7THxANYy4NsyPyfR5ByGRmZCvUT0STGYH2IzkGyfrCVpCxNjmrwmZ9DBrQAMcPIM1XkZ44YqRfJpYbzVMfH/yLR8PYx07vXDBesCbtUb0b56aAiUlJVS8Ech0ul7Qr5/fS1VNXNHIyk9HvVgTTG0/yTFC1wO6p08pz+fRAUrVhmGMAIr4a6phQCABx4AD13wMmT7R8yH5mpqN5A20YIKTvFFhoFT2B5WtEu7ua4B/H75AiSTEoefzp4ax62VeuM60rlAjOjU1VUaOjv4pIdX2E3nB0PWA/Not0J6wVG0YcBg9ktaAahhhbRgS7WLAgWs3nHbR85lNVjAaLfT58LnDY3uDkyxsRiY1wbO7rvjg0PyqYUS4zrSuoIjuMPM6UNuPtw7rAfmAI+CesFRtGDq1BlbDDLn0IURaUBqVSc9jqgWjVgwccM2H067MrXPgvwBy02V6XfF31ToYN7S3Dw7NnxpGjOss6yqK6GXLlmE8mivVRqbce+fMmRNwHdw16gO6o92AOkCJ2jAyTFy61TD+pFg52iovHOb5MGWCUSsGHGHEC+K0yz03mYJJqB5mLCQvzAK7SlMgd+oQHxwGHLwa5u1j73JqmLShENZQ5oPrLOtCiujcJUuW3CvV8Pnnn+PBXouEbruB9QHdqZaAe8IStWFi7FdhcP3OwGoYidowm88r4FCxEzTOGoghAUecvIK82HBIVNdAgnEnRDDlcKJSA9suJ8PtgtowPC697gBENZd7qWHCGy5DSvkWH9wP3Qj5KAkD5hJDrO13Pcbwqg3jSbUEKrMhXD8QXIyzkeb5ClLnek271POpfXFYuWDl8/NYzNexDhfkkGgXAw5HK0vTNUqwwokqDXxe2AP++uwc2Pv1JjkmlH1wJNrFgMPBBMZ1WxsJ/XhCLy0fKmj4ZSHKqe4YnUbPRak4Ld8HO0+vIF7s76KAJOQx5O7NvA7Vhom2VMOQK/+AIaV/a1vzBcBhknj+vJ/D01tS4I974+A7PQtKVxOcqSZrmkMp8Ny+LHjoocVQV3RM4Y7QOoT7IZt7Gubv+7wnUvUBSUxHD17Th+faWx9QWBcQ7+M5qTE6qTZM5jWxtYXHZJgsxnwdpkwwas0hgcNMsnZ7nkyfxIN5KiOIcd9++Bu6F7zx0HlYwteGmTYUXhBVVOj2fHPEAcsWcR8vLR8h3ZlCwTXcQ7gKqVglYVhmGtQ5OS3fN7Iyr98LFo+BhuMI6wLyJh7je1fDDByQDGNypnleO+bqpPJ1/PSZf3Q3SOzrXjc1zK1ieCESf3kDf421MNVyZdNKmGTYf2/ekv3oBVeOW7aNrsPEtf2E9fx4w3NP57naVR9QXBfQM2mK6wOSD7jdUxUhkCxUnJBUST0zWLO5FaxWE819KVUa0Gp1EB4eCbU1ZV4E5zHtwQmI/oMgoERejz4u/2oV1Odvh3ELngWXTAHHPnkXpz9PIOCt5QuTHF9Ky+eVQLymHtAddEjVB4xLaGNrW3VT6Z9sKCpoK8cbKi6t1+AjrS0N45qb60Gni4aIyDhXz56p8pqaSpfdZpbj+eiYHmxkVHyevrxgfEdxPyQC8rf8FYdIPsOJnTDup08CU1cGNWabaBnvreUT6vf4un78ufbUBxTXBeRNsj5gsCSS+6lDJ4XjZgDWc8mg0JBEKEGKjU12pqX3VvLpoLS03vRWX1HubG2tV2K/64H7oRAQ32uGYTzk029ZA00nd3PkM1RBpcEAVfn7odFsX+/xTpL1AT10gfu/4jR9cvJ5tq8+oHddQN4k9YDBko/+XkgQ5JOTV4uPS4vPwMDMkV44nD7RUwlI5GNp6b2Uej04Gw1VSuyPX+hQcZ31gXcVRTQ/zSLxuAvSuduaHR9By6m9PuSrbDJ/OWfN/oXscg4rpeXjLx/hNX18bT+xlo+3joyhbA/5xJ6M/n4I66KOCL91YvJxfbxxuHbD6dMfiTxkSuultNtMtL8UDn+awWhsBZOphawDLZCQmAKJPVJ9cJ1lXUURzXs/JB6WNMHLKivOvwEG6wbodddMYFobPOQrtmlrFqz5+hEQKlo6oOW7HmMICHht8kkTUAZ1NWVkfTbIh3xCcnsiIhI44NrNswsTwNSacFdLS4NcCmc0tpB2Hfmg7GCzGqG6uowSUIzrTOsKimg0/Kzw0la1Wk01f6f1G+BHD34KX3/2M7BEtYIzn4SefUZDSa3iJMBGLzlVl6gPGCz5fAnYNrXqy4ugb/9hXuQbkpXjg8M3FwOHYN5YGmBUFUvizKZW8o13ksNKK34K1xlCXKcSsAsooo1G4zfLli3zOjesB9C94WG3vwJnDi6FBtvkGiSf0+nc42eYG1sfMFjyiQmIOOGGgxT5VCq1Fw5TJhi18oFDIMN+pL9cCofEsxDPh+TDD0qjDZPEdaZ1BUX00qVLscwFBhVa/tyHr2udxPv9BO9fLrdtfvL9jS8Rz4fyqCbJ9NiNrg8YLPlkMrmP68do15/n48knxGG+DlMmwXzA2A/7S+ESEpPptMuTLzk5QxLXmXajFNEFTw6HwStO8wEIztM1oiHvEz5Y/Afp5z2/Vw7rhqqAcdkBLxmxbwU7+TyRqK3k7RtLlz4muIQvEadStXYEoM9RyNUE64Chd3FrvA7rAYMln7iQEI/DKAyj3YuF30mST4jDZDFGs5gywajV3wur1Jc7TaZmZXR0giQO13v8mi8QrlM94A1URCMJ3Qk/uvMvV2t/YW+8mnbbP0rfEPa7+MLtH9gbagsUYeErhOd5AnMsBvJ5AUdCGyaLFSN1UWn/pgQ06uc4GeaoWsP1kSqw0GE9YCjkE+OQhNciH93LrSmTYbIY83WYMsGoVYpELS31So0mnPbv1bt/yLjOtBuliHZzjouA7fZ0xmb+feyI4Y9oe6SEnX2sX8/bPi6huxyXXph4OPXBpwdXf7k6xlJdEaEM1y0L+EJYemjkSuXc2KQH6be7se79ueBkTpHzwXyrQqsPGAr5OoLDnQpMFmO+DlMmGLUKdzTQgyGJsF9zU12HcZ1hN1IRjcliBXlvXYSFrItZGNM/a2Hi8DGgTeoFFV+tXXRyflqkKkx3T8qMuYm6qHDIePAJKP/io7dMZRcjlZExr0jnEnFGkxHis1qNWjU9PDqHfnh432Gz/ZG02QIVFA21PiAloHCbrD0WKo7fJuP3dDFlglErBg64dsPpEz2YmESh4jrDbqQimpbZUCh0MmCfiUzNeDx13F2gwKXglTOQPu0nwNrMD0cNGgYxWSPJlEPen6gEyJj3K6jY8eXvLZeLFCzretntSbWEwoPJbSznT1gzmbz6RsUPSpYrjPS58L7NdmIWacPoNZzyHthGcovFBvk8kaQekNcCYid/esAf/C8l3Yz2wOA42Su3J8+K0Cg39X7gCVBXFQJgVSvCHohPRdZw921mEj6Ygf5YS+YYEpemwvkX5trlSnU6WQPWnd8jGx4eHb9RE5auZom3ZZytjFyh08T0mJyg1XG/fmM1GZmmum/qXYzJplBGKmTAgM1SYTc3N9w3dCpLF5KjPjj2mylZfd7r1ycRqgXSqzcygUq5cka0aQaSSVxccvkq7Dt3+bcnnhr7vrL747z57MvCRjA5mJo19/YFFaafYhKANRroJRXQWEtIZ+MWdCzNygPoIsBRrYeGvV8DYzbukkfFUXLlnwDn+Amy2KSMB2M0ukHEtVUC66zFbAkwjhLOtWl7KHr0mpkkUyaBXJYKNlMRVBT+uQmxQ6fya1JfPSBvQj0hmlgPKO/+OG9KY3eUtJx5YsvlJaUbPoRWQyPIIuOAddi5MNWMhQYc3E44kjAsBhrPnYKGA9s+VIZHPk/O0A3al96G4l07DM8e27M8z1C9lZWzRmCZCkK+88Qb1nEHuY/nsA37YF/EINYTC0jUB5SqEei3PmC33XxGok3rjpLmtxd/flb2bmvrW7fNnAtMSyOZSO14Fbe7Lje5lWPiTg21B7aBXKVaK1NpCoHlyFHbAPZn33T9KzG2quS3j3yy5LHHh98TlTxM6cLC5wy3ly5TRIJcowBD+RfOj/9+esd7nziWXW2EY07G+yJ1Xz0ggJQmUKwH7PaAN6E9MTIRsnvqIE6riOyXGJGYkZWNmjwy81ro3jhrxws7rJz8GNeBhJg9J9xDSMVsIeQTRjwsIZKtzgAHNu93vH7hfGmpSmEFp9PEJafJgffxHLZhH+yLGBBsgbn1gNT7ovaPP3hDbaDnnNNJyGiR1gN2281hU3pHwsS0yORkjfPtuyeOfJiJiQVTTSklm8tBQk2tjn6wMpZEBFgvtr4cEsdMhLDBoxIr/vXXveTMIEzx4Vg5I8iDPgC/ewI00Yk6tdFE/KcslkyTHL/sWJyInMvoq1Ov+JNB8+c1AEWXAY62VW7zqwf0rRHoqwfs9oA3oT2+pQylvrGT+8U9DGNng8liAauhhu6L4+/yyXQxQEILLlmNsjRTE0BFAYQlpQKZXhPJWbp39uv5AB+9A/Dko6B2srrJkfFjeqq1yYQkPaCp+rITD7yP57AN+2BfxCDWk457d/HK/LJ6qvXTkfDGZneAxcrVCMRbPPActmEf7Ev1gN0EvDnN5HDBL7eU1fzv2eZv2ILDINfFgiw8FhjycWrTB4PVwQJTdRlkvQbT9R/EJ4NLGwtV/1lpIfTED/4cjvPWyyRAJsu0pARI6ZEYkasN76O1m2ohf//emvf/XLIWD7yP57AN+2BfxLz1suAF8XrAC3roH6MkHZSglrNktmXogffxHLZJ1wfstg7ZjVBHMy62edHWy4vMrV+uXJw7drI2dSCZL00gNzZB6cmjrrPl9ed+Fh45TJZ1OzhbGqDuzHFoLS9ZJVMqn+PHK6twLwQB1Ep1i9pS/N+WndsNez78pPGTcAUcxLYt31ZtWfzIlkemz4ibarO0qMmyUo0voIkE2sOHcvjr93vB3RaS3SB1NF7tf+l33zb80gbfLX8uF3Ihawprzd9y4Zktxa8eqbaesjI7P1sgU4ypb7VC/ZkjW+UqzUrcv+ft/oWeu2VapeWxIRklg04WwemSSii+8zau4fhZ+O9f/rfx3DcHG4dfKIMiqxPKeFCJdwGyDv5ecLd1yG6QOhpJeOV/vq193Ow4/qdfGh2x4S31G/brLRvpWnFH9cNNlk1v3De6f6E6Ivpt4pLMwp2v0jZni97oXEEpFJJWGr7mFbY9CRKytBLK+DYp69jvBXdbxwl4g9TRhFCMO7H8C885T80CwFTHQ/6ea/HixfQXqpzkOd3XlTjdAhKVUqmkekDSdgyoHpB1cuonOZXh4fUnvHW8PmC3ddiCUUeHMg5vwnE6Y/+e13XixU3k/sjExESqB6ypqZlDzh3Fdr7P9bRuAl4nC0Yd3d5x/KmjPUHJx4X+hkGpE1Y/wIjXq5xa3mPXrNujIUSbO3r0aKoH/Prrr+cSAqLi1NYZ71t3GuZ6ecAuUC9aYIs+4Yi2yE3Ga5qggIBWrVZPz8jIkOGB9/EcLzruJmAXtcDq6NDG8VVHS3o6VuKAQjPAH+cHJiFZ72kJqbAy1F3kmEYeTyDeb1ZqamoyrvHwwPt4DtuwD/ZFDGK7p+AuYjdQHb3ovQWZoBddKGkm8UGJOwR4dV4m/HFDIV/Pb7HI6w0KDw//Ii4uTo3Bh9VqZTTEBg4cGNvQwF17jvdJgPKujZhWq1WgFzQYDPaWlha88Ol0NwG7gN1IdXQx4cmFAPGmiawIXpydCW9v8iVhZWWlMyIiIpas92KSkpLoD1objUbiee3AE1Cn0ymys7OTSD/6W861tbWwffv2JsR2e8BuAzMhWKvZfzsVVRGP+JcHM+HZzwq9yrLt3r27mEyzz5rN5oUTJkzIwd8cQRIS7+ZZ7yEho6Ki6I+Jnz59mj18+PDR0tLS1fv37y/uJmC3gYXEJiYz47ddp1ZAShgg+cBhbvmHl3c0mezEm/2LTMMlly5dWjJjxox7evXqpcRUjM39K5xIPAxAvvvuOyfpu+PQoUPLCGGPkWnZ3k3AboM0HSFhtPelm612BqpbuURxZqIC1uwrhNbK0i8vvDrzKXjSK5JlCZFshIgHCgoKLH379h2QlpY2kKwFaXKaj44xSX3x4sVS0ud10vf49YyGuwl4E5u16er6d3bCfKm2H93WDyI0cvjnEQ/5Hsn5qMCnrgv+zFdCQgKMHz9ek5iYqMbIlwQbwO8Z81W3sC03N1dz5MgRqK+vx/VjNwF/6Hb6uTtRTvAazrTC84RoZ7J7quDNXYHJR4IPGDt2LAYdaqVSOblPnz49MdDA7bmioiLqAgcNGqTEilvYRqLfyWPGjMlXq9X2Y8eOdRPwh25uUpVKecY3d8H8QORDmzZtGqZesKxbSmRkZC7xcloMQI4ePVqTn5+/FfsQbzczJyenJ7bFxsbmtra2YiGkMsR2E7DbAnlG1P2Z/JEPrampiV/nqck6T028Wsu5c+f2HDhw4BPiBakekKz9tpSXlz+SlZU1lUTIahKc8DnD6/Jauy9M/wFbXFwcfxen4IHEyw2qrq4+3djYWNy7N/djj1euXAHi+fonJycPv3r1ahEJTlBhQyNgMiV3E7DbOvDh+9buwRmRrv2EQYi4zRNCXwfudBOw226o/Z8AAwBphnYirXZBiwAAAABJRU5ErkJggg==');
+                background-repeat: no-repeat;
+                background-attachment: scroll;
+                border: 0 none;
+                outline: none;
+                cursor: pointer;
+
+                &.tree-icon__customize {
+                    background-image: none;
+                }
+            }
+            &.tree-icon_loading {
+                margin-right: 2px;
+                vertical-align: top;
+                background: url('data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7')
+                    no-repeat scroll 0 0 transparent;
+            }
+            &.tree-switcher {
+                &.tree-switcher-noop {
+                    cursor: auto;
+                }
+                &.tree-switcher_open {
+                    background-position: -93px -56px;
+                }
+                &.tree-switcher_close {
+                    background-position: -75px -56px;
+                }
+            }
+            &.tree-checkbox {
+                width: 13px;
+                height: 13px;
+                margin: 0 3px;
+                background-position: 0 0;
+                &-checked {
+                    background-position: -14px 0;
+                }
+                &-indeterminate {
+                    background-position: -14px -28px;
+                }
+                &-disabled {
+                    background-position: 0 -56px;
+                }
+                &.tree-checkbox-checked.tree-checkbox-disabled {
+                    background-position: -14px -56px;
+                }
+                &.tree-checkbox-indeterminate.tree-checkbox-disabled {
+                    position: relative;
+                    background: #ccc;
+                    border-radius: 3px;
+                    &:after {
+                        position: absolute;
+                        top: 5px;
+                        left: 3px;
+                        width: 5px;
+                        height: 0;
+                        border: 2px solid #fff;
+                        border-top: 0;
+                        border-left: 0;
+                        -webkit-transform: scale(1);
+                        transform: scale(1);
+                        content: ' ';
+                    }
+                }
+            }
+        }
+    }
+    &:not(.tree-show-line) {
+        .tree-treenode {
+            .tree-switcher-noop {
+                background: none;
+            }
+        }
+    }
+    &.tree-show-line {
+        .tree-treenode:not(:last-child) {
+            > ul {
+                background: url('data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7')
+                    0 0 repeat-y;
+            }
+            > .tree-switcher-noop {
+                background-position: -56px -18px;
+            }
+        }
+        .tree-treenode:last-child {
+            > .tree-switcher-noop {
+                background-position: -56px -36px;
+            }
+        }
+    }
+    &-child-tree {
+        display: none;
+        &-open {
+            display: block;
+        }
+    }
+    &-treenode-disabled {
+        > span:not(.tree-switcher),
+        > a,
+        > a span {
+            color: #767676;
+            cursor: not-allowed;
+        }
+    }
+    &-treenode-active {
+        background: rgba(0, 0, 0, 0.1);
+
+        // .tree-node-content-wrapper {
+        //   background: rgba(0, 0, 0, 0.1);
+        // }
+    }
+    &-node-selected {
+        background-color: #ffe6b0;
+        box-shadow: 0 0 0 1px #ffb951;
+        opacity: 0.8;
+    }
+    &-icon__open {
+        margin-right: 2px;
+        vertical-align: top;
+        background-position: -110px -16px;
+    }
+    &-icon__close {
+        margin-right: 2px;
+        vertical-align: top;
+        background-position: -110px 0;
+    }
+    &-icon__docu {
+        margin-right: 2px;
+        vertical-align: top;
+        background-position: -110px -32px;
+    }
+    &-icon__customize {
+        margin-right: 2px;
+        vertical-align: top;
+    }
+    &-title {
+        display: inline-block;
+    }
+    &-indent {
+        display: inline-block;
+        height: 0;
+        vertical-align: bottom;
+    }
+    &-indent-unit {
+        display: inline-block;
+        width: 16px;
+    }
+
+    &-draggable-icon {
+        display: inline-flex;
+        justify-content: center;
+        width: 16px;
+    }
+}
diff --git a/src/components/Tree/Internal/tests/FieldNames.test.tsx b/src/components/Tree/Internal/tests/FieldNames.test.tsx
new file mode 100644
index 000000000..dfbf54649
--- /dev/null
+++ b/src/components/Tree/Internal/tests/FieldNames.test.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Tree from '..';
+
+describe('FieldNames', () => {
+    it('checkable should work', () => {
+        const onCheck = jest.fn();
+
+        const { container } = render(
+            <Tree
+                checkable
+                onCheck={onCheck}
+                fieldNames={{ key: 'val', children: 'child' }}
+                treeData={
+                    [
+                        {
+                            val: 'parent',
+                            child: [
+                                {
+                                    val: 'child',
+                                },
+                            ],
+                        },
+                    ] as any
+                }
+            />
+        );
+
+        fireEvent.click(container.querySelector('.tree-checkbox'));
+        expect(onCheck).toHaveBeenCalledWith(
+            ['parent', 'child'],
+            expect.anything()
+        );
+    });
+});
diff --git a/src/components/Tree/Internal/tests/Tree.test.tsx b/src/components/Tree/Internal/tests/Tree.test.tsx
new file mode 100644
index 000000000..e60ede34c
--- /dev/null
+++ b/src/components/Tree/Internal/tests/Tree.test.tsx
@@ -0,0 +1,747 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { spyElementPrototypes } from '../../../../tests/domHook';
+import Tree, { TreeNode } from '..';
+import { objectMatcher, spyConsole } from './util';
+
+const OPEN_CLASSNAME = 'tree-switcher_open';
+const CHECKED_CLASSNAME = 'tree-checkbox-checked';
+
+const delay = (timeout = 0) =>
+    new Promise((resolve) => {
+        setTimeout(resolve, timeout);
+    });
+
+describe('Tree Basic', () => {
+    spyConsole();
+
+    it('TreeNode is in Tree', () => {
+        expect(TreeNode).toBe(Tree.TreeNode);
+    });
+
+    it('renders correctly', () => {
+        const { asFragment } = render(
+            <Tree
+                className="forTest"
+                selectable
+                checkable
+                defaultExpandAll
+                showIcon
+                showLine
+                multiple
+                focusable
+            >
+                <TreeNode title="parent 1" key="0-0" classNames="spe">
+                    <TreeNode title="leaf 1" key="0-0-0" disabled>
+                        <TreeNode title="leaf" key="random" />
+                        <TreeNode title="leaf" />
+                        {null /* Supports conditional rendering */}
+                    </TreeNode>
+                    <TreeNode title="leaf 2" key="0-0-1" disableCheckbox />
+                </TreeNode>
+            </Tree>
+        );
+        expect(asFragment().firstChild).toMatchSnapshot();
+    });
+
+    it('switcherIcon = null, no render tree-switcher null', () => {
+        const { container } = render(
+            <Tree
+                className="forTest"
+                defaultExpandAll
+                switcherIcon={() => false}
+            >
+                <TreeNode title="parent 1" key="0-0" classNames="spe">
+                    <TreeNode title="leaf 1" key="0-0-0" disabled>
+                        <TreeNode title="leaf" key="random" />
+                        <TreeNode title="leaf" />
+                    </TreeNode>
+                    <TreeNode title="leaf 2" key="0-0-1" disableCheckbox />
+                </TreeNode>
+            </Tree>
+        );
+        expect(container.querySelector('.tree-switcher')).toBeFalsy();
+    });
+
+    describe('expanded', () => {
+        it('controlled by expanded keys', () => {
+            const renderTree = (props?: any) => (
+                <Tree expandedKeys={[]} {...props}>
+                    <TreeNode title="parent 1" key="0-0">
+                        <TreeNode title="leaf 1" key="0-0-0" />
+                    </TreeNode>
+                </Tree>
+            );
+
+            const { container, rerender } = render(renderTree());
+            expect(container.querySelector(`.${OPEN_CLASSNAME}`)).toBeFalsy();
+            rerender(renderTree({ expandedKeys: ['0-0'] }));
+            expect(container.querySelector(`.${OPEN_CLASSNAME}`)).toBeTruthy();
+        });
+
+        it('does not expand parent node when autoExpandParent is false', () => {
+            const { container } = render(
+                <Tree expandedKeys={['0-0-0']} defaultExpandParent={false}>
+                    <TreeNode title="parent 1" key="0-0">
+                        <TreeNode title="leaf 1" key="0-0-0">
+                            <TreeNode title="leaf" key="0-0-0-0" />
+                        </TreeNode>
+                    </TreeNode>
+                </Tree>
+            );
+            expect(container.querySelector(`.${OPEN_CLASSNAME}`)).toBeFalsy();
+        });
+
+        it('fires expand event', () => {
+            const handleExpand = jest.fn();
+            const { container } = render(
+                <Tree onExpand={handleExpand}>
+                    <TreeNode title="parent 1" key="0-0">
+                        <TreeNode title="leaf 1" key="0-0-0" />
+                    </TreeNode>
+                </Tree>
+            );
+
+            fireEvent.click(container.querySelector('.tree-switcher'));
+            expect(handleExpand).toHaveBeenCalledWith(['0-0'], {
+                expanded: true,
+                node: expect.objectContaining({
+                    key: '0-0',
+                    title: 'parent 1',
+                }),
+                nativeEvent: expect.anything(),
+            });
+
+            fireEvent.click(container.querySelector('.tree-switcher'));
+            expect(handleExpand).toHaveBeenCalledWith([], {
+                expanded: false,
+                node: expect.objectContaining({
+                    key: '0-0',
+                    title: 'parent 1',
+                }),
+                nativeEvent: expect.anything(),
+            });
+        });
+    });
+
+    describe('check', () => {
+        it('basic render', () => {
+            const { asFragment } = render(
+                <Tree checkable defaultExpandAll>
+                    <TreeNode key="0-0">
+                        <TreeNode key="0-0-0" disabled />
+                        <TreeNode key="0-0-1" />
+                    </TreeNode>
+                </Tree>
+            );
+
+            expect(asFragment().firstChild).toMatchSnapshot();
+        });
+
+        it("ignore disabled children when calculate parent's checked status", () => {
+            const { container } = render(
+                <Tree checkable defaultCheckedKeys={['0-0-0']}>
+                    <TreeNode title="parent 1" key="0-0">
+                        <TreeNode title="leaf 1" key="0-0-0" disableCheckbox />
+                        <TreeNode title="leaf 1" key="0-0-1" />
+                    </TreeNode>
+                </Tree>
+            );
+            expect(
+                container.querySelector(`.${CHECKED_CLASSNAME}`)
+            ).toBeFalsy();
+        });
+
+        it('controlled by checkedKeys', () => {
+            const renderTree = (props?: any) => (
+                <Tree checkable checkedKeys={[]} {...props}>
+                    <TreeNode title="parent 1" key="0-0">
+                        <TreeNode title="leaf 1" key="0-0-0" />
+                    </TreeNode>
+                </Tree>
+            );
+            const { container, rerender } = render(renderTree());
+            expect(
+                container.querySelector(`.${CHECKED_CLASSNAME}`)
+            ).toBeFalsy();
+
+            rerender(renderTree({ checkedKeys: ['0-0'] }));
+            expect(
+                container.querySelector(`.${CHECKED_CLASSNAME}`)
+            ).toBeTruthy();
+        });
+
+        it('fires check event', () => {
+            const handleCheck = jest.fn();
+            const { container } = render(
+                <Tree checkable onCheck={handleCheck}>
+                    <TreeNode title="parent 1" key="0-0">
+                        <TreeNode title="leaf 1" key="0-0-0" />
+                    </TreeNode>
+                </Tree>
+            );
+            fireEvent.click(container.querySelector('.tree-switcher'));
+
+            const nodeData00 = { title: 'parent 1', key: '0-0' };
+            const nodeData000 = { title: 'leaf 1', key: '0-0-0' };
+
+            fireEvent.click(container.querySelectorAll('.tree-checkbox')[0]);
+            expect(handleCheck).toHaveBeenCalledWith(
+                ['0-0', '0-0-0'],
+                objectMatcher({
+                    checked: true,
+                    checkedNodes: [nodeData00, nodeData000],
+                    checkedNodesPositions: [
+                        { node: nodeData00, pos: '0-0' },
+                        { node: nodeData000, pos: '0-0-0' },
+                    ],
+                    event: 'check',
+                    halfCheckedKeys: [],
+                    node: {
+                        title: 'parent 1',
+                        key: '0-0',
+                    },
+                    nativeEvent: {},
+                })
+            );
+
+            fireEvent.click(container.querySelectorAll('.tree-checkbox')[1]);
+            expect(handleCheck).toHaveBeenCalledWith(
+                [],
+                objectMatcher({
+                    checked: false,
+                    checkedNodes: [],
+                    checkedNodesPositions: [],
+                    event: 'check',
+                    halfCheckedKeys: [],
+                    node: {
+                        title: 'leaf 1',
+                        key: '0-0-0',
+                    },
+                    nativeEvent: {},
+                })
+            );
+        });
+
+        it('check works correctly after dragging children under another node', () => {
+            const renderTree = (children: React.ReactNode) => (
+                <Tree defaultExpandAll checkable>
+                    {children}
+                </Tree>
+            );
+            const { container, rerender } = render(
+                renderTree(
+                    <TreeNode title="parent 1" key="0-0">
+                        <TreeNode title="leaf 1" key="0-0-0" />
+                        <TreeNode title="leaf 2" key="0-0-1" />
+                    </TreeNode>
+                )
+            );
+            fireEvent.click(container.querySelectorAll('.tree-checkbox')[1]);
+
+            rerender(
+                renderTree(
+                    <TreeNode title="parent 1" key="0-0">
+                        <TreeNode title="leaf 2" key="0-0-1">
+                            <TreeNode title="leaf 1" key="0-0-0" />
+                        </TreeNode>
+                    </TreeNode>
+                )
+            );
+
+            expect(() => {
+                fireEvent.click(
+                    container.querySelectorAll('.tree-checkbox')[2]
+                );
+            }).not.toThrow();
+        });
+
+        it('check works correctly after adding children dynamically', () => {
+            const renderTree = (children: React.ReactNode) => (
+                <Tree defaultExpandAll checkable>
+                    {children}
+                </Tree>
+            );
+            const { container, rerender } = render(
+                renderTree(
+                    <TreeNode title="parent 1" key="0-0">
+                        <TreeNode title="leaf 1" key="0-0-0" />
+                    </TreeNode>
+                )
+            );
+
+            fireEvent.click(container.querySelectorAll('.tree-checkbox')[1]);
+            rerender(
+                renderTree(
+                    <TreeNode title="parent 1" key="0-0">
+                        <TreeNode title="leaf 1" key="0-0-0" />
+                        <TreeNode title="leaf 2" key="0-0-1" />
+                    </TreeNode>
+                )
+            );
+            expect(() => {
+                fireEvent.click(
+                    container.querySelectorAll('.tree-checkbox')[2]
+                );
+            }).not.toThrow();
+        });
+
+        it('check children after changing from children[disableCheckbox] from true to false', () => {
+            let checkedKeys = null;
+            const mockHandleCheck = (keys: React.Key[]) => (checkedKeys = keys);
+            function Test(props: { disableCheckbox: any }) {
+                return (
+                    <Tree checkable onCheck={mockHandleCheck}>
+                        <TreeNode title="parent 1" key="0-0">
+                            <TreeNode
+                                title="leaf 1"
+                                key="0-0-1"
+                                disableCheckbox={props.disableCheckbox}
+                            />
+                            <TreeNode
+                                title="leaf 2"
+                                key="0-0-2"
+                                disableCheckbox={props.disableCheckbox}
+                            />
+                            <TreeNode
+                                title="leaf 3"
+                                key="0-0-3"
+                                disableCheckbox={props.disableCheckbox}
+                            />
+                        </TreeNode>
+                    </Tree>
+                );
+            }
+            const { container, rerender } = render(<Test disableCheckbox />);
+            fireEvent.click(container.querySelectorAll('.tree-checkbox')[0]);
+            expect(checkedKeys).toEqual(['0-0']);
+
+            rerender(<Test disableCheckbox={false} />);
+            fireEvent.click(container.querySelectorAll('.tree-checkbox')[0]);
+            fireEvent.click(container.querySelectorAll('.tree-checkbox')[0]);
+            expect(checkedKeys).toEqual(['0-0', '0-0-1', '0-0-2', '0-0-3']);
+        });
+
+        it('check dynamic children when their parent is checked', () => {
+            const mockLoadData: any = () => new Promise(() => {});
+            const renderTree = (children?: React.ReactNode) => (
+                <Tree
+                    checkable
+                    defaultCheckedKeys={['0-0']}
+                    loadData={mockLoadData}
+                    expandedKeys={['0-0']}
+                >
+                    {children}
+                </Tree>
+            );
+
+            const { container, rerender } = render(
+                renderTree(<TreeNode title="parent 1" key="0-0" />)
+            );
+            rerender(
+                renderTree(
+                    <TreeNode title="parent 1" key="0-0">
+                        <TreeNode title="leaf 1" key="0-0-0" />
+                        <TreeNode title="leaf 2" key="0-0-1" />
+                    </TreeNode>
+                )
+            );
+
+            expect(
+                container.querySelectorAll(`.${CHECKED_CLASSNAME}`)
+            ).toHaveLength(3);
+        });
+
+        it('check update when Tree trigger componentWillReceiveProps', () => {
+            class Test extends React.Component {
+                state = {};
+
+                onCheck = () => {
+                    this.setState({ whatever: 1 });
+                };
+
+                render() {
+                    return (
+                        <Tree checkable>
+                            <TreeNode title="parent 1" key="0-0" />
+                        </Tree>
+                    );
+                }
+            }
+            const { container } = render(<Test />);
+            fireEvent.click(container.querySelector('.tree-checkbox'));
+
+            expect(container.firstChild).toMatchSnapshot();
+        });
+
+        it('should ignore !checkable node', () => {
+            const onCheck = jest.fn();
+            const { container } = render(
+                <Tree checkable defaultExpandAll onCheck={onCheck}>
+                    <TreeNode key="0-0">
+                        <TreeNode key="0-0-0" checkable={false} />
+                        <TreeNode key="0-0-1" />
+                    </TreeNode>
+                </Tree>
+            );
+
+            fireEvent.click(container.querySelectorAll('.tree-checkbox')[1]);
+
+            expect(onCheck.mock.calls[0][0].sort()).toEqual(['0-0', '0-0-1']);
+        });
+
+        describe('strictly', () => {
+            describe('controlled mode', () => {
+                class App extends React.Component {
+                    state = {
+                        checkedKeys: {
+                            checked: [],
+                            halfChecked: [],
+                        } as any,
+                    };
+
+                    handleCheck = (checkedKeys: any) => {
+                        this.setState({ checkedKeys });
+                    };
+
+                    render() {
+                        return (
+                            <>
+                                <Tree
+                                    checkable
+                                    checkStrictly
+                                    checkedKeys={this.state.checkedKeys}
+                                    onCheck={this.handleCheck}
+                                >
+                                    <TreeNode title="parent 1" key="0-0">
+                                        <TreeNode title="leaf 1" key="0-0-0" />
+                                    </TreeNode>
+                                </Tree>
+                                <button
+                                    onClick={() => {
+                                        this.setState({
+                                            checkedKeys: {
+                                                checked: ['0-0', '0-0-0'],
+                                                halfChecked: [],
+                                            },
+                                        });
+                                    }}
+                                />
+                            </>
+                        );
+                    }
+                }
+            });
+        });
+    });
+
+    describe('select', () => {
+        it('fires select event', () => {
+            const handleSelect = jest.fn();
+            const { container } = render(
+                <Tree selectable onSelect={handleSelect}>
+                    <TreeNode title="parent 1" key="0-0">
+                        <TreeNode title="leaf 1" key="0-0-0" />
+                    </TreeNode>
+                </Tree>
+            );
+            const nodeContent = container.querySelector(
+                '.tree-node-content-wrapper'
+            );
+
+            fireEvent.click(nodeContent);
+            expect(handleSelect).toHaveBeenCalledWith(
+                ['0-0'],
+                objectMatcher({
+                    event: 'select',
+                    node: {
+                        title: 'parent 1',
+                        key: '0-0',
+                    },
+                    selected: true,
+                    selectedNodes: [{ title: 'parent 1', key: '0-0' }],
+                    nativeEvent: {},
+                })
+            );
+
+            fireEvent.click(nodeContent);
+            expect(handleSelect).toHaveBeenCalledWith(
+                [],
+                objectMatcher({
+                    event: 'select',
+                    node: {
+                        title: 'parent 1',
+                        key: '0-0',
+                    },
+                    selected: false,
+                    selectedNodes: [],
+                    nativeEvent: {},
+                })
+            );
+        });
+    });
+
+    describe('checkable but not selectable', () => {
+        it('fires check event when click on TreeNode', () => {
+            const handleCheck = jest.fn();
+            const { container } = render(
+                <Tree checkable selectable={false} onCheck={handleCheck}>
+                    <TreeNode title="parent 1" key="0-0">
+                        <TreeNode title="leaf 1" key="0-0-0" />
+                    </TreeNode>
+                </Tree>
+            );
+            fireEvent.click(container.querySelector('.tree-switcher'));
+
+            const dataNode1 = { title: 'parent 1', key: '0-0' };
+            const dataNode2 = { title: 'leaf 1', key: '0-0-0' };
+
+            fireEvent.click(
+                container.querySelector('.tree-node-content-wrapper')
+            );
+            expect(handleCheck).toHaveBeenCalledWith(
+                ['0-0', '0-0-0'],
+                objectMatcher({
+                    checked: true,
+                    checkedNodes: [dataNode1, dataNode2],
+                    checkedNodesPositions: [
+                        { node: dataNode1, pos: '0-0' },
+                        { node: dataNode2, pos: '0-0-0' },
+                    ],
+                    event: 'check',
+                    halfCheckedKeys: [],
+                    node: { title: 'parent 1', key: '0-0' },
+                    nativeEvent: {},
+                })
+            );
+
+            fireEvent.click(
+                container.querySelectorAll('.tree-node-content-wrapper')[1]
+            );
+            expect(handleCheck).toHaveBeenCalledWith(
+                [],
+                objectMatcher({
+                    checked: false,
+                    checkedNodes: [],
+                    checkedNodesPositions: [],
+                    event: 'check',
+                    halfCheckedKeys: [],
+                    node: {
+                        title: 'leaf 1',
+                        key: '0-0-0',
+                    },
+                    nativeEvent: {},
+                })
+            );
+        });
+    });
+
+    it('fires rightClick event', () => {
+        const handleRightClick = jest.fn();
+        const { container } = render(
+            <Tree onRightClick={handleRightClick}>
+                <TreeNode title="parent 1" key="0-0">
+                    <TreeNode title="leaf 1" key="0-0-0" />
+                </TreeNode>
+            </Tree>
+        );
+        fireEvent.contextMenu(
+            container.querySelector('.tree-node-content-wrapper')
+        );
+        expect(handleRightClick.mock.calls[0][0].node).toEqual(
+            expect.objectContaining({
+                title: 'parent 1',
+                key: '0-0',
+            })
+        );
+    });
+
+    it('fires rightClick should not change selected item', () => {
+        const onRightClick = jest.fn();
+        const onSelect = jest.fn();
+        const { container } = render(
+            <Tree
+                onRightClick={onRightClick}
+                selectedKeys={['0-0-0']}
+                onSelect={onSelect}
+            >
+                <TreeNode title="parent 1" key="0-0">
+                    <TreeNode title="leaf 1" key="0-0-0" />
+                </TreeNode>
+            </Tree>
+        );
+        fireEvent.contextMenu(
+            container.querySelector('.tree-node-content-wrapper')
+        );
+        expect(onRightClick).toHaveBeenCalled();
+        expect(onSelect).not.toHaveBeenCalled();
+        expect(container.querySelector('.tree-node-selected')).toBeFalsy();
+    });
+
+    it('fires mouseEnter events', () => {
+        const handleMouseEnter = jest.fn();
+        const { container } = render(
+            <Tree onMouseEnter={handleMouseEnter}>
+                <TreeNode title="parent 1" key="0-0">
+                    <TreeNode title="leaf 1" key="0-0-0" />
+                </TreeNode>
+            </Tree>
+        );
+        fireEvent.mouseEnter(
+            container.querySelector('.tree-node-content-wrapper')
+        );
+        expect(handleMouseEnter.mock.calls[0][0].node).toEqual(
+            expect.objectContaining({
+                key: '0-0',
+            })
+        );
+    });
+
+    it('fires mouseLeave events', () => {
+        const handleMouseLeave = jest.fn();
+        const { container } = render(
+            <Tree onMouseLeave={handleMouseLeave}>
+                <TreeNode title="parent 1" key="0-0">
+                    <TreeNode title="leaf 1" key="0-0-0" />
+                </TreeNode>
+            </Tree>
+        );
+
+        fireEvent.mouseLeave(
+            container.querySelector('.tree-node-content-wrapper')
+        );
+        expect(handleMouseLeave.mock.calls[0][0].node).toEqual(
+            expect.objectContaining({
+                key: '0-0',
+            })
+        );
+    });
+
+    it('loads nodes asynchronously', () => {
+        const then = jest.fn(() => Promise.resolve());
+        const loadData: any = jest.fn(() => ({ then }));
+        const { container } = render(
+            <Tree loadData={loadData}>
+                <TreeNode title="parent 1" key="0-0" />
+            </Tree>
+        );
+        fireEvent.click(container.querySelector('.tree-switcher'));
+        expect(loadData).toHaveBeenCalledWith(
+            expect.objectContaining({
+                key: '0-0',
+            })
+        );
+        expect(then).toHaveBeenCalled();
+    });
+
+    it('renders without errors', () => {
+        expect(() => {
+            render(
+                <Tree>
+                    {[0, 1].map((i) => (
+                        <TreeNode title={i} key={i}>
+                            {[2, 3].map((j) => (
+                                <TreeNode title={j} key={`${i}_${j}`} />
+                            ))}
+                            <TreeNode title="4" key={`${i}_4`} />
+                        </TreeNode>
+                    ))}
+                </Tree>
+            );
+        }).not.toThrow();
+    });
+
+    it('renders opaque children correctly', () => {
+        const { asFragment } = render(
+            <Tree>
+                <TreeNode title="0" key="0">
+                    {[1, 2].map((i) => (
+                        <TreeNode title={i} key={i} />
+                    ))}
+                    <TreeNode title="3" key="3" />
+                </TreeNode>
+            </Tree>
+        );
+
+        expect(asFragment().firstChild).toMatchSnapshot();
+    });
+
+    it('Number key', () => {
+        const onCheck = jest.fn();
+
+        const Demo = () => {
+            const [checkedKeys, setCheckedKeys] = React.useState<any>([]);
+
+            return (
+                <Tree
+                    checkable
+                    defaultExpandAll
+                    checkedKeys={checkedKeys}
+                    onCheck={(keys) => {
+                        setCheckedKeys(keys);
+                        onCheck(keys);
+                    }}
+                    treeData={[
+                        {
+                            key: 11,
+                            title: 11,
+                            children: [{ key: 22, title: 22 }],
+                        },
+                    ]}
+                />
+            );
+        };
+
+        const { container } = render(<Demo />);
+
+        fireEvent.click(container.querySelector('.tree-checkbox'));
+        expect(onCheck).toHaveBeenCalledWith([11, 22]);
+
+        onCheck.mockReset();
+        fireEvent.click(container.querySelectorAll('.tree-checkbox')[1]);
+        expect(onCheck).toHaveBeenCalledWith([]);
+    });
+
+    describe('scrollTo should work', () => {
+        let domSpy: ReturnType<typeof spyElementPrototypes>;
+        let called = false;
+
+        beforeAll(() => {
+            domSpy = spyElementPrototypes(HTMLDivElement, {
+                scrollTop: {
+                    get: () => 233,
+                    set: () => {
+                        called = true;
+                    },
+                },
+                clientHeight: {
+                    get: () => 100,
+                },
+            });
+        });
+
+        afterAll(() => {
+            domSpy.mockRestore();
+        });
+
+        it('work', () => {
+            jest.useFakeTimers();
+            const treeRef = React.createRef<any>();
+            render(<Tree ref={treeRef} />);
+
+            treeRef.current.scrollTo({ key: 'light', align: 'top' });
+            jest.runAllTimers();
+
+            expect(called).toBeTruthy();
+            jest.useRealTimers();
+        });
+    });
+
+    it('not crash if expandedKeys is null', () => {
+        render(
+            <Tree expandedKeys={null}>
+                <TreeNode key="test" title="alive" />
+            </Tree>
+        );
+    });
+});
diff --git a/src/components/Tree/Internal/tests/TreeDraggable.test.tsx b/src/components/Tree/Internal/tests/TreeDraggable.test.tsx
new file mode 100644
index 000000000..2ec73d79a
--- /dev/null
+++ b/src/components/Tree/Internal/tests/TreeDraggable.test.tsx
@@ -0,0 +1,1378 @@
+import React from 'react';
+import { render, fireEvent, act, createEvent } from '@testing-library/react';
+import { spyElementPrototypes } from '../../../../tests/domHook';
+import Tree, { TreeNode } from '..';
+
+const delay = (timeout: number) =>
+    new Promise((resolve) => {
+        setTimeout(resolve, timeout);
+    });
+
+describe('Tree Draggable', () => {
+    function createTree(props?: any) {
+        return (
+            <Tree draggable defaultExpandAll {...props}>
+                <TreeNode title="parent 1" key="0-0">
+                    <TreeNode
+                        classNames="drag-target"
+                        title="leaf"
+                        key="0-0-0-0"
+                    />
+                    <TreeNode
+                        classNames="drop-target"
+                        title="leaf"
+                        key="0-0-0-1"
+                    />
+                </TreeNode>
+            </Tree>
+        );
+    }
+
+    function fireDragEvent(
+        ele: HTMLElement,
+        eventName: string,
+        data: object = {}
+    ) {
+        const event = (createEvent as any)[eventName](ele);
+        Object.keys(data).forEach((key) => {
+            event[key] = (data as any)[key];
+        });
+        fireEvent(ele, event);
+    }
+
+    it('fires dragStart event', () => {
+        const onDragStart = jest.fn();
+        const { container } = render(createTree({ onDragStart }));
+        const treeNode = container.querySelector(
+            '.drag-target > .tree-node-content-wrapper'
+        );
+        fireEvent.dragStart(treeNode);
+        const event = onDragStart.mock.calls[0][0];
+        expect(event.node).toEqual(
+            expect.objectContaining({
+                key: '0-0-0-0',
+            })
+        );
+    });
+
+    it('fires dragEnter event', async () => {
+        const onDragEnter = jest.fn();
+        const { container } = render(createTree({ onDragEnter }));
+
+        fireEvent.dragStart(
+            container.querySelector('.drag-target > .tree-node-content-wrapper')
+        );
+
+        // Not trigger self
+        fireEvent.dragEnter(
+            container.querySelector('.drag-target > .tree-node-content-wrapper')
+        );
+
+        await act(async () => {
+            await delay(900);
+        });
+        expect(onDragEnter).not.toHaveBeenCalled();
+
+        fireEvent.dragEnter(container.querySelector('.drop-target'));
+        expect(onDragEnter).toHaveBeenCalled();
+
+        await act(async () => {
+            await delay(900);
+        });
+        const event = onDragEnter.mock.calls[0][0];
+        expect(event.node.key).toEqual('0-0-0-1');
+        expect(event.expandedKeys).toEqual(['0-0', '0-0-0-1']);
+        expect(onDragEnter).toHaveBeenCalledTimes(1);
+    });
+
+    it('fires dragOver event', () => {
+        const onDragOver = jest.fn();
+        const { container } = render(createTree({ onDragOver }));
+        fireEvent.dragStart(
+            container.querySelector('.drag-target > .tree-node-content-wrapper')
+        );
+        fireEvent.dragOver(container.querySelector('.drop-target'));
+        const event = onDragOver.mock.calls[0][0];
+        expect(event.node).toEqual(
+            expect.objectContaining({
+                key: '0-0-0-1',
+            })
+        );
+    });
+
+    it('fires dragLeave event', () => {
+        const onDragLeave = jest.fn();
+        const { container } = render(createTree({ onDragLeave }));
+        fireEvent.dragLeave(container.querySelector('.drop-target'));
+        const event = onDragLeave.mock.calls[0][0];
+        expect(event.node).toEqual(
+            expect.objectContaining({
+                key: '0-0-0-1',
+            })
+        );
+    });
+
+    it('fires drop event', () => {
+        const onDrop = jest.fn();
+        const { container } = render(createTree({ onDrop }));
+        fireEvent.dragStart(
+            container.querySelector('.drag-target > .tree-node-content-wrapper')
+        );
+        fireEvent.dragEnter(container.querySelector('.drop-target'));
+        fireEvent.dragOver(container.querySelector('.drop-target'));
+        fireEvent.drop(container.querySelector('.drop-target'));
+        const event = onDrop.mock.calls[0][0];
+        expect(event.node).toEqual(expect.objectContaining({ key: '0-0-0-1' }));
+        expect(event.dragNode).toEqual(
+            expect.objectContaining({ key: '0-0-0-0' })
+        );
+        expect(event.dragNodesKeys).toEqual(['0-0-0-0']);
+    });
+
+    it('fires dropEnd event', () => {
+        const onDragEnd = jest.fn();
+        const { container } = render(createTree({ onDragEnd }));
+        fireEvent.dragEnd(
+            container.querySelector('.drag-target > .tree-node-content-wrapper')
+        );
+        const event = onDragEnd.mock.calls[0][0];
+        expect(event.node).toEqual(
+            expect.objectContaining({
+                key: '0-0-0-0',
+            })
+        );
+    });
+
+    it('do not throw error when drag into another non-drag-able tree', () => {
+        const { container } = render(
+            <>
+                <div className="tree1">{createTree()}</div>
+                <div className="tree2">{createTree({ draggable: false })}</div>
+            </>
+        );
+
+        const dragTree = container.querySelector('.tree1');
+        const normalTree = container.querySelector('.tree2');
+
+        fireEvent.dragStart(
+            dragTree.querySelector('.drag-target > .tree-node-content-wrapper')
+        );
+        fireEvent.dragEnter(normalTree.querySelector('.drop-target'));
+        fireEvent.dragOver(normalTree.querySelector('.drop-target'));
+        fireEvent.drop(normalTree.querySelector('.drop-target'));
+    });
+
+    describe('full steps', () => {
+        function dropTarget(targetSelector: string) {
+            return new Promise<void>((resolve) => {
+                const { container } = render(
+                    <Tree
+                        draggable={() => true}
+                        defaultExpandAll
+                        onExpand={() => {}}
+                    >
+                        <TreeNode key="0-0" classNames="drag-target">
+                            <TreeNode
+                                key="0-0-0"
+                                classNames="drag-target-child"
+                            />
+                        </TreeNode>
+                        <TreeNode key="0-1">
+                            <TreeNode key="0-1-0" />
+                        </TreeNode>
+                        <TreeNode key="0-2" classNames="drop-target">
+                            <TreeNode key="0-2-0" />
+                        </TreeNode>
+                    </Tree>
+                );
+
+                fireEvent.dragStart(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    )
+                );
+
+                // 1. Move into target (first in the middle of the node)
+                fireEvent.dragEnter(container.querySelector(targetSelector), {
+                    clientY: 10,
+                });
+                setTimeout(() => {
+                    fireEvent.dragOver(
+                        container.querySelector(targetSelector),
+                        { clientY: 999 }
+                    );
+
+                    // 2. Move out of target
+                    fireEvent.dragLeave(
+                        container.querySelector(targetSelector)
+                    );
+
+                    // 3. Move in again
+                    fireEvent.dragEnter(
+                        container.querySelector(targetSelector),
+                        { clientY: 0 }
+                    );
+
+                    setTimeout(() => {
+                        fireEvent.dragOver(
+                            container.querySelector(targetSelector),
+                            { clientY: 999 }
+                        );
+
+                        // 4. Drop
+                        fireEvent.drop(container.querySelector(targetSelector));
+                        fireEvent.dragEnd(
+                            container.querySelector('.drag-target')
+                        );
+
+                        resolve();
+                    }, 1000);
+                }, 10);
+            });
+        }
+
+        let domSpy: { mockRestore: () => void };
+        beforeEach(() => {
+            domSpy = spyElementPrototypes(HTMLElement, {
+                offsetWidth: {
+                    get() {
+                        return 24;
+                    },
+                },
+                getBoundingClientRect: jest.fn(() => ({
+                    width: 100,
+                    height: 20,
+                    top: 0,
+                    left: 0,
+                    bottom: 20,
+                    right: 100,
+                })),
+            });
+        });
+
+        afterEach(() => {
+            domSpy.mockRestore();
+        });
+
+        it('self', () => {
+            act(() => {
+                dropTarget('div.drag-target');
+            });
+        });
+
+        it('target', () => {
+            act(() => {
+                dropTarget('div.drop-target');
+            });
+        });
+    });
+
+    describe('new drop logic', () => {
+        let domSpy: { mockRestore: () => void };
+        beforeEach(() => {
+            domSpy = spyElementPrototypes(HTMLElement, {
+                getBoundingClientRect: () => ({
+                    width: 100,
+                    height: 20,
+                    top: 0,
+                    left: 0,
+                    bottom: 20,
+                    right: 100,
+                }),
+                offsetWidth: {
+                    get() {
+                        return 24;
+                    },
+                },
+            });
+        });
+
+        afterEach(() => {
+            domSpy.mockRestore();
+        });
+
+        (['ltr', 'rtl'] as const).forEach((dir) => {
+            const base = dir === 'ltr' ? 1 : -1;
+
+            it('not allow cross level dnd on expanded nodes', () => {
+                const onDrop = jest.fn();
+                const { container } = render(
+                    <Tree
+                        draggable
+                        onDrop={onDrop}
+                        direction={dir}
+                        expandedKeys={['0-0', '0-1', '0-1-0']}
+                    >
+                        <TreeNode key="0-0">
+                            <TreeNode key="0-0-0" classNames="drop-target-1">
+                                <TreeNode key="0-0-0-0" />
+                            </TreeNode>
+                        </TreeNode>
+                        <TreeNode key="0-1">
+                            <TreeNode key="0-1-0" classNames="drop-target-2">
+                                <TreeNode key="0-1-0-0" />
+                            </TreeNode>
+                        </TreeNode>
+                        <TreeNode key="0-2" classNames="drag-target" />
+                    </Tree>
+                );
+
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target-1 > .tree-node-content-wrapper'
+                    ),
+                    'dragEnter',
+                    {
+                        clientX: base * 400,
+                        clientY: 600,
+                    }
+                );
+
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target-1 > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 400,
+                        clientY: 600,
+                    }
+                );
+
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drop-target-1 > .tree-node-content-wrapper'
+                    )
+                );
+
+                // insert after 0-0, since 0-0-0 is not expanded
+                expect(onDrop.mock.calls[0][0].node.key).toEqual('0-0');
+                expect(onDrop.mock.calls[0][0].dropPosition).toEqual(1);
+
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target-2 > .tree-node-content-wrapper'
+                    ),
+                    'dragEnter',
+                    {
+                        clientX: base * 400,
+                        clientY: 600,
+                    }
+                );
+
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target-2 > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 400,
+                        clientY: 600,
+                    }
+                );
+
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drop-target-2 > .tree-node-content-wrapper'
+                    )
+                );
+
+                // insert into 0-1-0, since it is expanded, do not allow cross level dnd
+                expect(onDrop.mock.calls[1][0].node.key).toEqual('0-1-0');
+                expect(onDrop.mock.calls[1][0].dropPosition).toEqual(0);
+            });
+
+            it('allowDrop all nodes', () => {
+                const onDrop = jest.fn();
+                const { container } = render(
+                    <Tree
+                        draggable
+                        defaultExpandAll
+                        onDrop={onDrop}
+                        direction={dir}
+                    >
+                        <TreeNode key="0-0" classNames="drag-target-parent">
+                            <TreeNode key="0-0-0" classNames="drag-target">
+                                <TreeNode
+                                    key="0-0-0-0"
+                                    classNames="drag-target-child"
+                                />
+                            </TreeNode>
+                        </TreeNode>
+                        <TreeNode key="0-1">
+                            <TreeNode key="0-1-0">
+                                <TreeNode
+                                    key="0-1-0-0"
+                                    classNames="drop-target"
+                                />
+                            </TreeNode>
+                        </TreeNode>
+                        <TreeNode key="0-2" />
+                    </Tree>
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragEnter',
+                    {
+                        clientX: base * 400,
+                        clientY: 600,
+                    }
+                );
+
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 400,
+                        clientY: 600,
+                    }
+                );
+
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    )
+                );
+
+                expect(onDrop.mock.calls[0][0].node.key).toEqual('0-1-0-0');
+                // (in ltr) drag from right to left, should be insert after, so drop position is 1
+                expect(onDrop.mock.calls[0][0].dropPosition).toEqual(1);
+
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragEnter',
+                    {
+                        clientX: base * 500,
+                        clientY: 600,
+                    }
+                );
+
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 500,
+                        clientY: 600,
+                    }
+                );
+
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    )
+                );
+
+                expect(onDrop.mock.calls[1][0].node.key).toEqual('0-1-0-0');
+                expect(onDrop.mock.calls[1][0].dropPosition).toEqual(1);
+
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragEnter',
+                    {
+                        clientX: base * 550,
+                        clientY: 600,
+                    }
+                );
+
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 550,
+                        clientY: 600,
+                    }
+                );
+
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    )
+                );
+                expect(onDrop.mock.calls[2][0].node.key).toEqual('0-1-0-0');
+                expect(onDrop.mock.calls[2][0].dropPosition).toEqual(0);
+
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragEnter',
+                    {
+                        clientX: base * 600,
+                        clientY: 600,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 600,
+                        clientY: 600,
+                    }
+                );
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    )
+                );
+                expect(onDrop.mock.calls[2][0].node.key).toEqual('0-1-0-0');
+                expect(onDrop.mock.calls[2][0].dropPosition).toEqual(0);
+            });
+
+            it('allowDrop no node', () => {
+                const onDrop = jest.fn();
+                const { container } = render(
+                    <Tree
+                        draggable
+                        defaultExpandAll
+                        onDrop={onDrop}
+                        allowDrop={() => false}
+                        direction={dir}
+                    >
+                        <TreeNode key="0-0" classNames="drag-target-parent">
+                            <TreeNode key="0-0-0" classNames="drag-target">
+                                <TreeNode
+                                    key="0-0-0-0"
+                                    classNames="drag-target-child"
+                                />
+                            </TreeNode>
+                        </TreeNode>
+                        <TreeNode key="0-1">
+                            <TreeNode
+                                key="0-1-0"
+                                classNames="drop-target-parent"
+                            >
+                                <TreeNode
+                                    key="0-1-0-0"
+                                    classNames="drop-target"
+                                />
+                            </TreeNode>
+                        </TreeNode>
+                        <TreeNode key="0-2" />
+                    </Tree>
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target-parent > .tree-node-content-wrapper'
+                    ),
+                    'dragEnter',
+                    {
+                        clientX: base * 400,
+                        clientY: 600,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target-parent > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 400,
+                        clientY: 600,
+                    }
+                );
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drop-target-parent > .tree-node-content-wrapper'
+                    )
+                );
+                // not allow any dropPosition except 0 on expanded node
+                expect(onDrop).not.toHaveBeenCalled();
+
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragEnter',
+                    {
+                        clientX: base * 400,
+                        clientY: 600,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 400,
+                        clientY: 600,
+                    }
+                );
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    )
+                );
+                expect(onDrop).not.toHaveBeenCalled();
+
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragEnter',
+                    {
+                        clientX: base * 500,
+                        clientY: 600,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 500,
+                        clientY: 600,
+                    }
+                );
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    )
+                );
+                expect(onDrop).not.toHaveBeenCalled();
+
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragEnter',
+                    {
+                        clientX: base * 550,
+                        clientY: 600,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 550,
+                        clientY: 600,
+                    }
+                );
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    )
+                );
+                expect(onDrop).not.toHaveBeenCalled();
+
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragEnter',
+                    {
+                        clientX: base * 600,
+                        clientY: 600,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 600,
+                        clientY: 600,
+                    }
+                );
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    )
+                );
+                expect(onDrop).not.toHaveBeenCalled();
+            });
+
+            it('drop to top half of first node', () => {
+                const onDrop = jest.fn();
+                const { container } = render(
+                    <Tree
+                        draggable
+                        defaultExpandAll
+                        onDrop={onDrop}
+                        direction={dir}
+                    >
+                        <TreeNode key="0-1" classNames="drop-target">
+                            <TreeNode key="0-1-0">
+                                <TreeNode key="0-1-0-0" />
+                            </TreeNode>
+                        </TreeNode>
+                        <TreeNode key="0-0" classNames="drag-target-parent">
+                            <TreeNode key="0-0-0" classNames="drag-target">
+                                <TreeNode
+                                    key="0-0-0-0"
+                                    classNames="drag-target-child"
+                                />
+                            </TreeNode>
+                        </TreeNode>
+                    </Tree>
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragEnter',
+                    {
+                        clientX: base * 400,
+                        clientY: 0,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 400,
+                        clientY: -1000,
+                    }
+                );
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    )
+                );
+                expect(onDrop.mock.calls[0][0].node.key).toEqual('0-1');
+                expect(onDrop.mock.calls[0][0].dropPosition).toEqual(-1);
+            });
+
+            it('can drop on its direct parent', () => {
+                const onDrop = jest.fn();
+                const { container } = render(
+                    <Tree
+                        draggable
+                        defaultExpandAll
+                        onDrop={onDrop}
+                        direction={dir}
+                    >
+                        <TreeNode key="0-1" classNames="drop-target">
+                            <TreeNode key="0-1-0">
+                                <TreeNode key="0-1-0-0" />
+                            </TreeNode>
+                        </TreeNode>
+                        <TreeNode key="0-0" classNames="drag-target-parent">
+                            <TreeNode key="0-0-0" classNames="drag-target">
+                                <TreeNode
+                                    key="0-0-0-0"
+                                    classNames="drag-target-child"
+                                />
+                            </TreeNode>
+                        </TreeNode>
+                    </Tree>
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target-parent > .tree-node-content-wrapper'
+                    ),
+                    'dragEnter',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target-parent > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drag-target-parent > .tree-node-content-wrapper'
+                    )
+                );
+                expect(onDrop).toHaveBeenCalled();
+            });
+
+            it('cover window dragend & componentWillUnmount', () => {
+                const { container, unmount } = render(
+                    <Tree draggable defaultExpandAll direction={dir}>
+                        <TreeNode key="0-1" classNames="drop-target">
+                            <TreeNode key="0-1-0">
+                                <TreeNode key="0-1-0-0" />
+                            </TreeNode>
+                        </TreeNode>
+                        <TreeNode key="0-0" classNames="drag-target-parent">
+                            <TreeNode key="0-0-0" classNames="drag-target">
+                                <TreeNode
+                                    key="0-0-0-0"
+                                    classNames="drag-target-child"
+                                />
+                            </TreeNode>
+                        </TreeNode>
+                    </Tree>
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+                window.dispatchEvent(new Event('dragend'));
+                unmount();
+            });
+
+            it('dragover self', () => {
+                const onDrop = jest.fn();
+                const { container } = render(
+                    <Tree
+                        draggable
+                        defaultExpandAll
+                        onDrop={onDrop}
+                        direction={dir}
+                    >
+                        <TreeNode key="0-1" classNames="drop-target">
+                            <TreeNode key="0-1-0">
+                                <TreeNode key="0-1-0-0" />
+                            </TreeNode>
+                        </TreeNode>
+                        <TreeNode key="0-0" classNames="drag-target-parent">
+                            <TreeNode key="0-0-0" classNames="drag-target">
+                                <TreeNode
+                                    key="0-0-0-0"
+                                    classNames="drag-target-child"
+                                />
+                            </TreeNode>
+                        </TreeNode>
+                    </Tree>
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragEnter',
+                    {
+                        clientX: base * 400,
+                        clientY: 500,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 600,
+                        clientY: 500,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 600,
+                        clientY: 500,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 600,
+                        clientY: 500,
+                    }
+                );
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    )
+                );
+                expect(onDrop).not.toHaveBeenCalled();
+            });
+
+            it('not allowDrop on node which has children', () => {
+                const onDrop = jest.fn();
+                const allowDrop = (props: {
+                    dropNode: any;
+                    dropPosition: any;
+                }) => {
+                    if (!props.dropNode.children) {
+                        if (props.dropPosition === 0) return false;
+                    }
+                    return true;
+                };
+                const { container } = render(
+                    <Tree
+                        draggable
+                        defaultExpandAll
+                        allowDrop={allowDrop}
+                        onDrop={onDrop}
+                        direction={dir}
+                    >
+                        <TreeNode key="0-0" classNames="drag-target">
+                            <TreeNode
+                                key="0-0-0"
+                                classNames="drag-target-child"
+                            />
+                        </TreeNode>
+                        <TreeNode key="0-1">
+                            <TreeNode key="0-1-0">
+                                <TreeNode
+                                    key="0-1-0-0"
+                                    classNames="drop-target"
+                                />
+                            </TreeNode>
+                        </TreeNode>
+                        <TreeNode key="0-2" />
+                    </Tree>
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragEnter',
+                    {
+                        clientX: base * 400,
+                        clientY: 600,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 400,
+                        clientY: 600,
+                    }
+                );
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    )
+                );
+                expect(onDrop.mock.calls[0][0].node.key).toEqual('0-1-0-0');
+                // (in ltr) drag from right to left, should be insert after, so drop position is 1
+                expect(onDrop.mock.calls[0][0].dropPosition).toEqual(1);
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragEnter',
+                    {
+                        clientX: base * 500,
+                        clientY: 600,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 500,
+                        clientY: 600,
+                    }
+                );
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    )
+                );
+                expect(onDrop.mock.calls[1][0].node.key).toEqual('0-1-0-0');
+                expect(onDrop.mock.calls[1][0].dropPosition).toEqual(1);
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragEnter',
+                    {
+                        clientX: base * 550,
+                        clientY: 600,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 550,
+                        clientY: 600,
+                    }
+                );
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    )
+                );
+                expect(onDrop.mock.calls[2][0].node.key).toEqual('0-1-0-0');
+                expect(onDrop.mock.calls[2][0].dropPosition).toEqual(1);
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragEnter',
+                    {
+                        clientX: base * 600,
+                        clientY: 600,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 600,
+                        clientY: 600,
+                    }
+                );
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    )
+                );
+                expect(onDrop.mock.calls[2][0].node.key).toEqual('0-1-0-0');
+                expect(onDrop.mock.calls[2][0].dropPosition).toEqual(1);
+            });
+
+            it('allowDrop should pass dragNode and dropNode', () => {
+                const onDrop = jest.fn();
+                const allowDrop = jest.fn();
+                const { container } = render(
+                    <Tree
+                        draggable
+                        defaultExpandAll
+                        allowDrop={allowDrop}
+                        onDrop={onDrop}
+                        direction={dir}
+                    >
+                        <TreeNode key="0-0" classNames="drag-target">
+                            <TreeNode
+                                key="0-0-0"
+                                classNames="drag-target-child"
+                            />
+                        </TreeNode>
+                        <TreeNode key="0-1">
+                            <TreeNode key="0-1-0">
+                                <TreeNode
+                                    key="0-1-0-0"
+                                    classNames="drop-target"
+                                />
+                            </TreeNode>
+                        </TreeNode>
+                        <TreeNode key="0-2" />
+                    </Tree>
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drag-target > .tree-node-content-wrapper'
+                    ),
+                    'dragStart',
+                    {
+                        clientX: base * 500,
+                        clientY: 500,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragEnter',
+                    {
+                        clientX: base * 400,
+                        clientY: 600,
+                    }
+                );
+                fireDragEvent(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    ),
+                    'dragOver',
+                    {
+                        clientX: base * 400,
+                        clientY: 600,
+                    }
+                );
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    )
+                );
+                expect(allowDrop.mock.calls[0][0].dragNode.key).toEqual('0-0');
+                expect(allowDrop.mock.calls[0][0].dropNode.key).toEqual(
+                    '0-1-0-0'
+                );
+            });
+
+            it('not allow dragging elements outside into tree', () => {
+                const onDrop = jest.fn();
+                const { container } = render(
+                    <div>
+                        <Tree
+                            draggable
+                            defaultExpandAll
+                            onDrop={onDrop}
+                            direction={dir}
+                        >
+                            <TreeNode key="0-0">
+                                <TreeNode
+                                    key="0-0-0"
+                                    classNames="drop-target"
+                                />
+                            </TreeNode>
+                        </Tree>
+                        <div className="drag-target">Element outside</div>
+                    </div>
+                );
+                fireEvent.dragStart(container.querySelector('.drag-target'));
+                fireEvent.dragEnter(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    )
+                );
+                fireEvent.dragOver(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    )
+                );
+                fireEvent.drop(
+                    container.querySelector(
+                        '.drop-target > .tree-node-content-wrapper'
+                    )
+                );
+                expect(onDrop).not.toHaveBeenCalled();
+            });
+        });
+    });
+
+    it('render handler', () => {
+        const { container } = render(
+            <Tree
+                draggable={{
+                    icon: <span className="handler" />,
+                }}
+                defaultExpandAll
+                treeData={[
+                    {
+                        title: 'Parent',
+                        key: 'parent',
+                        children: [
+                            {
+                                title: 'Child',
+                                key: 'child',
+                            },
+                        ],
+                    },
+                ]}
+            />
+        );
+
+        expect(container.querySelectorAll('.handler')).toHaveLength(2);
+    });
+});
diff --git a/src/components/Tree/Internal/tests/TreeMotion.test.tsx b/src/components/Tree/Internal/tests/TreeMotion.test.tsx
new file mode 100644
index 000000000..538bcf03e
--- /dev/null
+++ b/src/components/Tree/Internal/tests/TreeMotion.test.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Tree from '..';
+import MotionTreeNode from '../MotionTreeNode';
+import { TreeContext } from '../contextTypes';
+import { getMinimumRangeTransitionRange } from '../NodeList';
+
+jest.mock('../../../Motion', () => {
+    const origin = jest.requireActual('../../../Motion');
+
+    return {
+        ...origin,
+    };
+});
+
+describe('Tree Motion', () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+        jest.clearAllTimers();
+        jest.useRealTimers();
+    });
+
+    it('getMinimumRangeTransitionRange', () => {
+        const visibleList = getMinimumRangeTransitionRange(
+            new Array(100).fill(null).map((_, index) => index) as any,
+            true,
+            100,
+            20
+        );
+
+        expect(visibleList.length < 10).toBeTruthy();
+    });
+
+    it('not crash', () => {
+        const renderTree = (props?: any) => (
+            <Tree
+                treeData={[{ key: '0-0', children: [{ key: '0-0-0' }] }]}
+                expandedKeys={['0-0']}
+                motion={{}}
+                {...props}
+            />
+        );
+        const { rerender } = render(renderTree());
+
+        rerender(renderTree({ treeData: [] }));
+    });
+
+    describe('MotionTreeNode should always trigger motion end', () => {
+        it('without motionNodes', () => {
+            const onMotionStart = jest.fn();
+            const onMotionEnd = jest.fn();
+            const { unmount } = render(
+                <TreeContext.Provider
+                    value={
+                        {
+                            keyEntities: {},
+                            dropIndicatorRender: (): any => null,
+                        } as any
+                    }
+                >
+                    <MotionTreeNode
+                        onMotionStart={onMotionStart}
+                        onMotionEnd={onMotionEnd}
+                        isEnd={[false]}
+                        {...({} as any)} // Ignore TS warning
+                    />
+                </TreeContext.Provider>
+            );
+
+            expect(onMotionStart).not.toHaveBeenCalled();
+            expect(onMotionEnd).not.toHaveBeenCalled();
+
+            unmount();
+            expect(onMotionStart).not.toHaveBeenCalled();
+            expect(onMotionEnd).not.toHaveBeenCalled();
+        });
+    });
+});
diff --git a/src/components/Tree/Internal/tests/TreeNodeProps.test.tsx b/src/components/Tree/Internal/tests/TreeNodeProps.test.tsx
new file mode 100644
index 000000000..3af60a095
--- /dev/null
+++ b/src/components/Tree/Internal/tests/TreeNodeProps.test.tsx
@@ -0,0 +1,158 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Tree, { TreeNode } from '..';
+import { spyConsole } from './util';
+
+describe('TreeNode Props', () => {
+    spyConsole();
+
+    // expanded - is defined by Tree, TreeNode can not change it
+
+    it('className', () => {
+        const { container } = render(
+            <Tree defaultExpandAll>
+                <TreeNode key="0-0">
+                    <TreeNode key="0-0-0" classNames="tree-node-cls">
+                        <TreeNode />
+                    </TreeNode>
+                    <TreeNode key="0-0-1" />
+                </TreeNode>
+                <TreeNode key="0-1" />
+            </Tree>
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+
+    // disabled - is already full test in Tree.spec.js
+    // disableCheckbox - is already full test in Tree.spec.js
+    // title - is already full test in Tree.spec.js
+    // key - is already full test in Tree.spec.js
+    it('isLeaf', () => {
+        const withoutLoadData = render(
+            <Tree showIcon={false} defaultExpandAll>
+                <TreeNode isLeaf>
+                    <TreeNode isLeaf />
+                </TreeNode>
+            </Tree>
+        );
+        expect(withoutLoadData.container.firstChild).toMatchSnapshot();
+
+        const withLoadData = render(
+            <Tree defaultExpandAll>
+                <TreeNode isLeaf>
+                    <TreeNode isLeaf />
+                </TreeNode>
+            </Tree>
+        );
+        expect(withLoadData.container.firstChild).toMatchSnapshot();
+
+        const forceNoLeaf = render(
+            <Tree defaultExpandAll>
+                <TreeNode>
+                    <TreeNode isLeaf={false} />
+                </TreeNode>
+            </Tree>
+        );
+        expect(forceNoLeaf.container.firstChild).toMatchSnapshot();
+    });
+
+    it('title function', () => {
+        const { container } = render(
+            <Tree defaultExpandAll>
+                <TreeNode title={() => <a id="test-title">title</a>} />
+            </Tree>
+        );
+        expect(container.querySelector('#test-title').textContent).toEqual(
+            'title'
+        );
+    });
+
+    describe('customize icon', () => {
+        it('element', () => {
+            const withoutLoadData = render(
+                <Tree defaultExpandAll>
+                    <TreeNode icon={<span className="cust-icon" />} />
+                </Tree>
+            );
+            expect(withoutLoadData.container.firstChild).toMatchSnapshot();
+        });
+
+        it('component', () => {
+            const Icon = () => <span className="cust-icon" />;
+
+            const withoutLoadData = render(
+                <Tree defaultExpandAll>
+                    <TreeNode icon={Icon} />
+                </Tree>
+            );
+            expect(withoutLoadData.container.firstChild).toMatchSnapshot();
+        });
+
+        it('hide icon', () => {
+            const withoutLoadData = render(
+                <Tree showIcon={false} defaultExpandAll>
+                    <TreeNode icon={<span className="cust-icon" />} />
+                </Tree>
+            );
+            expect(withoutLoadData.container.firstChild).toMatchSnapshot();
+        });
+
+        it('get props when loading', () => {
+            const then = jest.fn(() => Promise.resolve());
+            const loadData: any = jest.fn(() => ({ then }));
+            const iconFn: any = jest.fn(() => null);
+            const { container } = render(
+                <Tree loadData={loadData}>
+                    <TreeNode icon={iconFn} title="parent 1" key="0-0" />
+                </Tree>
+            );
+
+            fireEvent.click(container.querySelector('.tree-switcher'));
+
+            expect(iconFn.mock.calls[0][0].loading).toBe(false);
+            expect(
+                iconFn.mock.calls[iconFn.mock.calls.length - 1][0].loading
+            ).toBeTruthy();
+        });
+    });
+
+    describe('data and aria props', () => {
+        it('renders data attributes on li', () => {
+            const wrapper = render(
+                <Tree defaultExpandAll>
+                    <TreeNode key="0-0" data-test="0-0">
+                        <TreeNode
+                            key="0-0-0"
+                            classNames="tree-node-cls"
+                            data-test="0-0-0"
+                        >
+                            <TreeNode data-test="0-0-0-0" />
+                        </TreeNode>
+                        <TreeNode key="0-0-1" data-test="0-0-1" />
+                    </TreeNode>
+                    <TreeNode key="0-1" data-test="0-1" />
+                </Tree>
+            );
+            expect(wrapper.container.firstChild).toMatchSnapshot();
+        });
+
+        it('renders aria attributes on li', () => {
+            const wrapper = render(
+                <Tree defaultExpandAll>
+                    <TreeNode key="0-0" aria-label="0-0">
+                        <TreeNode
+                            key="0-0-0"
+                            classNames="tree-node-cls"
+                            aria-label="0-0-0"
+                        >
+                            <TreeNode aria-label="0-0-0-0" />
+                        </TreeNode>
+                        <TreeNode key="0-0-1" aria-label="0-0-1" />
+                    </TreeNode>
+                    <TreeNode key="0-1" aria-label="0-1" />
+                </Tree>
+            );
+            expect(wrapper.container.firstChild).toMatchSnapshot();
+        });
+    });
+});
diff --git a/src/components/Tree/Internal/tests/TreeProps.test.tsx b/src/components/Tree/Internal/tests/TreeProps.test.tsx
new file mode 100644
index 000000000..3748933a0
--- /dev/null
+++ b/src/components/Tree/Internal/tests/TreeProps.test.tsx
@@ -0,0 +1,551 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Tree, { TreeNode, FieldDataNode } from '..';
+import { spyConsole, spyError } from './util';
+
+// Promisify timeout to let jest catch works
+function timeoutPromise(delay = 0) {
+    return new Promise((resolve) => {
+        setTimeout(resolve, delay);
+    });
+}
+
+describe('Tree Props', () => {
+    spyConsole();
+
+    // showLine
+    it('showLine', () => {
+        const wrapper = render(<Tree showLine />);
+        expect(wrapper.container.firstChild).toMatchSnapshot();
+    });
+
+    // showIcon
+    it('showIcon', () => {
+        const withIcon = render(
+            <Tree>
+                <TreeNode>
+                    <TreeNode>
+                        <TreeNode />
+                    </TreeNode>
+                    <TreeNode />
+                </TreeNode>
+                <TreeNode />
+            </Tree>
+        );
+        expect(withIcon.container.firstChild).toMatchSnapshot();
+
+        const withoutIcon = render(
+            <Tree showIcon={false}>
+                <TreeNode>
+                    <TreeNode>
+                        <TreeNode />
+                    </TreeNode>
+                    <TreeNode />
+                </TreeNode>
+                <TreeNode />
+            </Tree>
+        );
+        expect(withoutIcon.container.firstChild).toMatchSnapshot();
+
+        const withOpenIcon = render(
+            <Tree defaultExpandedKeys={['0-0']}>
+                <TreeNode>
+                    <TreeNode key="0-0">
+                        <TreeNode />
+                    </TreeNode>
+                    <TreeNode />
+                </TreeNode>
+                <TreeNode />
+            </Tree>
+        );
+        expect(withOpenIcon.container.firstChild).toMatchSnapshot();
+    });
+
+    describe('selectable', () => {
+        // selectable - false
+        it('without selectable', () => {
+            const handleOnSelect = jest.fn();
+            const handleOnCheck = jest.fn();
+
+            const { container } = render(
+                <Tree
+                    onSelect={handleOnSelect}
+                    defaultExpandedKeys={['0-0']}
+                    selectable={false}
+                >
+                    <TreeNode key="0-0">
+                        <TreeNode key="0-0-0" />
+                    </TreeNode>
+                </Tree>
+            );
+
+            expect(container.firstChild).toMatchSnapshot();
+
+            fireEvent.click(
+                container.querySelector('.tree-node-content-wrapper')
+            );
+
+            expect(handleOnSelect).not.toHaveBeenCalled();
+            expect(handleOnCheck).not.toHaveBeenCalled(); // Will test in checkable
+        });
+    });
+
+    describe('expandAction with selectable props', () => {
+        it('title expandable when selectable is false and expandAction is "click"', () => {
+            const onClick = jest.fn();
+            const onSelect = jest.fn();
+            const onExpand = jest.fn();
+
+            const { container } = render(
+                <Tree
+                    onClick={onClick}
+                    onSelect={onSelect}
+                    onExpand={onExpand}
+                    defaultExpandedKeys={['0-0']}
+                    selectable={false}
+                    expandAction="click"
+                >
+                    <TreeNode title="parent 1" key="0-0">
+                        <TreeNode title="leaf 1" key="0-0-0">
+                            <TreeNode title="leaf-1" key="0-0-0-0" />
+                        </TreeNode>
+
+                        <TreeNode title="leaf 2" key="0-1-0">
+                            <TreeNode title="leaf-2" key="0-1-0-0" />
+                        </TreeNode>
+                    </TreeNode>
+                </Tree>
+            );
+
+            // test trigger expand when click title
+            fireEvent.click(container.querySelector('[title="leaf 1"]'));
+
+            expect(onClick).toHaveBeenCalled();
+            expect(onSelect).not.toHaveBeenCalled();
+            expect(onExpand).toHaveBeenCalledWith(['0-0', '0-0-0'], {
+                expanded: true,
+                node: expect.anything(),
+                nativeEvent: expect.anything(),
+            });
+
+            onClick.mockReset();
+            onSelect.mockReset();
+            onExpand.mockReset();
+
+            // test trigger un-expand when click title again
+            fireEvent.click(container.querySelector('[title="leaf 1"]'));
+
+            expect(onClick).toHaveBeenCalled();
+            expect(onSelect).not.toHaveBeenCalled();
+            expect(onExpand).toHaveBeenCalledWith(['0-0'], {
+                expanded: false,
+                node: expect.anything(),
+                nativeEvent: expect.anything(),
+            });
+        });
+
+        it('title expandable when selectable is false and expandAction is "doubleClick"', () => {
+            const onDoubleClick = jest.fn();
+            const onSelect = jest.fn();
+            const onExpand = jest.fn();
+
+            const { container } = render(
+                <Tree
+                    onDoubleClick={onDoubleClick}
+                    onSelect={onSelect}
+                    onExpand={onExpand}
+                    defaultExpandedKeys={['0-0']}
+                    selectable={false}
+                    expandAction="doubleClick"
+                >
+                    <TreeNode title="parent 1" key="0-0">
+                        <TreeNode title="leaf 1" key="0-0-0">
+                            <TreeNode title="leaf-1" key="0-0-0-0" />
+                        </TreeNode>
+
+                        <TreeNode title="leaf 2" key="0-1-0">
+                            <TreeNode title="leaf-2" key="0-1-0-0" />
+                        </TreeNode>
+                    </TreeNode>
+                </Tree>
+            );
+
+            // test trigger expand when double click title
+            fireEvent.doubleClick(container.querySelector('[title="leaf 1"]'));
+
+            expect(onDoubleClick).toHaveBeenCalled();
+            expect(onSelect).not.toHaveBeenCalled();
+            expect(onExpand).toHaveBeenCalledWith(['0-0', '0-0-0'], {
+                expanded: true,
+                node: expect.anything(),
+                nativeEvent: expect.anything(),
+            });
+
+            onDoubleClick.mockReset();
+            onSelect.mockReset();
+            onExpand.mockReset();
+
+            // test trigger un-expand when double click title again
+            fireEvent.doubleClick(container.querySelector('[title="leaf 1"]'));
+
+            expect(onDoubleClick).toHaveBeenCalled();
+            expect(onSelect).not.toHaveBeenCalled();
+            expect(onExpand).toHaveBeenCalledWith(['0-0'], {
+                expanded: false,
+                node: expect.anything(),
+                nativeEvent: expect.anything(),
+            });
+        });
+
+        it('title un-expandable when selectable is false and expandAction is false', () => {
+            const onClick = jest.fn();
+            const onSelect = jest.fn();
+            const onExpand = jest.fn();
+
+            const { container } = render(
+                <Tree
+                    onClick={onClick}
+                    onSelect={onSelect}
+                    onExpand={onExpand}
+                    defaultExpandedKeys={['0-0']}
+                    selectable={false}
+                    expandAction={false}
+                >
+                    <TreeNode title="parent 1" key="0-0">
+                        <TreeNode title="leaf 1" key="0-0-0">
+                            <TreeNode title="leaf-1" key="0-0-0-0" />
+                        </TreeNode>
+
+                        <TreeNode title="leaf 2" key="0-1-0">
+                            <TreeNode title="leaf-2" key="0-1-0-0" />
+                        </TreeNode>
+                    </TreeNode>
+                </Tree>
+            );
+
+            // test won't trigger expand when click title if expandAction is false
+            fireEvent.click(container.querySelector('[title="leaf 2"]'));
+
+            expect(onClick).toHaveBeenCalled();
+            expect(onSelect).not.toHaveBeenCalled();
+            expect(onExpand).not.toHaveBeenCalled();
+        });
+    });
+
+    // checkable
+    describe('checkable', () => {
+        it('node set checkable to `false`', () => {
+            const { container } = render(
+                <Tree checkable defaultExpandAll>
+                    <TreeNode key="0-0">
+                        <TreeNode key="0-0-0" checkable={false} />
+                    </TreeNode>
+                </Tree>
+            );
+
+            expect(container.querySelectorAll('.tree-checkbox')).toHaveLength(
+                1
+            );
+        });
+    });
+
+    // Don't crash
+    describe('invalidate checkedKeys', () => {
+        const errorSpy = spyError();
+
+        const genWrapper = (checkedKeys: any) =>
+            render(
+                <Tree checkedKeys={checkedKeys} defaultExpandAll checkable>
+                    <TreeNode key="0-0">
+                        <TreeNode key="0-0-0" />
+                    </TreeNode>
+                </Tree>
+            );
+
+        it('null', () => {
+            const { container } = genWrapper(null);
+            expect(errorSpy()).not.toHaveBeenCalledWith(
+                'Warning: `checkedKeys` is not an array or an object'
+            );
+            expect(container.firstChild).toMatchSnapshot();
+        });
+    });
+
+    // defaultExpandAll
+    it('defaultExpandAll', () => {
+        const { container } = render(
+            <Tree defaultExpandAll>
+                <TreeNode key="0-0">
+                    <TreeNode key="0-0-0" />
+                </TreeNode>
+            </Tree>
+        );
+
+        expect(container.firstChild).toMatchSnapshot();
+    });
+
+    it('icon', () => {
+        // Node icon has much higher priority
+        const { container } = render(
+            <Tree defaultExpandAll icon={<span>ROOT ICON</span>}>
+                <TreeNode key="0-0">
+                    <TreeNode key="0-0-0" icon={<span>CUSTOMIZE ICON</span>} />
+                </TreeNode>
+            </Tree>
+        );
+
+        expect(container.firstChild).toMatchSnapshot();
+    });
+
+    it('onClick', () => {
+        const onClick = jest.fn();
+
+        const { container } = render(
+            <Tree onClick={onClick} defaultExpandedKeys={['0-0']}>
+                <TreeNode key="0-0">
+                    <TreeNode key="0-0-0" />
+                </TreeNode>
+            </Tree>
+        );
+
+        // Select leaf
+        fireEvent.click(
+            container.querySelectorAll('.tree-node-content-wrapper')[1]
+        );
+
+        expect(onClick).toHaveBeenCalledWith(
+            expect.objectContaining({}),
+            expect.objectContaining({
+                key: '0-0-0',
+            })
+        );
+    });
+
+    it('onDoubleClick', () => {
+        const onClick = jest.fn();
+        const onDoubleClick = jest.fn();
+
+        const { container } = render(
+            <Tree
+                onClick={onClick}
+                onDoubleClick={onDoubleClick}
+                defaultExpandedKeys={['0-0']}
+            >
+                <TreeNode key="0-0">
+                    <TreeNode key="0-0-0" />
+                </TreeNode>
+            </Tree>
+        );
+
+        // Select leaf
+        fireEvent.doubleClick(
+            container.querySelectorAll('.tree-node-content-wrapper')[1]
+        );
+
+        expect(onClick).not.toHaveBeenCalled();
+        expect(onDoubleClick).toHaveBeenCalledWith(
+            expect.objectContaining({}),
+            expect.objectContaining({
+                key: '0-0-0',
+            })
+        );
+    });
+
+    it('onContextMenu', () => {
+        const onClick = jest.fn();
+        const onContextMenu = jest.fn();
+
+        const { container } = render(
+            <Tree
+                onClick={onClick}
+                onContextMenu={onContextMenu}
+                defaultExpandedKeys={['0-0']}
+            >
+                <TreeNode key="0-0">
+                    <TreeNode key="0-0-0" />
+                </TreeNode>
+            </Tree>
+        );
+
+        // Select leaf
+        fireEvent.contextMenu(
+            container.querySelectorAll('.tree-node-content-wrapper')[1]
+        );
+
+        expect(onClick).not.toHaveBeenCalled();
+        expect(onContextMenu).toHaveBeenCalled();
+    });
+
+    describe('loadedKeys & onLoad', () => {
+        it('has loadedKeys', () => {
+            const loadData = jest.fn(() => Promise.resolve());
+            const onLoad = jest.fn();
+
+            const { container } = render(
+                <Tree loadedKeys={['0-0']} loadData={loadData} onLoad={onLoad}>
+                    <TreeNode key="0-0" />
+                </Tree>
+            );
+
+            fireEvent.click(container.querySelector('.tree-switcher'));
+            expect(loadData).not.toHaveBeenCalled();
+            expect(onLoad).not.toHaveBeenCalled();
+        });
+    });
+
+    it('treeData', () => {
+        const treeData = [
+            { key: 'K0', title: 'T0' },
+            {
+                key: 'K1',
+                title: 'T1',
+                children: [
+                    { key: 'K10', title: 'T10' },
+                    {
+                        key: 'K11',
+                        title: 'T11',
+                        children: [
+                            { key: 'K110', title: 'T110' },
+                            { key: 'K111', title: 'T111' },
+                        ],
+                    },
+                    { key: 'K12', title: 'T12' },
+                ],
+            },
+        ];
+        const { container, rerender } = render(
+            <Tree treeData={treeData} defaultExpandAll />
+        );
+        expect(container.firstChild).toMatchSnapshot();
+
+        rerender(
+            <Tree treeData={[{ key: 'K0', title: 'T0' }]} defaultExpandAll />
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+
+    describe('disabled', () => {
+        it('basic', () => {
+            const { container } = render(
+                <Tree defaultExpandAll disabled>
+                    <TreeNode key="0-0" />
+                </Tree>
+            );
+            expect(container.firstChild).toMatchSnapshot();
+        });
+
+        it('treeNode should disabled when tree disabled', () => {
+            const { container } = render(
+                <Tree defaultExpandAll disabled>
+                    <TreeNode key="0-0" disabled={false} />
+                </Tree>
+            );
+            expect(container.firstChild).toMatchSnapshot();
+        });
+    });
+
+    describe('data and aria props', () => {
+        it('renders data attributes', () => {
+            const { container } = render(<Tree data-test="tree" />);
+            expect(container.firstChild).toMatchSnapshot();
+        });
+
+        it('renders aria attributes', () => {
+            const { container } = render(<Tree aria-label="name" />);
+            expect(container.firstChild).toMatchSnapshot();
+        });
+    });
+
+    describe('custom switcher icon', () => {
+        function switcherIcon(text: React.ReactNode, testLeaf?: boolean) {
+            const sfc = (props: { isLeaf: boolean }) => {
+                if (testLeaf) {
+                    return props.isLeaf ? <span>{text}</span> : null;
+                }
+                return props.isLeaf ? null : <span>{text}</span>;
+            };
+
+            return sfc;
+        }
+
+        it('switcher icon', () => {
+            const { container } = render(
+                <Tree
+                    defaultExpandAll
+                    switcherIcon={switcherIcon('switcherIcon')}
+                >
+                    <TreeNode key="0-0" />
+                    <TreeNode
+                        key="0-1"
+                        switcherIcon={switcherIcon('switcherIconFromNode0-1')}
+                    >
+                        <TreeNode key="0-1-0" />
+                        <TreeNode key="0-1-1" />
+                    </TreeNode>
+                </Tree>
+            );
+            expect(container.firstChild).toMatchSnapshot();
+        });
+
+        it('switcher leaf icon', () => {
+            const { container } = render(
+                <Tree
+                    defaultExpandAll
+                    switcherIcon={switcherIcon('switcherLeafIcon', true)}
+                >
+                    <TreeNode key="0-0" />
+                    <TreeNode
+                        key="0-1"
+                        switcherIcon={switcherIcon(
+                            'switcherLeafIconFromNode0-1',
+                            true
+                        )}
+                    />
+                    <TreeNode key="0-2">
+                        <TreeNode key="0-2-0" />
+                        <TreeNode
+                            key="0-2-1"
+                            switcherIcon={switcherIcon(
+                                'switcherLeafIconFromNode0-2-1',
+                                true
+                            )}
+                        />
+                    </TreeNode>
+                    <TreeNode key="0-3" />
+                </Tree>
+            );
+            expect(container.firstChild).toMatchSnapshot();
+        });
+    });
+
+    it('titleRender', () => {
+        const { container } = render(
+            <Tree<FieldDataNode<{ value: string; title?: any }>>
+                defaultExpandAll
+                titleRender={({ value }) => (
+                    <span className="bamboo-span">{value}</span>
+                )}
+                treeData={[
+                    {
+                        title: (props: { value: any }) => (
+                            <span className="light-span">{props.value}</span>
+                        ),
+                        value: 'light',
+                    },
+                    { value: 'bamboo' },
+                ]}
+            />
+        );
+
+        expect(
+            container
+                .querySelectorAll('.tree-title')[0]
+                .querySelector('.light-span').textContent
+        ).toEqual('light');
+        expect(
+            container
+                .querySelectorAll('.tree-title')[1]
+                .querySelector('.bamboo-span').textContent
+        ).toEqual('bamboo');
+    });
+});
diff --git a/src/components/Tree/Internal/tests/Utils/raf.ts b/src/components/Tree/Internal/tests/Utils/raf.ts
new file mode 100644
index 000000000..c9453cf2b
--- /dev/null
+++ b/src/components/Tree/Internal/tests/Utils/raf.ts
@@ -0,0 +1,9 @@
+function requestAnimtionFrame(callback: Function) {
+    return setTimeout(callback);
+}
+
+requestAnimtionFrame.cancel = (id: number) => {
+    clearTimeout(id);
+};
+
+export default requestAnimtionFrame;
diff --git a/src/components/Tree/Internal/tests/__snapshots__/Tree.test.tsx.snap b/src/components/Tree/Internal/tests/__snapshots__/Tree.test.tsx.snap
new file mode 100644
index 000000000..0d73b205b
--- /dev/null
+++ b/src/components/Tree/Internal/tests/__snapshots__/Tree.test.tsx.snap
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:818a8425c462724442a252989cf51c041726198320872c6041f28aa62400552e
+size 12922
diff --git a/src/components/Tree/Internal/tests/__snapshots__/TreeNodeProps.test.tsx.snap b/src/components/Tree/Internal/tests/__snapshots__/TreeNodeProps.test.tsx.snap
new file mode 100644
index 000000000..ad07616c3
--- /dev/null
+++ b/src/components/Tree/Internal/tests/__snapshots__/TreeNodeProps.test.tsx.snap
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c5834f007ad7607fa24aedbc0a5d9d6ace6d935621dc745335a2217a08898579
+size 27804
diff --git a/src/components/Tree/Internal/tests/__snapshots__/TreeProps.test.tsx.snap b/src/components/Tree/Internal/tests/__snapshots__/TreeProps.test.tsx.snap
new file mode 100644
index 000000000..4e3bce292
--- /dev/null
+++ b/src/components/Tree/Internal/tests/__snapshots__/TreeProps.test.tsx.snap
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:10be5254cb215843bef6715048d58e2d5f6a09679d20261f29603638f71b8782
+size 44736
diff --git a/src/components/Tree/Internal/tests/type.test.tsx b/src/components/Tree/Internal/tests/type.test.tsx
new file mode 100644
index 000000000..1d8abf134
--- /dev/null
+++ b/src/components/Tree/Internal/tests/type.test.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Tree, { BasicDataNode } from '..';
+
+describe('Tree.TypeScript', () => {
+    it('fieldNames', () => {
+        interface DataType extends BasicDataNode {
+            label: string;
+            value: string;
+            list?: DataType[];
+        }
+
+        render(
+            <Tree<DataType>
+                treeData={[
+                    {
+                        label: 'parent',
+                        value: 'parent',
+                        list: [],
+                    },
+                ]}
+            />
+        );
+    });
+});
diff --git a/src/components/Tree/Internal/tests/util.test.js b/src/components/Tree/Internal/tests/util.test.js
new file mode 100644
index 000000000..eec754380
--- /dev/null
+++ b/src/components/Tree/Internal/tests/util.test.js
@@ -0,0 +1,622 @@
+import React from 'react';
+import Tree, { TreeNode } from '..';
+import {
+    convertDataToTree,
+    conductExpandParent,
+    getDragChildrenKeys,
+} from '../util';
+import {
+    flattenTreeData,
+    convertTreeToData,
+    convertDataToEntities,
+    getTreeNodeProps,
+    traverseDataNodes,
+} from '../utils/treeUtil';
+import { spyConsole } from './util';
+import { conductCheck } from '../utils/conductUtil';
+
+describe('Util', () => {
+    spyConsole();
+
+    it('convertTreeToData - case1', () => {
+        const tree = (
+            <Tree>
+                <TreeNode key="bamboo" title="Bamboo" />
+                <TreeNode key="is" title="Is">
+                    <TreeNode key="the" title="The" />
+                    <TreeNode key="best" title="Best" />
+                    <TreeNode key="plant" title="Plant">
+                        <TreeNode key="in" title="In" />
+                        <TreeNode key="our" title="Our" />
+                        <TreeNode key="world" title="World" />
+                    </TreeNode>
+                </TreeNode>
+                <TreeNode key="!" really />
+            </Tree>
+        );
+
+        const treeData = convertTreeToData(tree.props.children);
+        expect(treeData).toEqual([
+            { key: 'bamboo', title: 'Bamboo' },
+            {
+                key: 'is',
+                title: 'Is',
+                children: [
+                    { key: 'the', title: 'The' },
+                    { key: 'best', title: 'Best' },
+                    {
+                        key: 'plant',
+                        title: 'Plant',
+                        children: [
+                            { key: 'in', title: 'In' },
+                            { key: 'our', title: 'Our' },
+                            { key: 'world', title: 'World' },
+                        ],
+                    },
+                ],
+            },
+            { key: '!', title: '---', really: true },
+        ]);
+    });
+
+    it('convertTreeToData - case2', () => {
+        const treeData = [
+            { key: 'oc', title: 'OC' },
+            {
+                key: 'tree',
+                title: 'Tree',
+                children: [
+                    {
+                        key: 'can',
+                        title: 'Can',
+                        children: [
+                            { key: 'do', title: 'Do' },
+                            { key: 'the', title: 'The' },
+                            { key: 'filter', title: 'Filter', yes: 'no' },
+                        ],
+                    },
+                ],
+            },
+        ];
+
+        const $treeNode = convertDataToTree(treeData);
+
+        expect(convertTreeToData($treeNode)).toEqual(treeData);
+    });
+
+    it('convertDataToTree', () => {
+        const treeData = [
+            {
+                title: '0-0',
+                key: '0-0',
+                children: [
+                    {
+                        title: '0-0-0',
+                        key: '0-0-0',
+                    },
+                ],
+            },
+        ];
+
+        const treeNodes = convertDataToTree(treeData, {
+            processProps: (props) => ({
+                ...props,
+                value: props.title,
+            }),
+        });
+
+        expect(treeNodes[0].props.value).toBe('0-0');
+        expect(treeNodes[0].props.children[0].props.value).toBe('0-0-0');
+    });
+
+    describe('convertDataToEntities', () => {
+        it('basic convert', () => {
+            const entities = convertDataToEntities([
+                { key: 'parent', children: [{ key: 0 }, { key: 1 }] },
+            ]);
+            expect(Object.keys(entities.keyEntities).sort()).toEqual([
+                '0',
+                '1',
+                'parent',
+            ]);
+
+            // Used for `cascader` to get fully path
+            expect(entities.keyEntities.parent.nodes).toEqual([
+                expect.objectContaining({ key: 'parent' }),
+            ]);
+            expect(entities.keyEntities[0].nodes).toEqual([
+                expect.objectContaining({ key: 'parent' }),
+                expect.objectContaining({ key: 0 }),
+            ]);
+        });
+
+        it('with childrenPropName', () => {
+            const entities = convertDataToEntities(
+                [
+                    {
+                        rawKey: 'light',
+                        childList: [{ rawKey: 'bamboo' }],
+                    },
+                ],
+                {
+                    externalGetKey: (entity) => entity.rawKey,
+                    childrenPropName: 'childList',
+                }
+            );
+            expect(Object.keys(entities.keyEntities).sort()).toEqual([
+                'bamboo',
+                'light',
+            ]);
+
+            expect(entities.keyEntities.light.children).toEqual([
+                entities.keyEntities.bamboo,
+            ]);
+            expect(entities.keyEntities.bamboo.parent).toBe(
+                entities.keyEntities.light
+            );
+        });
+    });
+
+    it('convertTreeToEntities with additional handler', () => {
+        const onProcessFinished = jest.fn();
+
+        const tree = (
+            <Tree>
+                <TreeNode key="key" title="test" value="ttt" />
+            </Tree>
+        );
+
+        const { keyEntities, valueEntities } = convertDataToEntities(
+            convertTreeToData(tree.props.children),
+            {
+                initWrapper: (wrapper) => ({
+                    ...wrapper,
+                    valueEntities: {},
+                }),
+                processEntity: (entity, wrapper) => {
+                    // eslint-disable-next-line no-param-reassign
+                    wrapper.valueEntities[entity.node.value] = entity;
+                },
+                onProcessFinished,
+            }
+        );
+
+        expect(onProcessFinished).toHaveBeenCalled();
+        expect(valueEntities.ttt).toBe(keyEntities.key);
+    });
+
+    // You can remove this test if refactor remove conductCheck function
+    describe('conductCheck', () => {
+        describe('basic', () => {
+            const genTree = (props) => (
+                <Tree {...props}>
+                    <TreeNode key="greed" title="GreeIs" />
+                    <TreeNode key="good" title="good">
+                        <TreeNode key="there" title="There" />
+                        <TreeNode key="is" title="Is">
+                            <TreeNode key="no" title="No" />
+                            <TreeNode key="spoon" title="Spoon">
+                                <TreeNode key="i" title="I" />
+                                <TreeNode key="see" title="See" />
+                                <TreeNode key="dead" title="Dead">
+                                    <TreeNode key="people" title="People" />
+                                    <TreeNode key="!" title="!" />
+                                </TreeNode>
+                            </TreeNode>
+                        </TreeNode>
+                    </TreeNode>
+                </Tree>
+            );
+
+            it('check', () => {
+                const tree = genTree();
+                const { keyEntities } = convertDataToEntities(
+                    convertTreeToData(tree.props.children)
+                );
+                const { checkedKeys, halfCheckedKeys } = conductCheck(
+                    ['spoon'],
+                    true,
+                    keyEntities
+                );
+                expect(checkedKeys.sort()).toEqual(
+                    ['spoon', 'i', 'see', 'dead', 'people', '!'].sort()
+                );
+                expect(halfCheckedKeys.sort()).toEqual(['good', 'is'].sort());
+            });
+
+            it('uncheck', () => {
+                const tree = genTree({ checkedKeys: ['greed', 'good'] });
+                const { keyEntities } = convertDataToEntities(
+                    convertTreeToData(tree.props.children)
+                );
+
+                // First, we check all
+                const allCheckedKeys = conductCheck(
+                    ['greed', 'good'],
+                    true,
+                    keyEntities
+                ).checkedKeys;
+                expect(allCheckedKeys.length).toEqual(11);
+
+                // Then un-check one of then
+                const removedKeys = allCheckedKeys.filter(
+                    (key) => key !== 'spoon'
+                );
+                const { checkedKeys, halfCheckedKeys } = conductCheck(
+                    removedKeys,
+                    { checked: false, halfCheckedKeys: [] },
+                    keyEntities
+                );
+                expect(checkedKeys.sort()).toEqual(
+                    ['greed', 'there', 'no'].sort()
+                );
+                expect(halfCheckedKeys.sort()).toEqual(['good', 'is'].sort());
+            });
+
+            it('uncheck partial', () => {
+                const tree = (
+                    <Tree>
+                        <TreeNode key="0-0" title="0-0">
+                            <TreeNode key="0-0-0" title="0-0-0" />
+                            <TreeNode key="0-0-1" title="0-0-1" />
+                        </TreeNode>
+                    </Tree>
+                );
+                const { keyEntities } = convertDataToEntities(
+                    convertTreeToData(tree.props.children)
+                );
+                const { checkedKeys, halfCheckedKeys } = conductCheck(
+                    [],
+                    {
+                        checked: false,
+                        halfCheckedKeys: ['0-0', '0-0-0'],
+                    },
+                    keyEntities
+                );
+                expect(checkedKeys).toEqual([]);
+                expect(halfCheckedKeys).toEqual([]);
+            });
+        });
+
+        describe('part disabled', () => {
+            const genTree = (props) => (
+                <Tree {...props}>
+                    <TreeNode key="war">
+                        <TreeNode key="are" />
+                        <TreeNode key="not">
+                            <TreeNode key="it" />
+                            <TreeNode key="used" disabled>
+                                <TreeNode key="to" />
+                                <TreeNode key="be" />
+                            </TreeNode>
+                        </TreeNode>
+                    </TreeNode>
+                </Tree>
+            );
+
+            it('check', () => {
+                const tree = genTree();
+                const { keyEntities } = convertDataToEntities(
+                    convertTreeToData(tree.props.children)
+                );
+
+                const result1 = conductCheck(['not'], true, keyEntities);
+                expect(result1.checkedKeys.sort()).toEqual(
+                    ['not', 'it'].sort()
+                );
+                expect(result1.halfCheckedKeys.sort()).toEqual(['war'].sort());
+
+                const result2 = conductCheck(['to', 'be'], true, keyEntities);
+                expect(result2.checkedKeys.sort()).toEqual(['to', 'be'].sort());
+                expect(result2.halfCheckedKeys.sort()).toEqual([].sort());
+            });
+
+            it('uncheck', () => {
+                const tree = genTree();
+                const { keyEntities } = convertDataToEntities(
+                    convertTreeToData(tree.props.children)
+                );
+
+                // First, we check all
+                const allCheckedKeys = conductCheck(
+                    ['war', 'to', 'be'],
+                    true,
+                    keyEntities
+                ).checkedKeys;
+                expect(allCheckedKeys.length).toEqual(6);
+
+                // Then uncheck one of then
+                const result1 = conductCheck(
+                    allCheckedKeys.filter((key) => key !== 'not'),
+                    { checked: false, halfCheckedKeys: [] },
+                    keyEntities
+                );
+                expect(result1.checkedKeys.sort()).toEqual(
+                    ['are', 'to', 'be'].sort()
+                );
+                expect(result1.halfCheckedKeys.sort()).toEqual(['war'].sort());
+
+                const result2 = conductCheck(
+                    allCheckedKeys.filter(
+                        (key) => key !== 'to' && key !== 'be'
+                    ),
+                    { checked: false, halfCheckedKeys: [] },
+                    keyEntities
+                );
+                expect(result2.checkedKeys.sort()).toEqual(
+                    ['war', 'are', 'not', 'it'].sort()
+                );
+                expect(result2.halfCheckedKeys.sort()).toEqual([].sort());
+            });
+
+            const genNonDisabledTree = (props) => (
+                <Tree {...props}>
+                    <TreeNode key="war">
+                        <TreeNode key="are" />
+                        <TreeNode key="not">
+                            <TreeNode key="it" />
+                            <TreeNode key="used">
+                                <TreeNode key="to" />
+                                <TreeNode key="be" />
+                            </TreeNode>
+                        </TreeNode>
+                    </TreeNode>
+                </Tree>
+            );
+
+            it('check with custom checkbox disabled', () => {
+                const tree = genNonDisabledTree();
+                const { keyEntities } = convertDataToEntities(
+                    convertTreeToData(tree.props.children),
+                    undefined,
+                    undefined
+                );
+
+                const getCheckDisabled = (data) => data.key === 'used';
+
+                const result1 = conductCheck(
+                    ['not'],
+                    true,
+                    keyEntities,
+                    getCheckDisabled
+                );
+                expect(result1.checkedKeys.sort()).toEqual(
+                    ['not', 'it'].sort()
+                );
+                expect(result1.halfCheckedKeys.sort()).toEqual(['war'].sort());
+
+                const result2 = conductCheck(
+                    ['to', 'be'],
+                    true,
+                    keyEntities,
+                    getCheckDisabled
+                );
+                expect(result2.checkedKeys.sort()).toEqual(['to', 'be'].sort());
+                expect(result2.halfCheckedKeys.sort()).toEqual([].sort());
+            });
+
+            it('uncheck with custom checkbox disabled', () => {
+                const tree = genNonDisabledTree();
+                const { keyEntities } = convertDataToEntities(
+                    convertTreeToData(tree.props.children),
+                    undefined,
+                    undefined
+                );
+
+                const getCheckDisabled = (data) => data.key === 'used';
+
+                // First, we check all
+                const allCheckedKeys = conductCheck(
+                    ['war', 'to', 'be'],
+                    true,
+                    keyEntities,
+                    getCheckDisabled
+                ).checkedKeys;
+                expect(allCheckedKeys.length).toEqual(6);
+
+                // Then uncheck one of then
+                const result1 = conductCheck(
+                    allCheckedKeys.filter((key) => key !== 'not'),
+                    { checked: false, halfCheckedKeys: [] },
+                    keyEntities,
+                    getCheckDisabled
+                );
+                expect(result1.checkedKeys.sort()).toEqual(
+                    ['are', 'to', 'be'].sort()
+                );
+                expect(result1.halfCheckedKeys.sort()).toEqual(['war'].sort());
+
+                const result2 = conductCheck(
+                    allCheckedKeys.filter(
+                        (key) => key !== 'to' && key !== 'be'
+                    ),
+                    { checked: false, halfCheckedKeys: [] },
+                    keyEntities,
+                    getCheckDisabled
+                );
+                expect(result2.checkedKeys.sort()).toEqual(
+                    ['war', 'are', 'not', 'it'].sort()
+                );
+                expect(result2.halfCheckedKeys.sort()).toEqual([].sort());
+            });
+        });
+    });
+
+    it('conductExpandParent', () => {
+        const tree = (
+            <Tree>
+                <TreeNode key="bamboo">
+                    <TreeNode key="is">
+                        <TreeNode key="good" />
+                    </TreeNode>
+                </TreeNode>
+            </Tree>
+        );
+
+        const { keyEntities } = convertDataToEntities(
+            convertTreeToData(tree.props.children)
+        );
+        const keys = conductExpandParent(['good'], keyEntities);
+        expect(keys.sort()).toEqual(['bamboo', 'is', 'good'].sort());
+    });
+
+    it('getDragChildrenKeys', () => {
+        const tree = (
+            <Tree defaultExpandAll>
+                <TreeNode key="000">
+                    <TreeNode key="111">
+                        <TreeNode key="222" />
+                        <TreeNode key="333" />
+                    </TreeNode>
+                </TreeNode>
+            </Tree>
+        );
+
+        const { keyEntities } = convertDataToEntities(
+            convertTreeToData(tree.props.children)
+        );
+        const keys0 = getDragChildrenKeys('000', keyEntities);
+        expect(keys0.sort()).toEqual(['111', '222', '333'].sort());
+
+        const keys1 = getDragChildrenKeys('111', keyEntities);
+        expect(keys1.sort()).toEqual(['222', '333'].sort());
+    });
+
+    describe('flatten treeNode', () => {
+        function getNode(key, children) {
+            return {
+                key,
+                title: key,
+                children,
+            };
+        }
+
+        it('with expanded keys', () => {
+            const flattenList = flattenTreeData(
+                [
+                    getNode('0', [
+                        getNode('0-0'),
+                        getNode('0-1'),
+                        getNode('0-2', [getNode('0-2-0'), getNode('0-2-1')]),
+                    ]),
+                    getNode('1'),
+                ],
+                ['0-2', '0']
+            );
+
+            expect(flattenList.map(({ key }) => key)).toEqual([
+                '0',
+                '0-0',
+                '0-1',
+                '0-2',
+                '0-2-0',
+                '0-2-1',
+                '1',
+            ]);
+        });
+
+        it('with all', () => {
+            const flattenList = flattenTreeData(
+                [
+                    getNode('0', [
+                        getNode('0-0'),
+                        getNode('0-1'),
+                        getNode('0-2', [getNode('0-2-0'), getNode('0-2-1')]),
+                    ]),
+                    getNode('1'),
+                ],
+                true
+            );
+
+            expect(flattenList.map(({ key }) => key)).toEqual([
+                '0',
+                '0-0',
+                '0-1',
+                '0-2',
+                '0-2-0',
+                '0-2-1',
+                '1',
+            ]);
+        });
+
+        it('isEnd should be correct', () => {
+            const flattenList = flattenTreeData(
+                [
+                    getNode('0', [
+                        getNode('0-0'),
+                        getNode('0-1'),
+                        getNode('0-2', [
+                            // Break lines
+                            getNode('0-2-0'),
+                        ]),
+                    ]),
+                    getNode('1', [
+                        // Break lines
+                        getNode('1-0'),
+                        getNode('1-1'),
+                    ]),
+                ],
+                true
+            );
+
+            expect(
+                flattenList.map(({ isStart, isEnd }) => ({
+                    isStart,
+                    isEnd,
+                }))
+            ).toEqual([
+                { isStart: [true], isEnd: [false] },
+                { isStart: [true, true], isEnd: [false, false] },
+                { isStart: [true, false], isEnd: [false, false] },
+                { isStart: [true, false], isEnd: [false, true] },
+                { isStart: [true, false, true], isEnd: [false, true, true] },
+
+                { isStart: [false], isEnd: [true] },
+                { isStart: [false, true], isEnd: [true, false] },
+                { isStart: [false, false], isEnd: [true, true] },
+            ]);
+        });
+    });
+
+    it('not crash if node not exist with getTreeNodeProps', () => {
+        const nodeProps = getTreeNodeProps('not-exist', {
+            expandedKeys: [],
+            selectedKeys: [],
+            loadedKeys: [],
+            loadingKeys: [],
+            checkedKeys: [],
+            halfCheckedKeys: [],
+            dragOverNodeKey: null,
+            dropPosition: null,
+            keyEntities: {},
+        });
+
+        expect(nodeProps).toEqual(
+            expect.objectContaining({
+                checked: false,
+                eventKey: 'not-exist',
+                expanded: false,
+                halfChecked: false,
+                loaded: false,
+                loading: false,
+                pos: '',
+                selected: false,
+            })
+        );
+    });
+
+    it('traverseDataNodes legacy externalGetKey', () => {
+        let count = 0;
+
+        traverseDataNodes(
+            [{ rawKey: 'light' }],
+            (data) => {
+                count += 1;
+                expect(data.key).toBe('light');
+            },
+            'rawKey'
+        );
+
+        expect(count).toEqual(1);
+    });
+});
diff --git a/src/components/Tree/Internal/tests/util.ts b/src/components/Tree/Internal/tests/util.ts
new file mode 100644
index 000000000..8615c754c
--- /dev/null
+++ b/src/components/Tree/Internal/tests/util.ts
@@ -0,0 +1,69 @@
+import { ReactWrapper } from 'enzyme';
+import { Component } from 'react';
+
+export function objectMatcher(item: object) {
+    const result = Array.isArray(item) ? [] : {};
+
+    Object.keys(item).forEach((key) => {
+        const value = (item as any)[key];
+        if (
+            value &&
+            typeof value === 'object' &&
+            !(value instanceof ReactWrapper) &&
+            !(value instanceof Component)
+        ) {
+            (result as any)[key] = objectMatcher(value);
+        } else {
+            (result as any)[key] = value;
+        }
+    });
+
+    return expect.objectContaining(result);
+}
+
+export function spyConsole() {
+    const errorList = [
+        'Warning: Tree node must have a certain key:',
+        'Warning: `children` of Tree is deprecated. Please use `treeData` instead.',
+    ];
+
+    // eslint-disable-next-line no-console
+    const originConsoleErr = console.error;
+
+    beforeAll(() => {
+        // eslint-disable-next-line no-console
+        console.error = jest.fn().mockImplementation((...args) => {
+            if (errorList.some((tmpl) => args[0].includes(tmpl))) {
+                return;
+            }
+
+            originConsoleErr(...args);
+        });
+    });
+
+    afterAll(() => {
+        // eslint-disable-next-line no-console
+        console.error = originConsoleErr;
+    });
+}
+
+export function spyError() {
+    let errorSpy: jest.SpyInstance<
+        void,
+        [message?: any, ...optionalParams: any[]]
+    >;
+
+    beforeAll(() => {
+        errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    });
+
+    beforeEach(() => {
+        errorSpy.mockReset();
+    });
+
+    afterAll(() => {
+        errorSpy.mockRestore();
+    });
+
+    return () => errorSpy;
+}
diff --git a/src/components/Tree/Internal/util.tsx b/src/components/Tree/Internal/util.tsx
new file mode 100644
index 000000000..d64ad1bdd
--- /dev/null
+++ b/src/components/Tree/Internal/util.tsx
@@ -0,0 +1,366 @@
+import React from 'react';
+import TreeNode from './TreeNode';
+import {
+    NodeElement,
+    Key,
+    DataNode,
+    DataEntity,
+    NodeInstance,
+    FlattenNode,
+    BasicDataNode,
+} from './OcTree.types';
+import { OcTreeProps, AllowDrop } from './OcTree.types';
+
+export function arrDel(list: Key[], value: Key) {
+    if (!list) return [];
+    const clone = list.slice();
+    const index = clone.indexOf(value);
+    if (index >= 0) {
+        clone.splice(index, 1);
+    }
+    return clone;
+}
+
+export function arrAdd(list: Key[], value: Key) {
+    const clone = (list || []).slice();
+    if (clone.indexOf(value) === -1) {
+        clone.push(value);
+    }
+    return clone;
+}
+
+export function posToArr(pos: string) {
+    return pos.split('-');
+}
+
+export function getPosition(level: string | number, index: number) {
+    return `${level}-${index}`;
+}
+
+export function isTreeNode(node: NodeElement) {
+    return node && node.type && node.type.isTreeNode;
+}
+
+export function getDragChildrenKeys<
+    TreeDataType extends BasicDataNode = DataNode
+>(dragNodeKey: Key, keyEntities: Record<Key, DataEntity<TreeDataType>>): Key[] {
+    // not contains self
+    // self for left or right drag
+    const dragChildrenKeys: Key[] = [];
+
+    const entity = keyEntities[dragNodeKey];
+    function dig(list: DataEntity<TreeDataType>[] = []) {
+        list.forEach(({ key, children }) => {
+            dragChildrenKeys.push(key);
+            dig(children);
+        });
+    }
+
+    dig(entity.children);
+
+    return dragChildrenKeys;
+}
+
+export function isLastChild<TreeDataType extends BasicDataNode = DataNode>(
+    treeNodeEntity: DataEntity<TreeDataType>
+) {
+    if (treeNodeEntity.parent) {
+        const posArr = posToArr(treeNodeEntity.pos);
+        return (
+            Number(posArr[posArr.length - 1]) ===
+            treeNodeEntity.parent.children.length - 1
+        );
+    }
+    return false;
+}
+
+export function isFirstChild<TreeDataType extends BasicDataNode = DataNode>(
+    treeNodeEntity: DataEntity<TreeDataType>
+) {
+    const posArr = posToArr(treeNodeEntity.pos);
+    return Number(posArr[posArr.length - 1]) === 0;
+}
+
+// Only used when drag, not affect SSR.
+export function calcDropPosition<TreeDataType extends BasicDataNode = DataNode>(
+    event: React.MouseEvent,
+    dragNode: NodeInstance<TreeDataType>,
+    targetNode: NodeInstance<TreeDataType>,
+    indent: number,
+    startMousePosition: {
+        x: number;
+        y: number;
+    },
+    allowDrop: AllowDrop<TreeDataType>,
+    flattenedNodes: FlattenNode<TreeDataType>[],
+    keyEntities: Record<Key, DataEntity<TreeDataType>>,
+    expandKeys: Key[],
+    direction: string
+): {
+    dropPosition: -1 | 0 | 1;
+    dropLevelOffset: number;
+    dropTargetKey: Key;
+    dropTargetPos: string;
+    dropContainerKey: Key;
+    dragOverNodeKey: Key;
+    dropAllowed: boolean;
+} {
+    const { clientX, clientY } = event;
+    const { top, height } = (
+        event.target as HTMLElement
+    ).getBoundingClientRect();
+    // optional chain for testing
+    const horizontalMouseOffset =
+        (direction === 'rtl' ? -1 : 1) *
+        ((startMousePosition?.x || 0) - clientX);
+    const rawDropLevelOffset = (horizontalMouseOffset - 12) / indent;
+
+    // find abstract drop node by horizontal offset
+    let abstractDropNodeEntity: DataEntity<TreeDataType> =
+        keyEntities[targetNode.props.eventKey];
+
+    if (clientY < top + height / 2) {
+        // first half, set abstract drop node to previous node
+        const nodeIndex = flattenedNodes.findIndex(
+            (flattenedNode) => flattenedNode.key === abstractDropNodeEntity.key
+        );
+        const prevNodeIndex = nodeIndex <= 0 ? 0 : nodeIndex - 1;
+        const prevNodeKey = flattenedNodes[prevNodeIndex].key;
+        abstractDropNodeEntity = keyEntities[prevNodeKey];
+    }
+
+    const initialAbstractDropNodeKey = abstractDropNodeEntity.key;
+
+    const abstractDragOverEntity = abstractDropNodeEntity;
+    const dragOverNodeKey = abstractDropNodeEntity.key;
+
+    let dropPosition: -1 | 0 | 1 = 0;
+    let dropLevelOffset = 0;
+
+    // Only allow cross level drop when dragging on a non-expanded node
+    if (!expandKeys.includes(initialAbstractDropNodeKey)) {
+        for (let i = 0; i < rawDropLevelOffset; i += 1) {
+            if (isLastChild(abstractDropNodeEntity)) {
+                abstractDropNodeEntity = abstractDropNodeEntity.parent;
+                dropLevelOffset += 1;
+            } else {
+                break;
+            }
+        }
+    }
+
+    const abstractDragDataNode = dragNode.props.data;
+    const abstractDropDataNode = abstractDropNodeEntity.node;
+    let dropAllowed = true;
+    if (
+        isFirstChild(abstractDropNodeEntity) &&
+        abstractDropNodeEntity.level === 0 &&
+        clientY < top + height / 2 &&
+        allowDrop({
+            dragNode: abstractDragDataNode,
+            dropNode: abstractDropDataNode,
+            dropPosition: -1,
+        }) &&
+        abstractDropNodeEntity.key === targetNode.props.eventKey
+    ) {
+        // first half of first node in first level
+        dropPosition = -1;
+    } else if (
+        (abstractDragOverEntity.children || []).length &&
+        expandKeys.includes(dragOverNodeKey)
+    ) {
+        // drop on expanded node
+        // only allow drop inside
+        if (
+            allowDrop({
+                dragNode: abstractDragDataNode,
+                dropNode: abstractDropDataNode,
+                dropPosition: 0,
+            })
+        ) {
+            dropPosition = 0;
+        } else {
+            dropAllowed = false;
+        }
+    } else if (dropLevelOffset === 0) {
+        if (rawDropLevelOffset > -1.5) {
+            // | Node     | <- abstractDropNode
+            // | -^-===== | <- mousePosition
+            // 1. try drop after
+            // 2. do not allow drop
+            if (
+                allowDrop({
+                    dragNode: abstractDragDataNode,
+                    dropNode: abstractDropDataNode,
+                    dropPosition: 1,
+                })
+            ) {
+                dropPosition = 1;
+            } else {
+                dropAllowed = false;
+            }
+        } else {
+            // | Node     | <- abstractDropNode
+            // | ---==^== | <- mousePosition
+            // whether it has children or doesn't has children
+            // always
+            // 1. try drop inside
+            // 2. try drop after
+            // 3. do not allow drop
+            if (
+                allowDrop({
+                    dragNode: abstractDragDataNode,
+                    dropNode: abstractDropDataNode,
+                    dropPosition: 0,
+                })
+            ) {
+                dropPosition = 0;
+            } else if (
+                allowDrop({
+                    dragNode: abstractDragDataNode,
+                    dropNode: abstractDropDataNode,
+                    dropPosition: 1,
+                })
+            ) {
+                dropPosition = 1;
+            } else {
+                dropAllowed = false;
+            }
+        }
+    } else {
+        // | Node1 | <- abstractDropNode
+        //      |  Node2  |
+        // --^--|----=====| <- mousePosition
+        // 1. try insert after Node1
+        // 2. do not allow drop
+        if (
+            allowDrop({
+                dragNode: abstractDragDataNode,
+                dropNode: abstractDropDataNode,
+                dropPosition: 1,
+            })
+        ) {
+            dropPosition = 1;
+        } else {
+            dropAllowed = false;
+        }
+    }
+
+    return {
+        dropPosition,
+        dropLevelOffset,
+        dropTargetKey: abstractDropNodeEntity.key,
+        dropTargetPos: abstractDropNodeEntity.pos,
+        dragOverNodeKey,
+        dropContainerKey:
+            dropPosition === 0
+                ? null
+                : abstractDropNodeEntity.parent?.key || null,
+        dropAllowed,
+    };
+}
+
+/**
+ * Return selectedKeys according with multiple prop
+ * @param selectedKeys
+ * @param props
+ * @returns [string]
+ */
+export function calcSelectedKeys(selectedKeys: Key[], props: OcTreeProps) {
+    if (!selectedKeys) return undefined;
+
+    const { multiple } = props;
+    if (multiple) {
+        return selectedKeys.slice();
+    }
+
+    if (selectedKeys.length) {
+        return [selectedKeys[0]];
+    }
+    return selectedKeys;
+}
+
+const internalProcessProps = (props: DataNode): any => props;
+export function convertDataToTree(
+    treeData: DataNode[],
+    processor?: { processProps: (prop: DataNode) => any }
+): NodeElement[] {
+    if (!treeData) return [];
+
+    const { processProps = internalProcessProps } = processor || {};
+    const list = Array.isArray(treeData) ? treeData : [treeData];
+    return list.map(({ children, ...props }): NodeElement => {
+        const childrenNodes = convertDataToTree(children, processor);
+
+        return (
+            <TreeNode key={props.key} {...processProps(props)}>
+                {childrenNodes}
+            </TreeNode>
+        );
+    });
+}
+
+/**
+ * Parse `checkedKeys` to { checkedKeys, halfCheckedKeys } style
+ */
+export function parseCheckedKeys(
+    keys: Key[] | { checked: Key[]; halfChecked: Key[] }
+) {
+    if (!keys) {
+        return null;
+    }
+
+    // Convert keys to object format
+    let keyProps;
+    if (Array.isArray(keys)) {
+        // [Legacy] Follow the api doc
+        keyProps = {
+            checkedKeys: keys,
+            halfCheckedKeys: undefined,
+        };
+    } else if (typeof keys === 'object') {
+        keyProps = {
+            checkedKeys: keys.checked || undefined,
+            halfCheckedKeys: keys.halfChecked || undefined,
+        };
+    } else {
+        return null;
+    }
+
+    return keyProps;
+}
+
+/**
+ * If user use `autoExpandParent` we should get the list of parent node
+ * @param keyList
+ * @param keyEntities
+ */
+export function conductExpandParent(
+    keyList: Key[],
+    keyEntities: Record<Key, DataEntity>
+): Key[] {
+    const expandedKeys = new Set<Key>();
+
+    function conductUp(key: Key) {
+        if (expandedKeys.has(key)) return;
+
+        const entity = keyEntities[key];
+        if (!entity) return;
+
+        expandedKeys.add(key);
+
+        const { parent, node } = entity;
+
+        if (node.disabled) return;
+
+        if (parent) {
+            conductUp(parent.key);
+        }
+    }
+
+    (keyList || []).forEach((key) => {
+        conductUp(key);
+    });
+
+    return [...expandedKeys];
+}
diff --git a/src/components/Tree/Internal/utils/conductUtil.ts b/src/components/Tree/Internal/utils/conductUtil.ts
new file mode 100644
index 000000000..e2957300b
--- /dev/null
+++ b/src/components/Tree/Internal/utils/conductUtil.ts
@@ -0,0 +1,291 @@
+import {
+    Key,
+    DataEntity,
+    DataNode,
+    GetCheckDisabled,
+    BasicDataNode,
+} from '../OcTree.types';
+
+interface ConductReturnType {
+    checkedKeys: Key[];
+    halfCheckedKeys: Key[];
+}
+
+function removeFromCheckedKeys(
+    halfCheckedKeys: Set<Key>,
+    checkedKeys: Set<Key>
+) {
+    const filteredKeys = new Set<Key>();
+    halfCheckedKeys.forEach((key) => {
+        if (!checkedKeys.has(key)) {
+            filteredKeys.add(key);
+        }
+    });
+    return filteredKeys;
+}
+
+export function isCheckDisabled<TreeDataType>(node: TreeDataType) {
+    const { disabled, disableCheckbox, checkable } = (node || {}) as DataNode;
+    return !!(disabled || disableCheckbox) || checkable === false;
+}
+
+// Fill miss keys
+function fillConductCheck<TreeDataType extends BasicDataNode = DataNode>(
+    keys: Set<Key>,
+    levelEntities: Map<number, Set<DataEntity<TreeDataType>>>,
+    maxLevel: number,
+    syntheticGetCheckDisabled: GetCheckDisabled<TreeDataType>
+): ConductReturnType {
+    const checkedKeys = new Set<Key>(keys);
+    const halfCheckedKeys = new Set<Key>();
+
+    // Add checked keys top to bottom
+    for (let level = 0; level <= maxLevel; level += 1) {
+        const entities = levelEntities.get(level) || new Set();
+        entities.forEach((entity) => {
+            const { key, node, children = [] } = entity;
+
+            if (checkedKeys.has(key) && !syntheticGetCheckDisabled(node)) {
+                children
+                    .filter(
+                        (childEntity) =>
+                            !syntheticGetCheckDisabled(childEntity.node)
+                    )
+                    .forEach((childEntity) => {
+                        checkedKeys.add(childEntity.key);
+                    });
+            }
+        });
+    }
+
+    // Add checked keys from bottom to top
+    const visitedKeys = new Set<Key>();
+    for (let level = maxLevel; level >= 0; level -= 1) {
+        const entities = levelEntities.get(level) || new Set();
+        entities.forEach((entity) => {
+            const { parent, node } = entity;
+
+            // Skip if no need to check
+            if (
+                syntheticGetCheckDisabled(node) ||
+                !entity.parent ||
+                visitedKeys.has(entity.parent.key)
+            ) {
+                return;
+            }
+
+            // Skip if parent is disabled
+            if (syntheticGetCheckDisabled(entity.parent.node)) {
+                visitedKeys.add(parent.key);
+                return;
+            }
+
+            let allChecked = true;
+            let partialChecked = false;
+
+            (parent.children || [])
+                .filter(
+                    (childEntity) =>
+                        !syntheticGetCheckDisabled(childEntity.node)
+                )
+                .forEach(({ key }) => {
+                    const checked = checkedKeys.has(key);
+                    if (allChecked && !checked) {
+                        allChecked = false;
+                    }
+                    if (
+                        !partialChecked &&
+                        (checked || halfCheckedKeys.has(key))
+                    ) {
+                        partialChecked = true;
+                    }
+                });
+
+            if (allChecked) {
+                checkedKeys.add(parent.key);
+            }
+            if (partialChecked) {
+                halfCheckedKeys.add(parent.key);
+            }
+
+            visitedKeys.add(parent.key);
+        });
+    }
+
+    return {
+        checkedKeys: Array.from(checkedKeys),
+        halfCheckedKeys: Array.from(
+            removeFromCheckedKeys(halfCheckedKeys, checkedKeys)
+        ),
+    };
+}
+
+// Remove useless key
+function cleanConductCheck<TreeDataType extends BasicDataNode = DataNode>(
+    keys: Set<Key>,
+    halfKeys: Key[],
+    levelEntities: Map<number, Set<DataEntity<TreeDataType>>>,
+    maxLevel: number,
+    syntheticGetCheckDisabled: GetCheckDisabled<TreeDataType>
+): ConductReturnType {
+    const checkedKeys = new Set<Key>(keys);
+    let halfCheckedKeys = new Set<Key>(halfKeys);
+
+    // Remove checked keys from top to bottom
+    for (let level = 0; level <= maxLevel; level += 1) {
+        const entities = levelEntities.get(level) || new Set();
+        entities.forEach((entity) => {
+            const { key, node, children = [] } = entity;
+
+            if (
+                !checkedKeys.has(key) &&
+                !halfCheckedKeys.has(key) &&
+                !syntheticGetCheckDisabled(node)
+            ) {
+                children
+                    .filter(
+                        (childEntity) =>
+                            !syntheticGetCheckDisabled(childEntity.node)
+                    )
+                    .forEach((childEntity) => {
+                        checkedKeys.delete(childEntity.key);
+                    });
+            }
+        });
+    }
+
+    // Remove checked keys form bottom to top
+    halfCheckedKeys = new Set<Key>();
+    const visitedKeys = new Set<Key>();
+    for (let level = maxLevel; level >= 0; level -= 1) {
+        const entities = levelEntities.get(level) || new Set();
+
+        entities.forEach((entity) => {
+            const { parent, node } = entity;
+
+            // Skip if no need to check
+            if (
+                syntheticGetCheckDisabled(node) ||
+                !entity.parent ||
+                visitedKeys.has(entity.parent.key)
+            ) {
+                return;
+            }
+
+            // Skip if parent is disabled
+            if (syntheticGetCheckDisabled(entity.parent.node)) {
+                visitedKeys.add(parent.key);
+                return;
+            }
+
+            let allChecked = true;
+            let partialChecked = false;
+
+            (parent.children || [])
+                .filter(
+                    (childEntity) =>
+                        !syntheticGetCheckDisabled(childEntity.node)
+                )
+                .forEach(({ key }) => {
+                    const checked = checkedKeys.has(key);
+                    if (allChecked && !checked) {
+                        allChecked = false;
+                    }
+                    if (
+                        !partialChecked &&
+                        (checked || halfCheckedKeys.has(key))
+                    ) {
+                        partialChecked = true;
+                    }
+                });
+
+            if (!allChecked) {
+                checkedKeys.delete(parent.key);
+            }
+            if (partialChecked) {
+                halfCheckedKeys.add(parent.key);
+            }
+
+            visitedKeys.add(parent.key);
+        });
+    }
+
+    return {
+        checkedKeys: Array.from(checkedKeys),
+        halfCheckedKeys: Array.from(
+            removeFromCheckedKeys(halfCheckedKeys, checkedKeys)
+        ),
+    };
+}
+
+/**
+ * Conduct with keys.
+ * @param keyList current key list
+ * @param keyEntities key - dataEntity map
+ * @param mode `fill` to fill missing key, `clean` to remove useless key
+ */
+export function conductCheck<TreeDataType extends BasicDataNode = DataNode>(
+    keyList: Key[],
+    checked: true | { checked: false; halfCheckedKeys: Key[] },
+    keyEntities: Record<Key, DataEntity<TreeDataType>>,
+    getCheckDisabled?: GetCheckDisabled<TreeDataType>
+): ConductReturnType {
+    const warningMissKeys: Key[] = [];
+
+    let syntheticGetCheckDisabled: GetCheckDisabled<TreeDataType>;
+    if (getCheckDisabled) {
+        syntheticGetCheckDisabled = getCheckDisabled;
+    } else {
+        syntheticGetCheckDisabled = isCheckDisabled;
+    }
+
+    // We only handle exist keys
+    const keys = new Set<Key>(
+        keyList.filter((key) => {
+            const hasEntity = !!keyEntities[key];
+            if (!hasEntity) {
+                warningMissKeys.push(key);
+            }
+
+            return hasEntity;
+        })
+    );
+    const levelEntities = new Map<number, Set<DataEntity<TreeDataType>>>();
+    let maxLevel = 0;
+
+    // Convert entities by level for calculation
+    Object.keys(keyEntities).forEach((key) => {
+        const entity = keyEntities[key];
+        const { level } = entity;
+
+        let levelSet: Set<DataEntity<TreeDataType>> = levelEntities.get(level);
+        if (!levelSet) {
+            levelSet = new Set();
+            levelEntities.set(level, levelSet);
+        }
+
+        levelSet.add(entity);
+
+        maxLevel = Math.max(maxLevel, level);
+    });
+
+    let result: ConductReturnType;
+    if (checked === true) {
+        result = fillConductCheck<TreeDataType>(
+            keys,
+            levelEntities,
+            maxLevel,
+            syntheticGetCheckDisabled
+        );
+    } else {
+        result = cleanConductCheck(
+            keys,
+            checked.halfCheckedKeys,
+            levelEntities,
+            maxLevel,
+            syntheticGetCheckDisabled
+        );
+    }
+
+    return result;
+}
diff --git a/src/components/Tree/Internal/utils/diffUtil.ts b/src/components/Tree/Internal/utils/diffUtil.ts
new file mode 100644
index 000000000..c680ceaa7
--- /dev/null
+++ b/src/components/Tree/Internal/utils/diffUtil.ts
@@ -0,0 +1,51 @@
+import { Key, FlattenNode } from '../OcTree.types';
+
+export function findExpandedKeys(prev: Key[] = [], next: Key[] = []) {
+    const prevLen = prev.length;
+    const nextLen = next.length;
+
+    if (Math.abs(prevLen - nextLen) !== 1) {
+        return { add: false, key: null };
+    }
+
+    function find(shorter: Key[], longer: Key[]) {
+        const cache: Map<Key, boolean> = new Map();
+        shorter.forEach((key) => {
+            cache.set(key, true);
+        });
+
+        const keys = longer.filter((key) => !cache.has(key));
+
+        return keys.length === 1 ? keys[0] : null;
+    }
+
+    if (prevLen < nextLen) {
+        return {
+            add: true,
+            key: find(prev, next),
+        };
+    }
+
+    return {
+        add: false,
+        key: find(next, prev),
+    };
+}
+
+export function getExpandRange(
+    shorter: FlattenNode[],
+    longer: FlattenNode[],
+    key: Key
+) {
+    const shorterStartIndex = shorter.findIndex((data) => data.key === key);
+    const shorterEndNode = shorter[shorterStartIndex + 1];
+    const longerStartIndex = longer.findIndex((data) => data.key === key);
+
+    if (shorterEndNode) {
+        const longerEndIndex = longer.findIndex(
+            (data) => data.key === shorterEndNode.key
+        );
+        return longer.slice(longerStartIndex + 1, longerEndIndex);
+    }
+    return longer.slice(longerStartIndex + 1);
+}
diff --git a/src/components/Tree/Internal/utils/treeUtil.ts b/src/components/Tree/Internal/utils/treeUtil.ts
new file mode 100644
index 000000000..321c97db3
--- /dev/null
+++ b/src/components/Tree/Internal/utils/treeUtil.ts
@@ -0,0 +1,448 @@
+import React from 'react';
+import { omit, toArray } from '../../../../shared/utilities';
+import {
+    DataNode,
+    FlattenNode,
+    NodeElement,
+    DataEntity,
+    Key,
+    EventDataNode,
+    GetKey,
+    FieldNames,
+    BasicDataNode,
+} from '../OcTree.types';
+import { getPosition, isTreeNode } from '../util';
+import { TreeNodeProps } from '../OcTree.types';
+
+export function getKey(key: Key, pos: string) {
+    if (key !== null && key !== undefined) {
+        return key;
+    }
+    return pos;
+}
+
+export function fillFieldNames(fieldNames?: FieldNames): Required<FieldNames> {
+    const { title, _title, key, children } = fieldNames || {};
+    const mergedTitle = title || 'title';
+
+    return {
+        title: mergedTitle,
+        _title: _title || [mergedTitle],
+        key: key || 'key',
+        children: children || 'children',
+    };
+}
+
+/**
+ * Warning if TreeNode do not provides key
+ */
+export function warningWithoutKey(
+    treeData: DataNode[],
+    fieldNames: FieldNames
+) {
+    const keys: Map<string, boolean> = new Map();
+
+    function dig(list: DataNode[], path: string = '') {
+        (list || []).forEach((treeNode) => {
+            const key = (treeNode as any)[fieldNames.key];
+            const children = (treeNode as any)[fieldNames.children];
+            const recordKey = String(key);
+
+            keys.set(recordKey, true);
+
+            dig(children, `${path}${recordKey} > `);
+        });
+    }
+
+    dig(treeData);
+}
+
+/**
+ * Convert `children` of Tree into `treeData` structure.
+ */
+export function convertTreeToData(rootNodes: React.ReactNode): DataNode[] {
+    function dig(node: React.ReactNode): DataNode[] {
+        const treeNodes = toArray(node) as NodeElement[];
+        return treeNodes
+            .map((treeNode) => {
+                // Filter invalidate node
+                if (!isTreeNode(treeNode)) {
+                    return null;
+                }
+
+                const { key } = treeNode;
+                const { children, ...rest } = treeNode.props;
+
+                const dataNode: DataNode = {
+                    key,
+                    ...rest,
+                };
+
+                const parsedChildren = dig(children);
+                if (parsedChildren.length) {
+                    dataNode.children = parsedChildren;
+                }
+
+                return dataNode;
+            })
+            .filter((dataNode: DataNode) => dataNode);
+    }
+
+    return dig(rootNodes);
+}
+
+/**
+ * Flat nest tree data into flatten list. This is used for virtual list render.
+ * @param treeNodeList Origin data node list
+ * @param expandedKeys
+ * need expanded keys, provides `true` means all expanded (used in `tree-select`).
+ */
+export function flattenTreeData<TreeDataType extends BasicDataNode = DataNode>(
+    treeNodeList: TreeDataType[],
+    expandedKeys: Key[] | true,
+    fieldNames: FieldNames
+): FlattenNode<TreeDataType>[] {
+    const {
+        _title: fieldTitles,
+        key: fieldKey,
+        children: fieldChildren,
+    } = fillFieldNames(fieldNames);
+
+    const expandedKeySet = new Set(expandedKeys === true ? [] : expandedKeys);
+    const flattenList: FlattenNode<TreeDataType>[] = [];
+
+    function dig(
+        list: TreeDataType[],
+        parent: FlattenNode<TreeDataType> = null
+    ): FlattenNode<TreeDataType>[] {
+        return list.map((treeNode, index) => {
+            const pos: string = getPosition(parent ? parent.pos : '0', index);
+            const mergedKey = getKey((treeNode as any)[fieldKey], pos);
+
+            // Pick matched title in field title list
+            let mergedTitle: React.ReactNode;
+            for (let i = 0; i < fieldTitles.length; i += 1) {
+                const fieldTitle = fieldTitles[i];
+                if ((treeNode as any)[fieldTitle] !== undefined) {
+                    mergedTitle = (treeNode as any)[fieldTitle];
+                    break;
+                }
+            }
+
+            // Add FlattenDataNode into list
+            const flattenNode: FlattenNode<TreeDataType> = {
+                ...omit(treeNode, [
+                    ...fieldTitles,
+                    fieldKey,
+                    fieldChildren,
+                ] as any),
+                title: mergedTitle,
+                key: mergedKey,
+                parent,
+                pos,
+                children: null,
+                data: treeNode,
+                isStart: [...(parent ? parent.isStart : []), index === 0],
+                isEnd: [
+                    ...(parent ? parent.isEnd : []),
+                    index === list.length - 1,
+                ],
+            };
+
+            flattenList.push(flattenNode);
+
+            // Loop treeNode children
+            if (expandedKeys === true || expandedKeySet.has(mergedKey)) {
+                flattenNode.children = dig(
+                    (treeNode as any)[fieldChildren] || [],
+                    flattenNode
+                );
+            } else {
+                flattenNode.children = [];
+            }
+
+            return flattenNode;
+        });
+    }
+
+    dig(treeNodeList);
+
+    return flattenList;
+}
+
+type ExternalGetKey = GetKey<DataNode> | string;
+
+interface TraverseDataNodesConfig {
+    childrenPropName?: string;
+    externalGetKey?: ExternalGetKey;
+    fieldNames?: FieldNames;
+}
+
+/**
+ * Traverse all the data by `treeData`.
+ * Please not use it out of the `tree` since we may refactor this code.
+ */
+export function traverseDataNodes(
+    dataNodes: DataNode[],
+    callback: (data: {
+        node: DataNode;
+        index: number;
+        pos: string;
+        key: Key;
+        parentPos: string | number;
+        level: number;
+        nodes: DataNode[];
+    }) => void,
+    // To avoid too many params, let use config instead of origin param
+    config?: TraverseDataNodesConfig | string
+) {
+    let mergedConfig: TraverseDataNodesConfig = {};
+    if (typeof config === 'object') {
+        mergedConfig = config;
+    } else {
+        mergedConfig = { externalGetKey: config };
+    }
+    mergedConfig = mergedConfig || {};
+
+    // Init config
+    const { childrenPropName, externalGetKey, fieldNames } = mergedConfig;
+
+    const { key: fieldKey, children: fieldChildren } =
+        fillFieldNames(fieldNames);
+
+    const mergeChildrenPropName = childrenPropName || fieldChildren;
+
+    // Get keys
+    let syntheticGetKey: (node: DataNode, pos?: string) => Key;
+    if (externalGetKey) {
+        if (typeof externalGetKey === 'string') {
+            syntheticGetKey = (node: DataNode) =>
+                (node as any)[externalGetKey as string];
+        } else if (typeof externalGetKey === 'function') {
+            syntheticGetKey = (node: DataNode) =>
+                (externalGetKey as GetKey<DataNode>)(node);
+        }
+    } else {
+        syntheticGetKey = (node, pos) => getKey((node as any)[fieldKey], pos);
+    }
+
+    // Process
+    function processNode(
+        node: DataNode,
+        index?: number,
+        parent?: { node: DataNode; pos: string; level: number },
+        pathNodes?: DataNode[]
+    ) {
+        const children = node
+            ? (node as any)[mergeChildrenPropName]
+            : dataNodes;
+        const pos = node ? getPosition(parent.pos, index) : '0';
+        const connectNodes = node ? [...pathNodes, node] : [];
+
+        // Process node if is not root
+        if (node) {
+            const key: Key = syntheticGetKey(node, pos);
+            const data = {
+                node,
+                index,
+                pos,
+                key,
+                parentPos: parent.node ? parent.pos : null,
+                level: parent.level + 1,
+                nodes: connectNodes,
+            };
+
+            callback(data);
+        }
+
+        // Process children node
+        if (children) {
+            children.forEach((subNode: DataNode, subIndex: number) => {
+                processNode(
+                    subNode,
+                    subIndex,
+                    {
+                        node,
+                        pos,
+                        level: parent ? parent.level + 1 : -1,
+                    },
+                    connectNodes
+                );
+            });
+        }
+    }
+
+    processNode(null);
+}
+
+interface Wrapper {
+    posEntities: Record<string, DataEntity>;
+    keyEntities: Record<Key, DataEntity>;
+}
+
+/**
+ * Convert `treeData` into entity records.
+ */
+export function convertDataToEntities(
+    dataNodes: DataNode[],
+    {
+        initWrapper,
+        processEntity,
+        onProcessFinished,
+        externalGetKey,
+        childrenPropName,
+        fieldNames,
+    }: {
+        initWrapper?: (wrapper: Wrapper) => Wrapper;
+        processEntity?: (entity: DataEntity, wrapper: Wrapper) => void;
+        onProcessFinished?: (wrapper: Wrapper) => void;
+        externalGetKey?: ExternalGetKey;
+        childrenPropName?: string;
+        fieldNames?: FieldNames;
+    } = {}
+) {
+    // Init config
+    const mergedExternalGetKey = externalGetKey;
+
+    const posEntities = {};
+    const keyEntities = {};
+    let wrapper = {
+        posEntities,
+        keyEntities,
+    };
+
+    if (initWrapper) {
+        wrapper = initWrapper(wrapper) || wrapper;
+    }
+
+    traverseDataNodes(
+        dataNodes,
+        (item) => {
+            const { node, index, pos, key, parentPos, level, nodes } = item;
+            const entity: DataEntity = { node, nodes, index, key, pos, level };
+
+            const mergedKey = getKey(key, pos);
+
+            (posEntities as any)[pos] = entity;
+            (keyEntities as any)[mergedKey] = entity;
+
+            // Fill children
+            entity.parent = (posEntities as any)[parentPos];
+            if (entity.parent) {
+                entity.parent.children = entity.parent.children || [];
+                entity.parent.children.push(entity);
+            }
+
+            if (processEntity) {
+                processEntity(entity, wrapper);
+            }
+        },
+        { externalGetKey: mergedExternalGetKey, childrenPropName, fieldNames }
+    );
+
+    if (onProcessFinished) {
+        onProcessFinished(wrapper);
+    }
+
+    return wrapper;
+}
+
+export interface TreeNodeRequiredProps<
+    TreeDataType extends BasicDataNode = DataNode
+> {
+    expandedKeys: Key[];
+    selectedKeys: Key[];
+    loadedKeys: Key[];
+    loadingKeys: Key[];
+    checkedKeys: Key[];
+    halfCheckedKeys: Key[];
+    dragOverNodeKey: Key;
+    dropPosition: number;
+    keyEntities: Record<Key, DataEntity<TreeDataType>>;
+}
+
+/**
+ * Get TreeNode props with Tree props.
+ */
+export function getTreeNodeProps<TreeDataType extends BasicDataNode = DataNode>(
+    key: Key,
+    {
+        expandedKeys,
+        selectedKeys,
+        loadedKeys,
+        loadingKeys,
+        checkedKeys,
+        halfCheckedKeys,
+        dragOverNodeKey,
+        dropPosition,
+        keyEntities,
+    }: TreeNodeRequiredProps<TreeDataType>
+) {
+    const entity = keyEntities[key];
+
+    const treeNodeProps = {
+        eventKey: key,
+        expanded: expandedKeys.indexOf(key) !== -1,
+        selected: selectedKeys.indexOf(key) !== -1,
+        loaded: loadedKeys.indexOf(key) !== -1,
+        loading: loadingKeys.indexOf(key) !== -1,
+        checked: checkedKeys.indexOf(key) !== -1,
+        halfChecked: halfCheckedKeys.indexOf(key) !== -1,
+        pos: String(entity ? entity.pos : ''),
+
+        // [Legacy] Drag props
+        // Since the interaction of drag is changed, the semantic of the props are
+        // not accuracy, I think it should be finally removed
+        dragOver: dragOverNodeKey === key && dropPosition === 0,
+        dragOverGapTop: dragOverNodeKey === key && dropPosition === -1,
+        dragOverGapBottom: dragOverNodeKey === key && dropPosition === 1,
+    };
+
+    return treeNodeProps;
+}
+
+export function convertNodePropsToEventData<
+    TreeDataType extends BasicDataNode = DataNode
+>(props: TreeNodeProps<TreeDataType>): EventDataNode<TreeDataType> {
+    const {
+        data,
+        expanded,
+        selected,
+        checked,
+        loaded,
+        loading,
+        halfChecked,
+        dragOver,
+        dragOverGapTop,
+        dragOverGapBottom,
+        pos,
+        active,
+        eventKey,
+    } = props;
+
+    const eventData = {
+        ...data,
+        expanded,
+        selected,
+        checked,
+        loaded,
+        loading,
+        halfChecked,
+        dragOver,
+        dragOverGapTop,
+        dragOverGapBottom,
+        pos,
+        active,
+        key: eventKey,
+    };
+
+    if (!('props' in eventData)) {
+        Object.defineProperty(eventData, 'props', {
+            get() {
+                return props;
+            },
+        });
+    }
+
+    return eventData;
+}
diff --git a/src/components/Tree/Styles/directory.scss b/src/components/Tree/Styles/directory.scss
new file mode 100644
index 000000000..a579bf304
--- /dev/null
+++ b/src/components/Tree/Styles/directory.scss
@@ -0,0 +1,68 @@
+.tree.tree-directory {
+    // ================== TreeNode ==================
+    .tree-treenode {
+        position: relative;
+
+        // Hover color
+        &:before {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 4px;
+            left: 0;
+            transition: background-color 0.3s;
+            content: '';
+            pointer-events: none;
+        }
+
+        &:hover {
+            &:before {
+                background: $tree-node-hover-bg;
+            }
+        }
+
+        // Elements
+        > * {
+            z-index: 1;
+        }
+
+        // >>> Switcher
+        .tree-switcher {
+            transition: color 0.3s;
+        }
+
+        // >>> Title
+        .tree-node-content-wrapper {
+            border-radius: 0;
+            user-select: none;
+
+            &:hover {
+                background: transparent;
+            }
+
+            &.tree-node-selected {
+                color: $tree-directory-selected-color;
+                background: transparent;
+            }
+        }
+
+        // ============= Selected =============
+        &-selected {
+            &:hover:before,
+            &:before {
+                background: $tree-directory-selected-bg;
+            }
+
+            // >>> Switcher
+            .tree-switcher {
+                color: $tree-directory-selected-color;
+            }
+
+            // >>> Title
+            .tree-node-content-wrapper {
+                color: $tree-directory-selected-color;
+                background: transparent;
+            }
+        }
+    }
+}
diff --git a/src/components/Tree/Styles/mixin.scss b/src/components/Tree/Styles/mixin.scss
new file mode 100644
index 000000000..072fd2d75
--- /dev/null
+++ b/src/components/Tree/Styles/mixin.scss
@@ -0,0 +1,34 @@
+@mixin reset-component() {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: var(--text-primary-color);
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5715;
+    list-style: none;
+    font-feature-settings: 'tnum';
+}
+
+@mixin drop-indicator() {
+    .tree-drop-indicator {
+        position: absolute;
+        z-index: 1;
+        height: 2px;
+        background-color: var(--primary-color);
+        border-radius: 1px;
+        pointer-events: none;
+
+        &:after {
+            position: absolute;
+            top: -3px;
+            left: -6px;
+            width: 8px;
+            height: 8px;
+            background-color: transparent;
+            border: 2px solid var(--primary-color);
+            border-radius: 50%;
+            content: '';
+        }
+    }
+}
diff --git a/src/components/Tree/Styles/rtl.scss b/src/components/Tree/Styles/rtl.scss
new file mode 100644
index 000000000..98964b2f1
--- /dev/null
+++ b/src/components/Tree/Styles/rtl.scss
@@ -0,0 +1,64 @@
+.tree {
+    &-rtl {
+        direction: rtl;
+        .tree-node-content-wrapper[draggable='true'] {
+            .tree-drop-indicator {
+                &after {
+                    right: -6px;
+                    left: unset;
+                }
+            }
+        }
+    }
+
+    // ===================== TreeNode =====================
+    .tree-treenode {
+        &-rtl {
+            direction: rtl;
+        }
+    }
+
+    // >>> Switcher
+    &-switcher {
+        &_close {
+            .tree-switcher-icon {
+                svg {
+                    .tree-rtl {
+                        transform: rotate(90deg);
+                    }
+                }
+            }
+        }
+    }
+    // ==================== Show Line =====================
+    &-show-line {
+        // ================ Indent lines ================
+        .tree-indent {
+            &-unit {
+                &:before {
+                    .tree-rtl {
+                        right: auto;
+                        left: -($tree-title-height / 2) - 1px;
+                        border-right: none;
+                        border-left: 1px solid $tree-border-color;
+                    }
+                }
+            }
+        }
+    }
+    // >>> Checkbox
+    &-checkbox {
+        .tree-rtl {
+            margin: (($tree-title-height - 22) / 2) 0 0 8px;
+        }
+    }
+}
+
+.tree-select-tree {
+    // >>> Checkbox
+    &-checkbox {
+        .tree-select-dropdown-rtl {
+            margin: (($tree-title-height - 22) / 2) 0 0 8px;
+        }
+    }
+}
diff --git a/src/components/Tree/Styles/tree.module.scss b/src/components/Tree/Styles/tree.module.scss
new file mode 100644
index 000000000..143724e66
--- /dev/null
+++ b/src/components/Tree/Styles/tree.module.scss
@@ -0,0 +1,292 @@
+@import './mixin';
+@import './directory';
+
+$tree-node-padding: ($space-xs / 2);
+$tree-node-hightlight-color: inherit;
+
+.tree {
+    @include reset-component();
+    background: var(--background-color);
+    border-radius: $tree-border-radius-base;
+    transition: background-color 0.3s;
+
+    &-focused:not(:hover):not(&-active-focused) {
+        background: var(--primary-color);
+    }
+
+    // =================== Virtual List ===================
+    &-list-holder-inner {
+        align-items: flex-start;
+    }
+
+    &.tree-block-node {
+        .tree-list-holder-inner {
+            align-items: stretch;
+
+            // >>> Title
+            .tree-node-content-wrapper {
+                flex: auto;
+            }
+
+            // >>> Drag
+            .tree.dragging {
+                position: relative;
+
+                &:after {
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    bottom: $tree-node-padding;
+                    left: 0;
+                    border: 1px solid var(--primary-color);
+                    opacity: 0;
+                    animation: tree-node-fx-do-not-use 0.3s;
+                    animation-play-state: running;
+                    animation-fill-mode: forwards;
+                    content: '';
+                    pointer-events: none;
+                }
+            }
+        }
+    }
+
+    // ===================== TreeNode =====================
+    .tree {
+        display: flex;
+        align-items: flex-start;
+        padding: 0 0 $tree-node-padding 0;
+        outline: none;
+
+        // Disabled
+        &-disabled {
+            // >>> Title
+            .tree-node-content-wrapper {
+                opacity: $disabled-alpha-value;
+                cursor: not-allowed;
+
+                &:hover {
+                    background: transparent;
+                }
+            }
+        }
+
+        &-active .tree-node-content-wrapper {
+            background: $tree-node-hover-bg;
+        }
+
+        &:not(&-disabled).filter-node .tree-title {
+            color: $tree-node-hightlight-color;
+            font-weight: 500;
+        }
+    }
+
+    // >>> Indent
+    &-indent {
+        align-self: stretch;
+        white-space: nowrap;
+        user-select: none;
+
+        &-unit {
+            display: inline-block;
+            width: $tree-title-height;
+        }
+    }
+
+    // >>> Drag Handler
+    &-draggable-icon {
+        width: $tree-title-height;
+        line-height: $tree-title-height;
+        text-align: center;
+        opacity: 0.2;
+        transition: opacity 0.3s;
+
+        .tree:hover & {
+            opacity: 0.45;
+        }
+    }
+
+    // >>> Switcher
+    &-switcher {
+        .tree-switcher-icon,
+        .tree-select-tree-switcher-icon {
+            display: inline-block;
+            font-size: 10px;
+            vertical-align: baseline;
+
+            svg {
+                transition: transform 0.3s;
+            }
+        }
+
+        position: relative;
+        flex: none;
+        align-self: stretch;
+        width: $tree-title-height;
+        margin: 0;
+        line-height: $tree-title-height;
+        text-align: center;
+        cursor: pointer;
+        user-select: none;
+
+        &-noop {
+            cursor: default;
+        }
+
+        &_close {
+            .tree-switcher-icon {
+                svg {
+                    transform: rotate(-90deg);
+                }
+            }
+        }
+
+        &-loading-icon {
+            color: var(--primary-color);
+        }
+
+        &-leaf-line {
+            position: relative;
+            z-index: 1;
+            display: inline-block;
+            width: 100%;
+            height: 100%;
+            &:before {
+                position: absolute;
+                top: 0;
+                right: 12px;
+                bottom: -$tree-node-padding;
+                margin-left: -1px;
+                border-right: 1px solid #d9d9d9;
+                content: ' ';
+            }
+
+            &:after {
+                position: absolute;
+                width: $tree-title-height - 14px;
+                height: $tree-title-height - 10px;
+                border-bottom: 1px solid #d9d9d9;
+                content: ' ';
+            }
+        }
+    }
+
+    // >>> Checkbox
+    &-checkbox {
+        top: initial;
+        margin: (($tree-title-height - 24) / 2) 8px 0 0;
+    }
+
+    // >>> Title
+    & &-node-content-wrapper {
+        position: relative;
+        z-index: auto;
+        min-height: $tree-title-height;
+        margin: 0;
+        padding: 0 4px;
+        color: inherit;
+        line-height: $tree-title-height;
+        background: transparent;
+        border-radius: $tree-border-radius-base;
+        cursor: pointer;
+        transition: all 0.3s, border 0s, line-height 0s, box-shadow 0s;
+
+        &:hover {
+            background-color: $tree-node-hover-bg;
+        }
+
+        &.tree-node-selected {
+            background-color: $tree-node-selected-bg;
+        }
+
+        // Icon
+        .tree-iconEle {
+            display: inline-block;
+            width: $tree-title-height;
+            height: $tree-title-height;
+            line-height: $tree-title-height;
+            text-align: center;
+            vertical-align: top;
+
+            &:empty {
+                display: none;
+            }
+        }
+    }
+
+    &-unselectable &-node-content-wrapper:hover {
+        background-color: transparent;
+    }
+
+    // ==================== Draggable =====================
+    &-node-content-wrapper {
+        line-height: $tree-title-height;
+        user-select: none;
+
+        @include drop-indicator();
+    }
+
+    .tree.drop-container {
+        > [draggable] {
+            box-shadow: 0 0 0 2px var(--primary-color);
+        }
+    }
+
+    // ==================== Show Line =====================
+    &-show-line {
+        // ================ Indent lines ================
+        .tree-indent {
+            &-unit {
+                position: relative;
+                height: 100%;
+
+                &:before {
+                    position: absolute;
+                    top: 0;
+                    right: ($tree-title-height / 2);
+                    bottom: -$tree-node-padding;
+                    border-right: 1px solid $tree-border-color;
+                    content: '';
+                }
+
+                &-end {
+                    &:before {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        // ============== Cover Background ==============
+        .tree-switcher {
+            background: var(--background-color);
+
+            &-line-icon {
+                vertical-align: -0.15em;
+            }
+        }
+    }
+
+    &-leaf-last {
+        .tree-switcher {
+            &-leaf-line {
+                &:before {
+                    top: auto !important;
+                    bottom: auto !important;
+                    height: $tree-title-height - 10px !important;
+                }
+            }
+        }
+    }
+}
+
+@keyframes tree-node-fx-do-not-use {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@import './rtl';
diff --git a/src/components/Tree/Tests/__snapshots__/directory.test.js.snap b/src/components/Tree/Tests/__snapshots__/directory.test.js.snap
new file mode 100644
index 000000000..f9c97b03b
--- /dev/null
+++ b/src/components/Tree/Tests/__snapshots__/directory.test.js.snap
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2759d3baab8d65d7c30beddae63849bbfd03a21fbbdd05e342d364f17defbdbc
+size 44050278
diff --git a/src/components/Tree/Tests/__snapshots__/index.test.js.snap b/src/components/Tree/Tests/__snapshots__/index.test.js.snap
new file mode 100644
index 000000000..eb24dd6a1
--- /dev/null
+++ b/src/components/Tree/Tests/__snapshots__/index.test.js.snap
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d9582a6ea7b772ed3f54881ccdee762491d2b8e38cbbc240eaf73a41c46fef37
+size 7835601
diff --git a/src/components/Tree/Tests/directory.test.js b/src/components/Tree/Tests/directory.test.js
new file mode 100644
index 000000000..2a55c29d7
--- /dev/null
+++ b/src/components/Tree/Tests/directory.test.js
@@ -0,0 +1,280 @@
+import React from 'react';
+import Enzyme, { mount, render } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { act } from 'react-dom/test-utils';
+import { debounce } from '../../../shared/utilities';
+import Tree from '../index';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const { DirectoryTree, TreeNode } = Tree;
+
+jest.mock('../../../shared/utilities/debounce');
+
+jest.mock('react', () => ({
+    ...jest.requireActual('react'),
+    useLayoutEffect: jest.requireActual('react').useEffect,
+}));
+
+describe('Directory Tree', () => {
+    debounce.mockImplementation((fn) => fn);
+
+    beforeAll(() => {
+        jest.useFakeTimers();
+    });
+
+    afterAll(() => {
+        jest.useRealTimers();
+        debounce.mockRestore();
+    });
+
+    function createTree(props) {
+        return (
+            <DirectoryTree {...props}>
+                <TreeNode key="0-0">
+                    <TreeNode key="0-0-0" />
+                    <TreeNode key="0-0-1" />
+                </TreeNode>
+                <TreeNode key="0-1">
+                    <TreeNode key="0-1-0" />
+                    <TreeNode key="0-1-1" />
+                </TreeNode>
+            </DirectoryTree>
+        );
+    }
+
+    describe('expand', () => {
+        it('click', () => {
+            const wrapper = mount(createTree());
+
+            act(() => {
+                wrapper
+                    .find(TreeNode)
+                    .find('.tree-node-content-wrapper')
+                    .at(0)
+                    .simulate('click');
+            });
+            expect(wrapper.render()).toMatchSnapshot();
+            jest.runAllTimers();
+            act(() => {
+                wrapper
+                    .find(TreeNode)
+                    .find('.tree-node-content-wrapper')
+                    .at(0)
+                    .simulate('click');
+            });
+            expect(wrapper.render()).toMatchSnapshot();
+        });
+
+        it('double click', () => {
+            const wrapper = mount(createTree({ expandAction: 'doubleClick' }));
+
+            act(() => {
+                wrapper
+                    .find(TreeNode)
+                    .find('.tree-node-content-wrapper')
+                    .at(0)
+                    .simulate('doubleClick');
+            });
+            expect(wrapper.render()).toMatchSnapshot();
+            jest.runAllTimers();
+            act(() => {
+                wrapper
+                    .find(TreeNode)
+                    .find('.tree-node-content-wrapper')
+                    .at(0)
+                    .simulate('doubleClick');
+            });
+            expect(wrapper.render()).toMatchSnapshot();
+        });
+
+        describe('with state control', () => {
+            class StateDirTree extends React.Component {
+                state = {
+                    expandedKeys: [],
+                };
+
+                onExpand = (expandedKeys) => {
+                    this.setState({ expandedKeys });
+                };
+
+                render() {
+                    const { expandedKeys } = this.state;
+
+                    return (
+                        <DirectoryTree
+                            expandedKeys={expandedKeys}
+                            onExpand={this.onExpand}
+                            {...this.props}
+                        >
+                            <TreeNode key="0-0" title="parent">
+                                <TreeNode key="0-0-0" title="children" />
+                            </TreeNode>
+                        </DirectoryTree>
+                    );
+                }
+            }
+
+            ['click', 'doubleClick'].forEach((action) => {
+                it(action, () => {
+                    const wrapper = mount(
+                        <StateDirTree expandAction={action} />
+                    );
+
+                    act(() => {
+                        wrapper
+                            .find(TreeNode)
+                            .find('.tree-node-content-wrapper')
+                            .at(0)
+                            .simulate(action);
+                    });
+                    jest.runAllTimers();
+                    expect(wrapper.render()).toMatchSnapshot();
+                });
+            });
+        });
+    });
+
+    it('defaultExpandAll', () => {
+        const wrapper = render(createTree({ defaultExpandAll: true }));
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('DirectoryTree should expend all when use treeData and defaultExpandAll is true', () => {
+        const treeData = [
+            {
+                key: '0-0-0',
+                title: 'Folder',
+                children: [
+                    {
+                        title: 'Folder2',
+                        key: '0-0-1',
+                        children: [
+                            {
+                                title: 'File',
+                                key: '0-0-2',
+                                isLeaf: true,
+                            },
+                        ],
+                    },
+                ],
+            },
+        ];
+        const wrapper = render(
+            createTree({ defaultExpandAll: true, treeData })
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('defaultExpandParent', () => {
+        const wrapper = render(createTree({ defaultExpandParent: true }));
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('expandedKeys update', () => {
+        const wrapper = mount(createTree());
+        act(() => {
+            wrapper.setProps({ expandedKeys: ['0-1'] });
+        });
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('selectedKeys update', () => {
+        const wrapper = mount(createTree({ defaultExpandAll: true }));
+        act(() => {
+            wrapper.setProps({ selectedKeys: ['0-1-0'] });
+        });
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('group select', () => {
+        let nativeEventProto = null;
+        const onSelect = jest.fn();
+        const wrapper = mount(
+            createTree({
+                defaultExpandAll: true,
+                expandAction: 'doubleClick',
+                multiple: true,
+                onClick: (e) => {
+                    nativeEventProto = Object.getPrototypeOf(e.nativeEvent);
+                },
+                onSelect,
+            })
+        );
+
+        act(() => {
+            wrapper
+                .find(TreeNode)
+                .find('.tree-node-content-wrapper')
+                .at(0)
+                .simulate('click');
+        });
+        expect(onSelect.mock.calls[0][1].selected).toBeTruthy();
+        expect(onSelect.mock.calls[0][1].selectedNodes.length).toBe(1);
+
+        // Click twice should keep selected
+        act(() => {
+            wrapper
+                .find(TreeNode)
+                .find('.tree-node-content-wrapper')
+                .at(0)
+                .simulate('click');
+        });
+        expect(onSelect.mock.calls[1][1].selected).toBeTruthy();
+        expect(onSelect.mock.calls[0][0]).toEqual(onSelect.mock.calls[1][0]);
+        expect(onSelect.mock.calls[1][1].selectedNodes.length).toBe(1);
+
+        // React not simulate full of NativeEvent. Hook it.
+        // Ref: https://github.com/facebook/react/blob/master/packages/react-dom/src/test-utils/ReactTestUtils.js#L360
+        nativeEventProto.ctrlKey = true;
+
+        act(() => {
+            wrapper
+                .find(TreeNode)
+                .find('.tree-node-content-wrapper')
+                .at(1)
+                .simulate('click');
+        });
+        expect(wrapper.render()).toMatchSnapshot();
+        expect(onSelect.mock.calls[2][0].length).toBe(2);
+        expect(onSelect.mock.calls[2][1].selected).toBeTruthy();
+        expect(onSelect.mock.calls[2][1].selectedNodes.length).toBe(2);
+
+        delete nativeEventProto.ctrlKey;
+        nativeEventProto.shiftKey = true;
+
+        act(() => {
+            wrapper
+                .find(TreeNode)
+                .find('.tree-node-content-wrapper')
+                .at(4)
+                .simulate('click');
+        });
+        expect(wrapper.render()).toMatchSnapshot();
+        expect(onSelect.mock.calls[3][0].length).toBe(5);
+        expect(onSelect.mock.calls[3][1].selected).toBeTruthy();
+        expect(onSelect.mock.calls[3][1].selectedNodes.length).toBe(5);
+
+        delete nativeEventProto.shiftKey;
+    });
+
+    it('onDoubleClick', () => {
+        const onDoubleClick = jest.fn();
+        const wrapper = mount(createTree({ onDoubleClick }));
+        act(() => {
+            wrapper
+                .find(TreeNode)
+                .find('.tree-node-content-wrapper')
+                .at(0)
+                .simulate('doubleclick');
+        });
+        expect(onDoubleClick).toBeCalled();
+    });
+
+    it('ref support', () => {
+        const treeRef = React.createRef();
+        mount(createTree({ ref: treeRef }));
+
+        expect('scrollTo' in treeRef.current).toBeTruthy();
+    });
+});
diff --git a/src/components/Tree/Tests/dropIndicator.test.tsx b/src/components/Tree/Tests/dropIndicator.test.tsx
new file mode 100644
index 000000000..818cdd957
--- /dev/null
+++ b/src/components/Tree/Tests/dropIndicator.test.tsx
@@ -0,0 +1,63 @@
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import dropIndicatorRender, { offset } from '../Utils/dropIndicator';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('dropIndicatorRender', () => {
+    it('work with dropPosition before (1)', () => {
+        const indicator = dropIndicatorRender({
+            dropPosition: 1,
+            dropLevelOffset: 0,
+            indent: 24,
+            direction: 'ltr',
+        });
+        const wrapper = mount(indicator);
+        expect(wrapper.find('div').props().style!.bottom).toEqual(-3);
+    });
+    it('work with dropPosition inner (-0)', () => {
+        const indicator = dropIndicatorRender({
+            dropPosition: 0,
+            dropLevelOffset: 0,
+            indent: 24,
+            direction: 'ltr',
+        });
+        const wrapper = mount(indicator);
+        expect(wrapper.find('div').props().style!.bottom).toEqual(-3);
+        expect(wrapper.find('div').props().style!.left).toEqual(24 + offset);
+    });
+    it('work with dropPosition after (-1)', () => {
+        const indicator = dropIndicatorRender({
+            dropPosition: -1,
+            dropLevelOffset: 0,
+            indent: 24,
+            direction: 'ltr',
+        });
+        const wrapper = mount(indicator);
+        expect(wrapper.find('div').props().style!.top).toEqual(-3);
+    });
+    it('work with drop level', () => {
+        const indicator = dropIndicatorRender({
+            dropPosition: -1,
+            dropLevelOffset: 2,
+            indent: 24,
+            direction: 'ltr',
+        });
+        const wrapper = mount(indicator);
+        expect(wrapper.find('div').props().style!.left).toEqual(
+            -2 * 24 + offset
+        );
+    });
+    it('work with drop level (rtl)', () => {
+        const indicator = dropIndicatorRender({
+            dropPosition: -1,
+            dropLevelOffset: 2,
+            indent: 24,
+            direction: 'rtl',
+        });
+        const wrapper = mount(indicator);
+        expect(wrapper.find('div').props().style!.right).toEqual(
+            -2 * 24 + offset
+        );
+    });
+});
diff --git a/src/components/Tree/Tests/index.test.js b/src/components/Tree/Tests/index.test.js
new file mode 100644
index 000000000..a70a346fe
--- /dev/null
+++ b/src/components/Tree/Tests/index.test.js
@@ -0,0 +1,203 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Tree from '../index';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const { TreeNode } = Tree;
+
+describe('Tree', () => {
+    it('icon and switcherIcon of Tree with showLine should render correctly', () => {
+        const wrapper = mount(
+            <Tree showLine showIcon>
+                <TreeNode icon="icon" switcherIcon="switcherIcon" key="0-0">
+                    <TreeNode
+                        icon="icon"
+                        switcherIcon="switcherIcon"
+                        key="0-0-0"
+                    />
+                    <TreeNode switcherIcon="switcherIcon" key="0-0-1" />
+                    <TreeNode icon="icon" key="0-0-2" />
+                    <TreeNode key="0-0-3" />
+                </TreeNode>
+                <TreeNode switcherIcon="switcherIcon" key="0-1">
+                    <TreeNode
+                        icon="icon"
+                        switcherIcon="switcherIcon"
+                        key="0-0-0"
+                    />
+                    <TreeNode switcherIcon="switcherIcon" key="0-0-1" />
+                    <TreeNode icon="icon" key="0-0-2" />
+                    <TreeNode key="0-0-3" />
+                </TreeNode>
+                <TreeNode key="0-2">
+                    <TreeNode
+                        icon="icon"
+                        switcherIcon="switcherIcon"
+                        key="0-0-0"
+                    />
+                    <TreeNode switcherIcon="switcherIcon" key="0-0-1" />
+                    <TreeNode icon="icon" key="0-0-2" />
+                    <TreeNode key="0-0-3" />
+                </TreeNode>
+            </Tree>
+        );
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('switcherIcon in Tree should not render at leaf nodes', () => {
+        const wrapper = mount(
+            <Tree
+                switcherIcon={<i className="switcherIcon" />}
+                defaultExpandAll
+            >
+                <TreeNode icon="icon">
+                    <TreeNode
+                        id="node1"
+                        title="node1"
+                        icon="icon"
+                        key="0-0-2"
+                    />
+                    <TreeNode id="node2" title="node2" key="0-0-3" />
+                </TreeNode>
+            </Tree>
+        );
+        expect(wrapper.find('.switcherIcon').length).toBe(1);
+    });
+
+    it('switcherIcon in Tree could be string', () => {
+        const wrapper = mount(
+            <Tree switcherIcon="switcherIcon" defaultExpandAll>
+                <TreeNode icon="icon">
+                    <TreeNode
+                        id="node1"
+                        title="node1"
+                        icon="icon"
+                        key="0-0-2"
+                    />
+                    <TreeNode id="node2" title="node2" key="0-0-3" />
+                </TreeNode>
+            </Tree>
+        );
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('switcherIcon should be loading icon when loadData', () => {
+        const onLoadData = () =>
+            new Promise((resolve) => {
+                setTimeout(() => {
+                    resolve();
+                }, 1000);
+            });
+        const wrapper = mount(
+            <Tree
+                switcherIcon="switcherIcon"
+                defaultExpandAll
+                loadData={onLoadData}
+            >
+                <TreeNode icon="icon">
+                    <TreeNode
+                        id="node1"
+                        title="node1"
+                        icon="icon"
+                        key="0-0-2"
+                    />
+                    <TreeNode id="node2" title="node2" key="0-0-3" />
+                </TreeNode>
+            </Tree>
+        );
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('switcherIcon in Tree could be render prop function', () => {
+        const wrapper = mount(
+            <Tree
+                switcherIcon={(expanded) =>
+                    expanded ? (
+                        <span className="open" />
+                    ) : (
+                        <span className="close" />
+                    )
+                }
+                defaultExpandAll
+            >
+                <TreeNode icon="icon">
+                    <TreeNode
+                        id="node1"
+                        title="node1"
+                        icon="icon"
+                        key="0-0-2"
+                    />
+                    <TreeNode id="node2" title="node2" key="0-0-3" />
+                </TreeNode>
+            </Tree>
+        );
+        expect(wrapper.find('.open').length).toBe(1);
+    });
+
+    it('showLine is object type should render correctly', () => {
+        const wrapper = mount(
+            <Tree
+                showLine={{ showLeafIcon: false }}
+                defaultExpandedKeys={['0-0-0']}
+            >
+                <TreeNode title="parent 1" key="0-0">
+                    <TreeNode title="parent 1-0" key="0-0-0">
+                        <TreeNode title="leaf" key="0-0-0-0" />
+                        <TreeNode title="leaf" key="0-0-0-1" />
+                        <TreeNode title="leaf" key="0-0-0-2" />
+                    </TreeNode>
+                    <TreeNode title="parent 1-1" key="0-0-1">
+                        <TreeNode title="leaf" key="0-0-1-0" />
+                    </TreeNode>
+                    <TreeNode title="parent 1-2" key="0-0-2">
+                        <TreeNode title="leaf" key="0-0-2-0" />
+                        <TreeNode title="leaf" key="0-0-2-1" />
+                    </TreeNode>
+                </TreeNode>
+            </Tree>
+        );
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    describe('draggable', () => {
+        const dragTreeData = [
+            {
+                title: 'bamboo',
+                key: 'bamboo',
+            },
+        ];
+
+        it('hide icon', () => {
+            const wrapper = mount(
+                <Tree treeData={dragTreeData} draggable={{ icon: false }} />
+            );
+            expect(wrapper.exists('.anticon-holder')).toBeFalsy();
+        });
+
+        it('customize icon', () => {
+            const wrapper = mount(
+                <Tree
+                    treeData={dragTreeData}
+                    draggable={{ icon: <span className="little" /> }}
+                />
+            );
+            expect(wrapper.exists('.little')).toBeTruthy();
+        });
+
+        it('nodeDraggable', () => {
+            const nodeDraggable = jest.fn(() => false);
+            mount(
+                <Tree treeData={dragTreeData} draggable={{ nodeDraggable }} />
+            );
+            expect(nodeDraggable).toHaveBeenCalledWith(dragTreeData[0]);
+        });
+
+        it('nodeDraggable func', () => {
+            const nodeDraggable = jest.fn(() => false);
+            mount(<Tree treeData={dragTreeData} draggable={nodeDraggable} />);
+            expect(nodeDraggable).toHaveBeenCalledWith(dragTreeData[0]);
+        });
+    });
+});
diff --git a/src/components/Tree/Tests/type.test.tsx b/src/components/Tree/Tests/type.test.tsx
new file mode 100644
index 000000000..9ca7ba808
--- /dev/null
+++ b/src/components/Tree/Tests/type.test.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import type { BasicDataNode } from '../Internal/index';
+import Tree from '../index';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Tree.TypeScript', () => {
+    it('without generic', () => {
+        const wrapper = mount(
+            <Tree
+                treeData={[
+                    {
+                        title: 'Bamboo',
+                        key: 'bamboo',
+                        children: [
+                            {
+                                title: 'Little',
+                                key: 'little',
+                            },
+                        ],
+                    },
+                ]}
+            />
+        );
+
+        expect(wrapper).toBeTruthy();
+    });
+
+    it('support generic', () => {
+        interface MyDataNode extends BasicDataNode {
+            bamboo: string;
+            list?: MyDataNode[];
+        }
+
+        const wrapper = mount(
+            <Tree<MyDataNode>
+                treeData={[
+                    {
+                        bamboo: 'good',
+                        list: [
+                            {
+                                bamboo: 'well',
+                            },
+                        ],
+                    },
+                ]}
+            />
+        );
+
+        expect(wrapper).toBeTruthy();
+    });
+});
diff --git a/src/components/Tree/Tests/util.test.js b/src/components/Tree/Tests/util.test.js
new file mode 100644
index 000000000..59bfc4863
--- /dev/null
+++ b/src/components/Tree/Tests/util.test.js
@@ -0,0 +1,60 @@
+import { calcRangeKeys } from '../Utils/dictUtil';
+
+describe('Tree util', () => {
+    describe('calcRangeKeys', () => {
+        const treeData = [
+            { key: '0-0', children: [{ key: '0-0-0' }, { key: '0-0-1' }] },
+            { key: '0-1', children: [{ key: '0-1-0' }, { key: '0-1-1' }] },
+            {
+                key: '0-2',
+                children: [
+                    {
+                        key: '0-2-0',
+                        children: [
+                            { key: '0-2-0-0' },
+                            { key: '0-2-0-1' },
+                            { key: '0-2-0-2' },
+                        ],
+                    },
+                ],
+            },
+        ];
+
+        it('calc range keys', () => {
+            const keys = calcRangeKeys({
+                treeData,
+                expandedKeys: ['0-0', '0-2', '0-2-0'],
+                startKey: '0-2-0-1',
+                endKey: '0-0-0',
+            });
+            const target = [
+                '0-0-0',
+                '0-0-1',
+                '0-1',
+                '0-2',
+                '0-2-0',
+                '0-2-0-0',
+                '0-2-0-1',
+            ];
+            expect(keys.sort()).toEqual(target.sort());
+        });
+
+        it('return startKey when startKey === endKey', () => {
+            const keys = calcRangeKeys({
+                treeData,
+                expandedKeys: ['0-0', '0-2', '0-2-0'],
+                startKey: '0-0-0',
+                endKey: '0-0-0',
+            });
+            expect(keys).toEqual(['0-0-0']);
+        });
+
+        it('return empty array without startKey and endKey', () => {
+            const keys = calcRangeKeys({
+                treeData,
+                expandedKeys: ['0-0', '0-2', '0-2-0'],
+            });
+            expect(keys).toEqual([]);
+        });
+    });
+});
diff --git a/src/components/Tree/Tree.tsx b/src/components/Tree/Tree.tsx
new file mode 100644
index 000000000..50964aa7e
--- /dev/null
+++ b/src/components/Tree/Tree.tsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import OcTree, { TreeNode } from './Internal';
+import { mergeClasses } from '../../shared/utilities';
+import { DraggableConfig, OcTreeNodeProps, TreeProps } from './Tree.types';
+import type { BasicDataNode, DataNode } from './Internal/OcTree.types';
+import DirectoryTree from './DirectoryTree';
+import collapseMotion from '../Motion';
+import renderSwitcherIcon from './Utils/iconUtil';
+import dropIndicatorRender from './Utils/dropIndicator';
+import { Icon, IconName, IconSize } from '../Icon';
+import { useCanvasDirection } from '../../hooks/useCanvasDirection';
+
+import styles from './Styles/tree.module.scss';
+
+type CompoundedComponent = (<T extends BasicDataNode | DataNode = DataNode>(
+    props: React.PropsWithChildren<TreeProps<T>> & { ref?: React.Ref<OcTree> }
+) => React.ReactElement) & {
+    defaultProps: Partial<React.PropsWithChildren<TreeProps<any>>>;
+    TreeNode: typeof TreeNode;
+    DirectoryTree: typeof DirectoryTree;
+};
+
+const Tree = React.forwardRef<OcTree, TreeProps>((props, ref) => {
+    const {
+        classNames,
+        showIcon,
+        showLine,
+        switcherIcon,
+        blockNode,
+        children,
+        checkable,
+        selectable,
+        draggable,
+        virtual,
+    } = props;
+    const htmlDir: string = useCanvasDirection();
+    const newProps = {
+        ...props,
+        showLine: Boolean(showLine),
+        dropIndicatorRender,
+    };
+
+    const draggableConfig = React.useMemo(() => {
+        if (!draggable) {
+            return false;
+        }
+
+        let mergedDraggable: DraggableConfig = {};
+        switch (typeof draggable) {
+            case 'function':
+                mergedDraggable.nodeDraggable = draggable;
+                break;
+
+            case 'object':
+                mergedDraggable = { ...draggable };
+                break;
+
+            default:
+            // Do nothing
+        }
+
+        if (mergedDraggable.icon !== false) {
+            mergedDraggable.icon = mergedDraggable.icon || (
+                <Icon
+                    color={'#ffffff'}
+                    path={IconName.mdiHandBackRight}
+                    size={IconSize.Medium}
+                />
+            );
+        }
+
+        return mergedDraggable;
+    }, [draggable]);
+
+    return (
+        <OcTree
+            itemHeight={20}
+            ref={ref}
+            virtual={virtual}
+            {...newProps}
+            classNames={mergeClasses([
+                { ['tree-icon-hide']: !showIcon },
+                { [styles.treeBlockNode]: blockNode },
+                { [styles.treeUnselectable]: !selectable },
+                { [styles.treeRtl]: htmlDir === 'rtl' },
+                classNames,
+            ])}
+            direction={htmlDir}
+            checkable={
+                checkable ? (
+                    <span className={'tree-checkbox-inner'} />
+                ) : (
+                    checkable
+                )
+            }
+            selectable={selectable}
+            switcherIcon={(nodeProps: OcTreeNodeProps) =>
+                renderSwitcherIcon(switcherIcon, showLine, nodeProps)
+            }
+            draggable={draggableConfig as any}
+        >
+            {children}
+        </OcTree>
+    );
+}) as unknown as CompoundedComponent;
+
+Tree.TreeNode = TreeNode;
+
+Tree.DirectoryTree = DirectoryTree;
+
+Tree.defaultProps = {
+    checkable: false,
+    selectable: true,
+    showIcon: false,
+    motion: {
+        ...collapseMotion,
+        motionAppear: false,
+    },
+    blockNode: false,
+};
+
+export default Tree;
diff --git a/src/components/Tree/Tree.types.ts b/src/components/Tree/Tree.types.ts
new file mode 100644
index 000000000..d0b0e3296
--- /dev/null
+++ b/src/components/Tree/Tree.types.ts
@@ -0,0 +1,133 @@
+import type {
+    BasicDataNode,
+    DataNode,
+    Key,
+    OcTreeProps,
+} from './Internal/OcTree.types';
+
+export type SwitcherIcon =
+    | React.ReactNode
+    | ((props: { expanded: boolean }) => React.ReactNode);
+
+export interface OcTreeNodeAttribute {
+    eventKey: string;
+    classNames: string;
+    expanded: boolean;
+    selected: boolean;
+    checked: boolean;
+    halfChecked: boolean;
+    children: React.ReactNode;
+    title: React.ReactNode;
+    pos: string;
+    dragOver: boolean;
+    dragOverGapTop: boolean;
+    dragOverGapBottom: boolean;
+    isLeaf: boolean;
+    selectable: boolean;
+    disabled: boolean;
+    disableCheckbox: boolean;
+}
+
+export interface OcTreeNodeProps {
+    classNames?: string;
+    checkable?: boolean;
+    disabled?: boolean;
+    disableCheckbox?: boolean;
+    title?: string | React.ReactNode;
+    key?: Key;
+    eventKey?: string;
+    isLeaf?: boolean;
+    checked?: boolean;
+    expanded?: boolean;
+    loading?: boolean;
+    selected?: boolean;
+    selectable?: boolean;
+    icon?:
+        | ((treeNode: OcTreeNodeAttribute) => React.ReactNode)
+        | React.ReactNode;
+    children?: React.ReactNode;
+    [customProp: string]: any;
+}
+
+export interface OcTreeNode extends React.Component<OcTreeNodeProps, {}> {}
+
+export interface OcTreeNodeBaseEvent {
+    node: OcTreeNode;
+    nativeEvent: MouseEvent;
+}
+
+export interface OcTreeNodeCheckedEvent extends OcTreeNodeBaseEvent {
+    event: 'check';
+    checked?: boolean;
+    checkedNodes?: OcTreeNode[];
+}
+
+export interface OcTreeNodeSelectedEvent extends OcTreeNodeBaseEvent {
+    event: 'select';
+    selected?: boolean;
+    selectedNodes?: DataNode[];
+}
+
+export interface OcTreeNodeExpandedEvent extends OcTreeNodeBaseEvent {
+    expanded?: boolean;
+}
+
+export interface OcTreeNodeMouseEvent {
+    node: OcTreeNode;
+    event: React.DragEvent<HTMLElement>;
+}
+
+export interface OcTreeNodeDragEnterEvent extends OcTreeNodeMouseEvent {
+    expandedKeys: Key[];
+}
+
+export interface OcTreeNodeDropEvent {
+    node: OcTreeNode;
+    dragNode: OcTreeNode;
+    dragNodesKeys: Key[];
+    dropPosition: number;
+    dropToGap?: boolean;
+    event: React.MouseEvent<HTMLElement>;
+}
+
+// [Legacy] Compatible for v3
+export type TreeNodeNormal = DataNode;
+
+export type DraggableFn = (node: OcTreeNode) => boolean;
+
+export interface DraggableConfig {
+    icon?: React.ReactNode | false;
+    nodeDraggable?: DraggableFn;
+}
+
+export interface TreeProps<T extends BasicDataNode = DataNode>
+    extends Omit<OcTreeProps<T>, 'showLine' | 'direction' | 'draggable'> {
+    showLine?: boolean | { showLeafIcon: boolean };
+    classNames?: string;
+    multiple?: boolean;
+    autoExpandParent?: boolean;
+    checkStrictly?: boolean;
+    checkable?: boolean;
+    disabled?: boolean;
+    defaultExpandAll?: boolean;
+    defaultExpandParent?: boolean;
+    defaultExpandedKeys?: Key[];
+    expandedKeys?: Key[];
+    checkedKeys?: Key[] | { checked: Key[]; halfChecked: Key[] };
+    defaultCheckedKeys?: Key[];
+    selectedKeys?: Key[];
+    defaultSelectedKeys?: Key[];
+    selectable?: boolean;
+    filterOcTreeNode?: (node: OcTreeNode) => boolean;
+    loadedKeys?: Key[];
+    draggable?: DraggableFn | boolean | DraggableConfig;
+    style?: React.CSSProperties;
+    showIcon?: boolean;
+    icon?:
+        | ((nodeProps: OcTreeNodeAttribute) => React.ReactNode)
+        | React.ReactNode;
+    switcherIcon?: SwitcherIcon;
+    children?: React.ReactNode;
+    blockNode?: boolean;
+    virtual?: boolean;
+}
diff --git a/src/components/Tree/Utils/dictUtil.ts b/src/components/Tree/Utils/dictUtil.ts
new file mode 100644
index 000000000..6b297aea2
--- /dev/null
+++ b/src/components/Tree/Utils/dictUtil.ts
@@ -0,0 +1,91 @@
+import type { DataNode, Key } from '../Internal/OcTree.types';
+
+enum Record {
+    None,
+    Start,
+    End,
+}
+
+function traverseNodesKey(
+    treeData: DataNode[],
+    callback: (key: Key | number | null, node: DataNode) => boolean
+) {
+    function processNode(dataNode: DataNode) {
+        const { key, children } = dataNode;
+        if (callback(key, dataNode) !== false) {
+            traverseNodesKey(children || [], callback);
+        }
+    }
+
+    treeData.forEach(processNode);
+}
+
+export function calcRangeKeys({
+    treeData,
+    expandedKeys,
+    startKey,
+    endKey,
+}: {
+    treeData: DataNode[];
+    expandedKeys: Key[];
+    startKey?: Key;
+    endKey?: Key;
+}): Key[] {
+    const keys: Key[] = [];
+    let record: Record = Record.None;
+
+    if (startKey && startKey === endKey) {
+        return [startKey];
+    }
+    if (!startKey || !endKey) {
+        return [];
+    }
+
+    function matchKey(key: Key) {
+        return key === startKey || key === endKey;
+    }
+
+    traverseNodesKey(treeData, (key: Key) => {
+        if (record === Record.End) {
+            return false;
+        }
+
+        if (matchKey(key)) {
+            // Match test
+            keys.push(key);
+
+            if (record === Record.None) {
+                record = Record.Start;
+            } else if (record === Record.Start) {
+                record = Record.End;
+                return false;
+            }
+        } else if (record === Record.Start) {
+            // Append selection
+            keys.push(key);
+        }
+
+        if (expandedKeys.indexOf(key) === -1) {
+            return false;
+        }
+
+        return true;
+    });
+
+    return keys;
+}
+
+export function convertDirectoryKeysToNodes(treeData: DataNode[], keys: Key[]) {
+    const restKeys: Key[] = [...keys];
+    const nodes: DataNode[] = [];
+    traverseNodesKey(treeData, (key: Key, node: DataNode) => {
+        const index = restKeys.indexOf(key);
+        if (index !== -1) {
+            nodes.push(node);
+            restKeys.splice(index, 1);
+        }
+
+        return !!restKeys.length;
+    });
+    return nodes;
+}
diff --git a/src/components/Tree/Utils/dropIndicator.tsx b/src/components/Tree/Utils/dropIndicator.tsx
new file mode 100644
index 000000000..7dea7e036
--- /dev/null
+++ b/src/components/Tree/Utils/dropIndicator.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import styles from '../Styles/tree.module.scss';
+
+export const offset = 4;
+
+export default function dropIndicatorRender(props: {
+    dropPosition: -1 | 0 | 1;
+    dropLevelOffset: number;
+    indent: number;
+    direction: 'ltr' | 'rtl';
+}) {
+    const { dropPosition, dropLevelOffset, indent, direction = 'ltr' } = props;
+    const startPosition = direction === 'ltr' ? 'left' : 'right';
+    const endPosition = direction === 'ltr' ? 'right' : 'left';
+    const style: React.CSSProperties = {
+        [startPosition]: -dropLevelOffset * indent + offset,
+        [endPosition]: 0,
+    };
+    switch (dropPosition) {
+        case -1:
+            style.top = -3;
+            break;
+        case 1:
+            style.bottom = -3;
+            break;
+        default:
+            // dropPosition === 0
+            style.bottom = -3;
+            style[startPosition] = indent + offset;
+            break;
+    }
+    return <div style={style} className={styles.treeDropIndicator} />;
+}
diff --git a/src/components/Tree/Utils/iconUtil.tsx b/src/components/Tree/Utils/iconUtil.tsx
new file mode 100644
index 000000000..459c0f8be
--- /dev/null
+++ b/src/components/Tree/Utils/iconUtil.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import type { OcTreeNodeProps, SwitcherIcon } from '../Tree.types';
+import {
+    cloneElement,
+    isValidElement,
+    mergeClasses,
+} from '../../../shared/utilities';
+import { Icon, IconName, IconSize } from '../../Icon';
+import { Spinner, SpinnerSize } from '../../Spinner';
+
+import styles from '../Styles/tree.module.scss';
+
+export default function renderSwitcherIcon(
+    switcherIcon: SwitcherIcon,
+    showLine: boolean | { showLeafIcon: boolean } | undefined,
+    treeNodeProps: OcTreeNodeProps
+): React.ReactNode {
+    const { isLeaf, expanded, loading } = treeNodeProps;
+
+    if (loading) {
+        return (
+            <Spinner
+                classNames={styles.treeSwitcherLoadingIcon}
+                size={SpinnerSize.Small}
+            />
+        );
+    }
+    let showLeafIcon;
+    if (showLine && typeof showLine === 'object') {
+        showLeafIcon = showLine.showLeafIcon;
+    }
+    if (isLeaf) {
+        if (showLine) {
+            if (typeof showLine === 'object' && !showLeafIcon) {
+                return <span className={styles.treeSwitcherLeafLine} />;
+            }
+            return (
+                <Icon
+                    classNames={styles.treeSwitcherLineIcon}
+                    path={IconName.mdiFileDocumentOutline}
+                    size={IconSize.Small}
+                />
+            );
+        }
+        return null;
+    }
+
+    const switcherCls = styles.treeSwitcherIcon;
+
+    const switcher =
+        typeof switcherIcon === 'function'
+            ? switcherIcon({ expanded: !!expanded })
+            : switcherIcon;
+
+    if (switcher && isValidElement(switcher)) {
+        return cloneElement(switcher, {
+            className: mergeClasses([
+                (switcher as any).props.className || '',
+                switcherCls,
+            ]),
+        });
+    }
+
+    if (switcher) {
+        return switcher;
+    }
+
+    if (showLine) {
+        return expanded ? (
+            <Icon
+                classNames={styles.treeSwitcherLineIcon}
+                path={IconName.mdiMinusBoxOutline}
+                size={IconSize.Small}
+            />
+        ) : (
+            <Icon
+                classNames={styles.treeSwitcherLineIcon}
+                path={IconName.mdiPlusBoxOutline}
+                size={IconSize.Small}
+            />
+        );
+    }
+    return (
+        <Icon
+            classNames={switcherCls}
+            path={IconName.mdiChevronDown}
+            size={IconSize.Small}
+        />
+    );
+}
diff --git a/src/components/Tree/index.tsx b/src/components/Tree/index.tsx
new file mode 100644
index 000000000..4c3621f4e
--- /dev/null
+++ b/src/components/Tree/index.tsx
@@ -0,0 +1,21 @@
+import Tree from './Tree';
+
+export { EventDataNode, DataNode } from './Internal/OcTree.types';
+
+export {
+    TreeProps,
+    OcTreeNode,
+    OcTreeNodeMouseEvent,
+    OcTreeNodeExpandedEvent,
+    OcTreeNodeCheckedEvent,
+    OcTreeNodeSelectedEvent,
+    OcTreeNodeAttribute,
+    OcTreeNodeProps,
+} from './Tree.types';
+
+export {
+    ExpandAction as DirectoryTreeExpandAction,
+    DirectoryTreeProps,
+} from './DirectoryTree';
+
+export default Tree;
diff --git a/src/components/VirtualList/Filler.tsx b/src/components/VirtualList/Filler.tsx
new file mode 100644
index 000000000..49d099361
--- /dev/null
+++ b/src/components/VirtualList/Filler.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { FillerProps } from './VirtualList.types';
+import { ResizeObserver } from '../../shared/ResizeObserver/ResizeObserver';
+import { mergeClasses } from '../../shared/utilities';
+
+/**
+ * Filler component to provide the scroll content real height.
+ */
+const Filler = React.forwardRef(
+    (
+        { height, offset, children, onInnerResize }: FillerProps,
+        ref: React.Ref<HTMLDivElement>
+    ) => {
+        let outerStyle: React.CSSProperties = {};
+
+        let innerStyle: React.CSSProperties = {
+            display: 'flex',
+            flexDirection: 'column',
+        };
+
+        if (offset !== undefined) {
+            outerStyle = { height, position: 'relative', overflow: 'hidden' };
+
+            innerStyle = {
+                ...innerStyle,
+                transform: `translateY(${offset}px)`,
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                top: 0,
+            };
+        }
+
+        return (
+            <div style={outerStyle}>
+                <ResizeObserver
+                    onResize={({ offsetHeight }) => {
+                        if (offsetHeight && onInnerResize) {
+                            onInnerResize();
+                        }
+                    }}
+                >
+                    <div
+                        style={innerStyle}
+                        className={mergeClasses(['virtual-list-holder-inner'])}
+                        ref={ref}
+                    >
+                        {children}
+                    </div>
+                </ResizeObserver>
+            </div>
+        );
+    }
+);
+
+Filler.displayName = 'Filler';
+
+export default Filler;
diff --git a/src/components/VirtualList/Item.tsx b/src/components/VirtualList/Item.tsx
new file mode 100644
index 000000000..2413aa524
--- /dev/null
+++ b/src/components/VirtualList/Item.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { ItemProps } from './VirtualList.types';
+
+export function Item({ children, setRef }: ItemProps) {
+    const refFunc = React.useCallback((node) => {
+        setRef(node);
+    }, []);
+
+    return React.cloneElement(children, {
+        ref: refFunc,
+    });
+}
diff --git a/src/components/VirtualList/ScrollBar.tsx b/src/components/VirtualList/ScrollBar.tsx
new file mode 100644
index 000000000..80d3904c2
--- /dev/null
+++ b/src/components/VirtualList/ScrollBar.tsx
@@ -0,0 +1,236 @@
+import React from 'react';
+import {
+    MIN_SCROLL_BAR_SIZE,
+    ScrollBarProps,
+    ScrollBarState,
+} from './VirtualList.types';
+import {
+    mergeClasses,
+    requestAnimationFrameWrapper,
+} from '../../shared/utilities';
+
+function getPageY(e: React.MouseEvent | MouseEvent | TouchEvent) {
+    return 'touches' in e ? e.touches[0].pageY : e.pageY;
+}
+
+export class ScrollBar extends React.Component<ScrollBarProps, ScrollBarState> {
+    moveRaf: number = null;
+
+    scrollbarRef = React.createRef<HTMLDivElement>();
+
+    thumbRef = React.createRef<HTMLDivElement>();
+
+    visibleTimeout: ReturnType<typeof setTimeout> = null;
+
+    state: ScrollBarState = {
+        dragging: false,
+        pageY: null,
+        startTop: null,
+        visible: false,
+    };
+
+    componentDidMount() {
+        this.scrollbarRef.current.addEventListener(
+            'touchstart',
+            this.onScrollbarTouchStart
+        );
+        this.thumbRef.current.addEventListener('touchstart', this.onMouseDown);
+    }
+
+    componentDidUpdate(prevProps: ScrollBarProps) {
+        if (prevProps.scrollTop !== this.props.scrollTop) {
+            this.delayHidden();
+        }
+    }
+
+    componentWillUnmount() {
+        this.removeEvents();
+        clearTimeout(this.visibleTimeout);
+    }
+
+    delayHidden = () => {
+        clearTimeout(this.visibleTimeout);
+
+        this.setState({ visible: true });
+        this.visibleTimeout = setTimeout(() => {
+            this.setState({ visible: false });
+        }, 2000);
+    };
+
+    onScrollbarTouchStart = (e: TouchEvent) => {
+        e.preventDefault();
+    };
+
+    onContainerMouseDown: React.MouseEventHandler = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+    };
+
+    // ======================= Clean =======================
+    patchEvents = () => {
+        window.addEventListener('mousemove', this.onMouseMove);
+        window.addEventListener('mouseup', this.onMouseUp);
+
+        this.thumbRef.current.addEventListener('touchmove', this.onMouseMove);
+        this.thumbRef.current.addEventListener('touchend', this.onMouseUp);
+    };
+
+    removeEvents = () => {
+        window.removeEventListener('mousemove', this.onMouseMove);
+        window.removeEventListener('mouseup', this.onMouseUp);
+
+        this.scrollbarRef.current?.removeEventListener(
+            'touchstart',
+            this.onScrollbarTouchStart
+        );
+
+        if (this.thumbRef.current) {
+            this.thumbRef.current.removeEventListener(
+                'touchstart',
+                this.onMouseDown
+            );
+            this.thumbRef.current.removeEventListener(
+                'touchmove',
+                this.onMouseMove
+            );
+            this.thumbRef.current.removeEventListener(
+                'touchend',
+                this.onMouseUp
+            );
+        }
+
+        requestAnimationFrameWrapper.cancel(this.moveRaf);
+    };
+
+    // ======================= Thumb =======================
+    onMouseDown = (e: React.MouseEvent | TouchEvent) => {
+        const { onStartMove } = this.props;
+
+        this.setState({
+            dragging: true,
+            pageY: getPageY(e),
+            startTop: this.getTop(),
+        });
+
+        onStartMove();
+        this.patchEvents();
+        e.stopPropagation();
+        e.preventDefault();
+    };
+
+    onMouseMove = (e: MouseEvent | TouchEvent) => {
+        const { dragging, pageY, startTop } = this.state;
+        const { onScroll } = this.props;
+
+        requestAnimationFrameWrapper.cancel(this.moveRaf);
+
+        if (dragging) {
+            const offsetY = getPageY(e) - pageY;
+            const newTop = startTop + offsetY;
+
+            const enableScrollRange = this.getEnableScrollRange();
+            const enableHeightRange = this.getEnableHeightRange();
+
+            const ptg = enableHeightRange ? newTop / enableHeightRange : 0;
+            const newScrollTop = Math.ceil(ptg * enableScrollRange);
+            this.moveRaf = requestAnimationFrameWrapper(() => {
+                onScroll(newScrollTop);
+            });
+        }
+    };
+
+    onMouseUp = () => {
+        const { onStopMove } = this.props;
+        this.setState({ dragging: false });
+
+        onStopMove();
+        this.removeEvents();
+    };
+
+    // ===================== Calculate =====================
+    getSpinHeight = () => {
+        const { height, count } = this.props;
+        let baseHeight = (height / count) * 10;
+        baseHeight = Math.max(baseHeight, MIN_SCROLL_BAR_SIZE);
+        baseHeight = Math.min(baseHeight, height / 2);
+        return Math.floor(baseHeight);
+    };
+
+    getEnableScrollRange = () => {
+        const { scrollHeight, height } = this.props;
+        return scrollHeight - height || 0;
+    };
+
+    getEnableHeightRange = () => {
+        const { height } = this.props;
+        const spinHeight = this.getSpinHeight();
+        return height - spinHeight || 0;
+    };
+
+    getTop = () => {
+        const { scrollTop } = this.props;
+        const enableScrollRange = this.getEnableScrollRange();
+        const enableHeightRange = this.getEnableHeightRange();
+        if (scrollTop === 0 || enableScrollRange === 0) {
+            return 0;
+        }
+        const ptg = scrollTop / enableScrollRange;
+        return ptg * enableHeightRange;
+    };
+
+    // Not show scrollbar when height is large than scrollHeight
+    showScroll = (): boolean => {
+        const { height, scrollHeight } = this.props;
+        return scrollHeight > height;
+    };
+
+    // ====================== Render =======================
+    render() {
+        const { dragging, visible } = this.state;
+        const spinHeight = this.getSpinHeight();
+        const top = this.getTop();
+
+        const canScroll = this.showScroll();
+        const mergedVisible = canScroll && visible;
+
+        return (
+            <div
+                ref={this.scrollbarRef}
+                className={mergeClasses([
+                    'virtual-list-scrollbar',
+                    { [`virtual-list-scrollbar-show`]: canScroll },
+                ])}
+                style={{
+                    width: 8,
+                    top: 0,
+                    bottom: 0,
+                    right: 0,
+                    position: 'absolute',
+                    display: mergedVisible ? null : 'none',
+                }}
+                onMouseDown={this.onContainerMouseDown}
+                onMouseMove={this.delayHidden}
+            >
+                <div
+                    ref={this.thumbRef}
+                    className={mergeClasses([
+                        'virtual-list-scrollbar-thumb',
+                        { ['virtual-list-scrollbar-thumb-moving']: dragging },
+                    ])}
+                    style={{
+                        width: '100%',
+                        height: spinHeight,
+                        top,
+                        left: 0,
+                        position: 'absolute',
+                        background: 'rgba(0, 0, 0, 0.5)',
+                        borderRadius: 99,
+                        cursor: 'pointer',
+                        userSelect: 'none',
+                    }}
+                    onMouseDown={this.onMouseDown}
+                />
+            </div>
+        );
+    }
+}
diff --git a/src/components/VirtualList/VirtualList.tsx b/src/components/VirtualList/VirtualList.tsx
new file mode 100644
index 000000000..905853c9d
--- /dev/null
+++ b/src/components/VirtualList/VirtualList.tsx
@@ -0,0 +1,379 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { mergeClasses } from '../../shared/utilities';
+import Filler from './Filler';
+import { ScrollBar } from './ScrollBar';
+import {
+    EMPTY_DATA,
+    ListProps,
+    ListRef,
+    ScrollStyle,
+} from './VirtualList.types';
+import type { GetKey, SharedConfig } from './VirtualList.types';
+import useChildren from './hooks/useChildren';
+import useHeights from './hooks/useHeights';
+import useScrollTo from './hooks/useScrollTo';
+import useDiffItem from './hooks/useDiffItem';
+import { useFrameWheel } from './hooks/useFrameWheel';
+import { useMobileTouchMove } from './hooks/useMobileTouchMove';
+import { useOriginScroll } from './hooks/useOriginScroll';
+
+export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
+    const {
+        classNames,
+        height,
+        itemHeight,
+        fullHeight = true,
+        style,
+        data,
+        children,
+        itemKey,
+        virtual,
+        component: Component = 'div',
+        onScroll,
+        onVisibleChange,
+        ...rest
+    } = props;
+
+    // ================================= MISC =================================
+    const useVirtual = !!(virtual !== false && height && itemHeight);
+    const inVirtual = useVirtual && data && itemHeight * data.length > height;
+
+    const [scrollTop, setScrollTop] = useState(0);
+    const [scrollMoving, setScrollMoving] = useState(false);
+
+    const mergedClassName = mergeClasses([classNames]);
+    const mergedData = data || EMPTY_DATA;
+    const componentRef = useRef<HTMLDivElement>();
+    const fillerInnerRef = useRef<HTMLDivElement>();
+    const scrollBarRef = useRef<any>(); // Hack on scrollbar to enable flash call
+
+    // =============================== Item Key ===============================
+    const getKey = React.useCallback<GetKey<T>>(
+        (item: T) => {
+            if (typeof itemKey === 'function') {
+                return itemKey(item);
+            }
+            return (item as any)?.[itemKey];
+        },
+        [itemKey]
+    );
+
+    const sharedConfig: SharedConfig<T> = {
+        getKey,
+    };
+
+    // ================================ Scroll ================================
+    function syncScrollTop(newTop: number | ((prev: number) => number)) {
+        setScrollTop((origin) => {
+            let value: number;
+            if (typeof newTop === 'function') {
+                value = newTop(origin);
+            } else {
+                value = newTop;
+            }
+
+            const alignedTop = keepInRange(value);
+
+            componentRef.current.scrollTop = alignedTop;
+            return alignedTop;
+        });
+    }
+
+    // ================================ Legacy ================================
+    // Put ref here since the range is generate by follow
+    const rangeRef = useRef({ start: 0, end: mergedData.length });
+
+    const diffItemRef = useRef<T>();
+    const [diffItem] = useDiffItem(mergedData, getKey);
+    diffItemRef.current = diffItem;
+
+    // ================================ Height ================================
+    const [setInstanceRef, collectHeight, heights, heightUpdatedMark] =
+        useHeights(getKey, null, null);
+
+    // ========================== Visible Calculation =========================
+    const { scrollHeight, start, end, offset } = React.useMemo(() => {
+        if (!useVirtual) {
+            return {
+                scrollHeight: undefined,
+                start: 0,
+                end: mergedData.length - 1,
+                offset: undefined,
+            };
+        }
+
+        // Always use virtual scroll bar in avoid shaking
+        if (!inVirtual) {
+            return {
+                scrollHeight: fillerInnerRef.current?.offsetHeight || 0,
+                start: 0,
+                end: mergedData.length - 1,
+                offset: undefined,
+            };
+        }
+
+        let itemTop = 0;
+        let startIndex: number;
+        let startOffset: number;
+        let endIndex: number;
+
+        const dataLen = mergedData.length;
+        for (let i = 0; i < dataLen; i += 1) {
+            const item = mergedData[i];
+            const key = getKey(item);
+
+            const cacheHeight = heights.get(key);
+            const currentItemBottom =
+                itemTop +
+                (cacheHeight === undefined ? itemHeight : cacheHeight);
+
+            // Check item top in the range
+            if (currentItemBottom >= scrollTop && startIndex === undefined) {
+                startIndex = i;
+                startOffset = itemTop;
+            }
+
+            // Check item bottom in the range. We will render additional one item for motion usage
+            if (
+                currentItemBottom > scrollTop + height &&
+                endIndex === undefined
+            ) {
+                endIndex = i;
+            }
+
+            itemTop = currentItemBottom;
+        }
+
+        // Fallback to normal if not match. This code should never reach
+        /* istanbul ignore next */
+        if (startIndex === undefined) {
+            startIndex = 0;
+            startOffset = 0;
+        }
+        if (endIndex === undefined) {
+            endIndex = mergedData.length - 1;
+        }
+
+        // Give cache to improve scroll experience
+        endIndex = Math.min(endIndex + 1, mergedData.length);
+
+        return {
+            scrollHeight: itemTop,
+            start: startIndex,
+            end: endIndex,
+            offset: startOffset,
+        };
+    }, [
+        inVirtual,
+        useVirtual,
+        scrollTop,
+        mergedData,
+        heightUpdatedMark,
+        height,
+    ]);
+
+    rangeRef.current.start = start;
+    rangeRef.current.end = end;
+
+    // =============================== In Range ===============================
+    const maxScrollHeight = scrollHeight - height;
+    const maxScrollHeightRef = useRef(maxScrollHeight);
+    maxScrollHeightRef.current = maxScrollHeight;
+
+    function keepInRange(newScrollTop: number) {
+        let newTop = newScrollTop;
+        if (!Number.isNaN(maxScrollHeightRef.current)) {
+            newTop = Math.min(newTop, maxScrollHeightRef.current);
+        }
+        newTop = Math.max(newTop, 0);
+        return newTop;
+    }
+
+    const isScrollAtTop = scrollTop <= 0;
+    const isScrollAtBottom = scrollTop >= maxScrollHeight;
+
+    const originScroll = useOriginScroll(isScrollAtTop, isScrollAtBottom);
+
+    // ================================ Scroll ================================
+    function onScrollBar(newScrollTop: number) {
+        const newTop = newScrollTop;
+        syncScrollTop(newTop);
+    }
+
+    // When data size reduce. It may trigger native scroll event back to fit scroll position
+    function onFallbackScroll(e: React.UIEvent<HTMLDivElement>) {
+        const { scrollTop: newScrollTop } = e.currentTarget;
+        if (newScrollTop !== scrollTop) {
+            syncScrollTop(newScrollTop);
+        }
+
+        // Trigger origin onScroll
+        onScroll?.(e);
+    }
+
+    // Since this added in global,should use ref to keep update
+    const [onRawWheel, onFireFoxScroll] = useFrameWheel(
+        useVirtual,
+        isScrollAtTop,
+        isScrollAtBottom,
+        (offsetY: number) => {
+            syncScrollTop((top) => {
+                const newTop = top + offsetY;
+                return newTop;
+            });
+        }
+    );
+
+    // Mobile touch move
+    useMobileTouchMove(
+        useVirtual,
+        componentRef,
+        (deltaY: number, smoothOffset: boolean) => {
+            if (originScroll(deltaY, smoothOffset)) {
+                return false;
+            }
+
+            onRawWheel({ preventDefault() {}, deltaY } as WheelEvent);
+            return true;
+        }
+    );
+
+    useLayoutEffect(() => {
+        // Firefox only
+        function onMozMousePixelScroll(e: Event) {
+            if (useVirtual) {
+                e.preventDefault();
+            }
+        }
+
+        componentRef.current.addEventListener('wheel', onRawWheel);
+        componentRef.current.addEventListener(
+            'DOMMouseScroll',
+            onFireFoxScroll as any
+        );
+        componentRef.current.addEventListener(
+            'MozMousePixelScroll',
+            onMozMousePixelScroll
+        );
+
+        return () => {
+            if (componentRef.current) {
+                componentRef.current.removeEventListener('wheel', onRawWheel);
+                componentRef.current.removeEventListener(
+                    'DOMMouseScroll',
+                    onFireFoxScroll as any
+                );
+                componentRef.current.removeEventListener(
+                    'MozMousePixelScroll',
+                    onMozMousePixelScroll as any
+                );
+            }
+        };
+    }, [useVirtual]);
+
+    // ================================= Ref ==================================
+    const scrollTo = useScrollTo<T>(
+        componentRef,
+        mergedData,
+        heights,
+        itemHeight,
+        getKey,
+        collectHeight,
+        syncScrollTop,
+        () => {
+            scrollBarRef.current?.delayHidden();
+        }
+    );
+
+    React.useImperativeHandle(ref, () => ({
+        scrollTo,
+    }));
+
+    // ================================ Effect ================================
+    /** We need told outside that some list not rendered */
+    useLayoutEffect(() => {
+        if (onVisibleChange) {
+            const renderList = mergedData.slice(start, end + 1);
+
+            onVisibleChange(renderList, mergedData);
+        }
+    }, [start, end, mergedData]);
+
+    // ================================ Render ================================
+    const listChildren = useChildren(
+        mergedData,
+        start,
+        end,
+        setInstanceRef,
+        children,
+        sharedConfig
+    );
+
+    let componentStyle: React.CSSProperties = null;
+    if (height) {
+        componentStyle = {
+            [fullHeight ? 'height' : 'maxHeight']: height,
+            ...ScrollStyle,
+        };
+
+        if (useVirtual) {
+            componentStyle.overflowY = 'hidden';
+
+            if (scrollMoving) {
+                componentStyle.pointerEvents = 'none';
+            }
+        }
+    }
+
+    return (
+        <div
+            style={{
+                ...style,
+                position: 'relative',
+            }}
+            className={mergedClassName}
+            {...rest}
+        >
+            <Component
+                className={'virtual-list-holder'}
+                style={componentStyle}
+                ref={componentRef}
+                onScroll={onFallbackScroll}
+            >
+                <Filler
+                    height={scrollHeight}
+                    offset={offset}
+                    onInnerResize={collectHeight}
+                    ref={fillerInnerRef}
+                >
+                    {listChildren}
+                </Filler>
+            </Component>
+
+            {useVirtual && (
+                <ScrollBar
+                    ref={scrollBarRef}
+                    scrollTop={scrollTop}
+                    height={height}
+                    scrollHeight={scrollHeight}
+                    count={mergedData.length}
+                    onScroll={onScrollBar}
+                    onStartMove={() => {
+                        setScrollMoving(true);
+                    }}
+                    onStopMove={() => {
+                        setScrollMoving(false);
+                    }}
+                />
+            )}
+        </div>
+    );
+}
+
+const List = React.forwardRef<ListRef, ListProps<any>>(RawList);
+
+List.displayName = 'List';
+
+export default List as <Item = any>(
+    props: ListProps<Item> & { ref?: React.Ref<ListRef> }
+) => React.ReactElement;
diff --git a/src/components/VirtualList/VirtualList.types.ts b/src/components/VirtualList/VirtualList.types.ts
new file mode 100644
index 000000000..ae084fc19
--- /dev/null
+++ b/src/components/VirtualList/VirtualList.types.ts
@@ -0,0 +1,88 @@
+export const EMPTY_DATA: any[] = [];
+export const MIN_SCROLL_BAR_SIZE: number = 20;
+
+export type RenderFunc<T> = (
+    item: T,
+    index: number,
+    props: { style?: React.CSSProperties }
+) => React.ReactNode;
+
+export interface SharedConfig<T> {
+    getKey: (item: T) => React.Key;
+}
+
+export type GetKey<T> = (item: T) => React.Key;
+
+export interface FillerProps {
+    /** Virtual filler height. Should be `count * itemMinHeight` */
+    height: number;
+    /** Set offset of visible items. Should be the top of start item position */
+    offset?: number;
+
+    children: React.ReactNode;
+
+    onInnerResize?: () => void;
+}
+
+export interface ItemProps {
+    children: React.ReactElement;
+    setRef: (element: HTMLElement) => void;
+}
+
+export interface ScrollBarProps {
+    scrollTop: number;
+    scrollHeight: number;
+    height: number;
+    count: number;
+    onScroll: (scrollTop: number) => void;
+    onStartMove: () => void;
+    onStopMove: () => void;
+}
+
+export interface ScrollBarState {
+    dragging: boolean;
+    pageY: number;
+    startTop: number;
+    visible: boolean;
+}
+
+export const ScrollStyle: React.CSSProperties = {
+    overflowY: 'auto',
+    overflowAnchor: 'none',
+};
+
+export type ScrollAlign = 'top' | 'bottom' | 'auto';
+export type ScrollConfig =
+    | {
+          index: number;
+          align?: ScrollAlign;
+          offset?: number;
+      }
+    | {
+          key: React.Key;
+          align?: ScrollAlign;
+          offset?: number;
+      };
+export type ScrollTo = (arg: number | ScrollConfig) => void;
+export type ListRef = {
+    scrollTo: ScrollTo;
+};
+
+export interface ListProps<T>
+    extends Omit<React.HTMLAttributes<any>, 'children'> {
+    children: RenderFunc<T>;
+    classNames?: string;
+    data: T[];
+    height?: number;
+    itemHeight?: number;
+    /** If not match virtual scroll condition, Set List still use height of container. */
+    fullHeight?: boolean;
+    itemKey: React.Key | ((item: T) => React.Key);
+    component?: string | React.FC<any> | React.ComponentClass<any>;
+    /** Set `false` will always use real scroll instead of virtual one */
+    virtual?: boolean;
+
+    onScroll?: React.UIEventHandler<HTMLElement>;
+    /** Trigger when render list item changed */
+    onVisibleChange?: (visibleList: T[], fullList: T[]) => void;
+}
diff --git a/src/components/VirtualList/hooks/useChildren.tsx b/src/components/VirtualList/hooks/useChildren.tsx
new file mode 100644
index 000000000..7ee542cdb
--- /dev/null
+++ b/src/components/VirtualList/hooks/useChildren.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import type { SharedConfig, RenderFunc } from '../VirtualList.types';
+import { Item } from '../Item';
+
+export default function useChildren<T>(
+    list: T[],
+    startIndex: number,
+    endIndex: number,
+    setNodeRef: (item: T, element: HTMLElement) => void,
+    renderFunc: RenderFunc<T>,
+    { getKey }: SharedConfig<T>
+) {
+    return list.slice(startIndex, endIndex + 1).map((item, index) => {
+        const eleIndex = startIndex + index;
+        const node = renderFunc(item, eleIndex, {
+            // style: status === 'MEASURE_START' ? { visibility: 'hidden' } : {},
+        }) as React.ReactElement;
+
+        const key = getKey(item);
+        return (
+            <Item key={key} setRef={(ele) => setNodeRef(item, ele)}>
+                {node}
+            </Item>
+        );
+    });
+}
diff --git a/src/components/VirtualList/hooks/useDiffItem.ts b/src/components/VirtualList/hooks/useDiffItem.ts
new file mode 100644
index 000000000..75851d154
--- /dev/null
+++ b/src/components/VirtualList/hooks/useDiffItem.ts
@@ -0,0 +1,23 @@
+import React from 'react';
+import { findListDiffIndex } from '../utils/algorithmUtil';
+import type { GetKey } from '../VirtualList.types';
+
+export default function useDiffItem<T>(
+    data: T[],
+    getKey: GetKey<T>,
+    onDiff?: (diffIndex: number) => void
+): [T] {
+    const [prevData, setPrevData] = React.useState(data);
+    const [diffItem, setDiffItem] = React.useState(null);
+
+    React.useEffect(() => {
+        const diff = findListDiffIndex(prevData || [], data || [], getKey);
+        if (diff?.index !== undefined) {
+            onDiff?.(diff.index);
+            setDiffItem(data[diff.index]);
+        }
+        setPrevData(data);
+    }, [data]);
+
+    return [diffItem];
+}
diff --git a/src/components/VirtualList/hooks/useFrameWheel.ts b/src/components/VirtualList/hooks/useFrameWheel.ts
new file mode 100644
index 000000000..537904335
--- /dev/null
+++ b/src/components/VirtualList/hooks/useFrameWheel.ts
@@ -0,0 +1,60 @@
+import { useRef } from 'react';
+import { requestAnimationFrameWrapper } from '../../../shared/utilities';
+import isFF from '../utils/isFirefox';
+import { useOriginScroll } from './useOriginScroll';
+
+interface FireFoxDOMMouseScrollEvent {
+    detail: number;
+    preventDefault: Function;
+}
+
+export const useFrameWheel = (
+    inVirtual: boolean,
+    isScrollAtTop: boolean,
+    isScrollAtBottom: boolean,
+    onWheelDelta: (offset: number) => void
+): [(e: WheelEvent) => void, (e: FireFoxDOMMouseScrollEvent) => void] => {
+    const offsetRef = useRef(0);
+    const nextFrameRef = useRef<number>(null);
+
+    // Firefox patch
+    const wheelValueRef = useRef<number>(null);
+    const isMouseScrollRef = useRef<boolean>(false);
+
+    // Scroll status sync
+    const originScroll = useOriginScroll(isScrollAtTop, isScrollAtBottom);
+
+    function onWheel(event: WheelEvent) {
+        if (!inVirtual) return;
+
+        requestAnimationFrameWrapper.cancel(nextFrameRef.current);
+
+        const { deltaY } = event;
+        offsetRef.current += deltaY;
+        wheelValueRef.current = deltaY;
+
+        // Do nothing when scroll at the edge, Skip check when is in scroll
+        if (originScroll(deltaY)) return;
+
+        // Proxy of scroll events
+        if (!isFF) {
+            event.preventDefault();
+        }
+
+        nextFrameRef.current = requestAnimationFrameWrapper(() => {
+            // Patch a multiple for Firefox to fix wheel number too small
+            const patchMultiple = isMouseScrollRef.current ? 10 : 1;
+            onWheelDelta(offsetRef.current * patchMultiple);
+            offsetRef.current = 0;
+        });
+    }
+
+    // A patch for firefox
+    function onFireFoxScroll(event: FireFoxDOMMouseScrollEvent) {
+        if (!inVirtual) return;
+
+        isMouseScrollRef.current = event.detail === wheelValueRef.current;
+    }
+
+    return [onWheel, onFireFoxScroll];
+};
diff --git a/src/components/VirtualList/hooks/useHeights.tsx b/src/components/VirtualList/hooks/useHeights.tsx
new file mode 100644
index 000000000..71883ec5b
--- /dev/null
+++ b/src/components/VirtualList/hooks/useHeights.tsx
@@ -0,0 +1,68 @@
+import React, { useRef, useEffect } from 'react';
+import {
+    findDOMNode,
+    requestAnimationFrameWrapper,
+} from '../../../shared/utilities';
+import type { GetKey } from '../VirtualList.types';
+import CacheMap from '../utils/CacheMap';
+
+export default function useHeights<T>(
+    getKey: GetKey<T>,
+    onItemAdd?: (item: T) => void,
+    onItemRemove?: (item: T) => void
+): [(item: T, instance: HTMLElement) => void, () => void, CacheMap, number] {
+    const [updatedMark, setUpdatedMark] = React.useState(0);
+    const instanceRef = useRef(new Map<React.Key, HTMLElement>());
+    const heightsRef = useRef(new CacheMap());
+    const collectRafRef = useRef<number>();
+
+    function cancelRaf() {
+        requestAnimationFrameWrapper.cancel(collectRafRef.current);
+    }
+
+    function collectHeight() {
+        cancelRaf();
+
+        collectRafRef.current = requestAnimationFrameWrapper(() => {
+            instanceRef.current.forEach((element, key) => {
+                if (element && element.offsetParent) {
+                    const htmlElement = findDOMNode<HTMLElement>(element);
+                    const { offsetHeight } = htmlElement;
+                    if (heightsRef.current.get(key) !== offsetHeight) {
+                        heightsRef.current.set(key, htmlElement.offsetHeight);
+                    }
+                }
+            });
+
+            // Always trigger update mark to tell parent that should re-calculate heights when resized
+            setUpdatedMark((c) => c + 1);
+        });
+    }
+
+    function setInstanceRef(item: T, instance: HTMLElement) {
+        const key = getKey(item);
+        const origin = instanceRef.current.get(key);
+
+        if (instance) {
+            instanceRef.current.set(key, instance);
+            collectHeight();
+        } else {
+            instanceRef.current.delete(key);
+        }
+
+        // Instance changed
+        if (!origin !== !instance) {
+            if (instance) {
+                onItemAdd?.(item);
+            } else {
+                onItemRemove?.(item);
+            }
+        }
+    }
+
+    useEffect(() => {
+        return cancelRaf;
+    }, []);
+
+    return [setInstanceRef, collectHeight, heightsRef.current, updatedMark];
+}
diff --git a/src/components/VirtualList/hooks/useMobileTouchMove.ts b/src/components/VirtualList/hooks/useMobileTouchMove.ts
new file mode 100644
index 000000000..ff1436bd8
--- /dev/null
+++ b/src/components/VirtualList/hooks/useMobileTouchMove.ts
@@ -0,0 +1,81 @@
+import React, { useLayoutEffect, useRef } from 'react';
+
+const SMOOTH_INERTIA_CALC = 14 / 15;
+
+export const useMobileTouchMove = (
+    inVirtual: boolean,
+    listRef: React.RefObject<HTMLDivElement>,
+    callback: (offsetY: number, smoothOffset?: boolean) => boolean
+) => {
+    const touchedRef = useRef(false);
+    const touchYRef = useRef(0);
+
+    const elementRef = useRef<HTMLElement>(null);
+
+    // Smooth scroll
+    const intervalRef = useRef(null);
+
+    /* eslint-disable prefer-const */
+    let cleanUpEvents: () => void;
+
+    const onTouchMove = (e: TouchEvent) => {
+        if (touchedRef.current) {
+            const currentY = Math.ceil(e.touches[0].pageY);
+            let offsetY = touchYRef.current - currentY;
+            touchYRef.current = currentY;
+
+            if (callback(offsetY)) {
+                e.preventDefault();
+            }
+
+            // Smooth interval
+            // Simulates scroll inertia effect with a timer
+            clearInterval(intervalRef.current);
+            intervalRef.current = setInterval(() => {
+                offsetY *= SMOOTH_INERTIA_CALC;
+
+                if (!callback(offsetY, true) || Math.abs(offsetY) <= 0.1) {
+                    clearInterval(intervalRef.current);
+                }
+            }, 16);
+        }
+    };
+
+    const onTouchEnd = () => {
+        touchedRef.current = false;
+
+        cleanUpEvents();
+    };
+
+    const onTouchStart = (e: TouchEvent) => {
+        cleanUpEvents();
+
+        if (e.touches.length === 1 && !touchedRef.current) {
+            touchedRef.current = true;
+            touchYRef.current = Math.ceil(e.touches[0].pageY);
+
+            elementRef.current = e.target as HTMLElement;
+            elementRef.current.addEventListener('touchmove', onTouchMove);
+            elementRef.current.addEventListener('touchend', onTouchEnd);
+        }
+    };
+
+    cleanUpEvents = () => {
+        if (elementRef.current) {
+            elementRef.current.removeEventListener('touchmove', onTouchMove);
+            elementRef.current.removeEventListener('touchend', onTouchEnd);
+        }
+    };
+
+    useLayoutEffect(() => {
+        if (inVirtual) {
+            listRef.current.addEventListener('touchstart', onTouchStart);
+        }
+
+        return () => {
+            listRef.current?.removeEventListener('touchstart', onTouchStart);
+            cleanUpEvents();
+            clearInterval(intervalRef.current);
+        };
+    }, [inVirtual]);
+};
diff --git a/src/components/VirtualList/hooks/useOriginScroll.ts b/src/components/VirtualList/hooks/useOriginScroll.ts
new file mode 100644
index 000000000..68baa6c8f
--- /dev/null
+++ b/src/components/VirtualList/hooks/useOriginScroll.ts
@@ -0,0 +1,45 @@
+import { useRef } from 'react';
+
+export const useOriginScroll = (
+    isScrollAtTop: boolean,
+    isScrollAtBottom: boolean
+) => {
+    // Do lock for a wheel when scrolling
+    const lockRef = useRef(false);
+    const lockTimeoutRef = useRef(null);
+    function lockScroll() {
+        clearTimeout(lockTimeoutRef.current);
+
+        lockRef.current = true;
+
+        lockTimeoutRef.current = setTimeout(() => {
+            lockRef.current = false;
+        }, 50);
+    }
+
+    // Pass to ref since global add is in closure
+    const scrollPingRef = useRef({
+        top: isScrollAtTop,
+        bottom: isScrollAtBottom,
+    });
+    scrollPingRef.current.top = isScrollAtTop;
+    scrollPingRef.current.bottom = isScrollAtBottom;
+
+    return (deltaY: number, smoothOffset = false) => {
+        const originScroll =
+            // Pass origin wheel when on the top
+            (deltaY < 0 && scrollPingRef.current.top) ||
+            // Pass origin wheel when on the bottom
+            (deltaY > 0 && scrollPingRef.current.bottom);
+
+        if (smoothOffset && originScroll) {
+            // No need lock anymore when it's smooth offset from touchMove interval
+            clearTimeout(lockTimeoutRef.current);
+            lockRef.current = false;
+        } else if (!originScroll || lockRef.current) {
+            lockScroll();
+        }
+
+        return !lockRef.current && originScroll;
+    };
+};
diff --git a/src/components/VirtualList/hooks/useScrollTo.tsx b/src/components/VirtualList/hooks/useScrollTo.tsx
new file mode 100644
index 000000000..2497b1aed
--- /dev/null
+++ b/src/components/VirtualList/hooks/useScrollTo.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import { requestAnimationFrameWrapper } from '../../../shared/utilities';
+import type { GetKey, ScrollTo } from '../VirtualList.types';
+import type CacheMap from '../utils/CacheMap';
+
+export default function useScrollTo<T>(
+    containerRef: React.RefObject<HTMLDivElement>,
+    data: T[],
+    heights: CacheMap,
+    itemHeight: number,
+    getKey: GetKey<T>,
+    collectHeight: () => void,
+    syncScrollTop: (newTop: number) => void,
+    triggerFlash: () => void
+): ScrollTo {
+    const scrollRef = React.useRef<number>();
+
+    return (arg) => {
+        // When not argument provided, we think dev may want to show the scrollbar
+        if (arg === null || arg === undefined) {
+            triggerFlash();
+            return;
+        }
+
+        // Normal scroll logic
+        requestAnimationFrameWrapper.cancel(scrollRef.current);
+
+        if (typeof arg === 'number') {
+            syncScrollTop(arg);
+        } else if (arg && typeof arg === 'object') {
+            let index: number;
+            const { align } = arg;
+
+            if ('index' in arg) {
+                ({ index } = arg);
+            } else {
+                index = data.findIndex((item) => getKey(item) === arg.key);
+            }
+
+            const { offset = 0 } = arg;
+
+            // We will retry 3 times in case dynamic height shaking
+            const syncScroll = (
+                times: number,
+                targetAlign?: 'top' | 'bottom'
+            ) => {
+                if (times < 0 || !containerRef.current) return;
+
+                const height = containerRef.current.clientHeight;
+                let needCollectHeight = false;
+                let newTargetAlign: 'top' | 'bottom' | null = targetAlign;
+
+                // Go to next frame if height not exist
+                if (height) {
+                    const mergedAlign = targetAlign || align;
+
+                    // Get top & bottom
+                    let stackTop = 0;
+                    let itemTop = 0;
+                    let itemBottom = 0;
+
+                    const maxLen = Math.min(data.length, index);
+
+                    for (let i = 0; i <= maxLen; i += 1) {
+                        const key = getKey(data[i]);
+                        itemTop = stackTop;
+                        const cacheHeight = heights.get(key);
+                        itemBottom =
+                            itemTop +
+                            (cacheHeight === undefined
+                                ? itemHeight
+                                : cacheHeight);
+
+                        stackTop = itemBottom;
+
+                        if (i === index && cacheHeight === undefined) {
+                            needCollectHeight = true;
+                        }
+                    }
+
+                    // Scroll to
+                    let targetTop: number | null = null;
+
+                    switch (mergedAlign) {
+                        case 'top':
+                            targetTop = itemTop - offset;
+                            break;
+                        case 'bottom':
+                            targetTop = itemBottom - height + offset;
+                            break;
+
+                        default: {
+                            const { scrollTop } = containerRef.current;
+                            const scrollBottom = scrollTop + height;
+                            if (itemTop < scrollTop) {
+                                newTargetAlign = 'top';
+                            } else if (itemBottom > scrollBottom) {
+                                newTargetAlign = 'bottom';
+                            }
+                        }
+                    }
+
+                    if (
+                        targetTop !== null &&
+                        targetTop !== containerRef.current.scrollTop
+                    ) {
+                        syncScrollTop(targetTop);
+                    }
+                }
+
+                // We will retry since element may not sync height as it described
+                scrollRef.current = requestAnimationFrameWrapper(() => {
+                    if (needCollectHeight) {
+                        collectHeight();
+                    }
+                    syncScroll(times - 1, newTargetAlign);
+                });
+            };
+
+            syncScroll(3);
+        }
+    };
+}
diff --git a/src/components/VirtualList/index.ts b/src/components/VirtualList/index.ts
new file mode 100644
index 000000000..090c32dfa
--- /dev/null
+++ b/src/components/VirtualList/index.ts
@@ -0,0 +1,6 @@
+import List from './VirtualList';
+import { ListRef, ListProps } from './VirtualList.types';
+
+export { ListRef, ListProps };
+
+export default List;
diff --git a/src/components/VirtualList/mock.tsx b/src/components/VirtualList/mock.tsx
new file mode 100644
index 000000000..4d1973d0b
--- /dev/null
+++ b/src/components/VirtualList/mock.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ListProps, ListRef } from './VirtualList.types';
+import { RawList } from './VirtualList';
+
+const List = React.forwardRef(
+    (props: ListProps<any>, ref: React.Ref<ListRef>) =>
+        RawList({ ...props, virtual: false }, ref)
+) as <Item = any>(
+    props: React.PropsWithChildren<ListProps<Item>> & {
+        ref?: React.Ref<ListRef>;
+    }
+) => React.ReactElement;
+
+(List as any).displayName = 'List';
+
+export default List;
diff --git a/src/components/VirtualList/tests/__mocks__/util/lib/raf.ts b/src/components/VirtualList/tests/__mocks__/util/lib/raf.ts
new file mode 100644
index 000000000..dd272ce8f
--- /dev/null
+++ b/src/components/VirtualList/tests/__mocks__/util/lib/raf.ts
@@ -0,0 +1,9 @@
+function requestAnimationFrame(callback: Function) {
+    return setTimeout(callback);
+}
+
+requestAnimationFrame.cancel = (id: number) => {
+    clearTimeout(id);
+};
+
+export default requestAnimationFrame;
diff --git a/src/components/VirtualList/tests/list.test.js b/src/components/VirtualList/tests/list.test.js
new file mode 100644
index 000000000..c029d02c3
--- /dev/null
+++ b/src/components/VirtualList/tests/list.test.js
@@ -0,0 +1,252 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { act } from 'react-dom/test-utils';
+import List from '../';
+import Filler from '../Filler';
+import { spyElementPrototypes } from '../../../tests/domHook';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+function genData(count) {
+    return new Array(count).fill(null).map((_, id) => ({ id }));
+}
+
+describe('List.Basic', () => {
+    function genList(props) {
+        let node = (
+            <List component="ul" itemKey="id" {...props}>
+                {({ id }) => <li>{id}</li>}
+            </List>
+        );
+
+        if (props.ref) {
+            node = <div>{node}</div>;
+        }
+
+        return mount(node);
+    }
+
+    describe('raw', () => {
+        it('without height', () => {
+            const wrapper = genList({ data: genData(1) });
+            expect(wrapper.find(Filler).props().offset).toBeFalsy();
+        });
+
+        describe('height over itemHeight', () => {
+            it('full height', () => {
+                const wrapper = genList({
+                    data: genData(1),
+                    itemHeight: 1,
+                    height: 999,
+                });
+                expect(wrapper.find(Filler).props().offset).toBeFalsy();
+                expect(wrapper.find('ul').props().style).toEqual(
+                    expect.objectContaining({ height: 999 })
+                );
+            });
+
+            it('without full height', () => {
+                const wrapper = genList({
+                    data: genData(1),
+                    itemHeight: 1,
+                    height: 999,
+                    fullHeight: false,
+                });
+                expect(wrapper.find(Filler).props().offset).toBeFalsy();
+                expect(wrapper.find('ul').props().style).toEqual(
+                    expect.objectContaining({ maxHeight: 999 })
+                );
+            });
+        });
+    });
+
+    describe('virtual', () => {
+        let scrollTop = 0;
+        let mockElement;
+
+        beforeAll(() => {
+            mockElement = spyElementPrototypes(HTMLElement, {
+                offsetHeight: {
+                    get: () => 20,
+                },
+                scrollHeight: {
+                    get: () => 2000,
+                },
+                clientHeight: {
+                    get: () => 100,
+                },
+                scrollTop: {
+                    get: () => scrollTop,
+                    set(_, val) {
+                        scrollTop = val;
+                    },
+                },
+            });
+        });
+
+        afterAll(() => {
+            mockElement.mockRestore();
+        });
+
+        it('scroll it', () => {
+            const onVisibleChange = jest.fn();
+
+            // scroll to top
+            scrollTop = 0;
+            const wrapper = genList({
+                itemHeight: 20,
+                height: 100,
+                data: genData(100),
+                onVisibleChange,
+            });
+            expect(wrapper.find(Filler).props().height).toEqual(2000);
+            expect(wrapper.find(Filler).props().offset).toEqual(0);
+            onVisibleChange.mockReset();
+
+            // scrollTop to end
+            scrollTop = 2000 - 100;
+            wrapper.find('ul').simulate('scroll', {
+                scrollTop,
+            });
+            expect(wrapper.find(Filler).props().height).toEqual(2000);
+            expect(
+                wrapper.find(Filler).props().offset +
+                    wrapper.find('li').length * 20
+            ).toEqual(2000);
+
+            expect(onVisibleChange.mock.calls[0][0]).toHaveLength(6);
+            expect(onVisibleChange.mock.calls[0][1]).toHaveLength(100);
+        });
+    });
+
+    describe('status switch', () => {
+        let scrollTop = 0;
+
+        let mockLiElement;
+        let mockElement;
+
+        beforeAll(() => {
+            mockLiElement = spyElementPrototypes(HTMLLIElement, {
+                offsetHeight: {
+                    get: () => 40,
+                },
+            });
+
+            mockElement = spyElementPrototypes(HTMLElement, {
+                clientHeight: {
+                    get: () => 100,
+                },
+                scrollTop: {
+                    get: () => scrollTop,
+                    set(_, val) {
+                        scrollTop = val;
+                    },
+                },
+            });
+        });
+
+        afterAll(() => {
+            mockElement.mockRestore();
+            mockLiElement.mockRestore();
+        });
+
+        it('raw to virtual', () => {
+            let data = genData(5);
+            const wrapper = genList({ itemHeight: 20, height: 100, data });
+
+            expect(wrapper.find('li')).toHaveLength(5);
+
+            data = genData(10);
+            wrapper.setProps({ data });
+            expect(wrapper.find('li').length < data.length).toBeTruthy();
+        });
+
+        it('virtual to raw', () => {
+            let data = genData(10);
+            const wrapper = genList({ itemHeight: 20, height: 100, data });
+            expect(wrapper.find('li').length < data.length).toBeTruthy();
+
+            data = data.slice(0, 2);
+            wrapper.setProps({ data });
+            expect(wrapper.find('li')).toHaveLength(2);
+
+            // Should not crash if data count change
+            data = data.slice(0, 1);
+            wrapper.setProps({ data });
+            expect(wrapper.find('li')).toHaveLength(1);
+        });
+    });
+
+    it('`virtual` is false', () => {
+        const wrapper = genList({
+            itemHeight: 20,
+            height: 100,
+            data: genData(100),
+            virtual: false,
+        });
+        expect(wrapper.find('li')).toHaveLength(100);
+    });
+
+    it('Should not crash when height change makes virtual scroll to be raw scroll', () => {
+        const wrapper = genList({
+            itemHeight: 20,
+            height: 40,
+            data: genData(3),
+        });
+        wrapper.setProps({ height: 1000 });
+    });
+
+    describe('should collect height', () => {
+        let mockElement;
+        let collected = false;
+
+        beforeAll(() => {
+            mockElement = spyElementPrototypes(HTMLElement, {
+                offsetHeight: {
+                    get: () => {
+                        collected = true;
+                        return 20;
+                    },
+                },
+                offsetParent: {
+                    get() {
+                        return this;
+                    },
+                },
+            });
+        });
+
+        afterAll(() => {
+            mockElement.mockRestore();
+        });
+
+        it('work', async () => {
+            const wrapper = genList({
+                itemHeight: 20,
+                height: 40,
+                data: genData(3),
+            });
+            wrapper
+                .find('Filler')
+                .find('ResizeObserver')
+                .props()
+                .onResize({ offsetHeight: 0 });
+            expect(collected).toBeFalsy();
+
+            // Wait for collection
+            await act(async () => {
+                await new Promise((resolve) => {
+                    setTimeout(resolve, 10);
+                });
+            });
+
+            wrapper
+                .find('Filler')
+                .find('ResizeObserver')
+                .props()
+                .onResize({ offsetHeight: 100 });
+            expect(collected).toBeTruthy();
+        });
+    });
+});
diff --git a/src/components/VirtualList/tests/mock.test.js b/src/components/VirtualList/tests/mock.test.js
new file mode 100644
index 000000000..c082fc305
--- /dev/null
+++ b/src/components/VirtualList/tests/mock.test.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import MockList from '../mock';
+import Filler from '../Filler';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('MockList', () => {
+    it('correct render', () => {
+        const wrapper = mount(
+            <MockList data={[0, 1, 2]} itemKey={(id) => id}>
+                {(id) => <span>{id}</span>}
+            </MockList>
+        );
+
+        expect(wrapper.find(Filler).length).toBeTruthy();
+
+        for (let i = 0; i < 3; i += 1) {
+            expect(wrapper.find('Item').at(i).key()).toBe(String(i));
+        }
+
+        expect(wrapper.find('List')).toHaveLength(1);
+    });
+});
diff --git a/src/components/VirtualList/tests/props.test.js b/src/components/VirtualList/tests/props.test.js
new file mode 100644
index 000000000..9d9bfce22
--- /dev/null
+++ b/src/components/VirtualList/tests/props.test.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import List from '..';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Props', () => {
+    it('itemKey is a function', () => {
+        class ItemComponent extends React.Component {
+            render() {
+                return this.props.children;
+            }
+        }
+
+        const wrapper = mount(
+            <List
+                data={[{ id: 903 }, { id: 1128 }]}
+                itemKey={(item) => item.id}
+            >
+                {({ id }) => <ItemComponent>{id}</ItemComponent>}
+            </List>
+        );
+
+        expect(wrapper.find('Item').at(0).key()).toBe('903');
+
+        expect(wrapper.find('Item').at(1).key()).toBe('1128');
+    });
+});
diff --git a/src/components/VirtualList/tests/scroll-Firefox.test.js b/src/components/VirtualList/tests/scroll-Firefox.test.js
new file mode 100644
index 000000000..3af27c31b
--- /dev/null
+++ b/src/components/VirtualList/tests/scroll-Firefox.test.js
@@ -0,0 +1,95 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { spyElementPrototypes } from '../../../tests/domHook';
+import List from '../VirtualList';
+import isFF from '../utils/isFirefox';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+function genData(count) {
+    return new Array(count)
+        .fill(null)
+        .map((_, index) => ({ id: String(index) }));
+}
+
+jest.mock('../utils/isFirefox', () => true);
+
+describe('List.Firefox-Scroll', () => {
+    let mockElement;
+
+    beforeAll(() => {
+        mockElement = spyElementPrototypes(HTMLElement, {
+            offsetHeight: {
+                get: () => 20,
+            },
+            clientHeight: {
+                get: () => 100,
+            },
+        });
+    });
+
+    afterAll(() => {
+        mockElement.mockRestore();
+    });
+
+    beforeEach(() => {
+        jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+
+    function genList(props) {
+        let node = (
+            <List component="ul" itemKey="id" {...props}>
+                {({ id }) => <li>{id}</li>}
+            </List>
+        );
+
+        if (props.ref) {
+            node = <div>{node}</div>;
+        }
+
+        return mount(node);
+    }
+
+    it('should be true', () => {
+        expect(isFF).toBe(true);
+    });
+
+    it('FireFox should patch scroll speed', () => {
+        const wheelPreventDefault = jest.fn();
+        const firefoxPreventDefault = jest.fn();
+        const wrapper = genList({
+            itemHeight: 20,
+            height: 100,
+            data: genData(100),
+        });
+        const ulElement = wrapper.find('ul').instance();
+
+        act(() => {
+            const wheelEvent = new Event('wheel');
+            wheelEvent.deltaY = 3;
+            wheelEvent.preventDefault = wheelPreventDefault;
+            ulElement.dispatchEvent(wheelEvent);
+
+            const firefoxPixelScrollEvent = new Event('MozMousePixelScroll');
+            firefoxPixelScrollEvent.detail = 6;
+            firefoxPixelScrollEvent.preventDefault = firefoxPreventDefault;
+            ulElement.dispatchEvent(firefoxPixelScrollEvent);
+
+            const firefoxScrollEvent = new Event('DOMMouseScroll');
+            firefoxScrollEvent.detail = 3;
+            firefoxScrollEvent.preventDefault = firefoxPreventDefault;
+            ulElement.dispatchEvent(firefoxScrollEvent);
+
+            jest.runAllTimers();
+        });
+
+        expect(wheelPreventDefault).not.toHaveBeenCalled();
+        expect(firefoxPreventDefault).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/src/components/VirtualList/tests/scroll.test.js b/src/components/VirtualList/tests/scroll.test.js
new file mode 100644
index 000000000..93869c4f4
--- /dev/null
+++ b/src/components/VirtualList/tests/scroll.test.js
@@ -0,0 +1,325 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { spyElementPrototypes } from '../../../tests/domHook';
+import List from '../';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+function genData(count) {
+    return new Array(count)
+        .fill(null)
+        .map((_, index) => ({ id: String(index) }));
+}
+
+describe('List.Scroll', () => {
+    let mockElement;
+
+    beforeAll(() => {
+        mockElement = spyElementPrototypes(HTMLElement, {
+            offsetHeight: {
+                get: () => 20,
+            },
+            clientHeight: {
+                get: () => 100,
+            },
+        });
+    });
+
+    afterAll(() => {
+        mockElement.mockRestore();
+    });
+
+    beforeEach(() => {
+        jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+
+    function genList(props) {
+        let node = (
+            <List component="ul" itemKey="id" {...props}>
+                {({ id }) => <li>{id}</li>}
+            </List>
+        );
+
+        if (props.ref) {
+            node = <div>{node}</div>;
+        }
+
+        return mount(node);
+    }
+
+    it('scrollTo null will show the scrollbar', () => {
+        jest.useFakeTimers();
+        const listRef = React.createRef();
+        const wrapper = genList({
+            itemHeight: 20,
+            height: 100,
+            data: genData(100),
+            ref: listRef,
+        });
+        jest.runAllTimers();
+
+        listRef.current.scrollTo(null);
+        expect(
+            wrapper.find('.virtual-list-scrollbar-thumb').props().style.display
+        ).not.toEqual('none');
+        jest.useRealTimers();
+    });
+
+    describe('scrollTo number', () => {
+        it('value scroll', () => {
+            const listRef = React.createRef();
+            const wrapper = genList({
+                itemHeight: 20,
+                height: 100,
+                data: genData(100),
+                ref: listRef,
+            });
+            listRef.current.scrollTo(903);
+            jest.runAllTimers();
+            expect(wrapper.find('ul').instance().scrollTop).toEqual(903);
+
+            wrapper.unmount();
+        });
+    });
+
+    describe('scroll to object', () => {
+        const listRef = React.createRef();
+        const wrapper = genList({
+            itemHeight: 20,
+            height: 100,
+            data: genData(100),
+            ref: listRef,
+        });
+
+        describe('index scroll', () => {
+            it('work', () => {
+                listRef.current.scrollTo({ index: 30, align: 'top' });
+                jest.runAllTimers();
+                expect(wrapper.find('ul').instance().scrollTop).toEqual(600);
+            });
+
+            it('out of range should not crash', () => {
+                expect(() => {
+                    listRef.current.scrollTo({
+                        index: 99999999999,
+                        align: 'top',
+                    });
+                    jest.runAllTimers();
+                }).not.toThrow();
+            });
+        });
+
+        it('scroll top should not out of range', () => {
+            listRef.current.scrollTo({ index: 0, align: 'bottom' });
+            jest.runAllTimers();
+            expect(wrapper.find('ul').instance().scrollTop).toEqual(0);
+        });
+
+        it('key scroll', () => {
+            listRef.current.scrollTo({ key: '30', align: 'bottom' });
+            jest.runAllTimers();
+            expect(wrapper.find('ul').instance().scrollTop).toEqual(520);
+        });
+
+        it('smart', () => {
+            listRef.current.scrollTo(0);
+            listRef.current.scrollTo({ index: 30 });
+            jest.runAllTimers();
+            expect(wrapper.find('ul').instance().scrollTop).toEqual(520);
+
+            listRef.current.scrollTo(800);
+            listRef.current.scrollTo({ index: 30 });
+            jest.runAllTimers();
+            expect(wrapper.find('ul').instance().scrollTop).toEqual(600);
+        });
+    });
+
+    it('inject wheel', () => {
+        const preventDefault = jest.fn();
+        const wrapper = genList({
+            itemHeight: 20,
+            height: 100,
+            data: genData(100),
+        });
+        const ulElement = wrapper.find('ul').instance();
+
+        act(() => {
+            const wheelEvent = new Event('wheel');
+            wheelEvent.deltaY = 3;
+            wheelEvent.preventDefault = preventDefault;
+            ulElement.dispatchEvent(wheelEvent);
+
+            jest.runAllTimers();
+        });
+
+        expect(preventDefault).toHaveBeenCalled();
+    });
+
+    describe('scrollbar', () => {
+        it('moving', () => {
+            const listRef = React.createRef();
+            const wrapper = genList({
+                itemHeight: 20,
+                height: 100,
+                data: genData(100),
+                ref: listRef,
+            });
+
+            // Mouse down
+            wrapper
+                .find('.virtual-list-scrollbar-thumb')
+                .simulate('mousedown', {
+                    pageY: 0,
+                });
+
+            // Mouse move
+            act(() => {
+                const mouseMoveEvent = new Event('mousemove');
+                mouseMoveEvent.pageY = 10;
+                window.dispatchEvent(mouseMoveEvent);
+            });
+
+            expect(
+                wrapper.find('.virtual-list-holder').props().style.pointerEvents
+            ).toEqual('none');
+
+            act(() => {
+                jest.runAllTimers();
+            });
+
+            // Mouse up
+            act(() => {
+                const mouseUpEvent = new Event('mouseup');
+                window.dispatchEvent(mouseUpEvent);
+            });
+
+            expect(wrapper.find('ul').instance().scrollTop > 10).toBeTruthy();
+        });
+
+        describe('not show scrollbar when disabled virtual', () => {
+            [
+                { name: '!virtual', props: { virtual: false } },
+                {
+                    name: '!height',
+                    props: { height: null },
+                },
+                {
+                    name: '!itemHeight',
+                    props: { itemHeight: null },
+                },
+            ].forEach(({ name, props }) => {
+                it(name, () => {
+                    const wrapper = genList({
+                        itemHeight: 20,
+                        height: 100,
+                        data: genData(5),
+                        ...props,
+                    });
+                    expect(
+                        wrapper.find('.virtual-list-scrollbar-thumb')
+                    ).toHaveLength(0);
+                });
+            });
+        });
+    });
+
+    it('no bubble', () => {
+        const wrapper = genList({
+            itemHeight: 20,
+            height: 100,
+            data: genData(100),
+        });
+
+        // Mouse down
+        const preventDefault = jest.fn();
+        const stopPropagation = jest.fn();
+        wrapper.find('.virtual-list-scrollbar').simulate('mousedown', {
+            preventDefault,
+            stopPropagation,
+        });
+
+        expect(preventDefault).toHaveBeenCalled();
+        expect(stopPropagation).toHaveBeenCalled();
+    });
+
+    it('onScroll should trigger on correct target', () => {
+        // Save in tmp variable since React will clean up this
+        let currentTarget;
+        const onScroll = jest.fn((e) => {
+            ({ currentTarget } = e);
+        });
+        const wrapper = genList({
+            itemHeight: 20,
+            height: 100,
+            data: genData(100),
+            onScroll,
+        });
+        wrapper.find('.virtual-list-holder').simulate('scroll');
+
+        expect(currentTarget).toBe(
+            wrapper.find('.virtual-list-holder').hostNodes().instance()
+        );
+    });
+
+    describe('scroll should in range', () => {
+        it('less than 0', () => {
+            const wrapper = genList({
+                itemHeight: 20,
+                height: 100,
+                data: genData(100),
+            });
+            const ulElement = wrapper.find('ul').instance();
+
+            act(() => {
+                const wheelEvent = new Event('wheel');
+                wheelEvent.deltaY = 9999999;
+                ulElement.dispatchEvent(wheelEvent);
+
+                jest.runAllTimers();
+            });
+
+            wrapper.setProps({ data: genData(1) });
+            act(() => {
+                wrapper
+                    .find('.virtual-list-holder')
+                    .props()
+                    .onScroll({
+                        currentTarget: {
+                            scrollTop: 0,
+                        },
+                    });
+            });
+
+            wrapper.setProps({ data: genData(100) });
+
+            expect(wrapper.find('ScrollBar').props().scrollTop).toEqual(0);
+        });
+
+        it('over max height', () => {
+            const wrapper = genList({
+                itemHeight: 20,
+                height: 100,
+                data: genData(100),
+            });
+            const ulElement = wrapper.find('ul').instance();
+
+            act(() => {
+                const wheelEvent = new Event('wheel');
+                wheelEvent.deltaY = 9999999;
+                ulElement.dispatchEvent(wheelEvent);
+
+                jest.runAllTimers();
+            });
+
+            wrapper.update();
+
+            expect(wrapper.find('ScrollBar').props().scrollTop).toEqual(1900);
+        });
+    });
+});
diff --git a/src/components/VirtualList/tests/touch.test.js b/src/components/VirtualList/tests/touch.test.js
new file mode 100644
index 000000000..77cd2cbc8
--- /dev/null
+++ b/src/components/VirtualList/tests/touch.test.js
@@ -0,0 +1,150 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { spyElementPrototypes } from '../../../tests/domHook';
+import List from '../';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+function genData(count) {
+    return new Array(count)
+        .fill(null)
+        .map((_, index) => ({ id: String(index) }));
+}
+
+describe('List.Touch', () => {
+    let mockElement;
+
+    beforeAll(() => {
+        mockElement = spyElementPrototypes(HTMLElement, {
+            offsetHeight: {
+                get: () => 20,
+            },
+            clientHeight: {
+                get: () => 100,
+            },
+        });
+    });
+
+    afterAll(() => {
+        mockElement.mockRestore();
+    });
+
+    beforeEach(() => {
+        jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+
+    function genList(props) {
+        let node = (
+            <List component="ul" itemKey="id" {...props}>
+                {({ id }) => <li>{id}</li>}
+            </List>
+        );
+
+        if (props.ref) {
+            node = <div>{node}</div>;
+        }
+
+        return mount(node);
+    }
+
+    describe('touch content', () => {
+        it('touch scroll should work', () => {
+            const wrapper = genList({
+                itemHeight: 20,
+                height: 100,
+                data: genData(100),
+            });
+
+            function getElement() {
+                return wrapper.find('.virtual-list-holder').instance();
+            }
+
+            // start
+            const touchEvent = new Event('touchstart');
+            touchEvent.touches = [{ pageY: 100 }];
+            getElement().dispatchEvent(touchEvent);
+
+            // move
+            const moveEvent = new Event('touchmove');
+            moveEvent.touches = [{ pageY: 90 }];
+            getElement().dispatchEvent(moveEvent);
+
+            // end
+            const endEvent = new Event('touchend');
+            getElement().dispatchEvent(endEvent);
+
+            // smooth
+            jest.runAllTimers();
+            expect(wrapper.find('ul').instance().scrollTop > 10).toBeTruthy();
+
+            wrapper.unmount();
+        });
+
+        it('not call when not scroll-able', () => {
+            const wrapper = genList({
+                itemHeight: 20,
+                height: 100,
+                data: genData(100),
+            });
+
+            function getElement() {
+                return wrapper.find('.virtual-list-holder').instance();
+            }
+
+            // start
+            const touchEvent = new Event('touchstart');
+            touchEvent.touches = [{ pageY: 500 }];
+            getElement().dispatchEvent(touchEvent);
+
+            // move
+            const preventDefault = jest.fn();
+            const moveEvent = new Event('touchmove');
+            moveEvent.touches = [{ pageY: 0 }];
+            moveEvent.preventDefault = preventDefault;
+            getElement().dispatchEvent(moveEvent);
+
+            // Call preventDefault
+            expect(preventDefault).toHaveBeenCalled();
+
+            // ======= Not call since scroll to the bottom =======
+            jest.runAllTimers();
+            preventDefault.mockReset();
+
+            // start
+            const touchEvent2 = new Event('touchstart');
+            touchEvent2.touches = [{ pageY: 500 }];
+            getElement().dispatchEvent(touchEvent2);
+
+            // move
+            const moveEvent2 = new Event('touchmove');
+            moveEvent2.touches = [{ pageY: 0 }];
+            moveEvent2.preventDefault = preventDefault;
+            getElement().dispatchEvent(moveEvent2);
+
+            expect(preventDefault).not.toHaveBeenCalled();
+        });
+    });
+
+    it('should container preventDefault', () => {
+        const preventDefault = jest.fn();
+        const wrapper = genList({
+            itemHeight: 20,
+            height: 100,
+            data: genData(100),
+        });
+
+        const touchEvent = new Event('touchstart');
+        touchEvent.preventDefault = preventDefault;
+        wrapper
+            .find('.virtual-list-scrollbar')
+            .instance()
+            .dispatchEvent(touchEvent);
+
+        expect(preventDefault).toHaveBeenCalled();
+    });
+});
diff --git a/src/components/VirtualList/tests/util.test.ts b/src/components/VirtualList/tests/util.test.ts
new file mode 100644
index 000000000..8d812db1e
--- /dev/null
+++ b/src/components/VirtualList/tests/util.test.ts
@@ -0,0 +1,180 @@
+import { getIndexByStartLoc, findListDiffIndex } from '../utils/algorithmUtil';
+
+describe('Util', () => {
+    describe('Algorithm', () => {
+        describe('getIndexByStartLoc', () => {
+            function test(
+                name: string,
+                min: number,
+                max: number,
+                start: number,
+                expectList: number[]
+            ) {
+                it(name, () => {
+                    const len = max - min + 1;
+                    const renderList = new Array(len)
+                        .fill(null)
+                        .map((_, index) =>
+                            getIndexByStartLoc(min, max, start, index)
+                        );
+
+                    expect(renderList).toEqual(expectList);
+                });
+            }
+
+            // Balance
+            test('balance - basic', 0, 2, 1, [1, 2, 0]);
+            test(
+                'balance - moving',
+                3,
+                13,
+                8,
+                [8, 9, 7, 10, 6, 11, 5, 12, 4, 13, 3]
+            );
+
+            // After less
+            test('after less', 3, 9, 7, [7, 8, 6, 9, 5, 4, 3]);
+
+            // Before less
+            test('before less', 1, 9, 3, [3, 4, 2, 5, 1, 6, 7, 8, 9]);
+        });
+
+        describe('findListDiff', () => {
+            describe('remove', () => {
+                function test(name: string, length: number, diff: number) {
+                    it(name, () => {
+                        const originList = new Array(length)
+                            .fill(null)
+                            .map((_, index) => index);
+                        const targetList = originList.slice();
+                        targetList.splice(diff, 1);
+
+                        expect(
+                            findListDiffIndex(
+                                originList,
+                                targetList,
+                                (num) => num
+                            )
+                        ).toEqual({
+                            index: diff,
+                            multiple: false,
+                        });
+                    });
+                }
+
+                for (let i = 0; i < 100; i += 1) {
+                    test(`diff index: ${i}`, 100, i);
+                }
+            });
+
+            describe('add', () => {
+                function test(name: string, length: number, diff: number) {
+                    it(name, () => {
+                        const originList = new Array(length)
+                            .fill(null)
+                            .map((_, index) => index);
+                        const targetList = originList.slice();
+                        targetList.splice(diff, 0, parseInt('NEW_ITEM', 10));
+
+                        expect(
+                            findListDiffIndex(
+                                originList,
+                                targetList,
+                                (num) => num
+                            )
+                        ).toEqual({
+                            index: diff,
+                            multiple: false,
+                        });
+                    });
+                }
+
+                for (let i = 0; i < 100; i += 1) {
+                    test(`diff index: ${i}`, 100, i);
+                }
+            });
+
+            it('both empty', () => {
+                expect(findListDiffIndex([], [], (num) => num)).toEqual(null);
+            });
+
+            it('same list', () => {
+                const list = [1, 2, 3, 4];
+                expect(findListDiffIndex(list, list, (num) => num)).toEqual(
+                    null
+                );
+            });
+
+            it('small list', () => {
+                expect(findListDiffIndex([0], [], (num) => num)).toEqual({
+                    index: 0,
+                    multiple: false,
+                });
+                expect(findListDiffIndex([0, 1], [0], (num) => num)).toEqual({
+                    index: 1,
+                    multiple: false,
+                });
+                expect(findListDiffIndex([0, 1, 2], [0], (num) => num)).toEqual(
+                    {
+                        index: 1,
+                        multiple: true,
+                    }
+                );
+                expect(findListDiffIndex([], [0], (num) => num)).toEqual({
+                    index: 0,
+                    multiple: false,
+                });
+                expect(findListDiffIndex([0], [0, 1], (num) => num)).toEqual({
+                    index: 1,
+                    multiple: false,
+                });
+            });
+
+            it('diff only 1', () => {
+                const indexArray = [0, 1, 2];
+                expect(findListDiffIndex(indexArray, [], (num) => num)).toEqual(
+                    {
+                        index: 0,
+                        multiple: true,
+                    }
+                );
+                expect(
+                    findListDiffIndex(indexArray, [1, 2], (num) => num)
+                ).toEqual({
+                    index: 0,
+                    multiple: false,
+                });
+                expect(
+                    findListDiffIndex(indexArray, [0, 2], (num) => num)
+                ).toEqual({
+                    index: 1,
+                    multiple: false,
+                });
+                expect(
+                    findListDiffIndex(indexArray, [0, 1], (num) => num)
+                ).toEqual({
+                    index: 2,
+                    multiple: false,
+                });
+                expect(
+                    findListDiffIndex(indexArray, [0], (num) => num)
+                ).toEqual({
+                    index: 1,
+                    multiple: true,
+                });
+                expect(
+                    findListDiffIndex(indexArray, [1], (num) => num)
+                ).toEqual({
+                    index: 0,
+                    multiple: true,
+                });
+                expect(findListDiffIndex([0, 1, 2], [2], (num) => num)).toEqual(
+                    {
+                        index: 0,
+                        multiple: true,
+                    }
+                );
+            });
+        });
+    });
+});
diff --git a/src/components/VirtualList/utils/CacheMap.ts b/src/components/VirtualList/utils/CacheMap.ts
new file mode 100644
index 000000000..ac57ddef5
--- /dev/null
+++ b/src/components/VirtualList/utils/CacheMap.ts
@@ -0,0 +1,20 @@
+import type React from 'react';
+
+// Firefox has low performance of map.
+class CacheMap {
+    maps: Record<string, number>;
+
+    constructor() {
+        this.maps = Object.create(null);
+    }
+
+    set(key: React.ReactText, value: number) {
+        this.maps[key] = value;
+    }
+
+    get(key: React.ReactText) {
+        return this.maps[key];
+    }
+}
+
+export default CacheMap;
diff --git a/src/components/VirtualList/utils/algorithmUtil.ts b/src/components/VirtualList/utils/algorithmUtil.ts
new file mode 100644
index 000000000..03031861c
--- /dev/null
+++ b/src/components/VirtualList/utils/algorithmUtil.ts
@@ -0,0 +1,91 @@
+import type * as React from 'react';
+/**
+ * Get index with specific start index one by one. e.g.
+ * min: 3, max: 9, start: 6
+ *
+ * Return index is:
+ * [0]: 6
+ * [1]: 7
+ * [2]: 5
+ * [3]: 8
+ * [4]: 4
+ * [5]: 9
+ * [6]: 3
+ */
+export function getIndexByStartLoc(
+    min: number,
+    max: number,
+    start: number,
+    index: number
+): number {
+    const beforeCount = start - min;
+    const afterCount = max - start;
+    const balanceCount = Math.min(beforeCount, afterCount) * 2;
+
+    // Balance
+    if (index <= balanceCount) {
+        const stepIndex = Math.floor(index / 2);
+        if (index % 2) {
+            return start + stepIndex + 1;
+        }
+        return start - stepIndex;
+    }
+
+    // One is out of range
+    if (beforeCount > afterCount) {
+        return start - (index - afterCount);
+    }
+    return start + (index - beforeCount);
+}
+
+/**
+ * We assume that 2 list has only 1 item diff and others keeping the order.
+ * So we can use dichotomy algorithm to find changed one.
+ */
+export function findListDiffIndex<T>(
+    originList: T[],
+    targetList: T[],
+    getKey: (item: T) => React.Key
+): { index: number; multiple: boolean } | null {
+    const originLen = originList.length;
+    const targetLen = targetList.length;
+
+    let shortList: T[];
+    let longList: T[];
+
+    if (originLen === 0 && targetLen === 0) {
+        return null;
+    }
+
+    if (originLen < targetLen) {
+        shortList = originList;
+        longList = targetList;
+    } else {
+        shortList = targetList;
+        longList = originList;
+    }
+
+    const notExistKey = { __EMPTY_ITEM__: true };
+    function getItemKey(item: T) {
+        if (item !== undefined) {
+            return getKey(item);
+        }
+        return notExistKey;
+    }
+
+    // Loop to find diff one
+    let diffIndex: number = null;
+    let multiple = Math.abs(originLen - targetLen) !== 1;
+    for (let i = 0; i < longList.length; i += 1) {
+        const shortKey = getItemKey(shortList[i]);
+        const longKey = getItemKey(longList[i]);
+
+        if (shortKey !== longKey) {
+            diffIndex = i;
+            multiple = multiple || shortKey !== getItemKey(longList[i + 1]);
+            break;
+        }
+    }
+
+    return diffIndex === null ? null : { index: diffIndex, multiple };
+}
diff --git a/src/components/VirtualList/utils/isFirefox.ts b/src/components/VirtualList/utils/isFirefox.ts
new file mode 100644
index 000000000..8380bbaf6
--- /dev/null
+++ b/src/components/VirtualList/utils/isFirefox.ts
@@ -0,0 +1,4 @@
+const isFF: boolean =
+    typeof navigator === 'object' && /Firefox/i.test(navigator.userAgent);
+
+export default isFF;
diff --git a/src/hooks/useBreakpoint.ts b/src/hooks/useBreakpoint.ts
new file mode 100644
index 000000000..a83724e29
--- /dev/null
+++ b/src/hooks/useBreakpoint.ts
@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react';
+import { useForceUpdate } from './useForceUpdate';
+import type { Breakpoint, ScreenMap } from '../shared/utilities';
+import { responsiveObserve } from '../shared/utilities';
+
+export const useBreakpoint: (refreshOnChange?: boolean) => ScreenMap = (
+    refreshOnChange: boolean = true
+): ScreenMap => {
+    const screensRef: React.MutableRefObject<
+        Partial<Record<Breakpoint, boolean>>
+    > = useRef<ScreenMap>({});
+    const forceUpdate: React.DispatchWithoutAction = useForceUpdate();
+
+    useEffect(() => {
+        const token: number = responsiveObserve.subscribe((supportScreens) => {
+            screensRef.current = supportScreens;
+            if (refreshOnChange) {
+                forceUpdate();
+            }
+        });
+
+        return () => responsiveObserve.unsubscribe(token);
+    }, []);
+
+    return screensRef.current;
+};
diff --git a/src/hooks/useConst.ts b/src/hooks/useConst.ts
index 4ff7ca6dd..6a49bfd54 100644
--- a/src/hooks/useConst.ts
+++ b/src/hooks/useConst.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useRef } from 'react';
 
 /**
  * Hook to initialize and return a constant value. Unlike `React.useMemo`, this is guaranteed to
@@ -15,7 +15,9 @@ export const useConst = <T>(initialValue: T | (() => T)): T => {
     // Use useRef to store the value because it's the least expensive built-in hook that works here
     // (we could also use `const [value] = React.useState(initialValue)` but that's more expensive
     // internally due to reducer handling which we don't need)
-    const ref = React.useRef<{ value: T }>();
+    const ref: React.MutableRefObject<{
+        value: T;
+    }> = useRef<{ value: T }>();
     if (ref.current === undefined) {
         // Box the value in an object so we can tell if it's initialized even if the initializer
         // returns/is undefined
diff --git a/src/hooks/useEffectOnlyOnUpdate.tsx b/src/hooks/useEffectOnlyOnUpdate.tsx
index 194724296..ecf01eec0 100644
--- a/src/hooks/useEffectOnlyOnUpdate.tsx
+++ b/src/hooks/useEffectOnlyOnUpdate.tsx
@@ -6,16 +6,16 @@ import React, { useEffect, useRef } from 'react';
  * @param dependencies list of deps which will trigger callback on update.
  */
 export const useEffectOnlyOnUpdate = (
-  callback: React.EffectCallback,
-  dependencies: React.DependencyList
+    callback: React.EffectCallback,
+    dependencies: React.DependencyList
 ) => {
-  const didMount = useRef(false);
+    const didMount = useRef(false);
 
-  useEffect(() => {
-    if (didMount.current) {
-      callback();
-    } else {
-      didMount.current = true;
-    }
-  }, [callback, dependencies]);
+    useEffect(() => {
+        if (didMount.current) {
+            callback();
+        } else {
+            didMount.current = true;
+        }
+    }, [callback, dependencies]);
 };
diff --git a/src/hooks/useFontSize.ts b/src/hooks/useFontSize.ts
new file mode 100644
index 000000000..a6e426b32
--- /dev/null
+++ b/src/hooks/useFontSize.ts
@@ -0,0 +1,74 @@
+import { useReducer } from 'react';
+import { canUseDom } from '../shared/utilities';
+
+import { useLocalStorage } from './useLocalStorage';
+
+export interface UseFontSizeProps {
+    storageKey?: string;
+    initialSize?: string;
+    variableName?: string;
+}
+
+/**
+ * Set the CSS variable in the <html> node
+ */
+const applyPropToDocument = (variableName: string, storedFontSize: string) =>
+    document.documentElement.style.setProperty(variableName, storedFontSize);
+
+/**
+ * Retrieve the CSS variable value from the <html> node
+ */
+const getDocumentProp = (variableName: string) =>
+    document.documentElement.style.getPropertyValue(variableName);
+
+/**
+ *
+ * @param {UseFontSizeProps} options
+ */
+export const useFontSize = ({
+    storageKey = 'f_s',
+    initialSize = '20px',
+    variableName = '--font-size',
+}: UseFontSizeProps = {}) => {
+    /**
+     * Create a state connected to the localStorage.
+     * This is necessary to consistently store
+     * the key/value pair with the font size
+     */
+    const [storedFontSize, storeFontSize] = useLocalStorage(
+        storageKey,
+        initialSize
+    );
+
+    /**
+     * The init function for the useReducer hook.
+     * This function runs on the first render when used and takes care of:
+     * - Check if the hook runs in the client, otherwise return the default value
+     * - If a font size is already stored in the localStorage, set it as CSS variable
+     * - Return the stored value as the state value.
+     */
+    function init(initialValue: string) {
+        if (!canUseDom()) return initialValue;
+        if (storedFontSize) applyPropToDocument(variableName, storedFontSize);
+        return storedFontSize || getDocumentProp(variableName);
+    }
+
+    /**
+     * The reducer function, that we'll use in out components
+     * to update the font size with user interactions.
+     * It set the new value for the CSS variable and save it as the state.
+     */
+    function reducer(_state: string, newFont: string | number) {
+        const newSize = `${newFont}px`;
+        applyPropToDocument(variableName, newSize);
+        storeFontSize(newSize);
+        return newFont;
+    }
+
+    /**
+     * Here is where the hook directly returns
+     * the useReducer return value, in the form of
+     * [fontSize, setFontSize]
+     */
+    return useReducer(reducer, initialSize, init);
+};
diff --git a/src/hooks/useForceUpdate.ts b/src/hooks/useForceUpdate.ts
new file mode 100644
index 000000000..58a3e4bf1
--- /dev/null
+++ b/src/hooks/useForceUpdate.ts
@@ -0,0 +1,6 @@
+import React, { useReducer } from 'react';
+
+export const useForceUpdate: () => React.DispatchWithoutAction = () => {
+    const [, forceUpdate] = useReducer((x) => x + 1, 0);
+    return forceUpdate;
+};
diff --git a/src/hooks/useMemo.test.tsx b/src/hooks/useMemo.test.tsx
new file mode 100644
index 000000000..77e3fa3b2
--- /dev/null
+++ b/src/hooks/useMemo.test.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { useMemo } from './useMemo';
+
+let disableUseId = false;
+
+jest.mock('react', () => {
+    const react = jest.requireActual('react');
+
+    const clone = { ...react };
+
+    Object.defineProperty(clone, 'useId', {
+        get: () => (disableUseId ? undefined : react.useId),
+    });
+
+    return clone;
+});
+
+describe('hooks', () => {
+    it('useMemo', () => {
+        const FC = (props: { open: any; data: any }) => {
+            const { open, data } = props;
+            const memoData = useMemo(
+                () => data,
+                [open, data],
+                (prev, next) => next[0] && prev[1] !== next[1]
+            );
+            return <div>{memoData}</div>;
+        };
+
+        const { container, rerender } = render(<FC data="open" open />);
+        expect(container.querySelector('div').textContent).toEqual('open');
+
+        rerender(<FC data="again" open />);
+        expect(container.querySelector('div').textContent).toEqual('again');
+
+        rerender(<FC data="close" open={false} />);
+        expect(container.querySelector('div').textContent).toEqual('again');
+
+        rerender(<FC data="repeat" open />);
+        expect(container.querySelector('div').textContent).toEqual('repeat');
+    });
+});
diff --git a/src/hooks/useMemo.ts b/src/hooks/useMemo.ts
new file mode 100644
index 000000000..506c71159
--- /dev/null
+++ b/src/hooks/useMemo.ts
@@ -0,0 +1,28 @@
+import React from 'react';
+
+interface Cache<Value, Condition> {
+    condition?: Condition;
+    value?: Value;
+}
+
+export const useMemo: <Value, Condition = any[]>(
+    getValue: () => Value,
+    condition: Condition,
+    shouldUpdate: (prev: Condition, next: Condition) => boolean
+) => Value = <Value, Condition = any[]>(
+    getValue: () => Value,
+    condition: Condition,
+    shouldUpdate: (prev: Condition, next: Condition) => boolean
+): Value => {
+    const cacheRef = React.useRef<Cache<Value, Condition>>({});
+
+    if (
+        !('value' in cacheRef.current) ||
+        shouldUpdate(cacheRef.current.condition, condition)
+    ) {
+        cacheRef.current.value = getValue();
+        cacheRef.current.condition = condition;
+    }
+
+    return cacheRef.current.value;
+};
diff --git a/src/hooks/useMergedState.test.tsx b/src/hooks/useMergedState.test.tsx
new file mode 100644
index 000000000..b5cd4a74a
--- /dev/null
+++ b/src/hooks/useMergedState.test.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { useMergedState } from './useMergedState';
+
+describe('useMergedState', () => {
+    const FC = ({ value }: { value: string }) => {
+        const [val, setVal] = useMergedState('empty', { value });
+        return (
+            <input
+                defaultValue={val}
+                onChange={(e) => {
+                    setVal(e.target.value);
+                }}
+            />
+        );
+    };
+
+    it('still control of to undefined', () => {
+        const { container, rerender } = render(<FC value="test" />);
+
+        expect(container.querySelector('input').value).toEqual('test');
+
+        rerender(<FC value={undefined} />);
+        expect(container.querySelector('input').value).toEqual('test');
+    });
+
+    it('correct defaultValue', () => {
+        const { container } = render(<FC value="test" />);
+
+        expect(container.querySelector('input').value).toEqual('test');
+    });
+
+    it('not rerender when setState as deps', () => {
+        let renderTimes = 0;
+
+        const Test = () => {
+            const [val, setVal] = useMergedState(0);
+
+            React.useEffect(() => {
+                renderTimes += 1;
+                expect(renderTimes < 10).toBeTruthy();
+
+                setVal(1);
+            }, [setVal]);
+
+            return <div>{val}</div>;
+        };
+
+        const { container } = render(<Test />);
+        expect(container.firstChild.textContent).toEqual('1');
+    });
+
+    it('React 18 should not reset to undefined', () => {
+        const Demo = () => {
+            const [val] = useMergedState(33, { value: undefined });
+
+            return <div>{val}</div>;
+        };
+
+        const { container } = render(
+            <React.StrictMode>
+                <Demo />
+            </React.StrictMode>
+        );
+
+        expect(container.querySelector('div').textContent).toEqual('33');
+    });
+
+    it('postState', () => {
+        const Demo = () => {
+            const [val] = useMergedState(1, { postState: (v) => v * 2 });
+
+            return <div>{val}</div>;
+        };
+
+        const { container } = render(
+            <React.StrictMode>
+                <Demo />
+            </React.StrictMode>
+        );
+
+        expect(container.querySelector('div').textContent).toEqual('2');
+    });
+});
diff --git a/src/hooks/useMergedState.ts b/src/hooks/useMergedState.ts
new file mode 100644
index 000000000..1cc541317
--- /dev/null
+++ b/src/hooks/useMergedState.ts
@@ -0,0 +1,73 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useSafeState } from './useState';
+
+/**
+ * Similar to `useState` but will use props value if provided.
+ * Note that internal use util `useState` hook.
+ */
+export const useMergedState: <T, R = T>(
+    defaultStateValue: T | (() => T),
+    option?: {
+        defaultValue?: T | (() => T);
+        value?: T;
+        onChange?: (value: T, prevValue: T) => void;
+        postState?: (value: T) => T;
+    }
+) => [R, (value: T, ignoreDestroy?: boolean) => void] = <T, R = T>(
+    defaultStateValue: T | (() => T),
+    option?: {
+        defaultValue?: T | (() => T);
+        value?: T;
+        onChange?: (value: T, prevValue: T) => void;
+        postState?: (value: T) => T;
+    }
+): [R, (value: T, ignoreDestroy?: boolean) => void] => {
+    const { defaultValue, value, onChange, postState } = option || {};
+    const [innerValue, setInnerValue] = useSafeState<T>(() => {
+        if (value !== undefined) {
+            return value;
+        }
+        if (defaultValue !== undefined) {
+            return typeof defaultValue === 'function'
+                ? (defaultValue as any)()
+                : defaultValue;
+        }
+        return typeof defaultStateValue === 'function'
+            ? (defaultStateValue as any)()
+            : defaultStateValue;
+    });
+
+    let mergedValue: T = value !== undefined ? value : innerValue;
+    if (postState) {
+        mergedValue = postState(mergedValue);
+    }
+
+    // setState
+    const onChangeRef: React.MutableRefObject<
+        (value: T, prevValue: T) => void
+    > = useRef(onChange);
+    onChangeRef.current = onChange;
+
+    const triggerChange: (newValue: T, ignoreDestroy?: boolean) => void =
+        useCallback(
+            (newValue: T, ignoreDestroy?: boolean) => {
+                setInnerValue(newValue, ignoreDestroy);
+                if (mergedValue !== newValue && onChangeRef.current) {
+                    onChangeRef.current(newValue, mergedValue);
+                }
+            },
+            [mergedValue, onChangeRef]
+        );
+
+    // Effect of reset value to `undefined`
+    const prevValueRef: React.MutableRefObject<T> = useRef(value);
+    useEffect(() => {
+        if (value === undefined && value !== prevValueRef.current) {
+            setInnerValue(value);
+        }
+
+        prevValueRef.current = value;
+    }, [value]);
+
+    return [mergedValue as unknown as R, triggerChange];
+};
diff --git a/src/hooks/useOnClickOutside.ts b/src/hooks/useOnClickOutside.ts
index 64a98bf32..a8963dccd 100644
--- a/src/hooks/useOnClickOutside.ts
+++ b/src/hooks/useOnClickOutside.ts
@@ -11,12 +11,15 @@ export const useOnClickOutside = (
     handler: (event: MouseEvent) => void,
     visible: boolean = true
 ): void => {
-    const listener = useCallback((event: MouseEvent): void => {
-        if (ref?.current?.contains(event.target)) {
-            return;
-        }
-        handler(event);
-    }, []);
+    const listener: (event: MouseEvent) => void = useCallback(
+        (event: MouseEvent): void => {
+            if (ref?.current?.contains(event.target)) {
+                return;
+            }
+            handler(event);
+        },
+        []
+    );
 
     const removeEventListeners = (): void => {
         document.removeEventListener('mousedown', listener);
diff --git a/src/hooks/useScrollLock.ts b/src/hooks/useScrollLock.ts
index de230a3c6..3e2b40ae5 100644
--- a/src/hooks/useScrollLock.ts
+++ b/src/hooks/useScrollLock.ts
@@ -1,19 +1,22 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
 /**
  * Hook to lock scroll on the given element
  * @param element
  * @param shouldLock
  */
-export const useScrollLock = (element: HTMLElement, shouldLock: boolean) => {
-    let originalOverflow = useRef<string>('');
+export const useScrollLock = (
+    element: HTMLElement,
+    shouldLock: boolean
+): void => {
+    let originalOverflow: React.MutableRefObject<string> = useRef<string>('');
 
-    const lockScroll = React.useCallback(() => {
+    const lockScroll = useCallback(() => {
         originalOverflow.current = element.style.overflow;
         element.style.overflow = 'hidden';
     }, []);
 
-    const unlockScroll = React.useCallback(() => {
+    const unlockScroll = useCallback(() => {
         element.style.overflow = originalOverflow.current;
     }, []);
 
diff --git a/src/hooks/useState.test.tsx b/src/hooks/useState.test.tsx
new file mode 100644
index 000000000..fd53ac2a5
--- /dev/null
+++ b/src/hooks/useState.test.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { useSafeState } from './useState';
+
+describe('useSafeState', () => {
+    it('not throw', (done) => {
+        const errorSpy = jest.spyOn(console, 'error');
+
+        const Demo = () => {
+            const [val, setValue] = useSafeState(0);
+
+            React.useEffect(
+                () => () => {
+                    setTimeout(() => {
+                        setValue(1, true);
+                    }, 0);
+                },
+                []
+            );
+
+            return (
+                <button
+                    onClick={() => {
+                        setValue(93, true);
+                    }}
+                >
+                    {val}
+                </button>
+            );
+        };
+
+        const { container, unmount } = render(
+            <React.StrictMode>
+                <Demo />
+            </React.StrictMode>
+        );
+        expect(container.querySelector('button').textContent).toEqual('0');
+
+        // Update Value
+        fireEvent.click(container.querySelector('button'));
+        expect(container.querySelector('button').textContent).toEqual('93');
+
+        unmount();
+
+        setTimeout(() => {
+            expect(errorSpy).not.toHaveBeenCalled();
+            done();
+        }, 50);
+    });
+});
diff --git a/src/hooks/useState.ts b/src/hooks/useState.ts
new file mode 100644
index 000000000..d7546964d
--- /dev/null
+++ b/src/hooks/useState.ts
@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+declare type Updater<T> = T | ((prevValue: T) => T);
+
+export declare type SetState<T> = (
+    nextValue: Updater<T>,
+    /**
+     * Will not update state when destroyed.
+     * Developer should make sure this is safe to ignore.
+     */
+    ignoreDestroy?: boolean
+) => void;
+
+/**
+ * Same as React.useState but `setState` accept `ignoreDestroy` param to not to setState after destroyed.
+ * We do not make this auto is to avoid a real memory leak.
+ * Developer should confirm it's safe to ignore themselves.
+ */
+export const useSafeState = <T>(
+    defaultValue?: T | (() => T)
+): [T, SetState<T>] => {
+    const destroyRef: React.MutableRefObject<boolean> = React.useRef(false);
+    const [value, setValue] = React.useState(defaultValue);
+
+    React.useEffect(() => {
+        destroyRef.current = false;
+
+        return () => {
+            destroyRef.current = true;
+        };
+    }, []);
+
+    const safeSetState = (
+        updater: Updater<T>,
+        ignoreDestroy?: boolean
+    ): void => {
+        if (ignoreDestroy && destroyRef.current) {
+            return;
+        }
+
+        setValue(updater);
+    };
+
+    return [value, safeSetState];
+};
diff --git a/src/hooks/useSyncState.test.tsx b/src/hooks/useSyncState.test.tsx
new file mode 100644
index 000000000..761bf7e3b
--- /dev/null
+++ b/src/hooks/useSyncState.test.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { useSyncState } from './useSyncState';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Table values are not the previous value', () => {
+    it('useSyncState', () => {
+        const Test = () => {
+            const [getVal, setVal] = useSyncState('light');
+
+            return (
+                <span
+                    onClick={() => {
+                        setVal('bamboo');
+                    }}
+                >
+                    {getVal()}
+                </span>
+            );
+        };
+
+        const wrapper = mount(<Test />);
+        expect(wrapper.text()).toEqual('light');
+        wrapper.find('span').simulate('click');
+        expect(wrapper.text()).toEqual('bamboo');
+    });
+});
diff --git a/src/hooks/useSyncState.ts b/src/hooks/useSyncState.ts
new file mode 100644
index 000000000..fb3104f79
--- /dev/null
+++ b/src/hooks/useSyncState.ts
@@ -0,0 +1,19 @@
+import React, { useRef } from 'react';
+import { useForceUpdate } from './useForceUpdate';
+
+type UseSyncStateProps<T> = [() => T, (newValue: T) => void];
+
+export const useSyncState: <T>(initialValue: T) => UseSyncStateProps<T> = <T>(
+    initialValue: T
+): UseSyncStateProps<T> => {
+    const ref: React.MutableRefObject<T> = useRef<T>(initialValue);
+    const forceUpdate: React.DispatchWithoutAction = useForceUpdate();
+
+    return [
+        () => ref.current,
+        (newValue: T) => {
+            ref.current = newValue;
+            forceUpdate();
+        },
+    ];
+};
diff --git a/src/octuple.ts b/src/octuple.ts
index 4c936e65b..9d2312ab4 100644
--- a/src/octuple.ts
+++ b/src/octuple.ts
@@ -77,6 +77,21 @@ import { Portal } from './components/Portal';
 
 import { RadioButton, RadioGroup } from './components/Selectors';
 
+import Table, {
+    ColumnGroupType,
+    ColumnType,
+    ColumnsType,
+    ExpandableConfig,
+    FilterConfirmProps,
+    FilterValue,
+    SorterResult,
+    TablePaginationConfig,
+    TableProps,
+    TableRowSelection,
+} from './components/Table/';
+
+import { ResizeObserver } from './shared/ResizeObserver/ResizeObserver';
+
 import { useBoolean } from './hooks/useBoolean';
 
 import { useMatchMedia } from './hooks/useMatchMedia';
@@ -97,6 +112,9 @@ export {
     ButtonWidth,
     CheckBox,
     CheckBoxGroup,
+    ColumnGroupType,
+    ColumnType,
+    ColumnsType,
     ConfigProvider,
     DefaultButton,
     Dialog,
@@ -104,6 +122,9 @@ export {
     Dropdown,
     Empty,
     EmptyMode,
+    ExpandableConfig,
+    FilterConfirmProps,
+    FilterValue,
     Icon,
     IconName,
     IconSize,
@@ -132,15 +153,21 @@ export {
     PrimaryButton,
     RadioButton,
     RadioGroup,
+    ResizeObserver,
     Select,
     SearchBox,
     SecondaryButton,
     snack,
     Snackbar,
     SnackbarContainer,
+    SorterResult,
     Spinner,
     SpinnerSize,
     Stack,
+    Table,
+    TablePaginationConfig,
+    TableProps,
+    TableRowSelection,
     Tabs,
     Tab,
     TabVariant,
diff --git a/src/shared/ResizeObserver/Collection.tsx b/src/shared/ResizeObserver/Collection.tsx
new file mode 100644
index 000000000..f13ba0b72
--- /dev/null
+++ b/src/shared/ResizeObserver/Collection.tsx
@@ -0,0 +1,69 @@
+import React, { createContext, useCallback, useContext, useRef } from 'react';
+import type { SizeInfo } from './ResizeObserver';
+
+type onCollectionResize = (
+    size: SizeInfo,
+    element: HTMLElement,
+    data: any
+) => void;
+
+export const CollectionContext: React.Context<onCollectionResize> =
+    createContext<onCollectionResize>(null);
+
+export interface ResizeInfo {
+    size: SizeInfo;
+    data: any;
+    element: HTMLElement;
+}
+
+export interface CollectionProps {
+    /** Trigger when some children ResizeObserver changed. Collect by frame render level */
+    onBatchResize?: (resizeInfo: ResizeInfo[]) => void;
+    children?: React.ReactNode;
+}
+
+/**
+ * Collect all the resize event from children ResizeObserver
+ */
+export const Collection = ({
+    children,
+    onBatchResize,
+}: CollectionProps): JSX.Element => {
+    const resizeIdRef: React.MutableRefObject<number> = useRef(0);
+    const resizeInfosRef: React.MutableRefObject<ResizeInfo[]> = useRef<
+        ResizeInfo[]
+    >([]);
+
+    const onCollectionResize: onCollectionResize =
+        useContext(CollectionContext);
+
+    const onResize: onCollectionResize = useCallback<onCollectionResize>(
+        (size, element, data) => {
+            resizeIdRef.current += 1;
+            const currentId: number = resizeIdRef.current;
+
+            resizeInfosRef.current.push({
+                size,
+                element,
+                data,
+            });
+
+            Promise.resolve().then(() => {
+                if (currentId === resizeIdRef.current) {
+                    onBatchResize?.(resizeInfosRef.current);
+                    resizeInfosRef.current = [];
+                }
+            });
+
+            // Continue bubbling if parent exist
+            onCollectionResize?.(size, element, data);
+        },
+        [onBatchResize, onCollectionResize]
+    );
+
+    return (
+        <CollectionContext.Provider value={onResize}>
+            {children}
+        </CollectionContext.Provider>
+    );
+};
diff --git a/src/shared/ResizeObserver/ResizeObserver.tsx b/src/shared/ResizeObserver/ResizeObserver.tsx
new file mode 100644
index 000000000..e018859a3
--- /dev/null
+++ b/src/shared/ResizeObserver/ResizeObserver.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { toArray } from '../utilities';
+import { SingleObserver } from './SingleObserver/SingleObserver';
+import { Collection } from './Collection';
+
+const OBSERVER_PREFIX_KEY = 'oc-observer-key';
+
+export interface SizeInfo {
+    width: number;
+    height: number;
+    offsetWidth: number;
+    offsetHeight: number;
+}
+
+export type OnResize = (size: SizeInfo, element: HTMLElement) => void;
+
+export interface ResizeObserverProps {
+    /** Pass to ResizeObserver.Collection with additional data */
+    data?: any;
+    children:
+        | React.ReactNode
+        | ((ref: React.RefObject<any>) => React.ReactElement);
+    disabled?: boolean;
+    /** Trigger if element resized. Will always trigger when first time render. */
+    onResize?: OnResize;
+}
+
+export const ResizeObserver = (props: ResizeObserverProps) => {
+    const { children } = props;
+    const childNodes =
+        typeof children === 'function' ? [children] : toArray(children);
+
+    return childNodes.map((child: any, index: number) => {
+        const key = child?.key || `${OBSERVER_PREFIX_KEY}-${index}`;
+        return (
+            <SingleObserver {...props} key={key}>
+                {child}
+            </SingleObserver>
+        );
+    }) as any as React.ReactElement;
+};
+
+ResizeObserver.Collection = Collection;
diff --git a/src/shared/ResizeObserver/SingleObserver/SingleObserver.tsx b/src/shared/ResizeObserver/SingleObserver/SingleObserver.tsx
new file mode 100644
index 000000000..7351135ce
--- /dev/null
+++ b/src/shared/ResizeObserver/SingleObserver/SingleObserver.tsx
@@ -0,0 +1,129 @@
+import React, {
+    isValidElement,
+    Ref,
+    useCallback,
+    useEffect,
+    useContext,
+    useMemo,
+    useRef,
+} from 'react';
+import { composeRef, DomWrapper, findDOMNode } from '../../utilities';
+import { observe, unobserve } from '../utils/observerUtil';
+import type { ResizeObserverProps } from '../ResizeObserver';
+import { CollectionContext } from '../Collection';
+
+export interface SingleObserverProps extends ResizeObserverProps {
+    children:
+        | React.ReactElement
+        | ((ref: React.RefObject<Element>) => React.ReactElement);
+}
+
+export function SingleObserver(props: SingleObserverProps): JSX.Element {
+    const { children, disabled } = props;
+    const elementRef = useRef<Element>(null);
+    const wrapperRef = useRef<DomWrapper>(null);
+
+    const onCollectionResize = useContext(CollectionContext);
+
+    // =========================== Children ===========================
+    const isRenderProps = typeof children === 'function';
+    const mergedChildren = isRenderProps ? children(elementRef) : children;
+
+    // ============================= Size =============================
+    const sizeRef = useRef({
+        width: -1,
+        height: -1,
+        offsetWidth: -1,
+        offsetHeight: -1,
+    });
+
+    // ============================= Ref ==============================
+    const canRef = !isRenderProps && isValidElement(mergedChildren);
+    const originRef: Ref<Element> = canRef ? (mergedChildren as any).ref : null;
+
+    const mergedRef = useMemo(
+        () => composeRef<Element>(originRef, elementRef),
+        [originRef, elementRef]
+    );
+
+    // =========================== Observe ============================
+    const propsRef = useRef<SingleObserverProps>(props);
+    propsRef.current = props;
+
+    // Handler
+    const onInternalResize = useCallback((target: HTMLElement) => {
+        const { onResize, data } = propsRef.current;
+
+        const { width, height } = target.getBoundingClientRect();
+        const { offsetWidth, offsetHeight } = target;
+
+        /**
+         * Resize observer trigger when content size changed.
+         * In most case we just care about element size,
+         * let's use `boundary` instead of `contentRect` here to avoid shaking.
+         */
+        const fixedWidth = Math.floor(width);
+        const fixedHeight = Math.floor(height);
+
+        if (
+            sizeRef.current.width !== fixedWidth ||
+            sizeRef.current.height !== fixedHeight ||
+            sizeRef.current.offsetWidth !== offsetWidth ||
+            sizeRef.current.offsetHeight !== offsetHeight
+        ) {
+            const size = {
+                width: fixedWidth,
+                height: fixedHeight,
+                offsetWidth,
+                offsetHeight,
+            };
+            sizeRef.current = size;
+
+            // IE is strange, right?
+            const mergedOffsetWidth =
+                offsetWidth === Math.round(width) ? width : offsetWidth;
+            const mergedOffsetHeight =
+                offsetHeight === Math.round(height) ? height : offsetHeight;
+
+            const sizeInfo = {
+                ...size,
+                offsetWidth: mergedOffsetWidth,
+                offsetHeight: mergedOffsetHeight,
+            };
+
+            // Let collection know what happened
+            onCollectionResize?.(sizeInfo, target, data);
+
+            if (onResize) {
+                // defer the callback but not defer to next frame
+                Promise.resolve().then(() => {
+                    onResize(sizeInfo, target);
+                });
+            }
+        }
+    }, []);
+
+    // Dynamic observe
+    useEffect(() => {
+        const currentElement: HTMLElement =
+            findDOMNode?.(elementRef.current) ||
+            findDOMNode?.(wrapperRef.current);
+
+        if (currentElement && !disabled) {
+            observe(currentElement, onInternalResize);
+        }
+
+        return () => unobserve(currentElement, onInternalResize);
+    }, [elementRef.current, disabled]);
+
+    // ============================ Render ============================
+    return (
+        <DomWrapper ref={wrapperRef}>
+            {canRef
+                ? React.cloneElement(mergedChildren as any, {
+                      ref: mergedRef,
+                  })
+                : mergedChildren}
+        </DomWrapper>
+    );
+}
diff --git a/src/shared/ResizeObserver/utils/observerUtil.ts b/src/shared/ResizeObserver/utils/observerUtil.ts
new file mode 100644
index 000000000..e40ae304c
--- /dev/null
+++ b/src/shared/ResizeObserver/utils/observerUtil.ts
@@ -0,0 +1,39 @@
+import ResizeObserver from 'resize-observer-polyfill';
+
+export type ResizeListener = (element: Element) => void;
+
+const elementListeners = new Map<Element, Set<ResizeListener>>();
+
+const onResize = (entities: ResizeObserverEntry[]) => {
+    entities.forEach((entity) => {
+        const { target } = entity;
+        elementListeners.get(target)?.forEach((listener) => listener(target));
+    });
+};
+
+// Note: ResizeObserver polyfill not support option to measure border-box resize
+const resizeObserver: ResizeObserver = new ResizeObserver(onResize);
+
+// Dev env only
+export const _el =
+    process.env.NODE_ENV !== 'production' ? elementListeners : null; // eslint-disable-line
+export const _rs = process.env.NODE_ENV !== 'production' ? onResize : null; // eslint-disable-line
+
+export const observe = (element: Element, callback: ResizeListener): void => {
+    if (!elementListeners.has(element)) {
+        elementListeners.set(element, new Set());
+        resizeObserver.observe(element);
+    }
+
+    elementListeners.get(element).add(callback);
+};
+
+export const unobserve = (element: Element, callback: ResizeListener): void => {
+    if (elementListeners.has(element)) {
+        elementListeners.get(element).delete(callback);
+        if (!elementListeners.get(element).size) {
+            resizeObserver.unobserve(element);
+            elementListeners.delete(element);
+        }
+    }
+};
diff --git a/src/shared/utilities/canUseDom.test.tsx b/src/shared/utilities/canUseDom.test.tsx
index 4535b3ac4..f9b236ee2 100644
--- a/src/shared/utilities/canUseDom.test.tsx
+++ b/src/shared/utilities/canUseDom.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Enzyme from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { canUseDom } from './canUseDom';
+import { canUseDom } from './';
 
 Enzyme.configure({ adapter: new Adapter() });
 
diff --git a/src/shared/utilities/conditionalWrapper.test.tsx b/src/shared/utilities/conditionalWrapper.test.tsx
index 723b0d5e8..23315669b 100644
--- a/src/shared/utilities/conditionalWrapper.test.tsx
+++ b/src/shared/utilities/conditionalWrapper.test.tsx
@@ -2,7 +2,7 @@ import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { shallow } from 'enzyme';
 import React from 'react';
 
-import { ConditionalWrapper } from './conditionalWrapper';
+import { ConditionalWrapper } from './';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -45,4 +45,4 @@ describe('ConditionalWrapper', () => {
         expect(wrapper.find('a').length).toBe(0);
         expect(wrapper.find('img').length).toBe(1);
     });
-});
\ No newline at end of file
+});
diff --git a/src/shared/utilities/conditionalWrapper.ts b/src/shared/utilities/conditionalWrapper.ts
index eed3e7fc3..ef2b356f9 100644
--- a/src/shared/utilities/conditionalWrapper.ts
+++ b/src/shared/utilities/conditionalWrapper.ts
@@ -1,4 +1,4 @@
-import { ConditonalWrapperProps } from "./utilities.types";
+import { ConditonalWrapperProps } from './utilities.types';
 
 /**
  * Simple React component for conditionally wrapping children
@@ -9,4 +9,4 @@ export const ConditionalWrapper: React.FC<ConditonalWrapperProps> = ({
     condition,
     wrapper,
     children,
-}) => (condition ? wrapper(children) : children);
\ No newline at end of file
+}) => (condition ? wrapper(children) : children);
diff --git a/src/shared/utilities/css.ts b/src/shared/utilities/css.ts
new file mode 100644
index 000000000..ceedf39f4
--- /dev/null
+++ b/src/shared/utilities/css.ts
@@ -0,0 +1,154 @@
+const PIXEL_PATTERN: RegExp = /margin|padding|width|height|max|min|offset/;
+
+const removePixel = {
+    left: true,
+    top: true,
+};
+
+/**
+ * Utility to get the computed style of a given element.
+ * @param element - The element.
+ * @returns The computed style of a given element.
+ */
+export const getComputedStyle = (element: HTMLElement) => {
+    return element.nodeType === 1
+        ? element.ownerDocument.defaultView.getComputedStyle(element, null)
+        : {};
+};
+
+/**
+ * Utility to get the style value of a given element.
+ * @param element - The element.
+ * @param type - The style property
+ * @param value -The style property value
+ * @returns The style value of a given elementt.
+ */
+export const getStyleValue = (
+    element: HTMLElement,
+    type: string,
+    value: any
+) => {
+    type = type.toLowerCase();
+    if (value === 'auto') {
+        if (type === 'height') {
+            return element.offsetHeight;
+        }
+        if (type === 'width') {
+            return element.offsetWidth;
+        }
+    }
+    if (!(type in removePixel)) {
+        (removePixel as any)[type] = PIXEL_PATTERN.test(type);
+    }
+    return (removePixel as any)[type] ? parseFloat(value) || 0 : value;
+};
+
+/**
+ * Utility to get the outer width of a given element.
+ * @param element - The element.
+ * @returns The outer width of a given element.
+ */
+export const getOuterWidth = (element: HTMLElement): number => {
+    if (element === document.body) {
+        return document.documentElement.clientWidth;
+    }
+    return element.offsetWidth;
+};
+
+/**
+ * Utility to get the outer height of a given element.
+ * @param element - The element.
+ * @returns The outer height of a given element.
+ */
+export const getOuterHeight = (element: HTMLElement): number => {
+    if (element === document.body) {
+        return window.innerHeight || document.documentElement.clientHeight;
+    }
+    return element.offsetHeight;
+};
+
+/**
+ * Utility to get the document width and height.
+ * @returns The document width and height.
+ */
+export const getDocSize = (): {
+    width: number;
+    height: number;
+} => {
+    const width: number = Math.max(
+        document.documentElement.scrollWidth,
+        document.body.scrollWidth
+    );
+    const height: number = Math.max(
+        document.documentElement.scrollHeight,
+        document.body.scrollHeight
+    );
+
+    return {
+        width,
+        height,
+    };
+};
+
+/**
+ * Utility to get the client size.
+ * @returns The client size.
+ */
+export const getClientSize = (): {
+    width: number;
+    height: number;
+} => {
+    const width: number = document.documentElement.clientWidth;
+    const height: number =
+        window.innerHeight || document.documentElement.clientHeight;
+    return {
+        width,
+        height,
+    };
+};
+
+/**
+ * Utility to get the scroll position.
+ * @returns The scroll position.
+ */
+export const getScrollPosition = (): {
+    scrollLeft: number;
+    scrollTop: number;
+} => {
+    return {
+        scrollLeft: Math.max(
+            document.documentElement.scrollLeft,
+            document.body.scrollLeft
+        ),
+        scrollTop: Math.max(
+            document.documentElement.scrollTop,
+            document.body.scrollTop
+        ),
+    };
+};
+
+/**
+ * Utility to get the offset position of a given element.
+ * @param element - The element.
+ * @returns The offset position of a given element.
+ */
+export const getOffset = (
+    element: HTMLElement
+): {
+    left: number;
+    top: number;
+} => {
+    const box: DOMRect = element.getBoundingClientRect();
+    const docElem: HTMLElement = document.documentElement;
+
+    return {
+        left:
+            box.left +
+            (window.pageXOffset || docElem.scrollLeft) -
+            (docElem.clientLeft || document.body.clientLeft || 0),
+        top:
+            box.top +
+            (window.pageYOffset || docElem.scrollTop) -
+            (docElem.clientTop || document.body.clientTop || 0),
+    };
+};
diff --git a/src/shared/utilities/domWrapper.tsx b/src/shared/utilities/domWrapper.tsx
new file mode 100644
index 000000000..944a6a20e
--- /dev/null
+++ b/src/shared/utilities/domWrapper.tsx
@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+
+export interface DomWrapperProps {
+    children: React.ReactElement | React.ReactNode;
+}
+
+/**
+ * Fallback to findDOMNode if origin ref do not provide any dom element
+ */
+export class DomWrapper extends Component<DomWrapperProps> {
+    render() {
+        return this.props.children;
+    }
+}
diff --git a/src/shared/eventKeys.ts b/src/shared/utilities/eventKeys.ts
similarity index 100%
rename from src/shared/eventKeys.ts
rename to src/shared/utilities/eventKeys.ts
diff --git a/src/shared/utilities/findDOMNode.ts b/src/shared/utilities/findDOMNode.ts
new file mode 100644
index 000000000..d1adc66fb
--- /dev/null
+++ b/src/shared/utilities/findDOMNode.ts
@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+/**
+ *
+ * @param node Utility to return if a node is a DOM node. Else will return by `findDOMNode`
+ * @returns node
+ */
+export const findDOMNode = <T = Element | Text>(
+    node: React.ReactInstance | HTMLElement
+): T => {
+    if (node instanceof HTMLElement) {
+        return node as unknown as T;
+    }
+    return ReactDOM.findDOMNode(node) as unknown as T;
+};
diff --git a/src/shared/utilities/getScroll.test.tsx b/src/shared/utilities/getScroll.test.tsx
new file mode 100644
index 000000000..9c02bc085
--- /dev/null
+++ b/src/shared/utilities/getScroll.test.tsx
@@ -0,0 +1,65 @@
+import { getScroll } from './';
+
+describe('getScroll', () => {
+    it('getScroll target null', async () => {
+        expect(getScroll(null, true)).toBe(0);
+        expect(getScroll(null, false)).toBe(0);
+    });
+
+    it('getScroll window', async () => {
+        const scrollToSpy = jest
+            .spyOn(window, 'scrollTo')
+            .mockImplementation((x, y) => {
+                window.pageXOffset = x;
+                window.pageYOffset = y;
+            });
+        window.scrollTo(200, 400);
+        expect(getScroll(window, true)).toBe(400);
+        expect(getScroll(window, false)).toBe(200);
+        scrollToSpy.mockRestore();
+    });
+
+    it('getScroll document', async () => {
+        const scrollToSpy = jest
+            .spyOn(window, 'scrollTo')
+            .mockImplementation((x, y) => {
+                document.documentElement.scrollLeft = x;
+                document.documentElement.scrollTop = y;
+            });
+        window.scrollTo(200, 400);
+        expect(getScroll(document, true)).toBe(400);
+        expect(getScroll(document, false)).toBe(200);
+        scrollToSpy.mockRestore();
+    });
+
+    it('getScroll div', async () => {
+        const div = document.createElement('div');
+        const scrollToSpy = jest
+            .spyOn(window, 'scrollTo')
+            .mockImplementation((x, y) => {
+                div.scrollLeft = x;
+                div.scrollTop = y;
+            });
+        window.scrollTo(200, 400);
+        expect(getScroll(div, true)).toBe(400);
+        expect(getScroll(div, false)).toBe(200);
+        scrollToSpy.mockRestore();
+    });
+
+    it('getScroll documentElement', async () => {
+        const div: any = {};
+        const scrollToSpy = jest
+            .spyOn(window, 'scrollTo')
+            .mockImplementation((x, y) => {
+                div.scrollLeft = null;
+                div.scrollTop = null;
+                div.documentElement = {};
+                div.documentElement.scrollLeft = x;
+                div.documentElement.scrollTop = y;
+            });
+        window.scrollTo(200, 400);
+        expect(getScroll(div, true)).toBe(400);
+        expect(getScroll(div, false)).toBe(200);
+        scrollToSpy.mockRestore();
+    });
+});
diff --git a/src/shared/utilities/getScroll.tsx b/src/shared/utilities/getScroll.tsx
new file mode 100644
index 000000000..368966d89
--- /dev/null
+++ b/src/shared/utilities/getScroll.tsx
@@ -0,0 +1,26 @@
+export const isWindow = (obj: any): boolean => {
+    return obj !== null && obj !== undefined && obj === obj.window;
+};
+
+export const getScroll = (
+    target: HTMLElement | Window | Document | null,
+    top: boolean
+): number => {
+    if (typeof window === 'undefined') {
+        return 0;
+    }
+    const method = top ? 'scrollTop' : 'scrollLeft';
+    let result = 0;
+    if (isWindow(target)) {
+        result = (target as Window)[top ? 'pageYOffset' : 'pageXOffset'];
+    } else if (target instanceof Document) {
+        result = target.documentElement[method];
+    } else if (target) {
+        result = (target as HTMLElement)[method];
+    }
+    if (target && !isWindow(target) && typeof result !== 'number') {
+        result = ((target as HTMLElement).ownerDocument || (target as Document))
+            .documentElement?.[method];
+    }
+    return result;
+};
diff --git a/src/shared/utilities/getScrollBarSize.tsx b/src/shared/utilities/getScrollBarSize.tsx
new file mode 100644
index 000000000..a8a44347b
--- /dev/null
+++ b/src/shared/utilities/getScrollBarSize.tsx
@@ -0,0 +1,79 @@
+let cached: number;
+
+/**
+ * Utility the gets the scroll bar size.
+ * @param fresh - boolean to determine whether to get the size or use the cached size.
+ * @returns {number}
+ */
+export const getScrollBarSize = (fresh?: boolean): number => {
+    if (typeof document === 'undefined') {
+        return 0;
+    }
+
+    if (fresh || cached === undefined) {
+        const inner = document.createElement('div');
+        inner.style.width = '100%';
+        inner.style.height = '200px';
+
+        const outer = document.createElement('div');
+        const outerStyle = outer.style;
+
+        outerStyle.position = 'absolute';
+        outerStyle.top = '0';
+        outerStyle.left = '0';
+        outerStyle.pointerEvents = 'none';
+        outerStyle.visibility = 'hidden';
+        outerStyle.width = '200px';
+        outerStyle.height = '150px';
+        outerStyle.overflow = 'hidden';
+
+        outer.appendChild(inner);
+
+        document.body.appendChild(outer);
+
+        const widthContained = inner.offsetWidth;
+        outer.style.overflow = 'scroll';
+        let widthScroll = inner.offsetWidth;
+
+        if (widthContained === widthScroll) {
+            widthScroll = outer.clientWidth;
+        }
+
+        document.body.removeChild(outer);
+
+        cached = widthContained - widthScroll;
+    }
+    return cached;
+};
+
+const ensureSize = (str: string): number => {
+    const match = str.match(/^(.*)px$/);
+    const value = Number(match?.[1]);
+    return Number.isNaN(value) ? getScrollBarSize() : value;
+};
+
+/**
+ * Utility that gets the scroll bar size of a given element.
+ * @param target - the target element to get the scroll bar size.
+ * @returns {number, number}
+ */
+export const getTargetScrollBarSize = (
+    target: HTMLElement
+): {
+    width: number;
+    height: number;
+} => {
+    if (
+        typeof document === 'undefined' ||
+        !target ||
+        !(target instanceof Element)
+    ) {
+        return { width: 0, height: 0 };
+    }
+
+    const { width, height } = getComputedStyle(target, '::-webkit-scrollbar');
+    return {
+        width: ensureSize(width),
+        height: ensureSize(height),
+    };
+};
diff --git a/src/shared/utilities/index.ts b/src/shared/utilities/index.ts
index 1fae7f0bf..1587ef60d 100644
--- a/src/shared/utilities/index.ts
+++ b/src/shared/utilities/index.ts
@@ -1,9 +1,26 @@
 export * from './canUseDom';
 export * from './conditionalWrapper';
+export * from './css';
 export * from './debounce';
+export * from './domWrapper';
+export * from './eventKeys';
+export * from './findDOMNode';
 export * from './generateId';
+export * from './getScroll';
+export * from './getScrollBarSize';
+export * from './isVisible';
 export * from './mergeClasses';
+export * from './omit';
+export * from './pickAttrs';
+export * from './raf';
+export * from './reactNode';
+export * from './ref';
+export * from './responsiveObserve';
+export { default as scrollTo } from './scrollTo';
 export * from './stopPropagation';
+export * from './styleChecker';
+export { default as toArray } from './toArray';
+export * from './types';
 export * from './uniqueId';
 export * from './utilities.types';
 export { default as visuallyHidden } from './visuallyHidden';
diff --git a/src/shared/utilities/isEqual.ts b/src/shared/utilities/isEqual.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/shared/utilities/isVisible.ts b/src/shared/utilities/isVisible.ts
new file mode 100644
index 000000000..88deabc8e
--- /dev/null
+++ b/src/shared/utilities/isVisible.ts
@@ -0,0 +1,32 @@
+/**
+ * Utility to determine the visibility of an element.
+ * @param element - The element to check isVisible.
+ * @returns {boolean}
+ */
+export const isVisible = (
+    element: HTMLElement | SVGGraphicsElement
+): boolean => {
+    if (!element) {
+        return false;
+    }
+
+    if ((element as HTMLElement).offsetParent) {
+        return true;
+    }
+
+    if ((element as SVGGraphicsElement).getBBox) {
+        const box = (element as SVGGraphicsElement).getBBox();
+        if (box.width || box.height) {
+            return true;
+        }
+    }
+
+    if ((element as HTMLElement).getBoundingClientRect) {
+        const box = (element as HTMLElement).getBoundingClientRect();
+        if (box.width || box.height) {
+            return true;
+        }
+    }
+
+    return false;
+};
diff --git a/src/shared/utilities/omit.test.ts b/src/shared/utilities/omit.test.ts
new file mode 100644
index 000000000..0025cb3b8
--- /dev/null
+++ b/src/shared/utilities/omit.test.ts
@@ -0,0 +1,13 @@
+import { omit } from './';
+
+describe('omit', () => {
+    it('should work', () => {
+        const ret = omit({ keep: 1, ignore: 2, anotherKeep: 3 }, ['ignore']);
+        expect(ret).toEqual({ keep: 1, anotherKeep: 3 });
+    });
+
+    it('invalidate array', () => {
+        const ret = omit({ bamboo: 1 }, null);
+        expect(ret).toEqual({ bamboo: 1 });
+    });
+});
diff --git a/src/shared/utilities/omit.ts b/src/shared/utilities/omit.ts
new file mode 100644
index 000000000..a469743be
--- /dev/null
+++ b/src/shared/utilities/omit.ts
@@ -0,0 +1,14 @@
+export const omit = <T extends object, K extends keyof T>(
+    obj: T,
+    fields: K[]
+): Omit<T, K> => {
+    const clone = { ...obj };
+
+    if (Array.isArray(fields)) {
+        fields.forEach((key) => {
+            delete clone[key];
+        });
+    }
+
+    return clone;
+};
diff --git a/src/shared/utilities/pickAttrs.test.tsx b/src/shared/utilities/pickAttrs.test.tsx
new file mode 100644
index 000000000..8899b6254
--- /dev/null
+++ b/src/shared/utilities/pickAttrs.test.tsx
@@ -0,0 +1,45 @@
+import { pickAttrs } from './';
+
+describe('pickAttrs', () => {
+    const originProps = {
+        onClick: Function,
+        checked: true,
+        'data-my': 1,
+        'aria-this': 2,
+        skip: true,
+        role: 'button',
+    };
+
+    it('default', () => {
+        expect(pickAttrs(originProps)).toEqual({
+            onClick: Function,
+            checked: true,
+            'data-my': 1,
+            'aria-this': 2,
+            role: 'button',
+        });
+    });
+
+    it('aria only', () => {
+        expect(pickAttrs(originProps, true)).toEqual({
+            'aria-this': 2,
+            role: 'button',
+        });
+    });
+
+    it('attr only', () => {
+        expect(pickAttrs(originProps, { attr: true })).toEqual({
+            onClick: Function,
+            checked: true,
+            role: 'button',
+        });
+    });
+
+    it('aria & data', () => {
+        expect(pickAttrs(originProps, { aria: true, data: true })).toEqual({
+            'data-my': 1,
+            'aria-this': 2,
+            role: 'button',
+        });
+    });
+});
diff --git a/src/shared/utilities/pickAttrs.ts b/src/shared/utilities/pickAttrs.ts
new file mode 100644
index 000000000..22651032d
--- /dev/null
+++ b/src/shared/utilities/pickAttrs.ts
@@ -0,0 +1,77 @@
+const attributes = `accept acceptCharset accessKey action allowFullScreen allowTransparency
+    alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
+    charSet checked classID className colSpan cols content contentEditable contextMenu
+    controls coords crossOrigin data dateTime default defer dir disabled download draggable
+    encType form formAction formEncType formMethod formNoValidate formTarget frameBorder
+    headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode integrity
+    is keyParams keyType kind label lang list loop low manifest marginHeight marginWidth max maxLength media
+    mediaGroup method min minLength multiple muted name noValidate nonce open
+    optimum pattern placeholder poster preload radioGroup readOnly rel required
+    reversed role rowSpan rows sandbox scope scoped scrolling seamless selected
+    shape size sizes span spellCheck src srcDoc srcLang srcSet start step style
+    summary tabIndex target title type useMap value width wmode wrap`;
+
+const eventsName = `onCopy onCut onPaste onCompositionEnd onCompositionStart onCompositionUpdate onKeyDown
+    onKeyPress onKeyUp onFocus onBlur onChange onInput onSubmit onClick onContextMenu onDoubleClick
+    onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown
+    onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onSelect onTouchCancel
+    onTouchEnd onTouchMove onTouchStart onScroll onWheel onAbort onCanPlay onCanPlayThrough
+    onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata
+    onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting onLoad onError`;
+
+const propList: string[] = `${attributes} ${eventsName}`.split(/[\s\n]+/);
+
+const ariaPrefix: string = 'aria-';
+const dataPrefix: string = 'data-';
+
+const match = (key: string, prefix: string): boolean => {
+    return key.indexOf(prefix) === 0;
+};
+
+export interface PickConfig {
+    aria?: boolean;
+    data?: boolean;
+    attr?: boolean;
+}
+
+/**
+ * Pick specific props from existing props
+ * @param props Passed props
+ * @param ariaOnly boolean | { aria?: boolean; data?: boolean; attr?: boolean; } filter config
+ */
+export const pickAttrs = (
+    props: object,
+    ariaOnly: boolean | PickConfig = false
+) => {
+    let mergedConfig: PickConfig;
+    if (ariaOnly === false) {
+        mergedConfig = {
+            aria: true,
+            data: true,
+            attr: true,
+        };
+    } else if (ariaOnly === true) {
+        mergedConfig = {
+            aria: true,
+        };
+    } else {
+        mergedConfig = {
+            ...ariaOnly,
+        };
+    }
+
+    const attrs = {};
+    Object.keys(props).forEach((key) => {
+        if (
+            // Aria
+            (mergedConfig.aria && (key === 'role' || match(key, ariaPrefix))) ||
+            // Data
+            (mergedConfig.data && match(key, dataPrefix)) ||
+            // Attr
+            (mergedConfig.attr && propList.includes(key))
+        ) {
+            (<any>attrs)[key] = (<any>props)[key];
+        }
+    });
+    return attrs;
+};
diff --git a/src/shared/utilities/raf.test.ts b/src/shared/utilities/raf.test.ts
new file mode 100644
index 000000000..a6c866bdd
--- /dev/null
+++ b/src/shared/utilities/raf.test.ts
@@ -0,0 +1,57 @@
+import { requestAnimationFrameWrapper } from './';
+
+describe('requestAnimationFrameWrapper', () => {
+    it('test Wrapper Raf', (done) => {
+        jest.useRealTimers();
+
+        let bamboo = false;
+        requestAnimationFrameWrapper(() => {
+            bamboo = true;
+        });
+
+        expect(bamboo).toBe(false);
+
+        requestAnimationFrameWrapper(() => {
+            expect(bamboo).toBe(true);
+            done();
+        });
+    });
+
+    it('cancel', (done) => {
+        let bamboo = false;
+
+        const id = requestAnimationFrameWrapper(() => {
+            bamboo = true;
+        }, 2);
+
+        requestAnimationFrameWrapper.cancel(id);
+
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    expect(bamboo).toBeFalsy();
+                    done();
+                });
+            });
+        });
+    });
+
+    it('multiple times', (done) => {
+        let bamboo = false;
+
+        requestAnimationFrameWrapper(() => {
+            bamboo = true;
+        }, 2);
+
+        expect(bamboo).toBeFalsy();
+
+        requestAnimationFrame(() => {
+            expect(bamboo).toBeFalsy();
+
+            requestAnimationFrame(() => {
+                expect(bamboo).toBeTruthy();
+                done();
+            });
+        });
+    });
+});
diff --git a/src/shared/utilities/raf.ts b/src/shared/utilities/raf.ts
new file mode 100644
index 000000000..2747f575e
--- /dev/null
+++ b/src/shared/utilities/raf.ts
@@ -0,0 +1,53 @@
+let requestAnimationFrame: (callback: FrameRequestCallback) => number = (
+    callback: FrameRequestCallback
+) => +setTimeout(callback, 16);
+let caf: (num: number) => void = (num: number) => clearTimeout(num);
+
+if (typeof window !== 'undefined' && 'requestAnimationFrame' in window) {
+    requestAnimationFrame = (callback: FrameRequestCallback) =>
+        window.requestAnimationFrame(callback);
+    caf = (handle: number) => window.cancelAnimationFrame(handle);
+}
+
+let rafUUID: number = 0;
+const rafIds: Map<number, number> = new Map<number, number>();
+
+const cleanup = (id: number) => {
+    rafIds.delete(id);
+};
+
+export const requestAnimationFrameWrapper = (
+    callback: () => void,
+    times = 1
+): number => {
+    rafUUID += 1;
+    const id: number = rafUUID;
+
+    const callRef = (leftTimes: number): void => {
+        if (leftTimes === 0) {
+            // Clean up
+            cleanup(id);
+
+            // Trigger
+            callback();
+        } else {
+            // Next requestAnimationFrame
+            const realId = requestAnimationFrame(() => {
+                callRef(leftTimes - 1);
+            });
+
+            // Bind real requestAnimationFrame id
+            rafIds.set(id, realId);
+        }
+    };
+
+    callRef(times);
+
+    return id;
+};
+
+requestAnimationFrameWrapper.cancel = (id: number): void => {
+    const realId: number = rafIds.get(id);
+    cleanup(realId);
+    return caf(realId);
+};
diff --git a/src/shared/utilities/reactNode.ts b/src/shared/utilities/reactNode.ts
new file mode 100644
index 000000000..62b3b54fd
--- /dev/null
+++ b/src/shared/utilities/reactNode.ts
@@ -0,0 +1,30 @@
+import React from 'react';
+
+export const { isValidElement } = React;
+
+type AnyObject = Record<any, any>;
+
+type RenderProps =
+    | undefined
+    | AnyObject
+    | ((originProps: AnyObject) => AnyObject | undefined);
+
+export function replaceElement(
+    element: React.ReactNode,
+    replacement: React.ReactNode,
+    props: RenderProps
+): React.ReactNode {
+    if (!isValidElement(element)) return replacement;
+
+    return React.cloneElement(
+        element,
+        typeof props === 'function' ? props(element.props || {}) : props
+    );
+}
+
+export function cloneElement(
+    element: React.ReactNode,
+    props?: RenderProps
+): React.ReactElement {
+    return replaceElement(element, element, props) as React.ReactElement;
+}
diff --git a/src/shared/utilities/ref.test.js b/src/shared/utilities/ref.test.js
new file mode 100644
index 000000000..b009637dd
--- /dev/null
+++ b/src/shared/utilities/ref.test.js
@@ -0,0 +1,39 @@
+/* eslint-disable no-eval */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { composeRef, useComposeRef } from './';
+
+describe('ref', () => {
+    describe('composeRef', () => {
+        it('basic', () => {
+            const refFunc1 = jest.fn();
+            const refFunc2 = jest.fn();
+
+            const mergedRef = composeRef(refFunc1, refFunc2);
+            const testRefObj = {};
+            mergedRef(testRefObj);
+            expect(refFunc1).toHaveBeenCalledWith(testRefObj);
+            expect(refFunc2).toHaveBeenCalledWith(testRefObj);
+        });
+
+        it('ignore empty', () => {
+            const ref = React.createRef();
+            expect(composeRef(undefined, ref, null)).toBe(ref);
+            expect(composeRef(undefined, null)).toBeFalsy();
+        });
+
+        it('useComposeRef', () => {
+            const Demo = ({ ref1, ref2 }) => {
+                const mergedRef = useComposeRef(ref1, ref2);
+                return <div ref={mergedRef} />;
+            };
+
+            const ref1 = React.createRef();
+            const ref2 = React.createRef();
+            render(<Demo ref1={ref1} ref2={ref2} />);
+
+            expect(ref1.current).toBeTruthy();
+            expect(ref1.current).toBe(ref2.current);
+        });
+    });
+});
diff --git a/src/shared/utilities/ref.ts b/src/shared/utilities/ref.ts
new file mode 100644
index 000000000..d2c072c93
--- /dev/null
+++ b/src/shared/utilities/ref.ts
@@ -0,0 +1,36 @@
+import type * as React from 'react';
+import { useMemo } from '../../hooks/useMemo';
+
+export const fillRef = <T>(ref: React.Ref<T>, node: T): void => {
+    if (typeof ref === 'function') {
+        ref(node);
+    } else if (typeof ref === 'object' && ref && 'current' in ref) {
+        (ref as any).current = node;
+    }
+};
+
+/**
+ * Merge refs into one ref function to support ref passing.
+ */
+export const composeRef = <T>(...refs: React.Ref<T>[]): React.Ref<T> => {
+    const refList = refs.filter((ref) => ref);
+    if (refList.length <= 1) {
+        return refList[0];
+    }
+
+    return (node: T) => {
+        refs.forEach((ref) => {
+            fillRef(ref, node);
+        });
+    };
+};
+
+export const useComposeRef = <T>(...refs: React.Ref<T>[]): React.Ref<T> => {
+    return useMemo(
+        () => composeRef(...refs),
+        refs,
+        (prev, next) =>
+            prev.length === next.length &&
+            prev.every((ref, i) => ref === next[i])
+    );
+};
diff --git a/src/shared/utilities/responsiveObserve.test.js b/src/shared/utilities/responsiveObserve.test.js
new file mode 100644
index 000000000..7723d124a
--- /dev/null
+++ b/src/shared/utilities/responsiveObserve.test.js
@@ -0,0 +1,26 @@
+import { responsiveMap, responsiveObserve } from './';
+
+describe('Test ResponsiveObserve', () => {
+    beforeAll(() => {
+        Object.defineProperty(global.window, 'matchMedia', {
+            value: jest.fn((query) => ({
+                matches: query.includes('min-width'),
+                addListener: jest.fn(),
+                removeListener: jest.fn(),
+            })),
+        });
+    });
+
+    it('test responsiveObserve subscribe and unsubscribe', () => {
+        const { xs } = responsiveMap;
+        const subscribeFunc = jest.fn();
+        const token = responsiveObserve.subscribe(subscribeFunc);
+        expect(responsiveObserve.matchHandlers[xs].mql.matches).toBeTruthy();
+        expect(subscribeFunc).toBeCalledTimes(1);
+
+        responsiveObserve.unsubscribe(token);
+        expect(
+            responsiveObserve.matchHandlers[xs].mql.removeListener
+        ).toBeCalled();
+    });
+});
diff --git a/src/shared/utilities/responsiveObserve.ts b/src/shared/utilities/responsiveObserve.ts
new file mode 100644
index 000000000..75bf7ca98
--- /dev/null
+++ b/src/shared/utilities/responsiveObserve.ts
@@ -0,0 +1,87 @@
+export type Breakpoint = 'lg' | 'md' | 'sm' | 'xs';
+export type BreakpointMap = Record<Breakpoint, string>;
+export type ScreenMap = Partial<Record<Breakpoint, boolean>>;
+export type ScreenSizeMap = Partial<Record<Breakpoint, number>>;
+
+export const responsiveArray: Breakpoint[] = ['lg', 'md', 'sm', 'xs'];
+
+export const responsiveMap: BreakpointMap = {
+    xs: '(min-width: 0)',
+    sm: '(min-width: 600px)',
+    md: '(min-width: 900px)',
+    lg: '(min-width: 1200px)',
+};
+
+type SubscribeFunc = (screens: ScreenMap) => void;
+const subscribers: Map<Number, SubscribeFunc> = new Map<
+    Number,
+    SubscribeFunc
+>();
+let subUid: number = -1;
+let screens: {} = {};
+
+export const responsiveObserve: {
+    matchHandlers: {
+        [prop: string]: {
+            mql: MediaQueryList;
+            listener: (this: MediaQueryList, ev: MediaQueryListEvent) => any;
+        };
+    };
+    dispatch(pointMap: ScreenMap): boolean;
+    subscribe(func: SubscribeFunc): number;
+    unsubscribe(token: number): void;
+    unregister(): void;
+    register(): void;
+} = {
+    matchHandlers: {} as {
+        [prop: string]: {
+            mql: MediaQueryList;
+            listener:
+                | ((this: MediaQueryList, ev: MediaQueryListEvent) => any)
+                | null;
+        };
+    },
+    dispatch(pointMap: ScreenMap): boolean {
+        screens = pointMap;
+        subscribers.forEach((func) => func(screens));
+        return subscribers.size >= 1;
+    },
+    subscribe(func: SubscribeFunc): number {
+        if (!subscribers.size) this.register();
+        subUid += 1;
+        subscribers.set(subUid, func);
+        func(screens);
+        return subUid;
+    },
+    unsubscribe(token: number): void {
+        subscribers.delete(token);
+        if (!subscribers.size) this.unregister();
+    },
+    unregister(): void {
+        Object.keys(responsiveMap).forEach((screen: Breakpoint): void => {
+            const matchMediaQuery = responsiveMap[screen];
+            const handler = this.matchHandlers[matchMediaQuery];
+            handler?.mql.removeListener(handler?.listener);
+        });
+        subscribers.clear();
+    },
+    register(): void {
+        Object.keys(responsiveMap).forEach((screen: Breakpoint): void => {
+            const matchMediaQuery = responsiveMap[screen];
+            const listener = ({ matches }: { matches: boolean }): void => {
+                this.dispatch({
+                    ...screens,
+                    [screen]: matches,
+                });
+            };
+            const mql: MediaQueryList = window.matchMedia(matchMediaQuery);
+            mql.addListener(listener);
+            this.matchHandlers[matchMediaQuery] = {
+                mql,
+                listener,
+            };
+
+            listener(mql);
+        });
+    },
+};
diff --git a/src/shared/utilities/scrollTo.test.tsx b/src/shared/utilities/scrollTo.test.tsx
new file mode 100644
index 000000000..6c9fde5fa
--- /dev/null
+++ b/src/shared/utilities/scrollTo.test.tsx
@@ -0,0 +1,74 @@
+import { scrollTo } from './';
+import { sleep } from '../../tests/Utilities';
+
+window.scrollTo = jest.fn();
+
+describe('Test ScrollTo function', () => {
+    let dateNowMock: jest.SpyInstance<number, []>;
+
+    afterAll(() => {
+        jest.clearAllMocks();
+    });
+
+    beforeEach(() => {
+        dateNowMock = jest
+            .spyOn(Date, 'now')
+            .mockImplementationOnce(() => 0)
+            .mockImplementationOnce(() => 1000);
+    });
+
+    afterEach(() => {
+        dateNowMock.mockRestore();
+    });
+
+    it('test scrollTo', async () => {
+        const scrollToSpy = jest
+            .spyOn(window, 'scrollTo')
+            .mockImplementation((_x, y) => {
+                window.scrollY = y;
+                window.pageYOffset = y;
+            });
+
+        scrollTo(1000);
+        await sleep(20);
+
+        expect(window.pageYOffset).toBe(1000);
+
+        scrollToSpy.mockRestore();
+    });
+
+    it('test callback - option', async () => {
+        const cbMock = jest.fn();
+        scrollTo(1000, {
+            callback: cbMock,
+        });
+        await sleep(20);
+        expect(cbMock).toHaveBeenCalledTimes(1);
+    });
+
+    it('test getContainer - option', async () => {
+        const div = document.createElement('div');
+        scrollTo(1000, {
+            getContainer: () => div,
+        });
+        await sleep(20);
+        expect(div.scrollTop).toBe(1000);
+    });
+
+    it('test getContainer document - option', async () => {
+        scrollTo(1000, {
+            getContainer: () => document,
+        });
+        await sleep(20);
+        expect(document.documentElement.scrollTop).toBe(1000);
+    });
+
+    it('test duration - option', async () => {
+        scrollTo(1000, {
+            duration: 1100,
+            getContainer: () => document,
+        });
+        await sleep(20);
+        expect(document.documentElement.scrollTop).toBe(1000);
+    });
+});
diff --git a/src/shared/utilities/scrollTo.ts b/src/shared/utilities/scrollTo.ts
new file mode 100644
index 000000000..8d3ae2324
--- /dev/null
+++ b/src/shared/utilities/scrollTo.ts
@@ -0,0 +1,47 @@
+import { requestAnimationFrameWrapper } from './';
+import { getScroll, isWindow } from './';
+import { easeInOutCubic } from '../../components/Motion/util/easings';
+
+interface ScrollToOptions {
+    /** Scroll container, default as window */
+    getContainer?: () => HTMLElement | Window | Document;
+    /** Scroll end callback */
+    callback?: () => any;
+    /** Animation duration, default as 450 */
+    duration?: number;
+}
+
+export default function scrollTo(y: number, options: ScrollToOptions = {}) {
+    const { getContainer = () => window, callback, duration = 450 } = options;
+    const container = getContainer();
+    const scrollTop = getScroll(container, true);
+    const startTime = Date.now();
+
+    const frameFunc = () => {
+        const timestamp = Date.now();
+        const time = timestamp - startTime;
+        const nextScrollTop = easeInOutCubic(
+            time > duration ? duration : time,
+            scrollTop,
+            y,
+            duration
+        );
+        if (isWindow(container)) {
+            (container as Window).scrollTo(window.pageXOffset, nextScrollTop);
+        } else if (
+            container instanceof HTMLDocument ||
+            container.constructor.name === 'HTMLDocument'
+        ) {
+            (container as HTMLDocument).documentElement.scrollTop =
+                nextScrollTop;
+        } else {
+            (container as HTMLElement).scrollTop = nextScrollTop;
+        }
+        if (time < duration) {
+            requestAnimationFrameWrapper(frameFunc);
+        } else if (typeof callback === 'function') {
+            callback();
+        }
+    };
+    requestAnimationFrameWrapper(frameFunc);
+}
diff --git a/src/shared/utilities/styleChecker.ts b/src/shared/utilities/styleChecker.ts
new file mode 100644
index 000000000..68e0ebb08
--- /dev/null
+++ b/src/shared/utilities/styleChecker.ts
@@ -0,0 +1,55 @@
+import { canUseDom } from './canUseDom';
+
+/**
+ * Utility to determine if the browser supprts a given style name.
+ * Takes a single styleName string or an array.
+ * @param styleName the name of the style.
+ * @returns {boolean}
+ */
+const isStyleNameSupport = (styleName: string | string[]): boolean => {
+    if (canUseDom()) {
+        const styleNameList = Array.isArray(styleName)
+            ? styleName
+            : [styleName];
+        const { documentElement } = window.document;
+
+        return styleNameList.some((name) => name in documentElement.style);
+    }
+    return false;
+};
+
+/**
+ * Utility to determine if the browser supprts a given style value.
+ * Takes a single styleName string.
+ * @param styleName - the name of the style.
+ * @param value - The value of the style
+ * @returns {boolean}
+ */
+const isStyleValueSupport = (styleName: string, value: any): boolean => {
+    if (!isStyleNameSupport(styleName)) {
+        return false;
+    }
+
+    const ele = document.createElement('div');
+    const origin = (<any>ele.style)[styleName];
+    (<any>ele.style)[styleName] = value;
+    return (<any>ele.style)[styleName] !== origin;
+};
+
+/**
+ * Utility to determine if the browser supports a given style name and/or its value.
+ * Takes a single styleName string or an array.
+ * @param styleName - Name of the style.
+ * @param styleValue - Value of the style.
+ * @returns {boolean}
+ */
+export const isStyleSupport = (
+    styleName: string | string[],
+    styleValue?: any
+): boolean => {
+    if (!Array.isArray(styleName) && styleValue !== undefined) {
+        return isStyleValueSupport(styleName, styleValue);
+    }
+
+    return isStyleNameSupport(styleName);
+};
diff --git a/src/shared/utilities/toArray.test.js b/src/shared/utilities/toArray.test.js
new file mode 100644
index 000000000..e63d7563c
--- /dev/null
+++ b/src/shared/utilities/toArray.test.js
@@ -0,0 +1,106 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { toArray } from './';
+
+describe('toArray', () => {
+    class UL extends React.Component {
+        render() {
+            return <ul>{this.props.children}</ul>;
+        }
+    }
+
+    it('basic', () => {
+        const ulRef = React.createRef();
+
+        render(
+            <UL ref={ulRef}>
+                <li key="1">1</li>
+                <li key="2">2</li>
+                <li key="3">3</li>
+            </UL>
+        );
+
+        const children = toArray(ulRef.current.props.children);
+        expect(children).toHaveLength(3);
+        expect(children.map((c) => c.key)).toEqual(['1', '2', '3']);
+    });
+
+    it('Array', () => {
+        const ulRef = React.createRef();
+
+        render(
+            <UL ref={ulRef}>
+                <li key="1">1</li>
+                {[<li key="2">2</li>, <li key="3">3</li>]}
+            </UL>
+        );
+
+        const children = toArray(ulRef.current.props.children);
+        expect(children).toHaveLength(3);
+        expect(children.map((c) => c.key)).toEqual(['1', '2', '3']);
+    });
+
+    it('Fragment', () => {
+        const ulRef = React.createRef();
+
+        render(
+            <UL ref={ulRef}>
+                <li key="1">1</li>
+                <>
+                    <li key="2">2</li>
+                    <li key="3">3</li>
+                </>
+                <React.Fragment>
+                    <>
+                        <li key="4">4</li>
+                        <li key="5">5</li>
+                    </>
+                </React.Fragment>
+            </UL>
+        );
+
+        const children = toArray(ulRef.current.props.children);
+        expect(children).toHaveLength(5);
+        expect(children.map((c) => c.key)).toEqual(['1', '2', '3', '4', '5']);
+    });
+
+    it('keep empty', () => {
+        const ulRef = React.createRef();
+
+        render(
+            <UL ref={ulRef}>
+                {null}
+                <li key="1">1</li>
+                <>
+                    <li key="2">2</li>
+                    {null}
+                    <li key="3">3</li>
+                </>
+                <React.Fragment>
+                    <>
+                        <li key="4">4</li>
+                        {undefined}
+                        <li key="5">5</li>
+                    </>
+                </React.Fragment>
+                {undefined}
+            </UL>
+        );
+
+        const children = toArray(ulRef.current.props.children, {
+            keepEmpty: true,
+        });
+        expect(children).toHaveLength(9);
+        expect(children.map((c) => c && c.key)).toEqual([
+            null,
+            '1',
+            '2',
+            null,
+            '3',
+            '4',
+            null,
+            '5',
+            null,
+        ]);
+    });
+});
diff --git a/src/shared/utilities/toArray.ts b/src/shared/utilities/toArray.ts
new file mode 100644
index 000000000..f17fa8421
--- /dev/null
+++ b/src/shared/utilities/toArray.ts
@@ -0,0 +1,29 @@
+import React from 'react';
+import { isFragment } from 'react-is';
+
+export interface Option {
+    keepEmpty?: boolean;
+}
+
+export default function toArray(
+    children: React.ReactNode,
+    option: Option = {}
+): React.ReactElement[] {
+    let ret: React.ReactElement[] = [];
+
+    React.Children.forEach(children, (child: any) => {
+        if ((child === undefined || child === null) && !option.keepEmpty) {
+            return;
+        }
+
+        if (Array.isArray(child)) {
+            ret = ret.concat(toArray(child));
+        } else if (isFragment(child) && child.props) {
+            ret = ret.concat(toArray(child.props.children, option));
+        } else {
+            ret.push(child);
+        }
+    });
+
+    return ret;
+}
diff --git a/src/shared/utilities/types.ts b/src/shared/utilities/types.ts
new file mode 100644
index 000000000..a234538ea
--- /dev/null
+++ b/src/shared/utilities/types.ts
@@ -0,0 +1,17 @@
+// https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
+export const tuple = <T extends string[]>(...args: T) => args;
+
+export const tupleNum = <T extends number[]>(...args: T) => args;
+
+/**
+ * https://stackoverflow.com/a/59187769 Extract the type of an element of an array/tuple without
+ * performing indexing
+ */
+export type ElementOf<T> = T extends (infer E)[]
+    ? E
+    : T extends readonly (infer F)[]
+    ? F
+    : never;
+
+/** https://github.com/Microsoft/TypeScript/issues/29729 */
+export type LiteralUnion<T extends U, U> = T | (U & {});
diff --git a/src/styles/themes/_definitions-light.scss b/src/styles/themes/_definitions-light.scss
index 946766d92..41fbab214 100644
--- a/src/styles/themes/_definitions-light.scss
+++ b/src/styles/themes/_definitions-light.scss
@@ -390,3 +390,79 @@ $large-screen-size: 1200px;
 $medium-screen-size: 900px;
 $small-screen-size: 600px;
 $xsmall-screen-size: 0;
+
+// Table
+$table-background-color: var(--table-background-color);
+$table-foreground-color: var(--table-foreground-color);
+$table-background-alternate-color: var(--table-background-alternate-color);
+$table-header-background-color: var(--table-header-background-color);
+$table-header-foreground-color: var(--table-header-foreground-color);
+$table-header-sort-background-color: var(--table-header-sort-background-color);
+$table-header-icon-color: var(--table-header-icon-color);
+$table-header-icon-hover-color: var(--table-header-icon-hover-color);
+$table-body-sort-backgroud-color: var(--table-body-sort-backgroud-color);
+$table-row-hover-background-color: var(--table-row-hover-background-color);
+$table-row-selected-foregroud-color: var(--table-row-selected-foregroud-color);
+$table-row-selected-background-color: var(
+    --table-row-selected-background-color
+);
+$table-row-selected-hover-background-color: var(
+    --table-row-selected-hover-background-color
+);
+$table-row-expanded-background-color: var(
+    --table-row-expanded-background-color
+);
+$table-padding-vertical: var(--table-padding-vertical);
+$table-padding-horizontal: var(--table-padding-horizontal);
+$table-padding-vertical-md: var(--table-padding-vertical-md);
+$table-padding-horizontal-md: var(--table-padding-horizontal-md);
+$table-padding-vertical-sm: var(--table-padding-vertical-sm);
+$table-padding-horizontal-sm: var(--table-padding-horizontal-sm);
+$table-cell-padding: $table-padding-vertical $table-padding-horizontal;
+$table-cell-margin: -$table-padding-vertical -$table-padding-horizontal;
+$table-border-color: var(--table-border-color);
+$table-border-active-color: var(--table-border-active-color);
+$table-border-width: var(--table-border-width);
+$table-border-radius: var(--table-border-radius);
+$table-border-style: var(--table-border-style);
+$table-border: $table-border-width $table-border-style $table-border-color;
+$table-box-shadow: var(--table-box-shadow);
+$table-fixed-left-box-shadow: var(--table-fixed-left-box-shadow);
+$table-fixed-right-box-shadow: var(--table-fixed-right-box-shadow);
+$table-footer-background-color: var(--table-footer-background-color);
+$table-footer-foreground-color: var(--table-footer-foreground-color);
+$table-header-font-size: var(--table-header-font-size);
+$table-header-line-height: var(--table-header-line-height);
+$table-footer-font-size: var(--table-footer-font-size);
+$table-footer-line-height: var(--table-footer-line-height);
+$table-font-size: var(--table-font-size);
+$table-font-size-md: var(--table-font-size-md);
+$table-font-size-sm: var(--table-font-size-sm);
+$table-line-height: var(--table-line-height);
+$table-header-cell-split-color: var(--table-header-cell-split-color);
+$table-header-sort-active-background-color: var(
+    --table-header-sort-active-background-color
+);
+$table-fixed-header-sort-active-background-color: $table-header-sort-active-background-color;
+$table-header-filter-active-background-color: var(
+    --table-header-filter-active-background-color
+);
+$table-header-filter-buttons-background-color: var(
+    --table-header-filter-buttons-background-color
+);
+$table-expand-icon-background-color: var(--table-expand-icon-background-color);
+$table-selection-column-width: var(--table-selection-column-width);
+$table-sticky-scroll-bar-background-color: transparent; // constant
+$table-sticky-scroll-bar-active-background-color: transparent; // constant
+$table-sticky-scroll-bar-radius: $table-border-radius;
+
+// Tree
+$tree-bg: var(--background-color);
+$tree-border-color: var(--grey-color-20);
+$tree-border-radius-base: 8px;
+$tree-title-height: 24px;
+$tree-child-padding: 18px;
+$tree-directory-selected-color: var(--white-color);
+$tree-directory-selected-bg: var(--primary-color);
+$tree-node-hover-bg: var(--grey-color-10);
+$tree-node-selected-bg: var(--primary-color);
diff --git a/src/tests/Utilities.ts b/src/tests/Utilities.ts
new file mode 100644
index 000000000..b5c91b383
--- /dev/null
+++ b/src/tests/Utilities.ts
@@ -0,0 +1,45 @@
+import MockDate from 'mockdate';
+import type { ReactElement } from 'react';
+import { StrictMode } from 'react';
+import { act } from 'react-dom/test-utils';
+import type { RenderOptions } from '@testing-library/react';
+import { render } from '@testing-library/react';
+import { _rs as onLibResize } from '../shared/ResizeObserver/utils/observerUtil';
+
+export function setMockDate(dateString = '2022-09-07T03:30:07.795'): void {
+    MockDate.set(dateString);
+}
+
+export function resetMockDate(): void {
+    MockDate.reset();
+}
+
+const globalTimeout = global.setTimeout;
+
+export const sleep = async (timeout = 0): Promise<void> => {
+    await act(async () => {
+        await new Promise((resolve) => {
+            globalTimeout(resolve, timeout);
+        });
+    });
+};
+
+const customRender = (
+    ui: ReactElement,
+    options?: Omit<RenderOptions, 'wrapper'>
+) => render(ui, { wrapper: StrictMode, ...options });
+
+export { customRender as render };
+
+export const triggerResize = (target: Element): void => {
+    const originGetBoundingClientRect: () => DOMRect =
+        target.getBoundingClientRect;
+
+    target.getBoundingClientRect = (): DOMRect =>
+        ({ width: 510, height: 903 } as DOMRect);
+    onLibResize([{ target } as ResizeObserverEntry]);
+
+    target.getBoundingClientRect = originGetBoundingClientRect;
+};
+
+export * from '@testing-library/react';
diff --git a/src/tests/domHook.ts b/src/tests/domHook.ts
new file mode 100644
index 000000000..8d96544f1
--- /dev/null
+++ b/src/tests/domHook.ts
@@ -0,0 +1,78 @@
+const NO_EXIST = { __NOT_EXIST: true };
+
+export type ElementClass = Function;
+export type Property = PropertyDescriptor | Function;
+
+export function spyElementPrototypes<T extends ElementClass>(
+    elementClass: T,
+    properties: Record<string, Property>
+) {
+    const propNames = Object.keys(properties);
+    const originDescriptors = {};
+
+    propNames.forEach((propName) => {
+        const originDescriptor = Object.getOwnPropertyDescriptor(
+            elementClass.prototype,
+            propName
+        );
+        (originDescriptors as any)[propName] = originDescriptor || NO_EXIST;
+
+        const spyProp = properties[propName];
+
+        if (typeof spyProp === 'function') {
+            // If is a function
+            elementClass.prototype[propName] = function spyFunc(
+                ...args: any[]
+            ) {
+                return spyProp.call(this, originDescriptor, ...args);
+            };
+        } else {
+            // Otherwise treat as a property
+            Object.defineProperty(elementClass.prototype, propName, {
+                ...spyProp,
+                set(value) {
+                    if (spyProp.set) {
+                        return spyProp.set.call(this, originDescriptor, value);
+                    }
+                    return originDescriptor.set(value);
+                },
+                get() {
+                    if (spyProp.get) {
+                        return spyProp.get.call(this, originDescriptor);
+                    }
+                    return originDescriptor.get();
+                },
+                configurable: true,
+            });
+        }
+    });
+
+    return {
+        mockRestore() {
+            propNames.forEach((propName) => {
+                const originDescriptor = (originDescriptors as any)[propName];
+                if (originDescriptor === NO_EXIST) {
+                    delete elementClass.prototype[propName];
+                } else if (typeof originDescriptor === 'function') {
+                    elementClass.prototype[propName] = originDescriptor;
+                } else {
+                    Object.defineProperty(
+                        elementClass.prototype,
+                        propName,
+                        originDescriptor
+                    );
+                }
+            });
+        },
+    };
+}
+
+export function spyElementPrototype(
+    Element: ElementClass,
+    propName: string,
+    property: Property
+) {
+    return spyElementPrototypes(Element, {
+        [propName]: property,
+    });
+}
diff --git a/tsconfig.json b/tsconfig.json
index 2f751051d..b92ff9d88 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,7 @@
 {
     "compilerOptions": {
         "declaration": true,
+        "downlevelIteration": true,
         "emitDecoratorMetadata": true,
         "esModuleInterop": true,
         "experimentalDecorators": true,
diff --git a/yarn.lock b/yarn.lock
index bbdce59f3..3b46e4325 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1130,7 +1130,7 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.2.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2":
   version "7.18.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
   integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
@@ -1946,6 +1946,11 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
+"@ngard/tiny-isequal@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@ngard/tiny-isequal/-/tiny-isequal-1.1.0.tgz#4d73792f2adbef76640903bcae66b8d2000557d7"
+  integrity sha512-70tQjIRWxT6ZLsJXoaWN9gs3DLwsvRurnunrCWochEHXmnSC5Dqm9DCeRnV25TzJqrUeYFjxyhD5M5p133y+Hg==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -3641,6 +3646,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/lodash@4.14.182":
+  version "4.14.182"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
+  integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==
+
 "@types/lodash@^4.14.167":
   version "4.14.179"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.179.tgz#490ec3288088c91295780237d2497a3aa9dfb5c5"
@@ -3765,6 +3775,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-is@17.0.3":
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a"
+  integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-syntax-highlighter@11.0.5":
   version "11.0.5"
   resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz#0d546261b4021e1f9d85b50401c0a42acb106087"
@@ -3786,6 +3803,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-window@1.8.2":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.2.tgz#a5a6b2762ce73ffaab7911ee1397cf645f2459fe"
+  integrity sha512-gP1xam68Wc4ZTAee++zx6pTdDAH08rAkQrWm4B4F/y6hhmlT9Mgx2q8lTCXnrPHXsr15XjRN9+K2DLKcz44qEQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "17.0.39"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce"
@@ -3828,6 +3852,11 @@
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
+"@types/shallowequal@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/shallowequal/-/shallowequal-1.1.1.tgz#aad262bb3f2b1257d94c71d545268d592575c9b1"
+  integrity sha512-Lhni3aX80zbpdxRuWhnuYPm8j8UQaa571lHP/xI4W+7BAFhSIhRReXnqjEgT/XzPoXZTJkCqstFMJ8CZTK6IlQ==
+
 "@types/source-list-map@*":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
@@ -11714,6 +11743,11 @@ memfs@^3.1.2, memfs@^3.2.0, memfs@^3.2.2, memfs@^3.4.1:
   dependencies:
     fs-monkey "1.0.3"
 
+"memoize-one@>=3.1.1 <6":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 memoizerific@^1.11.3:
   version "1.11.3"
   resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
@@ -12010,6 +12044,11 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+mockdate@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mockdate/-/mockdate-3.0.0.tgz#2901b0deaab4b73072ec799de412d36c903543ec"
+  integrity sha512-asiMT839yFv38PHV9Rm4cBLnrRXlRmcddvuzdKvXygxN2Cw+d96cmMPNJ4JXIHkV/EghuJ9fNG/qzotmLsWDOg==
+
 modify-values@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
@@ -14385,6 +14424,11 @@ react-is@17.0.2, "react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-is@18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
+  integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==
+
 react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.3, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -14434,6 +14478,15 @@ react-shallow-renderer@^16.13.1:
     object-assign "^4.1.1"
     react-is "^16.12.0 || ^17.0.0"
 
+react-sortable-hoc@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-2.0.0.tgz#f6780d8aa4b922a21f3e754af542f032677078b7"
+  integrity sha512-JZUw7hBsAHXK7PTyErJyI7SopSBFRcFHDjWW5SWjcugY0i6iH7f+eJkY8cJmGMlZ1C9xz1J3Vjz0plFpavVeRg==
+  dependencies:
+    "@babel/runtime" "^7.2.0"
+    invariant "^2.2.4"
+    prop-types "^15.5.7"
+
 react-syntax-highlighter@^11.0.2:
   version "11.0.3"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-11.0.3.tgz#de639b97b781c3f7056d1ee7b6573ea8ab741460"
@@ -14474,6 +14527,14 @@ react-textarea-autosize@^7.1.0:
     "@babel/runtime" "^7.1.2"
     prop-types "^15.6.0"
 
+react-window@1.8.5:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.5.tgz#a56b39307e79979721021f5d06a67742ecca52d1"
+  integrity sha512-HeTwlNa37AFa8MDZFZOKcNEkuF2YflA0hpGPiTT9vR7OawEt+GZbfM6wqkBahD3D3pUjIabQYzsnY/BSJbgq6Q==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    memoize-one ">=3.1.1 <6"
+
 react@>=16.9.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
@@ -14653,6 +14714,11 @@ regenerate@^1.4.2:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
+regenerator-runtime@0.13.7:
+  version "0.13.7"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
+  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
+
 regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
@@ -14862,7 +14928,7 @@ reserved-words@^0.1.2:
   resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1"
   integrity sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=
 
-resize-observer-polyfill@^1.5.1:
+resize-observer-polyfill@1.5.1, resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
   integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
@@ -15377,7 +15443,7 @@ shallow-equal@^1.1.0:
   resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
   integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
 
-shallowequal@^1.1.0:
+shallowequal@1.1.0, shallowequal@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==