From ff45ae5e0752d0072758bd3886e5c3130736ecfe Mon Sep 17 00:00:00 2001
From: Andrey Myssak <40265277+andreymyssak@users.noreply.github.com>
Date: Wed, 12 Apr 2023 23:49:03 +0600
Subject: [PATCH] Migrate from faker to @faker-js/faker (#594) (#655)

Signed-off-by: Andrey Myssak <andreymyssak@gmail.com>
Co-authored-by: Sergey Myssak <sergey.myssak@gmail.com>
---
 package.json                                  |  2 +-
 .../src/views/datagrid/additional_controls.js | 16 ++++++----
 src-docs/src/views/datagrid/column_actions.js | 16 ++++++----
 .../src/views/datagrid/column_cell_actions.js | 16 ++++++----
 src-docs/src/views/datagrid/column_widths.js  | 16 ++++++----
 src-docs/src/views/datagrid/container.js      | 16 ++++++----
 .../src/views/datagrid/control_columns.js     | 16 ++++++----
 src-docs/src/views/datagrid/datagrid.js       | 26 ++++++++-------
 src-docs/src/views/datagrid/focus.js          | 10 +++---
 src-docs/src/views/datagrid/footer_row.js     | 14 ++++----
 src-docs/src/views/datagrid/in_memory.js      | 24 ++++++++------
 .../views/datagrid/in_memory_enhancements.js  | 24 ++++++++------
 .../views/datagrid/in_memory_pagination.js    | 24 ++++++++------
 .../src/views/datagrid/in_memory_sorting.js   | 24 ++++++++------
 .../src/views/datagrid/row_height_options.js  |  6 ++--
 src-docs/src/views/datagrid/schema.js         | 32 +++++++++++--------
 src-docs/src/views/datagrid/styling.js        | 16 ++++++----
 src-docs/src/views/datagrid/virtualization.js | 22 ++++++-------
 .../datagrid/virtualization_constrained.js    | 22 ++++++-------
 src-docs/src/views/image/float.js             | 12 +++----
 .../resizable_container_basic.js              |  8 ++---
 .../resizable_container_reset_values.js       |  8 ++---
 .../resizable_container_vertical.js           |  8 ++---
 .../resizable_panel_collapsible.js            |  4 +--
 .../resizable_panel_collapsible_options.js    |  4 +--
 .../resizable_panel_collapsible_responsive.js |  4 +--
 yarn.lock                                     | 10 +++---
 27 files changed, 222 insertions(+), 178 deletions(-)

diff --git a/package.json b/package.json
index 44f36dc902..f9425414cd 100644
--- a/package.json
+++ b/package.json
@@ -120,6 +120,7 @@
     "vfile": "^4.2.0"
   },
   "devDependencies": {
+    "@faker-js/faker": "^7.6.0",
     "@axe-core/puppeteer": "^4.1.1",
     "@babel/cli": "^7.10.5",
     "@babel/core": "^7.11.4",
@@ -188,7 +189,6 @@
     "eslint-plugin-react": "^7.21.3",
     "eslint-plugin-react-hooks": "^4.1.2",
     "expose-gc": "^1.0.0",
-    "faker": "^4.1.0",
     "file-loader": "^6.1.0",
     "findup": "^0.1.5",
     "fork-ts-checker-webpack-plugin": "^5.1.0",
diff --git a/src-docs/src/views/datagrid/additional_controls.js b/src-docs/src/views/datagrid/additional_controls.js
index 40e003db89..eb91b4a476 100644
--- a/src-docs/src/views/datagrid/additional_controls.js
+++ b/src-docs/src/views/datagrid/additional_controls.js
@@ -10,7 +10,7 @@
  */
 
 import React, { useState, useCallback, Fragment } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import {
   OuiDataGrid,
@@ -40,13 +40,17 @@ const data = [];
 
 for (let i = 1; i < 20; i++) {
   data.push({
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    email: fake('{{internet.email}}'),
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    email: faker.helpers.fake('{{internet.email}}'),
     city: (
-      <OuiLink href="http://google.com">{fake('{{address.city}}')}</OuiLink>
+      <OuiLink href="http://google.com">
+        {faker.helpers.fake('{{address.city}}')}
+      </OuiLink>
     ),
-    country: fake('{{address.country}}'),
-    account: fake('{{finance.account}}'),
+    country: faker.helpers.fake('{{address.country}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
   });
 }
 
diff --git a/src-docs/src/views/datagrid/column_actions.js b/src-docs/src/views/datagrid/column_actions.js
index bd6e928688..faaffe6b5d 100644
--- a/src-docs/src/views/datagrid/column_actions.js
+++ b/src-docs/src/views/datagrid/column_actions.js
@@ -10,7 +10,7 @@
  */
 
 import React, { useState, useCallback } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import { OuiDataGrid, OuiAvatar } from '../../../../src/components/';
 
@@ -68,14 +68,16 @@ for (let i = 1; i < 5; i++) {
     avatar: (
       <OuiAvatar
         size="s"
-        name={fake('{{name.lastName}}, {{name.firstName}}')}
+        name={faker.helpers.fake('{{name.lastName}}, {{name.firstName}}')}
       />
     ),
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    email: fake('{{internet.email}}'),
-    city: fake('{{address.city}}'),
-    country: fake('{{address.country}}'),
-    account: fake('{{finance.account}}'),
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    email: faker.helpers.fake('{{internet.email}}'),
+    city: faker.helpers.fake('{{address.city}}'),
+    country: faker.helpers.fake('{{address.country}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
   });
 }
 
diff --git a/src-docs/src/views/datagrid/column_cell_actions.js b/src-docs/src/views/datagrid/column_cell_actions.js
index 572486bc0d..96ca5553a6 100644
--- a/src-docs/src/views/datagrid/column_cell_actions.js
+++ b/src-docs/src/views/datagrid/column_cell_actions.js
@@ -10,7 +10,7 @@
  */
 
 import React, { useState, useCallback } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import { OuiDataGrid, OuiAvatar } from '../../../../src/components/';
 
@@ -115,14 +115,16 @@ for (let i = 1; i < 5; i++) {
     avatar: (
       <OuiAvatar
         size="s"
-        name={fake('{{name.lastName}}, {{name.firstName}}')}
+        name={faker.helpers.fake('{{name.lastName}}, {{name.firstName}}')}
       />
     ),
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    email: fake('{{internet.email}}'),
-    city: fake('{{address.city}}'),
-    country: fake('{{address.country}}'),
-    account: fake('{{finance.account}}'),
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    email: faker.helpers.fake('{{internet.email}}'),
+    city: faker.helpers.fake('{{address.city}}'),
+    country: faker.helpers.fake('{{address.country}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
   });
 }
 
diff --git a/src-docs/src/views/datagrid/column_widths.js b/src-docs/src/views/datagrid/column_widths.js
index 02608b5484..b7049a5757 100644
--- a/src-docs/src/views/datagrid/column_widths.js
+++ b/src-docs/src/views/datagrid/column_widths.js
@@ -10,7 +10,7 @@
  */
 
 import React, { useState, useCallback } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import { OuiDataGrid, OuiAvatar } from '../../../../src/components/';
 
@@ -45,14 +45,16 @@ for (let i = 1; i < 5; i++) {
     avatar: (
       <OuiAvatar
         size="s"
-        name={fake('{{name.lastName}}, {{name.firstName}}')}
+        name={faker.helpers.fake('{{name.lastName}}, {{name.firstName}}')}
       />
     ),
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    email: fake('{{internet.email}}'),
-    city: fake('{{address.city}}'),
-    country: fake('{{address.country}}'),
-    account: fake('{{finance.account}}'),
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    email: faker.helpers.fake('{{internet.email}}'),
+    city: faker.helpers.fake('{{address.city}}'),
+    country: faker.helpers.fake('{{address.country}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
   });
 }
 
