From a84622141e7ff7ef68575539a15ac52a1765d886 Mon Sep 17 00:00:00 2001 From: Chance Strickland Date: Tue, 12 Nov 2024 14:36:01 -0800 Subject: [PATCH] Revert "[ScrollArea] Viewport fixes (#2945)" --- .yarn/versions/6cbc86b8.yml | 6 ++ .../scroll-area/src/ScrollArea.stories.tsx | 88 ------------------- packages/react/scroll-area/src/ScrollArea.tsx | 69 +++------------ ssr-testing/app/scroll-area/page.tsx | 66 ++++---------- 4 files changed, 37 insertions(+), 192 deletions(-) create mode 100644 .yarn/versions/6cbc86b8.yml diff --git a/.yarn/versions/6cbc86b8.yml b/.yarn/versions/6cbc86b8.yml new file mode 100644 index 000000000..1e1eb2f74 --- /dev/null +++ b/.yarn/versions/6cbc86b8.yml @@ -0,0 +1,6 @@ +releases: + "@radix-ui/react-scroll-area": patch + +declined: + - primitives + - ssr-testing diff --git a/packages/react/scroll-area/src/ScrollArea.stories.tsx b/packages/react/scroll-area/src/ScrollArea.stories.tsx index 0fc1311af..3f4b0bea3 100644 --- a/packages/react/scroll-area/src/ScrollArea.stories.tsx +++ b/packages/react/scroll-area/src/ScrollArea.stories.tsx @@ -307,94 +307,6 @@ export const Chromatic = () => ( ); Chromatic.parameters = { chromatic: { disable: false } }; -export const ChromaticEllipsis = () => ( - <> -

Ellipsis at viewport width

- - {Array.from({ length: 10 }).map((_, index) => ( - - ))} - - -

Ellipsis at content width

- - {Array.from({ length: 10 }).map((_, index) => ( - - ))} - - -); -ChromaticEllipsis.parameters = { chromatic: { disable: false } }; - -const COPY_SHORT = ` - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet eros iaculis, - bibendum tellus ac, lobortis odio. Aliquam bibendum elit est, in iaculis est commodo id. - Donec pulvinar est libero. Proin consectetur pellentesque molestie. -`; - -export const ChromaticFillParentHeight = () => ( - <> -

Parent has fixed height, short content

-
- -
{COPY_SHORT}
-
- -
{COPY_SHORT}
-
-
- -

Parent has fixed height, tall content

-
- -
{COPY_SHORT}
-
- - - -
- -

Parent has max height

-
- -
{COPY_SHORT}
-
- - - -
- -

Parent has auto height

-
- -
{COPY_SHORT}
-
- - - -
- -
- -); -ChromaticFillParentHeight.parameters = { chromatic: { disable: false } }; - const DYNAMIC_CONTENT_DELAY = 2000; export const ChromaticDynamicContentBeforeLoaded = () => { diff --git a/packages/react/scroll-area/src/ScrollArea.tsx b/packages/react/scroll-area/src/ScrollArea.tsx index ee1195d71..52479feb0 100644 --- a/packages/react/scroll-area/src/ScrollArea.tsx +++ b/packages/react/scroll-area/src/ScrollArea.tsx @@ -141,39 +141,22 @@ interface ScrollAreaViewportProps extends PrimitiveDivProps { const ScrollAreaViewport = React.forwardRef( (props: ScopedProps, forwardedRef) => { - const { __scopeScrollArea, children, asChild, nonce, ...viewportProps } = props; + const { __scopeScrollArea, children, nonce, ...viewportProps } = props; const context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea); const ref = React.useRef(null); const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange); return ( <> + {/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */}