[UIK-5300][modal,side-panel,core] update usePreventScroll logic

semcore/core/__tests__/usePreventScroll.test.tsx

@@ -1,5 +1,5 @@
 import { cleanup, renderHook } from '@semcore/testing-utils/testing-library';
-import { expect, test, describe, beforeEach, afterEach } from '@semcore/testing-utils/vitest';
+import { expect, test, describe, beforeEach, afterEach, vi } from '@semcore/testing-utils/vitest';
 
 import usePreventScroll from '../src/utils/use/usePreventScroll';
 
@@ -63,6 +63,24 @@ describe('usePreventScroll', () => {
     expect(document.body.style.overflow).toBe('');
   });
 
+  test.sequential.each(['hidden', 'clip'])(
+    'Verify skips locking when body overflow is already %s',
+    (overflow) => {
+      const spy = vi
+        .spyOn(window, 'getComputedStyle')
+        .mockReturnValue({ paddingRight: '0px', overflow } as CSSStyleDeclaration);
+
+      const { unmount } = renderHook(() => usePreventScroll(true));
+
+      expect(document.body.style.overflow).toBe('');
+      expect(document.body.style.paddingRight).toBe('');
+      expect(document.body.style.boxSizing).toBe('');
+
+      unmount();
+      spy.mockRestore();
+    },
+  );
+
   test.sequential('Verify reacts to visible changing from true to false', () => {
     const { rerender, unmount } = renderHook(({ visible }) => usePreventScroll(visible), {
       initialProps: { visible: true },

semcore/core/src/utils/use/usePreventScroll.tsx

@@ -36,6 +36,8 @@ const lockedBodyStyles = {
   overflow: '',
   boxSizing: '',
 };
+
+const overflowValuesToSkip = new Set<string>(['clip', 'hidden']);
 export default function usePreventScroll(visible = true, disabled = false) {
   const scrollbarWidth = React.useMemo(getScrollbarWidth, [getScrollbarWidth]);
   const id = useUID('scroll-preventer-');
@@ -46,12 +48,14 @@ export default function usePreventScroll(visible = true, disabled = false) {
     scrollPreventers.add(id);
     if (scrollPreventers.size > 1) return;
 
-    const { paddingRight } = window.getComputedStyle(document.body);
+    const { paddingRight, overflow } = window.getComputedStyle(document.body);
 
     lockedBodyStyles.paddingRight = document.body.style.paddingRight;
     lockedBodyStyles.overflow = document.body.style.overflow;
     lockedBodyStyles.boxSizing = document.body.style.boxSizing;
 
+    if (overflowValuesToSkip.has(overflow)) return;
+
     const intPaddingRight = getIntValueFromCss(paddingRight);
     let intPaddingRightFromStyle = getIntValueFromCss(document.body.style.paddingRight);
     // Detected own style for window inside window