diff --git a/src-docs/src/views/datagrid/container.js b/src-docs/src/views/datagrid/container.js
index bd8d690e8b..b55665f8c8 100644
--- a/src-docs/src/views/datagrid/container.js
+++ b/src-docs/src/views/datagrid/container.js
@@ -10,7 +10,7 @@
  */
 
 import React, { useState, useCallback } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import { OuiDataGrid, OuiPanel, OuiLink } from '../../../../src/components/';
 
@@ -36,13 +36,17 @@ const data = [];
 
 for (let i = 1; i < 20; i++) {
   data.push({
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    email: fake('{{internet.email}}'),
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    email: faker.helpers.fake('{{internet.email}}'),
     city: (
-      <OuiLink href="http://google.com">{fake('{{address.city}}')}</OuiLink>
+      <OuiLink href="http://google.com">
+        {faker.helpers.fake('{{address.city}}')}
+      </OuiLink>
     ),
-    country: fake('{{address.country}}'),
-    account: fake('{{finance.account}}'),
+    country: faker.helpers.fake('{{address.country}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
   });
 }
 
diff --git a/src-docs/src/views/datagrid/control_columns.js b/src-docs/src/views/datagrid/control_columns.js
index 972176b9aa..7420823e54 100644
--- a/src-docs/src/views/datagrid/control_columns.js
+++ b/src-docs/src/views/datagrid/control_columns.js
@@ -17,7 +17,7 @@ import React, {
   useState,
   Fragment,
 } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import {
   OuiDataGrid,
@@ -72,14 +72,16 @@ for (let i = 1; i < 500; i++) {
     avatar: (
       <OuiAvatar
         size="s"
-        name={fake('{{name.lastName}}, {{name.firstName}}')}
+        name={faker.helpers.fake('{{name.lastName}}, {{name.firstName}}')}
       />
     ),
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    email: fake('{{internet.email}}'),
-    city: fake('{{address.city}}'),
-    country: fake('{{address.country}}'),
-    account: fake('{{finance.account}}'),
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    email: faker.helpers.fake('{{internet.email}}'),
+    city: faker.helpers.fake('{{address.city}}'),
+    country: faker.helpers.fake('{{address.country}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
   });
 }
 
diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
index 68873087a5..35f717f13a 100644
--- a/src-docs/src/views/datagrid/datagrid.js
+++ b/src-docs/src/views/datagrid/datagrid.js
@@ -19,7 +19,7 @@ import React, {
   useContext,
   useRef,
 } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import {
   OuiDataGrid,
@@ -36,31 +36,33 @@ const DataContext = createContext();
 const raw_data = [];
 
 for (let i = 1; i < 100; i++) {
-  const email = fake('{{internet.email}}');
-  const name = fake('{{name.lastName}}, {{name.firstName}}');
-  const suffix = fake('{{name.suffix}}');
+  const email = faker.helpers.fake('{{internet.email}}');
+  const name = faker.helpers.fake('{{name.lastName}}, {{name.firstName}}');
+  const suffix = faker.helpers.fake('{{name.suffix}}');
   raw_data.push({
     name: {
       formatted: `${name} ${suffix}`,
       raw: name,
     },
     email: {
-      formatted: <OuiLink href="">{fake('{{internet.email}}')}</OuiLink>,
+      formatted: (
+        <OuiLink href="">{faker.helpers.fake('{{internet.email}}')}</OuiLink>
+      ),
       raw: email,
     },
     location: (
       <Fragment>
-        {`${fake('{{address.city}}')}, `}
+        {`${faker.helpers.fake('{{address.city}}')}, `}
         <OuiLink href="https://google.com">
-          {fake('{{address.country}}')}
+          {faker.helpers.fake('{{address.country}}')}
         </OuiLink>
       </Fragment>
     ),
-    date: fake('{{date.past}}'),
-    account: fake('{{finance.account}}'),
-    amount: fake('${{commerce.price}}'),
-    phone: fake('{{phone.phoneNumber}}'),
-    version: fake('{{system.semver}}'),
+    date: faker.helpers.fake('{{date.past}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
+    amount: faker.helpers.fake('${{commerce.price}}'),
+    phone: faker.helpers.fake('{{phone.number}}'),
+    version: faker.helpers.fake('{{system.semver}}'),
   });
 }
 
diff --git a/src-docs/src/views/datagrid/focus.js b/src-docs/src/views/datagrid/focus.js
index 171d29160d..daba7eb177 100644
--- a/src-docs/src/views/datagrid/focus.js
+++ b/src-docs/src/views/datagrid/focus.js
@@ -11,7 +11,7 @@
 
 /* eslint-disable jsx-a11y/accessible-emoji */
 import React, { useState, useCallback, useMemo } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import {
   OuiDataGrid,
@@ -30,17 +30,17 @@ const data = [];
 
 for (let i = 0; i < 10; i++) {
   data.push([
-    <span>{fake('{{name.firstName}}')}</span>,
-    <span>{fake('{{name.firstName}}')}</span>,
+    <span>{faker.helpers.fake('{{name.firstName}}')}</span>,
+    <span>{faker.helpers.fake('{{name.firstName}}')}</span>,
 
     <span>
       <OuiLink href="#/tabular-content/data-grid-focus">
-        {fake('{{internet.email}}')}
+        {faker.helpers.fake('{{internet.email}}')}
       </OuiLink>
     </span>,
     <span>
       <OuiLink href="#/tabular-content/data-grid-focus">
-        {fake('{{internet.email}}')}
+        {faker.helpers.fake('{{internet.email}}')}
       </OuiLink>
     </span>,
 
diff --git a/src-docs/src/views/datagrid/footer_row.js b/src-docs/src/views/datagrid/footer_row.js
index 5b3f2ccda7..07e9b498f8 100644
--- a/src-docs/src/views/datagrid/footer_row.js
+++ b/src-docs/src/views/datagrid/footer_row.js
@@ -10,7 +10,7 @@
  */
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import {
   OuiDataGrid,
@@ -23,11 +23,13 @@ const raw_data = [];
 
 for (let i = 1; i < 20; i++) {
   raw_data.push({
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    date: fake('{{date.past}}'),
-    amount: fake('${{commerce.price}}'),
-    phone: fake('{{phone.phoneNumber}}'),
-    version: fake('{{system.semver}}'),
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    date: faker.helpers.fake('{{date.past}}'),
+    amount: faker.helpers.fake('${{commerce.price}}'),
+    phone: faker.helpers.fake('{{phone.number}}'),
+    version: faker.helpers.fake('{{system.semver}}'),
   });
 }
 
diff --git a/src-docs/src/views/datagrid/in_memory.js b/src-docs/src/views/datagrid/in_memory.js
index 10cd9e0a58..041cfc9d8b 100644
--- a/src-docs/src/views/datagrid/in_memory.js
+++ b/src-docs/src/views/datagrid/in_memory.js
@@ -10,7 +10,7 @@
  */
 
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import { OuiDataGrid, OuiLink } from '../../../../src/components/';
 
@@ -46,21 +46,25 @@ const raw_data = [];
 
 for (let i = 1; i < 100; i++) {
   raw_data.push({
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    email: <OuiLink href="">{fake('{{internet.email}}')}</OuiLink>,
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    email: (
+      <OuiLink href="">{faker.helpers.fake('{{internet.email}}')}</OuiLink>
+    ),
     location: (
       <Fragment>
-        {`${fake('{{address.city}}')}, `}
+        {`${faker.helpers.fake('{{address.city}}')}, `}
         <OuiLink href="https://google.com">
-          {fake('{{address.country}}')}
+          {faker.helpers.fake('{{address.country}}')}
         </OuiLink>
       </Fragment>
     ),
-    date: fake('{{date.past}}'),
-    account: fake('{{finance.account}}'),
-    amount: fake('${{commerce.price}}'),
-    phone: fake('{{phone.phoneNumber}}'),
-    version: fake('{{system.semver}}'),
+    date: faker.helpers.fake('{{date.past}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
+    amount: faker.helpers.fake('${{commerce.price}}'),
+    phone: faker.helpers.fake('{{phone.number}}'),
+    version: faker.helpers.fake('{{system.semver}}'),
   });
 }
 
diff --git a/src-docs/src/views/datagrid/in_memory_enhancements.js b/src-docs/src/views/datagrid/in_memory_enhancements.js
index efb45f7b5f..9b47a5dd78 100644
--- a/src-docs/src/views/datagrid/in_memory_enhancements.js
+++ b/src-docs/src/views/datagrid/in_memory_enhancements.js
@@ -10,7 +10,7 @@
  */
 
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import { OuiDataGrid, OuiLink } from '../../../../src/components/';
 
@@ -45,21 +45,25 @@ const raw_data = [];
 
 for (let i = 1; i < 100; i++) {
   raw_data.push({
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    email: <OuiLink href="">{fake('{{internet.email}}')}</OuiLink>,
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    email: (
+      <OuiLink href="">{faker.helpers.fake('{{internet.email}}')}</OuiLink>
+    ),
     location: (
       <Fragment>
-        {`${fake('{{address.city}}')}, `}
+        {`${faker.helpers.fake('{{address.city}}')}, `}
         <OuiLink href="https://google.com">
-          {fake('{{address.country}}')}
+          {faker.helpers.fake('{{address.country}}')}
         </OuiLink>
       </Fragment>
     ),
-    date: fake('{{date.past}}'),
-    account: fake('{{finance.account}}'),
-    amount: fake('${{commerce.price}}'),
-    phone: fake('{{phone.phoneNumber}}'),
-    version: fake('{{system.semver}}'),
+    date: faker.helpers.fake('{{date.past}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
+    amount: faker.helpers.fake('${{commerce.price}}'),
+    phone: faker.helpers.fake('{{phone.number}}'),
+    version: faker.helpers.fake('{{system.semver}}'),
   });
 }
 
diff --git a/src-docs/src/views/datagrid/in_memory_pagination.js b/src-docs/src/views/datagrid/in_memory_pagination.js
index 15fed5dfe5..358380ab05 100644
--- a/src-docs/src/views/datagrid/in_memory_pagination.js
+++ b/src-docs/src/views/datagrid/in_memory_pagination.js
@@ -10,7 +10,7 @@
  */
 
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import { OuiDataGrid, OuiLink } from '../../../../src/components/';
 
@@ -45,21 +45,25 @@ const raw_data = [];
 
 for (let i = 1; i < 100; i++) {
   raw_data.push({
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    email: <OuiLink href="">{fake('{{internet.email}}')}</OuiLink>,
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    email: (
+      <OuiLink href="">{faker.helpers.fake('{{internet.email}}')}</OuiLink>
+    ),
     location: (
       <Fragment>
-        {`${fake('{{address.city}}')}, `}
+        {`${faker.helpers.fake('{{address.city}}')}, `}
         <OuiLink href="https://google.com">
-          {fake('{{address.country}}')}
+          {faker.helpers.fake('{{address.country}}')}
         </OuiLink>
       </Fragment>
     ),
-    date: fake('{{date.past}}'),
-    account: fake('{{finance.account}}'),
-    amount: fake('${{commerce.price}}'),
-    phone: fake('{{phone.phoneNumber}}'),
-    version: fake('{{system.semver}}'),
+    date: faker.helpers.fake('{{date.past}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
+    amount: faker.helpers.fake('${{commerce.price}}'),
+    phone: faker.helpers.fake('{{phone.number}}'),
+    version: faker.helpers.fake('{{system.semver}}'),
   });
 }
 
diff --git a/src-docs/src/views/datagrid/in_memory_sorting.js b/src-docs/src/views/datagrid/in_memory_sorting.js
index 0a47f5c5bf..31b088260f 100644
--- a/src-docs/src/views/datagrid/in_memory_sorting.js
+++ b/src-docs/src/views/datagrid/in_memory_sorting.js
@@ -10,7 +10,7 @@
  */
 
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import { OuiDataGrid, OuiLink } from '../../../../src/components/';
 
@@ -45,21 +45,25 @@ const raw_data = [];
 
 for (let i = 1; i < 100; i++) {
   raw_data.push({
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    email: <OuiLink href="">{fake('{{internet.email}}')}</OuiLink>,
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    email: (
+      <OuiLink href="">{faker.helpers.fake('{{internet.email}}')}</OuiLink>
+    ),
     location: (
       <Fragment>
-        {`${fake('{{address.city}}')}, `}
+        {`${faker.helpers.fake('{{address.city}}')}, `}
         <OuiLink href="https://google.com">
-          {fake('{{address.country}}')}
+          {faker.helpers.fake('{{address.country}}')}
         </OuiLink>
       </Fragment>
     ),
-    date: fake('{{date.past}}'),
-    account: fake('{{finance.account}}'),
-    amount: fake('${{commerce.price}}'),
-    phone: fake('{{phone.phoneNumber}}'),
-    version: fake('{{system.semver}}'),
+    date: faker.helpers.fake('{{date.past}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
+    amount: faker.helpers.fake('${{commerce.price}}'),
+    phone: faker.helpers.fake('{{phone.number}}'),
+    version: faker.helpers.fake('{{system.semver}}'),
   });
 }
 
diff --git a/src-docs/src/views/datagrid/row_height_options.js b/src-docs/src/views/datagrid/row_height_options.js
index 41a0f27d96..5faff13f37 100644
--- a/src-docs/src/views/datagrid/row_height_options.js
+++ b/src-docs/src/views/datagrid/row_height_options.js
@@ -17,7 +17,7 @@ import React, {
   useMemo,
   useEffect,
 } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import { OuiDataGrid, OuiText } from '../../../../src/components/';
 
@@ -48,8 +48,8 @@ function RenderCellValue({ rowIndex, columnId }) {
 
   if (data[rowIndex] == null) {
     data[rowIndex] = {
-      name: fake('{{lorem.text}}'),
-      text: fake('{{lorem.text}}'),
+      name: faker.helpers.fake('{{lorem.text}}'),
+      text: faker.helpers.fake('{{lorem.text}}'),
     };
   }
 
diff --git a/src-docs/src/views/datagrid/schema.js b/src-docs/src/views/datagrid/schema.js
index d763c401be..0e2379f4cb 100644
--- a/src-docs/src/views/datagrid/schema.js
+++ b/src-docs/src/views/datagrid/schema.js
@@ -10,7 +10,7 @@
  */
 
 import React, { useState, useCallback } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import {
   OuiDataGrid,
@@ -55,29 +55,35 @@ for (let i = 1; i < 5; i++) {
     franchise = 'Oranges';
     json = JSON.stringify([
       {
-        default: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-        boolean: fake('{{random.boolean}}'),
-        numeric: fake('{{finance.account}}'),
-        currency: fake('${{finance.amount}}'),
-        date: fake('{{date.past}}'),
-        custom: fake('{{date.past}}'),
+        default: faker.helpers.fake(
+          '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+        ),
+        boolean: faker.helpers.fake('{{datatype.boolean}}'),
+        numeric: faker.helpers.fake('{{finance.account}}'),
+        currency: faker.helpers.fake('${{finance.amount}}'),
+        date: faker.helpers.fake('{{date.past}}'),
+        custom: faker.helpers.fake('{{date.past}}'),
       },
     ]);
   } else {
     franchise = 'Apples';
     json = JSON.stringify([
       {
-        name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
+        name: faker.helpers.fake(
+          '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+        ),
       },
     ]);
   }
 
   storeData.push({
-    default: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    boolean: fake('{{random.boolean}}'),
-    numeric: fake('{{finance.account}}'),
-    currency: fake('${{finance.amount}}'),
-    datetime: fake('{{date.past}}'),
+    default: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    boolean: faker.helpers.fake('{{datatype.boolean}}'),
+    numeric: faker.helpers.fake('{{finance.account}}'),
+    currency: faker.helpers.fake('${{finance.amount}}'),
+    datetime: faker.helpers.fake('{{date.past}}'),
     json: json,
     custom: franchise,
   });
diff --git a/src-docs/src/views/datagrid/styling.js b/src-docs/src/views/datagrid/styling.js
index 483484f562..4e7390dd99 100644
--- a/src-docs/src/views/datagrid/styling.js
+++ b/src-docs/src/views/datagrid/styling.js
@@ -10,7 +10,7 @@
  */
 
 import React, { useState, Fragment, useCallback } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import {
   OuiDataGrid,
@@ -54,14 +54,16 @@ for (let i = 1; i < 6; i++) {
     avatar: (
       <OuiAvatar
         size="s"
-        name={fake('{{name.lastName}}, {{name.firstName}}')}
+        name={faker.helpers.fake('{{name.lastName}}, {{name.firstName}}')}
       />
     ),
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    email: fake('{{internet.email}}'),
-    city: fake('{{address.city}}'),
-    country: fake('{{address.country}}'),
-    account: fake('{{finance.account}}'),
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    email: faker.helpers.fake('{{internet.email}}'),
+    city: faker.helpers.fake('{{address.city}}'),
+    country: faker.helpers.fake('{{address.country}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
   });
 }
 
diff --git a/src-docs/src/views/datagrid/virtualization.js b/src-docs/src/views/datagrid/virtualization.js
index 2a61277555..004316c6b1 100644
--- a/src-docs/src/views/datagrid/virtualization.js
+++ b/src-docs/src/views/datagrid/virtualization.js
@@ -18,7 +18,7 @@ import React, {
   useMemo,
   useEffect,
 } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import {
   OuiDataGrid,
@@ -77,25 +77,25 @@ function RenderCellValue({ rowIndex, columnId }) {
   }, [adjustMountedCellCount]);
 
   if (data[rowIndex] == null) {
-    const email = fake('{{internet.email}}');
-    const name = fake('{{name.lastName}}, {{name.firstName}}');
-    const suffix = fake('{{name.suffix}}');
+    const email = faker.helpers.fake('{{internet.email}}');
+    const name = faker.helpers.fake('{{name.lastName}}, {{name.firstName}}');
+    const suffix = faker.helpers.fake('{{name.suffix}}');
     data[rowIndex] = {
       name: `${name} ${suffix}`,
       email: <OuiLink href="">{email}</OuiLink>,
       location: (
         <Fragment>
-          {`${fake('{{address.city}}')}, `}
+          {`${faker.helpers.fake('{{address.city}}')}, `}
           <OuiLink href="https://google.com">
-            {fake('{{address.country}}')}
+            {faker.helpers.fake('{{address.country}}')}
           </OuiLink>
         </Fragment>
       ),
-      date: fake('{{date.past}}'),
-      account: fake('{{finance.account}}'),
-      amount: fake('${{commerce.price}}'),
-      phone: fake('{{phone.phoneNumber}}'),
-      version: fake('{{system.semver}}'),
+      date: faker.helpers.fake('{{date.past}}'),
+      account: faker.helpers.fake('{{finance.account}}'),
+      amount: faker.helpers.fake('${{commerce.price}}'),
+      phone: faker.helpers.fake('{{phone.number}}'),
+      version: faker.helpers.fake('{{system.semver}}'),
     };
   }
 
diff --git a/src-docs/src/views/datagrid/virtualization_constrained.js b/src-docs/src/views/datagrid/virtualization_constrained.js
index a078a56049..e26f90613b 100644
--- a/src-docs/src/views/datagrid/virtualization_constrained.js
+++ b/src-docs/src/views/datagrid/virtualization_constrained.js
@@ -18,7 +18,7 @@ import React, {
   useMemo,
   useEffect,
 } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import {
   OuiDataGrid,
@@ -75,25 +75,25 @@ function RenderCellValue({ rowIndex, columnId }) {
   }, [adjustMountedCellCount]);
 
   if (data[rowIndex] == null) {
-    const email = fake('{{internet.email}}');
-    const name = fake('{{name.lastName}}, {{name.firstName}}');
-    const suffix = fake('{{name.suffix}}');
+    const email = faker.helpers.fake('{{internet.email}}');
+    const name = faker.helpers.fake('{{name.lastName}}, {{name.firstName}}');
+    const suffix = faker.helpers.fake('{{name.suffix}}');
     data[rowIndex] = {
       name: `${name} ${suffix}`,
       email: <OuiLink href="">{email}</OuiLink>,
       location: (
         <Fragment>
-          {`${fake('{{address.city}}')}, `}
+          {`${faker.helpers.fake('{{address.city}}')}, `}
           <OuiLink href="https://google.com">
-            {fake('{{address.country}}')}
+            {faker.helpers.fake('{{address.country}}')}
           </OuiLink>
         </Fragment>
       ),
-      date: fake('{{date.past}}'),
-      account: fake('{{finance.account}}'),
-      amount: fake('${{commerce.price}}'),
-      phone: fake('{{phone.phoneNumber}}'),
-      version: fake('{{system.semver}}'),
+      date: faker.helpers.fake('{{date.past}}'),
+      account: faker.helpers.fake('{{finance.account}}'),
+      amount: faker.helpers.fake('${{commerce.price}}'),
+      phone: faker.helpers.fake('{{phone.number}}'),
+      version: faker.helpers.fake('{{system.semver}}'),
     };
   }
 
diff --git a/src-docs/src/views/image/float.js b/src-docs/src/views/image/float.js
index 34529487c8..6a258e5df9 100644
--- a/src-docs/src/views/image/float.js
+++ b/src-docs/src/views/image/float.js
@@ -12,7 +12,7 @@
 import React from 'react';
 
 import { OuiImage, OuiText } from '../../../../src/components';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 export default () => (
   <OuiText>
@@ -26,9 +26,9 @@ export default () => (
       alt="Random nature image"
       src="https://picsum.photos/800/500"
     />
-    <p>{fake('{{lorem.paragraphs}}')}</p>
-    <p>{fake('{{lorem.paragraphs}}')}</p>
-    <p>{fake('{{lorem.paragraphs}}')}</p>
+    <p>{faker.helpers.fake('{{lorem.paragraphs}}')}</p>
+    <p>{faker.helpers.fake('{{lorem.paragraphs}}')}</p>
+    <p>{faker.helpers.fake('{{lorem.paragraphs}}')}</p>
     <OuiImage
       size="l"
       float="left"
@@ -39,7 +39,7 @@ export default () => (
       alt="Random nature image"
       src="https://picsum.photos/300/300"
     />
-    <p>{fake('{{lorem.paragraphs}}')}</p>
-    <p>{fake('{{lorem.paragraphs}}')}</p>
+    <p>{faker.helpers.fake('{{lorem.paragraphs}}')}</p>
+    <p>{faker.helpers.fake('{{lorem.paragraphs}}')}</p>
   </OuiText>
 );
diff --git a/src-docs/src/views/resizable_container/resizable_container_basic.js b/src-docs/src/views/resizable_container/resizable_container_basic.js
index 2cdaad1921..4e52362c99 100644
--- a/src-docs/src/views/resizable_container/resizable_container_basic.js
+++ b/src-docs/src/views/resizable_container/resizable_container_basic.js
@@ -11,13 +11,13 @@
 
 import React from 'react';
 import { OuiText, OuiResizableContainer } from '../../../../src/components';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 const text = (
   <>
-    <p>{fake('{{lorem.paragraphs}}')}</p>
-    <p>{fake('{{lorem.paragraphs}}')}</p>
-    <p>{fake('{{lorem.paragraphs}}')}</p>
+    <p>{faker.helpers.fake('{{lorem.paragraphs}}')}</p>
+    <p>{faker.helpers.fake('{{lorem.paragraphs}}')}</p>
+    <p>{faker.helpers.fake('{{lorem.paragraphs}}')}</p>
   </>
 );
 
diff --git a/src-docs/src/views/resizable_container/resizable_container_reset_values.js b/src-docs/src/views/resizable_container/resizable_container_reset_values.js
index 581cda9850..97dc684558 100644
--- a/src-docs/src/views/resizable_container/resizable_container_reset_values.js
+++ b/src-docs/src/views/resizable_container/resizable_container_reset_values.js
@@ -19,13 +19,13 @@ import {
   OuiButton,
   OuiSpacer,
 } from '../../../../src/components';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 const text = (
   <>
-    <p>{fake('{{lorem.paragraphs}}')}</p>
-    <p>{fake('{{lorem.paragraphs}}')}</p>
-    <p>{fake('{{lorem.paragraphs}}')}</p>
+    <p>{faker.helpers.fake('{{lorem.paragraphs}}')}</p>
+    <p>{faker.helpers.fake('{{lorem.paragraphs}}')}</p>
+    <p>{faker.helpers.fake('{{lorem.paragraphs}}')}</p>
   </>
 );
 
diff --git a/src-docs/src/views/resizable_container/resizable_container_vertical.js b/src-docs/src/views/resizable_container/resizable_container_vertical.js
index 7295a015b3..64cb11944e 100644
--- a/src-docs/src/views/resizable_container/resizable_container_vertical.js
+++ b/src-docs/src/views/resizable_container/resizable_container_vertical.js
@@ -12,13 +12,13 @@
 import React from 'react';
 
 import { OuiText, OuiResizableContainer } from '../../../../src/components';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 const text = (
   <>
-    <p>{fake('{{lorem.paragraphs}}')}</p>
-    <p>{fake('{{lorem.paragraphs}}')}</p>
-    <p>{fake('{{lorem.paragraphs}}')}</p>
+    <p>{faker.helpers.fake('{{lorem.paragraphs}}')}</p>
+    <p>{faker.helpers.fake('{{lorem.paragraphs}}')}</p>
+    <p>{faker.helpers.fake('{{lorem.paragraphs}}')}</p>
   </>
 );
 
diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible.js b/src-docs/src/views/resizable_container/resizable_panel_collapsible.js
index 9a69b9290a..0617864e25 100644
--- a/src-docs/src/views/resizable_container/resizable_panel_collapsible.js
+++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible.js
@@ -20,12 +20,12 @@ import {
   OuiSpacer,
   OuiPage,
 } from '../../../../src/components';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 const texts = [];
 
 for (let i = 0; i < 4; i++) {
-  texts.push(<p>{fake('{{lorem.paragraph}}')}</p>);
+  texts.push(<p>{faker.helpers.fake('{{lorem.paragraph}}')}</p>);
 }
 
 export default () => {
diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.js b/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.js
index 2f6cdb154e..0c520f65a1 100644
--- a/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.js
+++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.js
@@ -20,12 +20,12 @@ import {
   OuiText,
   OuiPage,
 } from '../../../../src/components';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 const texts = [];
 
 for (let i = 0; i < 4; i++) {
-  texts.push(<p>{fake('{{lorem.paragraph}}')}</p>);
+  texts.push(<p>{faker.helpers.fake('{{lorem.paragraph}}')}</p>);
 }
 
 export default () => {
diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible_responsive.js b/src-docs/src/views/resizable_container/resizable_panel_collapsible_responsive.js
index 4adf45cc57..290d5a00a7 100644
--- a/src-docs/src/views/resizable_container/resizable_panel_collapsible_responsive.js
+++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible_responsive.js
@@ -21,12 +21,12 @@ import {
   OuiPage,
 } from '../../../../src/components';
 import { useIsWithinBreakpoints } from '../../../../src/services';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 const texts = [];
 
 for (let i = 0; i < 4; i++) {
-  texts.push(<p>{fake('{{lorem.paragraph}}')}</p>);
+  texts.push(<p>{faker.helpers.fake('{{lorem.paragraph}}')}</p>);
 }
 
 export default () => {
diff --git a/yarn.lock b/yarn.lock
index a35f45254d..3247c888fc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1164,6 +1164,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@faker-js/faker@^7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-7.6.0.tgz#9ea331766084288634a9247fcd8b84f16ff4ba07"
+  integrity sha512-XK6BTq1NDMo9Xqw/YkYyGjSsg44fbNwYRx7QK2CuoQgyy+f1rrTDHoExVM5PsyXCtfl2vs2vVJ0MN0yN6LppRw==
+
 "@fisker/parse-srcset@1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@fisker/parse-srcset/-/parse-srcset-1.0.2.tgz#6e051549fbf77ab5febda5176720e85aea70e80e"
@@ -6617,11 +6622,6 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
-faker@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/faker/-/faker-4.1.0.tgz#1e45bbbecc6774b3c195fad2835109c6d748cc3f"
-  integrity sha1-HkW7vsxndLPBlfrSg1EJxtdIzD8=
-
 fast-deep-equal@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"