fix(scrollIntoView): respect scroll padding (#7484)

Fixes #7037

Author: jeffijoe

packages/@react-aria/utils/src/scrollIntoView.ts

@@ -30,24 +30,40 @@ export function scrollIntoView(scrollView: HTMLElement, element: HTMLElement) {
   let x = scrollView.scrollLeft;
   let y = scrollView.scrollTop;
 
-  // Account for top/left border offsetting the scroll top/Left
-  let {borderTopWidth, borderLeftWidth} = getComputedStyle(scrollView);
-  let borderAdjustedX = scrollView.scrollLeft + parseInt(borderLeftWidth, 10);
-  let borderAdjustedY = scrollView.scrollTop + parseInt(borderTopWidth, 10);
+  // Account for top/left border offsetting the scroll top/Left + scroll padding
+  let {
+    borderTopWidth,
+    borderLeftWidth,
+    scrollPaddingTop,
+    scrollPaddingRight,
+    scrollPaddingBottom,
+    scrollPaddingLeft
+  } = getComputedStyle(scrollView);
+
+  let borderAdjustedX = x + parseInt(borderLeftWidth, 10);
+  let borderAdjustedY = y + parseInt(borderTopWidth, 10);
   // Ignore end/bottom border via clientHeight/Width instead of offsetHeight/Width
   let maxX = borderAdjustedX + scrollView.clientWidth;
   let maxY = borderAdjustedY + scrollView.clientHeight;
 
-  if (offsetX <= x) {
-    x = offsetX - parseInt(borderLeftWidth, 10);
-  } else if (offsetX + width > maxX) {
-    x += offsetX + width - maxX;
+  // Get scroll padding values as pixels - defaults to 0 if no scroll padding
+  // is used.
+  let scrollPaddingTopNumber = parseInt(scrollPaddingTop, 10) || 0;
+  let scrollPaddingBottomNumber = parseInt(scrollPaddingBottom, 10) || 0;
+  let scrollPaddingRightNumber = parseInt(scrollPaddingRight, 10) || 0;
+  let scrollPaddingLeftNumber = parseInt(scrollPaddingLeft, 10) || 0;
+
+  if (offsetX <= x + scrollPaddingLeftNumber) {
+    x = offsetX - parseInt(borderLeftWidth, 10) - scrollPaddingLeftNumber;
+  } else if (offsetX + width > maxX - scrollPaddingRightNumber) {
+    x += offsetX + width - maxX + scrollPaddingRightNumber;
   }
-  if (offsetY <= borderAdjustedY) {
-    y = offsetY - parseInt(borderTopWidth, 10);
-  } else if (offsetY + height > maxY) {
-    y += offsetY + height - maxY;
+  if (offsetY <= borderAdjustedY + scrollPaddingTopNumber) {
+    y = offsetY - parseInt(borderTopWidth, 10) - scrollPaddingTopNumber;
+  } else if (offsetY + height > maxY - scrollPaddingBottomNumber) {
+    y += offsetY + height - maxY + scrollPaddingBottomNumber;
   }
+
   scrollView.scrollLeft = x;
   scrollView.scrollTop = y;
 }

packages/react-aria-components/stories/Menu.stories.tsx

@@ -68,6 +68,54 @@ export const MenuComplex = () => (
   </MenuTrigger>
 );
 
+export const MenuScrollPaddingExample = () => (
+  <MenuTrigger>
+    <Button aria-label="Menu">☰</Button>
+    <Popover>
+      <Menu
+        className={styles.menu}
+        onAction={action('onAction')}
+        style={{
+          maxHeight: 200,
+          position: 'relative',
+          scrollPaddingTop: '25px',
+          scrollPaddingBottom: '25px',
+          paddingBottom: '25px' // needed due to absolute-positioned footer
+        }}>
+        <Header
+          style={{
+            fontSize: '1.2em',
+            position: 'sticky',
+            top: 0,
+            height: '25px',
+            background: 'lightgray',
+            borderBottom: '1px solid gray'
+          }}>
+          Section 1
+        </Header>
+        {Array.from({length: 30}).map((_, i) => (
+          <MyMenuItem key={i}>Item {i + 1}</MyMenuItem>
+        ))}
+      </Menu>
+      {/* Menu doesn't have a footer, so have to put one outside to
+        and position it absolutely to demo scroll padding bottom support. */}
+      <div
+        style={{
+          fontSize: '1.2em',
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          width: '100%',
+          height: '24px', // with the border it'll be 25px
+          borderTop: '1px solid gray',
+          background: 'lightgray'
+        }}>
+        A footer
+      </div>
+    </Popover>
+  </MenuTrigger>
+);
+
 export const SubmenuExample = (args) => (
   <MenuTrigger>
     <Button aria-label="Menu">☰</Button>