scroll event approach

Author: kmcfaul

packages/react-core/src/components/Toolbar/examples/Toolbar.md

@@ -5,7 +5,7 @@ propComponents: ['Toolbar', 'ToolbarContent', 'ToolbarGroup', 'ToolbarItem', 'To
 section: components
 ---
 
-import { Fragment, useState } from 'react';
+import { Fragment, useState, useRef, useLayoutEffect } from 'react';
 
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
@@ -114,11 +114,13 @@ When all of a toolbar's required elements cannot fit in a single line, you can s
 ```
 
 ## Examples with spacers and wrapping
+
 You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.
 
 Items are spaced “16px” apart by default and can be modified by changing their or their parents' `gap`, `columnGap`, and `rowGap` properties. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
 
 ### Toolbar content wrapping
+
 The toolbar content section will wrap by default, but you can set the `rowRap` property to `noWrap` to make it not wrap.
 
 ```ts file="./ToolbarContentWrap.tsx"

packages/react-core/src/components/Toolbar/examples/ToolbarSticky.tsx

@@ -1,17 +1,57 @@
-import { Fragment, useState } from 'react';
+import { Fragment, useLayoutEffect, useRef, useState } from 'react';
 import { Toolbar, ToolbarItem, ToolbarContent, SearchInput, Checkbox } from '@patternfly/react-core';
 
+const useTheadPinnedFromScrollParent = ({ track, scrollRootRef, theadRef }): { isPinned } => {
+  const [isPinned, setIsPinned] = useState(false);
+
+  useLayoutEffect(() => {
+    if (!track) {
+      setIsPinned(false);
+      return;
+    }
+
+    const scrollRoot = scrollRootRef.current;
+    if (!scrollRoot) {
+      setIsPinned(false);
+      return;
+    }
+
+    const syncFromScroll = () => {
+      setIsPinned(scrollRoot.scrollTop > 0);
+    };
+    syncFromScroll();
+    scrollRoot.addEventListener('scroll', syncFromScroll, { passive: true });
+    return () => scrollRoot.removeEventListener('scroll', syncFromScroll);
+  }, [track, scrollRootRef, theadRef]);
+
+  return { isPinned };
+};
+
 export const ToolbarSticky = () => {
   const [isSticky, setIsSticky] = useState(true);
   const [showEvenOnly, setShowEvenOnly] = useState(true);
   const [searchValue, setSearchValue] = useState('');
   const array = Array.from(Array(30), (_, x) => x); // create array of numbers from 1-30 for demo purposes
   const numbers = showEvenOnly ? array.filter((number) => number % 2 === 0) : array;
 
+  const innerScrollRef = useRef<HTMLDivElement>(null);
+  const toolbarRef = useRef<HTMLDivElement>(null);
+  const { isPinned } = useTheadPinnedFromScrollParent({
+    track: true,
+    scrollRootRef: innerScrollRef,
+    theadRef: toolbarRef
+  });
+
   return (
     <Fragment>
-      <div style={{ overflowY: 'scroll', height: '200px' }}>
-        <Toolbar id="toolbar-sticky" inset={{ default: 'insetNone' }} isSticky={isSticky}>
+      <div style={{ overflowY: 'scroll', height: '200px' }} ref={innerScrollRef}>
+        <Toolbar
+          className={isPinned ? 'PINNED' : ''}
+          id="toolbar-sticky"
+          inset={{ default: 'insetNone' }}
+          isSticky={isSticky}
+          ref={toolbarRef}
+        >
           <ToolbarContent>
             <ToolbarItem>
               <SearchInput

packages/react-table/src/components/Table/InnerScrollContainer.tsx

@@ -1,5 +1,6 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table-scrollable';
+import { forwardRef } from 'react';
 
 export interface InnerScrollContainerProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the inner scroll container */
@@ -8,14 +9,14 @@ export interface InnerScrollContainerProps extends React.HTMLProps<HTMLDivElemen
   className?: string;
 }
 
-export const InnerScrollContainer: React.FunctionComponent<InnerScrollContainerProps> = ({
-  children,
-  className,
-  ...props
-}: InnerScrollContainerProps) => (
-  <div className={css(className, styles.scrollInnerWrapper)} {...props}>
+const InnerScrollContainerBase = (
+  { children, className, ...props }: InnerScrollContainerProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) => (
+  <div ref={ref} className={css(className, styles.scrollInnerWrapper)} {...props}>
     {children}
   </div>
 );
 
+export const InnerScrollContainer = forwardRef(InnerScrollContainerBase);
 InnerScrollContainer.displayName = 'InnerScrollContainer';

packages/react-table/src/components/Table/Thead.tsx

@@ -1,33 +1,6 @@
-import { forwardRef, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { forwardRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
-import { TableContext } from './Table';
-
-/** Ratio must be below this to count as “pinned” (avoids doc-layout subpixel + strict threshold: [1] never hitting exactly 1). */
-const PINNED_INTERSECTION_RATIO = 0.999;
-
-const getOverflowScrollParent = (node: HTMLElement): Element | null => {
-  let parent = node.parentElement;
-  while (parent) {
-    const style = getComputedStyle(parent);
-    if (/(auto|scroll|overlay)/.test(style.overflowY) || /(auto|scroll|overlay)/.test(style.overflowX)) {
-      return parent;
-    }
-    parent = parent.parentElement;
-  }
-  return null;
-};
-
-const assignRef = <T,>(ref: React.Ref<T> | undefined, value: T | null) => {
-  if (!ref) {
-    return;
-  }
-  if (typeof ref === 'function') {
-    ref(value);
-  } else {
-    (ref as React.MutableRefObject<T | null>).current = value;
-  }
-};
 
 export interface TheadProps extends React.HTMLProps<HTMLTableSectionElement> {
   /** Content rendered inside the <thead> row group */
@@ -40,6 +13,11 @@ export interface TheadProps extends React.HTMLProps<HTMLTableSectionElement> {
   innerRef?: React.Ref<any>;
   /** Indicates the <thead> contains a nested header */
   hasNestedHeader?: boolean;
+  /**
+   * When true, applies the placeholder `PINNED` class for styling while the sticky header is scrolled
+   * within its scroll container. Drive this from app logic or a hook (see table examples).
+   */
+  isPinned?: boolean;
 }
 
 const TheadBase: React.FunctionComponent<TheadProps> = ({
@@ -48,63 +26,23 @@ const TheadBase: React.FunctionComponent<TheadProps> = ({
   noWrap = false,
   innerRef,
   hasNestedHeader,
+  isPinned,
   ...props
-}: TheadProps) => {
-  const { isStickyHeader } = useContext(TableContext);
-  const observeStickyPin = !!isStickyHeader;
-  const [isPinned, setIsPinned] = useState(false);
-  const theadElRef = useRef<HTMLTableSectionElement | null>(null);
-
-  const setTheadRef = useCallback(
-    (node: HTMLTableSectionElement | null) => {
-      theadElRef.current = node;
-      assignRef(innerRef, node);
-    },
-    [innerRef]
-  );
-
-  useEffect(() => {
-    if (!observeStickyPin || typeof IntersectionObserver === 'undefined') {
-      setIsPinned(false);
-      return;
-    }
-
-    const el = theadElRef.current;
-    if (!el) {
-      return;
-    }
-
-    const scrollRoot = getOverflowScrollParent(el);
-
-    // Requires sticky thead `inset-block-start: -1px` in CSS (see table.css).
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        // console.log(scrollRoot, entry, entry.intersectionRatio);
-        setIsPinned(entry.intersectionRatio < PINNED_INTERSECTION_RATIO);
-      },
-      { threshold: [0, 1], root: scrollRoot }
-    );
-
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [observeStickyPin]);
-
-  return (
-    <thead
-      className={css(
-        styles.tableThead,
-        className,
-        noWrap && styles.modifiers.nowrap,
-        hasNestedHeader && styles.modifiers.nestedColumnHeader,
-        observeStickyPin && isPinned && 'PINNED'
-      )}
-      ref={setTheadRef}
-      {...props}
-    >
-      {children}
-    </thead>
-  );
-};
+}: TheadProps) => (
+  <thead
+    className={css(
+      styles.tableThead,
+      className,
+      noWrap && styles.modifiers.nowrap,
+      hasNestedHeader && styles.modifiers.nestedColumnHeader,
+      isPinned && 'PINNED'
+    )}
+    ref={innerRef}
+    {...props}
+  >
+    {children}
+  </thead>
+);
 
 export const Thead = forwardRef((props: TheadProps, ref: React.Ref<HTMLTableSectionElement>) => (
   <TheadBase {...props} innerRef={ref} />

packages/react-table/src/components/Table/examples/Table.md

@@ -41,7 +41,7 @@ The `Table` component takes an explicit and declarative approach, and its implem
 
 The documentation for the deprecated table implementation can be found under the [React deprecated](/components/table/react-deprecated) tab. It is configuration based and takes a less declarative and more implicit approach to laying out the table structure, such as the rows and cells within it.
 
-import { Fragment, isValidElement, useCallback, useEffect, useRef, useState } from 'react';
+import { Fragment, isValidElement, useLayoutEffect, useCallback, useEffect, useRef, useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -327,7 +327,6 @@ To enable a tree table:
    - `checkAriaLabel` - (optional) accessible label for the checkbox
    - `showDetailsAriaLabel` - (optional) accessible label for the show row details button in the responsive view
 4. The first `Td` in each row will pass the following to the `treeRow` prop:
-
    - `onCollapse` - Callback when user expands/collapses a row to reveal/hide the row's children.
    - `onCheckChange` - (optional) Callback when user changes the checkbox on a row.
    - `onToggleRowDetails` - (optional) Callback when user shows/hides the row details in responsive view.
@@ -427,6 +426,14 @@ To maintain proper sticky behavior across sticky columns and header, `Table` mus
 
 ```
 
+### Sticky columns and header (scroll-pinned class)
+
+This example matches [Sticky columns and header](#sticky-columns-and-header) but uses the `useTheadPinnedFromScrollParent` hook with refs on `InnerScrollContainer` and `Thead` to toggle `isPinned` and apply the placeholder `PINNED` class when the inner scroll container has been scrolled. If the scroll-root ref is not set, the hook falls back to the exported `getOverflowScrollParent` helper using the thead ref.
+
+```ts file="TableStickyColumnsAndHeaderScrollPinned.tsx"
+
+```
+
 ### Nested column headers
 
 To make a nested column header: