From 411c44b978d5551b6fa944e4433ef65ea3f73ccb Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 29 Sep 2023 16:18:14 +0200
Subject: [PATCH] feat(ui-view): add overscroll-behavior to view and flex.item
 component

Closes: INSTUI-3873
---
 .../ui-view/src/View/__examples__/View.examples.ts   | 12 ++++++++++++
 packages/ui-view/src/View/index.tsx                  |  4 +++-
 packages/ui-view/src/View/props.ts                   |  9 ++++++++-
 packages/ui-view/src/View/styles.ts                  |  2 ++
 4 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/ui-view/src/View/__examples__/View.examples.ts b/packages/ui-view/src/View/__examples__/View.examples.ts
index c280b4d451..8529b009ac 100644
--- a/packages/ui-view/src/View/__examples__/View.examples.ts
+++ b/packages/ui-view/src/View/__examples__/View.examples.ts
@@ -83,6 +83,18 @@ export default {
           props.textAlign !== 'center')) ||
       // Only generate a 1 variation for non-'0' borderWidth
       (props.borderWidth !== '0' &&
+        (props.background !== 'transparent' ||
+          props.borderRadius !== '0' ||
+          props.position !== 'static' ||
+          props.shadow !== 'none' ||
+          props.textAlign !== 'center')) ||
+      (props.overscrollBehavior === 'none' &&
+        (props.background !== 'transparent' ||
+          props.borderRadius !== '0' ||
+          props.position !== 'static' ||
+          props.shadow !== 'none' ||
+          props.textAlign !== 'center')) ||
+      (props.overscrollBehavior === 'auto' &&
         (props.background !== 'transparent' ||
           props.borderRadius !== '0' ||
           props.position !== 'static' ||
diff --git a/packages/ui-view/src/View/index.tsx b/packages/ui-view/src/View/index.tsx
index b335ca7c6e..91b9dae2cf 100644
--- a/packages/ui-view/src/View/index.tsx
+++ b/packages/ui-view/src/View/index.tsx
@@ -64,7 +64,8 @@ class View extends Component<ViewProps> {
     position: 'static',
     focusPosition: 'offset',
     focusColor: 'info',
-    shouldAnimateFocus: true
+    shouldAnimateFocus: true,
+    overscrollBehavior: 'auto'
   } as const
 
   // TODO: Remove this code once all components are using passthroughProps in place
@@ -204,6 +205,7 @@ class View extends Component<ViewProps> {
       shouldAnimateFocus,
       borderColor,
       className,
+      overscrollBehavior,
       styles,
       makeStyles,
       ...props
diff --git a/packages/ui-view/src/View/props.ts b/packages/ui-view/src/View/props.ts
index 347d4d2a55..18b1fa270f 100644
--- a/packages/ui-view/src/View/props.ts
+++ b/packages/ui-view/src/View/props.ts
@@ -190,6 +190,11 @@ type ViewOwnProps = {
    * Specify a mouse cursor to use when hovering over the `<View />`
    */
   cursor?: Cursor
+  /**
+   * Sets what a browser does when reaching the boundary of a scrolling area.
+   * Valid values are `auto`, `contain`, `none`.
+   */
+  overscrollBehavior?: 'auto' | 'contain' | 'none'
 }
 
 type PropKeys = keyof ViewOwnProps
@@ -271,7 +276,8 @@ const propTypes: PropValidators<PropKeys> = {
   focusColor: PropTypes.oneOf(['info', 'inverse', 'success', 'danger']),
   shouldAnimateFocus: PropTypes.bool,
   withVisualDebug: PropTypes.bool,
-  dir: PropTypes.oneOf(Object.values(textDirectionContextConsumer.DIRECTION))
+  dir: PropTypes.oneOf(Object.values(textDirectionContextConsumer.DIRECTION)),
+  overscrollBehavior: PropTypes.oneOf(['auto', 'contain', 'none'])
 }
 
 // This variable will be attached as static property on the `View` component
@@ -302,6 +308,7 @@ const allowedProps: AllowedPropKeys = [
   'minWidth',
   'overflowX',
   'overflowY',
+  'overscrollBehavior',
   'padding',
   'position',
   'shadow',
diff --git a/packages/ui-view/src/View/styles.ts b/packages/ui-view/src/View/styles.ts
index 6698edcbc3..086d699105 100644
--- a/packages/ui-view/src/View/styles.ts
+++ b/packages/ui-view/src/View/styles.ts
@@ -395,6 +395,7 @@ const generateStyle = (
     shadow,
     overflowY,
     overflowX,
+    overscrollBehavior,
     insetBlockEnd,
     insetBlockStart,
     insetInlineEnd,
@@ -586,6 +587,7 @@ const generateStyle = (
       overflowX: overflowX && overflowX !== 'visible' ? overflowX : '',
       overflowY: overflowY && overflowY !== 'visible' ? overflowY : '',
       position: position !== 'static' ? position : '',
+      overscrollBehavior: overscrollBehavior ? overscrollBehavior : 'auto',
       ...(withVisualDebug
         ? {
             outline: `0.0625rem dashed ${componentTheme.debugOutlineColor}`