[@mantine/core] ScrollArea: Add offsetScrollbars="present" option support (#7527)

* Update index.ts

* add updateModal and updateContextModal

* update storybook example

* update formatting with prettier

* open modal documentation

* Update events.ts

* Update events.ts

* Update events.ts

* Update Modals.demo.updateModal.tsx

* update modal docs

* wip context modal documentation

* finish context modal documentation

* Update Modals.demo.updateContextModal.tsx

* formatting

* implement offset scrollbars when present

* Update ScrollArea.tsx

* Add support for horizontal scrollbars

* Update documentation

* Update ScrollArea.module.css

* Fix

* Update ScrollArea.module.css

* Update MdxTemplatesList.tsx

---------

Co-authored-by: Vitaly Rtishchev <rtivital@gmail.com>

Author: pfo-omicsstudio

Diff for: apps/mantine.dev/src/pages/core/scroll-area.mdx

@@ -14,7 +14,11 @@ export default Layout(MDX_DATA.ScrollArea);
   - `auto` – similar to `overflow: auto` – scrollbars are always visible when the content is overflowing
   - `always` – same as `auto`, but scrollbars are always visible regardless of whether the content is overflowing
   - `never` – scrollbars are always hidden
-- `offsetScrollbars` – offset scrollbars with padding
+- `offsetScrollbars` – adds padding to offset scrollbars with the following options:
+  - `x` – adds padding to offset horizontal scrollbar only
+  - `y` – adds padding to offset vertical scrollbar only
+  - `xy` – adds padding to offset both scrollbars
+  - `present` – adds padding only when scrollbars are visible
 - `scrollbarSize` – scrollbar size, controls scrollbar and thumb width/height
 - `scrollHideDelay` – delay in ms to hide scrollbars, applicable only when type is `hover` or `scroll`
 - `overscrollBehavior` – controls [overscroll-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior) of the viewport

Diff for: packages/@mantine/core/src/components/ScrollArea/ScrollArea.module.css

@@ -18,15 +18,36 @@
   }
 
   &:where([data-scrollbars='xy'], [data-scrollbars='y']) {
-    &:where([data-offset-scrollbars='xy'], [data-offset-scrollbars='y']) {
-      padding-inline-end: var(--scrollarea-scrollbar-size);
-      padding-inline-start: unset;
+    &:where(
+        [data-offset-scrollbars='xy'],
+        [data-offset-scrollbars='y'],
+        [data-offset-scrollbars='present']
+      ) {
+      &:where([data-vertical-hidden]) {
+        padding-inline-end: 0;
+        padding-inline-start: 0;
+      }
+
+      &:not([data-vertical-hidden]) {
+        padding-inline-end: var(--scrollarea-scrollbar-size);
+        padding-inline-start: unset;
+      }
     }
   }
 
   &:where([data-scrollbars='xy'], [data-scrollbars='x']) {
-    &:where([data-offset-scrollbars='xy'], [data-offset-scrollbars='x']) {
-      padding-bottom: var(--scrollarea-scrollbar-size);
+    &:where(
+        [data-offset-scrollbars='xy'],
+        [data-offset-scrollbars='x'],
+        [data-offset-scrollbars='present']
+      ) {
+      &:where([data-horizontal-hidden]) {
+        padding-bottom: 0;
+      }
+
+      &:not([data-horizontal-hidden]) {
+        padding-bottom: var(--scrollarea-scrollbar-size);
+      }
     }
   }
 }

Diff for: packages/@mantine/core/src/components/ScrollArea/ScrollArea.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
 import {
   Box,
   BoxProps,
@@ -47,7 +48,7 @@ export interface ScrollAreaProps
   scrollbars?: 'x' | 'y' | 'xy' | false;
 
   /** Determines whether scrollbars should be offset with padding on given axis, `false` by default */
-  offsetScrollbars?: boolean | 'x' | 'y';
+  offsetScrollbars?: boolean | 'x' | 'y' | 'present';
 
   /** Assigns viewport element (scrollable container) ref */
   viewportRef?: React.ForwardedRef<HTMLDivElement>;
@@ -120,6 +121,8 @@ export const ScrollArea = factory<ScrollAreaFactory>((_props, ref) => {
   } = props;
 
   const [scrollbarHovered, setScrollbarHovered] = useState(false);
+  const [verticalThumbVisible, setVerticalThumbVisible] = useState(false);
+  const [horizontalThumbVisible, setHorizontalThumbVisible] = useState(false);
 
   const getStyles = useStyles<ScrollAreaFactory>({
     name: 'ScrollArea',
@@ -134,6 +137,27 @@ export const ScrollArea = factory<ScrollAreaFactory>((_props, ref) => {
     varsResolver,
   });
 
+  const localViewportRef = useRef<HTMLDivElement>(null);
+  const combinedViewportRef = useMergeRefs([viewportRef, localViewportRef]);
+
+  useEffect(() => {
+    if (!localViewportRef.current) {
+      return;
+    }
+
+    const element = localViewportRef.current;
+
+    const observer = new ResizeObserver(() => {
+      const { scrollHeight, clientHeight, scrollWidth, clientWidth } = element;
+      setVerticalThumbVisible(scrollHeight > clientHeight);
+      setHorizontalThumbVisible(scrollWidth > clientWidth);
+    });
+
+    observer.observe(element);
+
+    return () => observer.disconnect();
+  }, [localViewportRef, offsetScrollbars]);
+
   return (
     <ScrollAreaRoot
       type={type === 'never' ? 'always' : type}
@@ -146,9 +170,15 @@ export const ScrollArea = factory<ScrollAreaFactory>((_props, ref) => {
       <ScrollAreaViewport
         {...viewportProps}
         {...getStyles('viewport', { style: viewportProps?.style })}
-        ref={viewportRef}
+        ref={combinedViewportRef}
         data-offset-scrollbars={offsetScrollbars === true ? 'xy' : offsetScrollbars || undefined}
         data-scrollbars={scrollbars || undefined}
+        data-horizontal-hidden={
+          offsetScrollbars === 'present' && !horizontalThumbVisible ? 'true' : undefined
+        }
+        data-vertical-hidden={
+          offsetScrollbars === 'present' && !verticalThumbVisible ? 'true' : undefined
+        }
         onScroll={(e) => {
           viewportProps?.onScroll?.(e);
           onScrollPositionChange?.({ x: e.currentTarget.scrollLeft, y: e.currentTarget.scrollTop });