From a84622141e7ff7ef68575539a15ac52a1765d886 Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chance.dev>
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 = () => (
-  <>
-    <h1>Ellipsis at viewport width</h1>
-    <ScrollAreaStory type="always" horizontal={false} vertical>
-      {Array.from({ length: 10 }).map((_, index) => (
-        <Copy
-          key={index}
-          style={{
-            maxWidth: '100%',
-            overflow: 'hidden',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-          }}
-        />
-      ))}
-    </ScrollAreaStory>
-
-    <h1>Ellipsis at content width</h1>
-    <ScrollAreaStory type="always" horizontal vertical>
-      {Array.from({ length: 10 }).map((_, index) => (
-        <Copy
-          key={index}
-          style={{
-            width: 500,
-            overflow: 'hidden',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-          }}
-        />
-      ))}
-    </ScrollAreaStory>
-  </>
-);
-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 = () => (
-  <>
-    <h1>Parent has fixed height, short content</h1>
-    <div style={{ display: 'flex', width: 600, height: 300, overflow: 'hidden' }}>
-      <ScrollAreaStory type="always" vertical horizontal style={{ width: '50%', height: 'auto' }}>
-        <div>{COPY_SHORT}</div>
-      </ScrollAreaStory>
-      <ScrollAreaStory type="always" vertical horizontal style={{ width: '50%', height: 'auto' }}>
-        <div>{COPY_SHORT}</div>
-      </ScrollAreaStory>
-    </div>
-
-    <h1>Parent has fixed height, tall content</h1>
-    <div style={{ display: 'flex', width: 600, height: 300, overflow: 'hidden' }}>
-      <ScrollAreaStory type="always" vertical horizontal style={{ width: '50%', height: 'auto' }}>
-        <div>{COPY_SHORT}</div>
-      </ScrollAreaStory>
-      <ScrollAreaStory type="always" vertical horizontal style={{ width: '50%', height: 'auto' }}>
-        <Copy style={{ width: 'auto' }} />
-      </ScrollAreaStory>
-    </div>
-
-    <h1>Parent has max height</h1>
-    <div style={{ display: 'flex', width: 600, maxHeight: 300, overflow: 'hidden' }}>
-      <ScrollAreaStory type="always" vertical horizontal style={{ width: '50%', height: 'auto' }}>
-        <div>{COPY_SHORT}</div>
-      </ScrollAreaStory>
-      <ScrollAreaStory type="always" vertical horizontal style={{ width: '50%', height: 'auto' }}>
-        <Copy style={{ width: 'auto' }} />
-      </ScrollAreaStory>
-    </div>
-
-    <h1>Parent has auto height</h1>
-    <div style={{ display: 'flex', width: 600, overflow: 'hidden' }}>
-      <ScrollAreaStory type="always" vertical horizontal style={{ width: '50%', height: 'auto' }}>
-        <div>{COPY_SHORT}</div>
-      </ScrollAreaStory>
-      <ScrollAreaStory type="always" vertical horizontal style={{ width: '50%', height: 'auto' }}>
-        <Copy style={{ width: 'auto' }} />
-      </ScrollAreaStory>
-    </div>
-
-    <div style={{ height: 200 }} />
-  </>
-);
-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<ScrollAreaViewportElement, ScrollAreaViewportProps>(
   (props: ScopedProps<ScrollAreaViewportProps>, forwardedRef) => {
-    const { __scopeScrollArea, children, asChild, nonce, ...viewportProps } = props;
+    const { __scopeScrollArea, children, nonce, ...viewportProps } = props;
     const context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea);
     const ref = React.useRef<ScrollAreaViewportElement>(null);
     const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);
     return (
       <>
+        {/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */}
         <style
           dangerouslySetInnerHTML={{
-            __html: `
-[data-radix-scroll-area-viewport] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-[data-radix-scroll-area-viewport]::-webkit-scrollbar {
-  display: none;
-}
-:where([data-radix-scroll-area-viewport]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where([data-radix-scroll-area-content]) {
-  flex-grow: 1;
-}
-`,
+            __html: `[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}`,
           }}
           nonce={nonce}
         />
         <Primitive.div
           data-radix-scroll-area-viewport=""
           {...viewportProps}
-          asChild={asChild}
           ref={composedRefs}
           style={{
             /**
@@ -192,22 +175,16 @@ const ScrollAreaViewport = React.forwardRef<ScrollAreaViewportElement, ScrollAre
             ...props.style,
           }}
         >
-          {getSubtree({ asChild, children }, (children) => (
-            <div
-              data-radix-scroll-area-content=""
-              ref={context.onContentChange}
-              /**
-               * When horizontal scrollbar is visible: this element should be at least
-               * as wide as its children for size calculations to work correctly.
-               *
-               * When horizontal scrollbar is NOT visible: this element's width should
-               * be constrained by the parent container to enable `text-overflow: ellipsis`
-               */
-              style={{ minWidth: context.scrollbarXEnabled ? 'fit-content' : undefined }}
-            >
-              {children}
-            </div>
-          ))}
+          {/**
+           * `display: table` ensures our content div will match the size of its children in both
+           * horizontal and vertical axis so we can determine if scroll width/height changed and
+           * recalculate thumb sizes. This doesn't account for children with *percentage*
+           * widths that change. We'll wait to see what use-cases consumers come up with there
+           * before trying to resolve it.
+           */}
+          <div ref={context.onContentChange} style={{ minWidth: '100%', display: 'table' }}>
+            {children}
+          </div>
         </Primitive.div>
       </>
     );
@@ -1032,26 +1009,6 @@ function useResizeObserver(element: HTMLElement | null, onResize: () => void) {
   }, [element, handleResize]);
 }
 
-/**
- * This is a helper function that is used when a component supports `asChild`
- * using the `Slot` component but its implementation contains nested DOM elements.
- *
- * Using it ensures if a consumer uses the `asChild` prop, the elements are in
- * correct order in the DOM, adopting the intended consumer `children`.
- */
-function getSubtree(
-  options: { asChild: boolean | undefined; children: React.ReactNode },
-  content: React.ReactNode | ((children: React.ReactNode) => React.ReactNode)
-) {
-  const { asChild, children } = options;
-  if (!asChild) return typeof content === 'function' ? content(children) : content;
-
-  const firstChild = React.Children.only(children) as React.ReactElement;
-  return React.cloneElement(firstChild, {
-    children: typeof content === 'function' ? content(firstChild.props.children) : content,
-  });
-}
-
 /* -----------------------------------------------------------------------------------------------*/
 
 const Root = ScrollArea;
diff --git a/ssr-testing/app/scroll-area/page.tsx b/ssr-testing/app/scroll-area/page.tsx
index 9eecc51e0..ff5d77893 100644
--- a/ssr-testing/app/scroll-area/page.tsx
+++ b/ssr-testing/app/scroll-area/page.tsx
@@ -9,57 +9,27 @@ import {
 
 export default function Page() {
   return (
-    <div>
-      <ScrollArea>
-        <Scrollbar orientation="vertical">
-          <ScrollAreaThumb />
-        </Scrollbar>
+    <ScrollArea style={{ width: '400px', height: '400px' }}>
+      <Scrollbar orientation="vertical">
+        <ScrollAreaThumb />
+      </Scrollbar>
 
-        <Scrollbar orientation="horizontal">
-          <ScrollAreaThumb />
-        </Scrollbar>
+      <Scrollbar orientation="horizontal">
+        <ScrollAreaThumb />
+      </Scrollbar>
 
-        <ScrollAreaViewport style={{ width: '400px', height: '400px' }}>
-          <div style={{ width: '2000px', padding: 20 }}>
-            <LongContent />
-            <LongContent />
-            <LongContent />
-            <LongContent />
-            <LongContent />
-            <LongContent />
-            <LongContent />
-          </div>
-        </ScrollAreaViewport>
+      <ScrollAreaViewport style={{ width: '2000px', padding: 20 }}>
+        <LongContent />
+        <LongContent />
+        <LongContent />
+        <LongContent />
+        <LongContent />
+        <LongContent />
+        <LongContent />
+      </ScrollAreaViewport>
 
-        <ScrollAreaCorner />
-      </ScrollArea>
-
-      <ScrollArea>
-        <Scrollbar orientation="vertical">
-          <ScrollAreaThumb />
-        </Scrollbar>
-
-        <Scrollbar orientation="horizontal">
-          <ScrollAreaThumb />
-        </Scrollbar>
-
-        <ScrollAreaViewport style={{ width: '400px', height: '400px' }} asChild>
-          <section style={{ border: '1px solid' }}>
-            <div style={{ width: '2000px', padding: 20 }}>
-              <LongContent />
-              <LongContent />
-              <LongContent />
-              <LongContent />
-              <LongContent />
-              <LongContent />
-              <LongContent />
-            </div>
-          </section>
-        </ScrollAreaViewport>
-
-        <ScrollAreaCorner />
-      </ScrollArea>
-    </div>
+      <ScrollAreaCorner />
+    </ScrollArea>
   );
 }