Remove overlay-scroll-bar (#11258)

## What

- Deprecate overlayscrollbars as we decided to follow the native
behavior
- rework on performances (avoid calling recoil states too much at field
level which is quite expensive)
- Also implements:
https://github.com/twentyhq/core-team-issues/issues/569

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx

@@ -1,102 +1,44 @@
 import styled from '@emotion/styled';
-import { OverlayScrollbars } from 'overlayscrollbars';
-import { useOverlayScrollbars } from 'overlayscrollbars-react';
-import { useEffect, useRef } from 'react';
-
-import {
-  ContextProviderName,
-  getContextByProviderName,
-} from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
 
+import { ScrollWrapperInitEffect } from '@/ui/utilities/scroll/components/internal/ScrollWrapperInitEffect';
 import { ScrollWrapperComponentInstanceContext } from '@/ui/utilities/scroll/states/contexts/ScrollWrapperComponentInstanceContext';
-import { scrollWrapperScrollBottomComponentState } from '@/ui/utilities/scroll/states/scrollWrappeScrollBottomComponentState';
-import { scrollWrapperInstanceComponentState } from '@/ui/utilities/scroll/states/scrollWrapperInstanceComponentState';
+import { scrollWrapperScrollBottomComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollBottomComponentState';
 import { scrollWrapperScrollLeftComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollLeftComponentState';
 import { scrollWrapperScrollTopComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
-import { css } from '@emotion/react';
-import 'overlayscrollbars/overlayscrollbars.css';
 
-type HeightMode = 'full' | 'fit-content';
-
-const StyledScrollWrapper = styled.div<{
-  heightMode: HeightMode;
-  scrollbarVariant: 'with-padding' | 'no-padding';
-}>`
+const StyledScrollWrapper = styled.div`
+  &.scroll-wrapper-x-enabled {
+    overflow-x: scroll;
+  }
+  &.scroll-wrapper-y-enabled {
+    overflow-y: scroll;
+  }
   display: flex;
-  height: ${({ heightMode }) => {
-    switch (heightMode) {
-      case 'full':
-        return '100%';
-      case 'fit-content':
-        return 'fit-content';
-    }
-  }};
   width: 100%;
-
-  .os-scrollbar-handle {
-    background-color: ${({ theme }) => theme.border.color.strong};
-  }
-
-  // Keep horizontal scrollbar always visible
-  .os-scrollbar-horizontal {
-    &.os-scrollbar-auto-hide {
-      opacity: 1;
-      visibility: visible;
-    }
-    .os-scrollbar-track {
-      visibility: visible !important;
-    }
-  }
-
-  .os-scrollbar {
-    transition:
-      opacity 300ms,
-      visibility 300ms,
-      top 300ms,
-      right 300ms,
-      bottom 300ms,
-      left 300ms;
-  }
-
-  ${({ scrollbarVariant }) =>
-    scrollbarVariant === 'no-padding' &&
-    css`
-      .os-scrollbar {
-        --os-size: 6px;
-        padding: 0px;
-      }
-    `}
+  height: 100%;
 `;
 
 const StyledInnerContainer = styled.div`
   height: 100%;
+  width: 100%;
 `;
 
 export type ScrollWrapperProps = {
   children: React.ReactNode;
   className?: string;
-  heightMode?: HeightMode;
   defaultEnableXScroll?: boolean;
   defaultEnableYScroll?: boolean;
-  contextProviderName: ContextProviderName;
   componentInstanceId: string;
-  scrollbarVariant?: 'with-padding' | 'no-padding';
 };
 
 export const ScrollWrapper = ({
   componentInstanceId,
   children,
   className,
-  heightMode = 'full',
   defaultEnableXScroll = true,
   defaultEnableYScroll = true,
-  contextProviderName,
-  scrollbarVariant = 'with-padding',
 }: ScrollWrapperProps) => {
-  const scrollableRef = useRef<HTMLDivElement>(null);
-  const Context = getContextByProviderName(contextProviderName);
-
   const setScrollTop = useSetRecoilComponentStateV2(
     scrollWrapperScrollTopComponentState,
     componentInstanceId,
@@ -112,8 +54,8 @@ export const ScrollWrapper = ({
     componentInstanceId,
   );
 
-  const handleScroll = (overlayScroll: OverlayScrollbars) => {
-    const target = overlayScroll.elements().scrollOffsetElement;
+  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
+    const target = event.currentTarget;
     setScrollTop(target.scrollTop);
     setScrollLeft(target.scrollLeft);
     setScrollBottom(
@@ -121,103 +63,21 @@ export const ScrollWrapper = ({
     );
   };
 
-  const setOverlayScrollbars = useSetRecoilComponentStateV2(
-    scrollWrapperInstanceComponentState,
-    componentInstanceId,
-  );
-
-  const [initialize, instance] = useOverlayScrollbars({
-    options: {
-      scrollbars: {
-        autoHide: 'scroll',
-        autoHideDelay: 500,
-      },
-      overflow: {
-        x: defaultEnableXScroll ? undefined : 'hidden',
-        y: defaultEnableYScroll ? undefined : 'hidden',
-      },
-    },
-    events: {
-      updated: (osInstance) => {
-        const {
-          scrollOffsetElement: target,
-          scrollbarVertical,
-          scrollbarHorizontal,
-        } = osInstance.elements();
-
-        if (scrollbarVertical !== null) {
-          scrollbarVertical.track.dataset.selectDisable = 'true';
-        }
-        if (scrollbarHorizontal !== null) {
-          scrollbarHorizontal.track.dataset.selectDisable = 'true';
-        }
-        setScrollBottom(
-          target.scrollHeight - target.clientHeight - target.scrollTop,
-        );
-      },
-      scroll: (osInstance) => {
-        const { scrollOffsetElement: target, scrollbarVertical } =
-          osInstance.elements();
-        // Hide vertical scrollbar by default
-        if (scrollbarVertical !== null) {
-          scrollbarVertical.track.style.visibility = 'hidden';
-        }
-
-        // Show vertical scrollbar based on scroll direction
-        const isVerticalScroll =
-          target.scrollTop !== Number(target.dataset.lastScrollTop || '0');
-
-        if (
-          isVerticalScroll === true &&
-          scrollbarVertical !== null &&
-          target.scrollHeight > target.clientHeight
-        ) {
-          scrollbarVertical.track.style.visibility = 'visible';
-        }
-        // Update vertical scroll positions
-        target.dataset.lastScrollTop = target.scrollTop.toString();
-
-        handleScroll(osInstance);
-      },
-    },
-  });
-
-  useEffect(() => {
-    const currentRef = scrollableRef.current;
-    if (currentRef !== null) {
-      initialize(currentRef);
-    }
-    return () => {
-      // Reset vertical scroll component-specific Recoil state
-      setScrollTop(0);
-      setOverlayScrollbars(null);
-      instance()?.destroy();
-    };
-  }, [initialize, instance, setScrollTop, setOverlayScrollbars]);
-
-  useEffect(() => {
-    setOverlayScrollbars(instance());
-  }, [instance, setOverlayScrollbars]);
-
   return (
     <ScrollWrapperComponentInstanceContext.Provider
       value={{ instanceId: componentInstanceId }}
     >
-      <Context.Provider
-        value={{
-          ref: scrollableRef,
-          id: contextProviderName,
-        }}
+      <ScrollWrapperInitEffect
+        defaultEnableXScroll={defaultEnableXScroll}
+        defaultEnableYScroll={defaultEnableYScroll}
+      />
+      <StyledScrollWrapper
+        id={`scroll-wrapper-${componentInstanceId}`}
+        className={className}
+        onScroll={handleScroll}
       >
-        <StyledScrollWrapper
-          ref={scrollableRef}
-          className={className}
-          heightMode={heightMode}
-          scrollbarVariant={scrollbarVariant}
-        >
-          <StyledInnerContainer>{children}</StyledInnerContainer>
-        </StyledScrollWrapper>
-      </Context.Provider>
+        <StyledInnerContainer>{children}</StyledInnerContainer>
+      </StyledScrollWrapper>
     </ScrollWrapperComponentInstanceContext.Provider>
   );
 };

packages/twenty-front/src/modules/ui/utilities/scroll/components/internal/ScrollWrapperInitEffect.tsx

@@ -0,0 +1,27 @@
+import { useToggleScrollWrapper } from '@/ui/utilities/scroll/hooks/useToggleScrollWrapper';
+import { useEffect } from 'react';
+
+export type ScrollWrapperInitEffectProps = {
+  defaultEnableXScroll?: boolean;
+  defaultEnableYScroll?: boolean;
+};
+
+export const ScrollWrapperInitEffect = ({
+  defaultEnableXScroll = true,
+  defaultEnableYScroll = true,
+}: ScrollWrapperInitEffectProps) => {
+  const { toggleScrollXWrapper, toggleScrollYWrapper } =
+    useToggleScrollWrapper();
+
+  useEffect(() => {
+    toggleScrollXWrapper(defaultEnableXScroll);
+    toggleScrollYWrapper(defaultEnableYScroll);
+  }, [
+    defaultEnableXScroll,
+    defaultEnableYScroll,
+    toggleScrollXWrapper,
+    toggleScrollYWrapper,
+  ]);
+
+  return <></>;
+};