From fa113ee0dc77045c850d12143b9b750d9ccd3f88 Mon Sep 17 00:00:00 2001
From: sirineJ <112706079+sirineJ@users.noreply.github.com>
Date: Fri, 20 Dec 2024 12:13:57 +0100
Subject: [PATCH] fix useRef

---
 .../hooks/useScrollLock/useScrollLock.spec.ts | 27 +++----------------
 .../hooks/useScrollLock/useScrollLock.ts      | 26 +++---------------
 2 files changed, 7 insertions(+), 46 deletions(-)

diff --git a/packages/circuit-ui/hooks/useScrollLock/useScrollLock.spec.ts b/packages/circuit-ui/hooks/useScrollLock/useScrollLock.spec.ts
index 9c0325bcda..4e478c7c3b 100644
--- a/packages/circuit-ui/hooks/useScrollLock/useScrollLock.spec.ts
+++ b/packages/circuit-ui/hooks/useScrollLock/useScrollLock.spec.ts
@@ -15,7 +15,7 @@
 
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { act, renderHook } from '../../util/test-utils.js';
+import { renderHook } from '../../util/test-utils.js';
 
 import { useScrollLock } from './useScrollLock.js';
 
@@ -30,12 +30,11 @@ describe('useScrollLock', () => {
   beforeEach(() => {
     document.body.style.position = '';
     document.body.style.top = '';
-    document.documentElement.style.setProperty('--scroll-y', '');
+    window.scrollY = 1;
   });
 
   it('locks the scroll when `isLocked` is true', () => {
-    document.documentElement.style.setProperty('--scroll-y', '100px');
-
+    window.scrollY = 100;
     const { rerender } = renderHook(({ isLocked }) => useScrollLock(isLocked), {
       initialProps: { isLocked: false },
     });
@@ -47,7 +46,7 @@ describe('useScrollLock', () => {
   });
 
   it('unlocks the scroll when `isLocked` is false', () => {
-    document.body.style.top = '-100px';
+    window.scrollY = 100;
 
     const { rerender } = renderHook(({ isLocked }) => useScrollLock(isLocked), {
       initialProps: { isLocked: true },
@@ -59,22 +58,4 @@ describe('useScrollLock', () => {
     expect(document.body.style.top).toBe('');
     expect(window.scrollTo).toHaveBeenCalledWith(0, 100);
   });
-
-  it('updates `--scroll-y` on scroll', () => {
-    global.requestAnimationFrame = vi
-      .fn()
-      .mockImplementation((callback: () => void) => callback());
-
-    renderHook(() => useScrollLock(false));
-
-    act(() => {
-      window.scrollY = 200;
-      const scrollEvent = new Event('scroll');
-      window.dispatchEvent(scrollEvent);
-    });
-
-    expect(document.documentElement.style.getPropertyValue('--scroll-y')).toBe(
-      '200px',
-    );
-  });
 });
diff --git a/packages/circuit-ui/hooks/useScrollLock/useScrollLock.ts b/packages/circuit-ui/hooks/useScrollLock/useScrollLock.ts
index dc8807d965..31f79729a8 100644
--- a/packages/circuit-ui/hooks/useScrollLock/useScrollLock.ts
+++ b/packages/circuit-ui/hooks/useScrollLock/useScrollLock.ts
@@ -16,32 +16,12 @@
 import { useEffect, useRef } from 'react';
 
 export const useScrollLock = (isLocked: boolean): void => {
-  const busy = useRef(false);
-
-  useEffect(() => {
-    function setScrollProperty() {
-      if (!busy.current) {
-        requestAnimationFrame(() => {
-          document.documentElement.style.setProperty(
-            '--scroll-y',
-            `${window.scrollY}px`,
-          );
-          busy.current = false;
-        });
-        busy.current = true;
-      }
-    }
-    window.addEventListener('scroll', setScrollProperty);
-
-    return () => {
-      window.removeEventListener('scroll', setScrollProperty);
-    };
-  }, []);
+  const scrollValue = useRef<string>();
 
   useEffect(() => {
     if (isLocked) {
-      const scrollY =
-        document.documentElement.style.getPropertyValue('--scroll-y');
+      scrollValue.current = `${window.scrollY}px`;
+      const scrollY = scrollValue.current;
       const { body } = document;
       const bodyWidth = body.offsetWidth;
       // when position is set to fixed, the body element is taken out of