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>

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",
       },

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,