Adds optional captureOverscroll prop to Popover component

Author: rcaplanshopify

polaris-react/src/components/Popover/Popover.scss

@@ -106,6 +106,10 @@ $vertical-motion-offset: -5px;
   flex: 0 0 auto;
 }
 
+.Pane-captureOverscroll {
+  overscroll-behavior: contain;
+}
+
 .Section {
   padding: var(--p-space-4);
 

polaris-react/src/components/Popover/Popover.tsx

@@ -78,6 +78,11 @@ export interface PopoverProps {
   autofocusTarget?: PopoverAutofocusTarget;
   /** Prevents closing the popover when other overlays are clicked */
   preventCloseOnChildOverlayClick?: boolean;
+  /**
+   * Prevents page scrolling when the end of the scrollable Popover overlay content is reached - applied to Pane subcomponent
+   * @default false
+   */
+  captureOverscroll?: boolean;
 }
 
 export interface PopoverPublicAPI {

polaris-react/src/components/Popover/components/Pane/Pane.tsx

@@ -17,16 +17,26 @@ export interface PaneProps {
   height?: string;
   /** Callback when the bottom of the popover is reached by mouse or keyboard  */
   onScrolledToBottom?(): void;
+  /**
+   * Prevents page scrolling when the end of the scrollable Popover content is reached
+   * @default false
+   */
+  captureOverscroll?: boolean;
 }
 
 export function Pane({
+  captureOverscroll = false,
   fixed,
   sectioned,
   children,
   height,
   onScrolledToBottom,
 }: PaneProps) {
-  const className = classNames(styles.Pane, fixed && styles['Pane-fixed']);
+  const className = classNames(
+    styles.Pane,
+    fixed && styles['Pane-fixed'],
+    captureOverscroll && styles['Pane-captureOverscroll'],
+  );
   const content = sectioned
     ? wrapWithComponent(children, Section, {})
     : children;

polaris-react/src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx

@@ -57,6 +57,7 @@ export interface PopoverOverlayProps {
   onClose(source: PopoverCloseSource): void;
   autofocusTarget?: PopoverAutofocusTarget;
   preventCloseOnChildOverlayClick?: boolean;
+  captureOverscroll?: boolean;
 }
 
 interface State {
@@ -222,6 +223,7 @@ export class PopoverOverlay extends PureComponent<PopoverOverlayProps, State> {
       fluidContent,
       hideOnPrint,
       autofocusTarget,
+      captureOverscroll,
     } = this.props;
 
     const className = classNames(
@@ -248,7 +250,7 @@ export class PopoverOverlay extends PureComponent<PopoverOverlayProps, State> {
         style={contentStyles}
         ref={this.contentNode}
       >
-        {renderPopoverContent(children, {sectioned})}
+        {renderPopoverContent(children, {captureOverscroll, sectioned})}
       </div>
     );