Tweaks

mui · Nov 3, 2024 · 150792a · 150792a
1 parent 1635971
commit 150792a
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 17 deletions.
diff --git a/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.js b/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.js
@@ -76,6 +76,7 @@ const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
     background 0.2s,
     visibility 0.2s;
   opacity: 0;
+  display: flex;
 
   &:hover {
     background: rgb(0 0 0 / 0.1);
@@ -86,6 +87,7 @@ const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
   }
 
   &[data-orientation='horizontal'] {
+    flex-direction: column;
     height: 10px;
   }
 
@@ -104,8 +106,7 @@ const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
 const ScrollAreaThumb = styled(ScrollArea.Thumb)`
   background: rgb(0 0 0 / 0.5);
   border-radius: 20px;
-  height: var(--scroll-area-thumb-height, 6px);
-  width: var(--scroll-area-thumb-width, 6px);
+  flex: 1;
 
   &::before {
     content: '';

diff --git a/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.tsx b/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.tsx
@@ -76,6 +76,7 @@ const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
     background 0.2s,
     visibility 0.2s;
   opacity: 0;
+  display: flex;
 
   &:hover {
     background: rgb(0 0 0 / 0.1);
@@ -86,6 +87,7 @@ const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
   }
 
   &[data-orientation='horizontal'] {
+    flex-direction: column;
     height: 10px;
   }
 
@@ -104,8 +106,7 @@ const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
 const ScrollAreaThumb = styled(ScrollArea.Thumb)`
   background: rgb(0 0 0 / 0.5);
   border-radius: 20px;
-  height: var(--scroll-area-thumb-height, 6px);
-  width: var(--scroll-area-thumb-width, 6px);
+  flex: 1;
 
   &::before {
     content: '';

diff --git a/packages/mui-base/src/ScrollArea/Scrollbar/useScrollAreaScrollbar.ts b/packages/mui-base/src/ScrollArea/Scrollbar/useScrollAreaScrollbar.ts
@@ -15,7 +15,6 @@ export function useScrollAreaScrollbar(params: useScrollAreaScrollbar.Parameters
     handlePointerDown,
     handlePointerUp,
     rootId,
-    type,
     thumbSize,
     touchModality,
   } = useScrollAreaRootContext();
@@ -24,6 +23,10 @@ export function useScrollAreaScrollbar(params: useScrollAreaScrollbar.Parameters
     const viewportEl = viewportRef.current;
     const scrollbarEl = orientation === 'vertical' ? scrollbarYRef.current : scrollbarXRef.current;
 
+    if (!scrollbarEl) {
+      return undefined;
+    }
+
     function handleWheel(event: WheelEvent) {
       if (!viewportEl || !scrollbarEl || event.ctrlKey) {
         return;
@@ -60,10 +63,10 @@ export function useScrollAreaScrollbar(params: useScrollAreaScrollbar.Parameters
       }
     }
 
-    scrollbarEl?.addEventListener('wheel', handleWheel, { passive: false });
+    scrollbarEl.addEventListener('wheel', handleWheel, { passive: false });
 
     return () => {
-      scrollbarEl?.removeEventListener('wheel', handleWheel);
+      scrollbarEl.removeEventListener('wheel', handleWheel);
     };
   }, [orientation, scrollbarXRef, scrollbarYRef, viewportRef]);
 
@@ -129,9 +132,7 @@ export function useScrollAreaScrollbar(params: useScrollAreaScrollbar.Parameters
         onPointerUp: handlePointerUp,
         style: {
           position: 'absolute',
-          ...(type === 'inset'
-            ? { touchAction: 'none' }
-            : { pointerEvents: touchModality ? 'none' : 'auto' }),
+          ...(touchModality && { pointerEvents: 'none' }),
           ...(orientation === 'vertical' && {
             top: 0,
             bottom: 'var(--scroll-area-corner-height)',
@@ -149,12 +150,10 @@ export function useScrollAreaScrollbar(params: useScrollAreaScrollbar.Parameters
     [
       rootId,
       handlePointerUp,
-      type,
       touchModality,
       orientation,
       dir,
-      thumbSize.height,
-      thumbSize.width,
+      thumbSize,
       viewportRef,
       thumbYRef,
       scrollbarYRef,

diff --git a/packages/mui-base/src/ScrollArea/Viewport/useScrollAreaViewport.tsx b/packages/mui-base/src/ScrollArea/Viewport/useScrollAreaViewport.tsx
@@ -4,7 +4,7 @@ import { useEventCallback } from '../../utils/useEventCallback';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { ownerWindow } from '../../utils/owner';
-import { SCROLL_TIMEOUT } from '../constants';
+import { MIN_THUMB_SIZE, SCROLL_TIMEOUT } from '../constants';
 
 export function useScrollAreaViewport(params: useScrollAreaViewport.Parameters) {
   const { children } = params;
@@ -112,13 +112,16 @@ export function useScrollAreaViewport(params: useScrollAreaViewport.Parameters)
         ? 0
         : (viewportHeight / scrollableContentHeight) * viewportHeight;
 
-      if (prevSize.height === height && prevSize.width === width) {
+      const clampedWidth = Math.max(MIN_THUMB_SIZE, width);
+      const clampedHeight = Math.max(MIN_THUMB_SIZE, height);
+
+      if (prevSize.height === clampedHeight && prevSize.width === clampedWidth) {
         return prevSize;
       }
 
       return {
-        width: scrollbarXHidden ? 0 : (viewportWidth / scrollableContentWidth) * viewportWidth,
-        height: scrollbarYHidden ? 0 : (viewportHeight / scrollableContentHeight) * viewportHeight,
+        width: clampedWidth,
+        height: clampedHeight,
       };
     });
 

diff --git a/packages/mui-base/src/ScrollArea/constants.ts b/packages/mui-base/src/ScrollArea/constants.ts
@@ -1 +1,2 @@
 export const SCROLL_TIMEOUT = 500;
+export const MIN_THUMB_SIZE = 16;