From 150792ace014b53c2b6bb85e267f2624bc41f063 Mon Sep 17 00:00:00 2001 From: atomiks Date: Mon, 4 Nov 2024 10:56:01 +1100 Subject: [PATCH] Tweaks --- .../ScrollAreaIntroduction/system/index.js | 5 +++-- .../ScrollAreaIntroduction/system/index.tsx | 5 +++-- .../Scrollbar/useScrollAreaScrollbar.ts | 17 ++++++++--------- .../Viewport/useScrollAreaViewport.tsx | 11 +++++++---- packages/mui-base/src/ScrollArea/constants.ts | 1 + 5 files changed, 22 insertions(+), 17 deletions(-) diff --git a/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.js b/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.js index ca044e5fe..958cd97fd 100644 --- 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 index ca044e5fe..958cd97fd 100644 --- 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 index 73b9d68fb..ceb298ab0 100644 --- 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 index 82677eee4..3a0a1a941 100644 --- 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 index 99d3298aa..1372a9533 100644 --- 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;