refactor: rewrite Scrollable utilizing platform features

This updates the Scrollable component to be a function component, but
also changes the fundamental implementation strategy.

Previously, the Scrollable component held internal state for the scroll
position and controlled the scroll of the actual DOM node as a side
effect.

With this change, there is no controlling of the DOM node's scroll,
allowing the platform to handle all scrolling interaction and only using
native features to supply enhancements for the ScrollTo component, the
hint functionality.

Author: iAmNathanJ

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

@@ -44,7 +44,7 @@ interface State {
   canScroll: boolean;
 }
 
-export class Scrollable extends Component<ScrollableProps, State> {
+export class ScrollableLegacy extends Component<ScrollableProps, State> {
   static ScrollTo = ScrollTo;
   static forNode(node: HTMLElement): HTMLElement | Document {
     const closestElement = node.closest(scrollable.selector);
@@ -267,3 +267,5 @@ function prefersReducedMotion() {
     return false;
   }
 }
+
+export {Scrollable2 as Scrollable} from './Scrollable2';

polaris-react/src/components/Scrollable/Scrollable2.tsx

@@ -0,0 +1,140 @@
+import React, {useEffect, useRef, useState, useCallback} from 'react';
+
+import {debounce} from '../../utilities/debounce';
+import {classNames} from '../../utilities/css';
+import {
+  StickyManager,
+  StickyManagerContext,
+} from '../../utilities/sticky-manager';
+import {scrollable} from '../shared';
+
+import {ScrollTo} from './components';
+import {ScrollableContext} from './context';
+import styles from './Scrollable.scss';
+
+export interface ScrollableProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content to display in scrollable area */
+  children?: React.ReactNode;
+  /** Scroll content vertically */
+  vertical?: boolean;
+  /** Scroll content horizontally */
+  horizontal?: boolean;
+  /** Add a shadow when content is scrollable */
+  shadow?: boolean;
+  /** Slightly hints content upon mounting when scrollable */
+  hint?: boolean;
+  /** Adds a tabIndex to scrollable when children are not focusable */
+  focusable?: boolean;
+  /** Called when scrolled to the bottom of the scroll area */
+  onScrolledToBottom?(): void;
+}
+
+export function Scrollable2({
+  children,
+  className,
+  horizontal,
+  vertical = true,
+  shadow,
+  hint,
+  focusable,
+  onScrolledToBottom,
+  ...rest
+}: ScrollableProps) {
+  const [topShadow, setTopShadow] = useState(false);
+  const [bottomShadow, setBottomShadow] = useState(false);
+  const stickyManager = useRef(new StickyManager());
+  const scrollArea = useRef<HTMLDivElement>(null);
+  const scrollTo = useCallback((scrollY: number) => {
+    scrollArea.current?.scrollTo({top: scrollY, behavior: 'smooth'});
+  }, []);
+
+  useEffect(() => {
+    if (hint && scrollArea.current) peek(scrollArea.current);
+  }, [hint]);
+
+  useEffect(() => {
+    const currentScrollArea = scrollArea.current;
+
+    if (!currentScrollArea) {
+      return;
+    }
+
+    const handleScroll = () => {
+      const {scrollTop, clientHeight, scrollHeight} = currentScrollArea;
+
+      setBottomShadow(
+        Boolean(shadow && !(scrollTop + clientHeight >= scrollHeight)),
+      );
+      setTopShadow(Boolean(shadow && scrollTop > 0));
+    };
+
+    const handleResize = debounce(handleScroll, 50, {trailing: true});
+
+    stickyManager.current?.setContainer(currentScrollArea);
+
+    window.requestAnimationFrame(handleScroll);
+
+    currentScrollArea.addEventListener('scroll', () => {
+      window.requestAnimationFrame(handleScroll);
+    });
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      currentScrollArea.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [shadow]);
+
+  const finalClassName = classNames(
+    className,
+    styles.Scrollable,
+    vertical && styles.vertical,
+    horizontal && styles.horizontal,
+    topShadow && styles.hasTopShadow,
+    bottomShadow && styles.hasBottomShadow,
+  );
+
+  return (
+    <ScrollableContext.Provider value={scrollTo}>
+      <StickyManagerContext.Provider value={stickyManager.current}>
+        <div
+          className={finalClassName}
+          {...scrollable.props}
+          {...rest}
+          ref={scrollArea}
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+          tabIndex={focusable ? 0 : undefined}
+        >
+          {children}
+        </div>
+      </StickyManagerContext.Provider>
+    </ScrollableContext.Provider>
+  );
+}
+
+Scrollable2.ScrollTo = ScrollTo;
+
+function prefersReducedMotion() {
+  try {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  } catch (err) {
+    return false;
+  }
+}
+
+function peek(elem?: HTMLDivElement) {
+  if (!elem || prefersReducedMotion()) {
+    return;
+  }
+
+  function goBack() {
+    if (elem?.scrollTop! > 99) {
+      elem?.removeEventListener('scroll', goBack);
+      elem?.scrollTo({top: 0, behavior: 'smooth'});
+    }
+  }
+
+  elem.addEventListener('scroll', goBack);
+  elem.scrollTo({top: 100, behavior: 'smooth'});
+}