From fe03ae3e5995001e35ddfe1f2c390a0e56d439b6 Mon Sep 17 00:00:00 2001
From: jmfrancois <jmfrancois@talend.com>
Date: Thu, 19 Oct 2023 14:56:50 +0200
Subject: [PATCH 1/3] chore: remove simplebar

---
 packages/components/package.json              |  2 --
 .../src/SidePanel/SidePanel.component.js      |  4 ---
 .../src/SidePanel/SidePanel.module.scss       |  3 +-
 .../src/SidePanel/SidePanel.stories.js        |  2 +-
 yarn.lock                                     | 34 ++-----------------
 5 files changed, 5 insertions(+), 40 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index 72060d8df07..6fef9f88bcf 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -63,8 +63,6 @@
     "react-virtualized": "^9.22.5",
     "reactour": "^1.19.1",
     "recharts": "^2.8.0",
-    "simplebar": "^5.3.9",
-    "simplebar-react": "^2.4.3",
     "styled-components": "^5.3.11"
   },
   "devDependencies": {
diff --git a/packages/components/src/SidePanel/SidePanel.component.js b/packages/components/src/SidePanel/SidePanel.component.js
index d6cf6b12704..d437f9c2828 100644
--- a/packages/components/src/SidePanel/SidePanel.component.js
+++ b/packages/components/src/SidePanel/SidePanel.component.js
@@ -3,9 +3,6 @@ import { createRef, useState, useLayoutEffect, useEffect } from 'react';
 import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
 
-import 'simplebar';
-import 'simplebar/dist/simplebar.css';
-
 import I18N_DOMAIN_COMPONENTS from '../constants';
 import '../translate';
 import Action from '../Actions/Action';
@@ -149,7 +146,6 @@ function SidePanel({
 			{injected('before-actions')}
 			{actions && (
 				<div
-					data-simplebar
 					className={classNames(
 						theme['action-list-container'],
 						'tc-side-panel-action-list-container',
diff --git a/packages/components/src/SidePanel/SidePanel.module.scss b/packages/components/src/SidePanel/SidePanel.module.scss
index c316cd382c9..df38373a7ee 100644
--- a/packages/components/src/SidePanel/SidePanel.module.scss
+++ b/packages/components/src/SidePanel/SidePanel.module.scss
@@ -36,8 +36,9 @@ $large-docked-width: 7rem;
 	}
 
 	.action-list-container {
-		flex: 1;
 		height: calc(100vh - 12rem); // specific to Safari
+		overflow-y: auto;
+		overflow-x: hidden;
 
 		:global .tc-side-panel-list {
 			background: transparent;
diff --git a/packages/components/src/SidePanel/SidePanel.stories.js b/packages/components/src/SidePanel/SidePanel.stories.js
index 03ccc65781d..8ef856a1351 100644
--- a/packages/components/src/SidePanel/SidePanel.stories.js
+++ b/packages/components/src/SidePanel/SidePanel.stories.js
@@ -162,7 +162,7 @@ export const Minimised = () => (
 
 export const WithALargeAmountOfItems = () => (
 	<SidePanel
-		actions={[...items, ...other, ...other, ...other]}
+		actions={[...items, ...other, ...other, ...other, ...other]}
 		onSelect={action('onItemSelect')}
 		selected={items[1]}
 		tooltipPlacement="top"
diff --git a/yarn.lock b/yarn.lock
index b8543eb641d..38885b1d17f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6859,11 +6859,6 @@ camelize@^1.0.0:
   resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
   integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
 
-can-use-dom@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
-  integrity sha512-ceOhN1DL7Y4O6M0j9ICgmTYziV89WMd96SvSl0REd8PMgrY0B/WBOPoed5S1KUmJqXgUXh8gzSe6E3ae27upsQ==
-
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -7526,7 +7521,7 @@ core-js@^2.4.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
-core-js@^3.0.0, core-js@^3.0.1, core-js@^3.32.2:
+core-js@^3.0.0, core-js@^3.32.2:
   version "3.32.2"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.32.2.tgz#172fb5949ef468f93b4be7841af6ab1f21992db7"
   integrity sha512-pxXSw1mYZPDGvTQqEc5vgIb83jGQKFGYWY76z4a7weZXUolw3G+OvpZqSRcfYOoOVUQJYEPsWeQK8pKEnUtWxQ==
@@ -12887,11 +12882,6 @@ lodash.startcase@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.startcase/-/lodash.startcase-4.4.0.tgz#9436e34ed26093ed7ffae1936144350915d9add8"
   integrity sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==
 
-lodash.throttle@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
-  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
-
 lodash.topath@^4.5.2:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
@@ -15161,7 +15151,7 @@ prop-types@15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
-prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.0, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.0, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -16943,26 +16933,6 @@ simple-update-notifier@^2.0.0:
   dependencies:
     semver "^7.5.3"
 
-simplebar-react@^2.4.3:
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/simplebar-react/-/simplebar-react-2.4.3.tgz#79c830711c23a5ae457ef73420f5752d4a1b3133"
-  integrity sha512-Ep8gqAUZAS5IC2lT5RE4t1ZFUIVACqbrSRQvFV9a6NbVUzXzOMnc4P82Hl8Ak77AnPQvmgUwZS7aUKLyBoMAcg==
-  dependencies:
-    prop-types "^15.6.1"
-    simplebar "^5.3.9"
-
-simplebar@^5.3.9:
-  version "5.3.9"
-  resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-5.3.9.tgz#168ea0eb6d52f29f03960e40d9b69a1b28cf6318"
-  integrity sha512-1vIIpjDvY9sVH14e0LGeiCiTFU3ILqAghzO6OI9axeG+mvU/vMSrvXeAXkBolqFFz3XYaY8n5ahH9MeP3sp2Ag==
-  dependencies:
-    "@juggle/resize-observer" "^3.3.1"
-    can-use-dom "^0.1.0"
-    core-js "^3.0.1"
-    lodash.debounce "^4.0.8"
-    lodash.memoize "^4.1.2"
-    lodash.throttle "^4.1.1"
-
 sinon@^11.1.2:
   version "11.1.2"
   resolved "https://registry.yarnpkg.com/sinon/-/sinon-11.1.2.tgz#9e78850c747241d5c59d1614d8f9cbe8840e8674"

From e1dedd560845b7ed526dfadd6be0e3820dd2729e Mon Sep 17 00:00:00 2001
From: jmfrancois <jmfrancois@talend.com>
Date: Thu, 19 Oct 2023 15:09:43 +0200
Subject: [PATCH 2/3] fix: make it basic

---
 packages/components/src/SidePanel/SidePanel.module.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/components/src/SidePanel/SidePanel.module.scss b/packages/components/src/SidePanel/SidePanel.module.scss
index df38373a7ee..46209f3b487 100644
--- a/packages/components/src/SidePanel/SidePanel.module.scss
+++ b/packages/components/src/SidePanel/SidePanel.module.scss
@@ -40,6 +40,11 @@ $large-docked-width: 7rem;
 		overflow-y: auto;
 		overflow-x: hidden;
 
+		&::-webkit-scrollbar {
+			background-color: tokens.$coral-color-branding-navigation;
+			width: tokens.$coral-sizing-minimal;
+		}
+
 		:global .tc-side-panel-list {
 			background: transparent;
 		}

From 3d22c59e71a958dfe49bb4687ac4fc97a3f4d95f Mon Sep 17 00:00:00 2001
From: jmfrancois <jmfrancois@talend.com>
Date: Mon, 23 Oct 2023 14:48:19 +0200
Subject: [PATCH 3/3] test: update snap

---
 .../src/SidePanel/__snapshots__/SidePanel.test.js.snap           | 1 -
 .../src/SidePanel/__snapshots__/SidePanel.test.js.snap           | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/components/src/SidePanel/__snapshots__/SidePanel.test.js.snap b/packages/components/src/SidePanel/__snapshots__/SidePanel.test.js.snap
index fbaa1ac1037..1cd9d21ecef 100644
--- a/packages/components/src/SidePanel/__snapshots__/SidePanel.test.js.snap
+++ b/packages/components/src/SidePanel/__snapshots__/SidePanel.test.js.snap
@@ -27,7 +27,6 @@ exports[`SidePanel should render 1`] = `
   </div>
   <div
     class="theme-action-list-container tc-side-panel-action-list-container"
-    data-simplebar="true"
   >
     <ul
       class="nav nav-pills nav-stacked theme-tc-action-list tc-action-list theme-tc-side-panel-list tc-side-panel-list"
diff --git a/packages/containers/src/SidePanel/__snapshots__/SidePanel.test.js.snap b/packages/containers/src/SidePanel/__snapshots__/SidePanel.test.js.snap
index b15484d4c1d..219214c5c63 100644
--- a/packages/containers/src/SidePanel/__snapshots__/SidePanel.test.js.snap
+++ b/packages/containers/src/SidePanel/__snapshots__/SidePanel.test.js.snap
@@ -28,7 +28,6 @@ exports[`SidePanel should render 1`] = `
   </div>
   <div
     class="theme-action-list-container tc-side-panel-action-list-container"
-    data-simplebar="true"
   >
     <ul
       class="nav nav-pills nav-stacked theme-tc-action-list tc-action-list theme-tc-side-panel-list tc-side-panel-list"