feat(components): add an Overlay component

* add useScrollbarWidth hook
* add useScrollLock hook
* add a new component to lock scroll with an overlay (it can be useful
especially on small screens to prevent background contents to be
scrolled)

3 files changed, 84 insertions, 0 deletions

diff --git a/src/utils/hooks/use-scroll-lock/index.ts b/src/utils/hooks/use-scroll-lock/index.ts
new file mode 100644
index 0000000..f5735c7
--- /dev/null
+++ b/src/utils/hooks/use-scroll-lock/index.ts
@@ -0,0 +1 @@
+export * from './use-scroll-lock';
diff --git a/src/utils/hooks/use-scroll-lock/use-scroll-lock.test.tsx b/src/utils/hooks/use-scroll-lock/use-scroll-lock.test.tsx
new file mode 100644
index 0000000..f8234e1
--- /dev/null
+++ b/src/utils/hooks/use-scroll-lock/use-scroll-lock.test.tsx
@@ -0,0 +1,25 @@
+import { describe, expect, it } from '@jest/globals';
+import { render } from '@testing-library/react';
+import { useScrollLock } from './use-scroll-lock';
+
+const body = 'eligendi dolor eos';
+
+const UseScrollLockDemo = ({ isLocked }: { isLocked: boolean }) => {
+  useScrollLock(isLocked);
+
+  return <div>{body}</div>;
+};
+
+describe('use-scroll-lock', () => {
+  it('can disable scroll on body element', () => {
+    const { baseElement } = render(<UseScrollLockDemo isLocked />);
+
+    expect(baseElement).toHaveStyle({ overflow: 'hidden' });
+  });
+
+  it('can enable scroll on body element', () => {
+    const { baseElement } = render(<UseScrollLockDemo isLocked={false} />);
+
+    expect(baseElement).not.toHaveStyle({ overflow: 'hidden' });
+  });
+});
diff --git a/src/utils/hooks/use-scroll-lock/use-scroll-lock.ts b/src/utils/hooks/use-scroll-lock/use-scroll-lock.ts
new file mode 100644
index 0000000..64fc5e8
--- /dev/null
+++ b/src/utils/hooks/use-scroll-lock/use-scroll-lock.ts
@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useRef, useMemo } from 'react';
+import { useScrollBarWidth } from '../use-scrollbar-width';
+
+type Styles = {
+  overflow: string;
+  paddingRight: string;
+};
+
+/**
+ * React hook to lock/unlock the scroll on the body.
+ *
+ * @param {boolean} [isScrollLocked] - Should the scroll be locked?
+ */
+export const useScrollLock = (isScrollLocked = false) => {
+  const scrollbarWidth = useScrollBarWidth();
+  const initialStyles = useRef<Styles | null>(null);
+  const lockedStyles: Styles = useMemo(() => {
+    return {
+      overflow: 'hidden',
+      paddingRight: `calc(${
+        initialStyles.current?.paddingRight ?? 0
+      } + ${scrollbarWidth}px)`,
+    };
+  }, [scrollbarWidth]);
+
+  useEffect(() => {
+    const computedStyle =
+      typeof window === 'undefined'
+        ? undefined
+        : window.getComputedStyle(document.body);
+
+    initialStyles.current = {
+      overflow: computedStyle?.overflow ?? '',
+      paddingRight: computedStyle?.paddingRight ?? '',
+    };
+  }, []);
+
+  const lockScroll = useCallback(() => {
+    document.body.style.overflow = lockedStyles.overflow;
+    document.body.style.paddingRight = lockedStyles.paddingRight;
+  }, [lockedStyles]);
+
+  const unlockScroll = useCallback(() => {
+    document.body.style.overflow = initialStyles.current?.overflow ?? '';
+    document.body.style.paddingRight =
+      initialStyles.current?.paddingRight ?? '';
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return undefined;
+
+    if (isScrollLocked) lockScroll();
+
+    return () => {
+      unlockScroll();
+    };
+  }, [isScrollLocked, lockScroll, unlockScroll]);
+};