From 8272a2e50aae87f41599f0aa740dac087d335866 Mon Sep 17 00:00:00 2001
From: Taylor Jones <tay1orjones@users.noreply.github.com>
Date: Fri, 21 Jan 2022 17:43:11 -0600
Subject: [PATCH] feat(tabs): make debounce wait configurable prop (#10385)

* feat(tabs): make debounce wait configurable prop

* test: update snaps

* fix(tabs): ensure scrollDebounceWait is not passed through ...other

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../__tests__/__snapshots__/PublicAPI-test.js.snap |  4 ++++
 packages/react/src/components/Tabs/Tabs.js         | 14 +++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 5ce824302da6..a1025e61ab83 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6706,6 +6706,7 @@ Map {
       "$$typeof": Symbol(react.context),
     },
     "defaultProps": Object {
+      "scrollDebounceWait": 150,
       "scrollIntoView": true,
       "selected": 0,
       "selectionMode": "automatic",
@@ -6739,6 +6740,9 @@ Map {
       "rightOverflowButtonProps": Object {
         "type": "object",
       },
+      "scrollDebounceWait": Object {
+        "type": "number",
+      },
       "scrollIntoView": Object {
         "type": "bool",
       },
diff --git a/packages/react/src/components/Tabs/Tabs.js b/packages/react/src/components/Tabs/Tabs.js
index 8f4d083a586d..6c6137f0c7f4 100644
--- a/packages/react/src/components/Tabs/Tabs.js
+++ b/packages/react/src/components/Tabs/Tabs.js
@@ -67,6 +67,13 @@ export default class Tabs extends React.Component {
      */
     rightOverflowButtonProps: PropTypes.object,
 
+    /**
+     * Optionally provide a delay (in milliseconds) passed to the lodash
+     * debounce of the onScroll handler. This will impact the responsiveness
+     * of scroll arrow buttons rendering when scrolling to the first or last tab.
+     */
+    scrollDebounceWait: PropTypes.number,
+
     /**
      * Choose whether or not to automatically scroll to newly selected tabs
      * on component rerender
@@ -99,6 +106,7 @@ export default class Tabs extends React.Component {
     scrollIntoView: true,
     selected: 0,
     selectionMode: 'automatic',
+    scrollDebounceWait: 150,
   };
 
   static contextType = PrefixContext;
@@ -174,7 +182,10 @@ export default class Tabs extends React.Component {
     window.addEventListener('resize', this._debouncedHandleWindowResize);
 
     if (!this._debouncedHandleScroll) {
-      this._debouncedHandleScroll = debounce(this._handleScroll, 125);
+      this._debouncedHandleScroll = debounce(
+        this._handleScroll,
+        this.props.scrollDebounceWait
+      );
     }
 
     // scroll selected tab into view on mount
@@ -411,6 +422,7 @@ export default class Tabs extends React.Component {
       type,
       light,
       onSelectionChange,
+      scrollDebounceWait, // eslint-disable-line no-unused-vars
       scrollIntoView, // eslint-disable-line no-unused-vars
       selectionMode, // eslint-disable-line no-unused-vars
       tabContentClassName,