chore: use intersection observer to place bulk actions bar correctly in the DOM

Author: mrcthms

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

@@ -5,7 +5,6 @@ import {debounce} from '../../utilities/debounce';
 import {classNames} from '../../utilities/css';
 import {useI18n} from '../../utilities/i18n';
 import {clamp} from '../../utilities/clamp';
-import {findFirstKeyboardFocusableNode} from '../../utilities/focus';
 import type {
   BadgeAction,
   DisableableAction,
@@ -64,7 +63,6 @@ class BulkActionsInner extends PureComponent<CombinedProps, State> {
   private containerNode: HTMLElement | null = null;
   private buttonsNode: HTMLElement | null = null;
   private moreActionsNode: HTMLElement | null = null;
-  private activatorNode: Element | null = null;
   private groupNode = createRef<HTMLDivElement>();
   private promotedActionsWidths: number[] = [];
   private bulkActionsWidth = 0;
@@ -91,25 +89,6 @@ class BulkActionsInner extends PureComponent<CombinedProps, State> {
     {trailing: true},
   );
 
-  private focusContent() {
-    if (this.containerNode == null) {
-      return;
-    }
-
-    requestAnimationFrame(() => {
-      if (this.containerNode == null) {
-        return;
-      }
-
-      const focusableChild = findFirstKeyboardFocusableNode(this.containerNode);
-      if (focusableChild) {
-        focusableChild.focus({
-          preventScroll: process.env.NODE_ENV === 'development',
-        });
-      }
-    });
-  }
-
   private numberOfPromotedActionsToRender(): number {
     const {promotedActions} = this.props;
     const {containerWidth, measuring} = this.state;
@@ -199,11 +178,6 @@ class BulkActionsInner extends PureComponent<CombinedProps, State> {
         this.addedMoreActionsWidthForMeasuring
       : 0;
 
-    if (document?.activeElement) {
-      this.activatorNode = document.activeElement;
-    }
-    this.focusContent();
-
     if (this.containerNode) {
       this.setState({
         containerWidth: this.containerNode.getBoundingClientRect().width,
@@ -347,11 +321,7 @@ class BulkActionsInner extends PureComponent<CombinedProps, State> {
       </Transition>
     );
 
-    return (
-      <div ref={this.setContainerNode} onBlur={this.handleBlur}>
-        {group}
-      </div>
-    );
+    return <div ref={this.setContainerNode}>{group}</div>;
   }
 
   private isNewBadgeInBadgeActions() {
@@ -395,18 +365,6 @@ class BulkActionsInner extends PureComponent<CombinedProps, State> {
       this.promotedActionsWidths.push(width);
     }
   };
-
-  private handleBlur = (event: React.FocusEvent<HTMLDivElement>) => {
-    const currentTarget = event.currentTarget;
-
-    // Give browser time to focus the next element
-    requestAnimationFrame(() => {
-      // Check if the new focused element is a child of the original container
-      if (!currentTarget.contains(document.activeElement)) {
-        console.log('blurrin yo');
-      }
-    });
-  };
 }
 
 function instanceOfBulkActionListSectionArray(

polaris-react/src/components/IndexTable/IndexTable.scss

@@ -14,7 +14,8 @@
 }
 
 .IndexTableWithBulkActions {
-  padding-bottom: var(--p-space-4);
+  --pc-index-table-bulk-actions-offset: 100px;
+  padding-bottom: var(--pc-index-table-bulk-actions-offset);
 }
 
 .LoadingContainer-enter {
@@ -472,17 +473,22 @@ $loading-panel-height: 53px;
 
 .BulkActionsWrapper {
   visibility: visible;
-  position: sticky;
+  position: absolute;
   z-index: var(--pc-index-table-bulk-actions);
   left: 0;
-  bottom: var(--p-space-4);
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: var(--p-space-4);
 }
 
+.BulkActionsWrapperSticky {
+  position: fixed;
+  top: auto;
+  bottom: var(--p-space-4);
+}
+
 .SelectAllActionsWrapper {
   visibility: visible;
   position: relative;

polaris-react/src/components/IndexTable/IndexTable.stories.tsx

@@ -565,27 +565,29 @@ export function WithBulkActionsAndSelectionAcrossPages() {
   );
 
   return (
-    <Card>
-      <IndexTable
-        resourceName={resourceName}
-        itemCount={customers.length}
-        selectedItemsCount={
-          allResourcesSelected ? 'All' : selectedResources.length
-        }
-        onSelectionChange={handleSelectionChange}
-        hasMoreItems
-        bulkActions={bulkActions}
-        promotedBulkActions={promotedBulkActions}
-        headings={[
-          {title: 'Name'},
-          {title: 'Location'},
-          {title: 'Order count'},
-          {title: 'Amount spent'},
-        ]}
-      >
-        {rowMarkup}
-      </IndexTable>
-    </Card>
+    <div style={{padding: 'var(--p-space-4)'}}>
+      <Card>
+        <IndexTable
+          resourceName={resourceName}
+          itemCount={customers.length}
+          selectedItemsCount={
+            allResourcesSelected ? 'All' : selectedResources.length
+          }
+          onSelectionChange={handleSelectionChange}
+          hasMoreItems
+          bulkActions={bulkActions}
+          promotedBulkActions={promotedBulkActions}
+          headings={[
+            {title: 'Name'},
+            {title: 'Location'},
+            {title: 'Order count'},
+            {title: 'Amount spent'},
+          ]}
+        >
+          {rowMarkup}
+        </IndexTable>
+      </Card>
+    </div>
   );
 }
 

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

@@ -38,6 +38,7 @@ import type {NonEmptyArray} from '../../types';
 
 import {getTableHeadingsBySelector} from './utilities';
 import {ScrollContainer, Cell, Row} from './components';
+import {useIsBulkActionsSticky} from './hooks/use-is-bulk-actions-sticky';
 import styles from './IndexTable.scss';
 
 interface IndexTableHeadingBase {
@@ -154,6 +155,12 @@ function IndexTableBase({
   const scrollContainerElement = useRef<HTMLDivElement>(null);
   const scrollingWithBar = useRef(false);
   const scrollingContainer = useRef(false);
+  const {
+    bulkActionsIntersectionRef,
+    tableMeasurerRef,
+    isBulkActionsSticky,
+    bulkActionsAbsoluteOffset,
+  } = useIsBulkActionsSticky();
 
   const tableBodyRef = useCallback(
     (node) => {
@@ -533,14 +540,23 @@ function IndexTableBase({
   const shouldShowBulkActions =
     (bulkActionsSelectable && selectedItemsCount) || isSmallScreenSelectable;
 
-  const bulkActionClassNames = classNames(styles.BulkActionsWrapper);
+  const bulkActionClassNames = classNames(
+    styles.BulkActionsWrapper,
+    isBulkActionsSticky && styles.BulkActionsWrapperSticky,
+  );
 
   const shouldShowActions = !condensed || selectedItemsCount;
   const promotedActions = shouldShowActions ? promotedBulkActions : [];
   const actions = shouldShowActions ? bulkActions : [];
 
   const bulkActionsMarkup = shouldShowBulkActions ? (
-    <div className={bulkActionClassNames} data-condensed={condensed}>
+    <div
+      className={bulkActionClassNames}
+      data-condensed={condensed}
+      style={{
+        top: isBulkActionsSticky ? undefined : bulkActionsAbsoluteOffset,
+      }}
+    >
       {loadingMarkup}
 
       <BulkActions
@@ -632,6 +648,7 @@ function IndexTableBase({
           return stickyContent;
         }}
       </Sticky>
+      {bulkActionsMarkup}
     </div>
   );
 
@@ -739,11 +756,11 @@ function IndexTableBase({
   return (
     <>
       <div className={styles.IndexTable}>
-        <div className={bulkActionsWrapperClassNames}>
+        <div className={bulkActionsWrapperClassNames} ref={tableMeasurerRef}>
           {!shouldShowBulkActions && !condensed && loadingMarkup}
           {tableContentMarkup}
-          {bulkActionsMarkup}
         </div>
+        <div ref={bulkActionsIntersectionRef} />
       </div>
       {scrollBarMarkup}
     </>

polaris-react/src/components/IndexTable/components/Cell/tests/Cell.test.tsx

@@ -3,6 +3,15 @@ import {mountWithApp} from 'tests/utilities';
 
 import {Cell} from '../Cell';
 
+jest.mock('../../../hooks/use-is-bulk-actions-sticky', () => ({
+  useIsBulkActionsSticky: () => ({
+    bulkActionsIntersectionRef: null,
+    tableMeasurerRef: null,
+    isBulkActionsSticky: false,
+    bulkActionsAbsoluteOffset: 0,
+  }),
+}));
+
 describe('<Cell />', () => {
   it('renders a table data tag', () => {
     const cell = mountWithTable(<Cell />);

polaris-react/src/components/IndexTable/components/Checkbox/tests/Checkbox.test.tsx

@@ -17,6 +17,15 @@ jest.mock('../../../../../utilities/debounce', () => ({
   debounce: (callback: () => void) => () => callback(),
 }));
 
+jest.mock('../../../hooks/use-is-bulk-actions-sticky', () => ({
+  useIsBulkActionsSticky: () => ({
+    bulkActionsIntersectionRef: null,
+    tableMeasurerRef: null,
+    isBulkActionsSticky: false,
+    bulkActionsAbsoluteOffset: 0,
+  }),
+}));
+
 describe('<Checkbox />', () => {
   let getBoundingClientRectSpy: jest.SpyInstance;
   let setRootPropertySpy: jest.SpyInstance;

polaris-react/src/components/IndexTable/components/Row/tests/Row.test.tsx

@@ -9,6 +9,15 @@ import {Checkbox} from '../../Checkbox';
 import {Button} from '../../../../Button';
 import {Link} from '../../../../Link';
 
+jest.mock('../../../hooks/use-is-bulk-actions-sticky', () => ({
+  useIsBulkActionsSticky: () => ({
+    bulkActionsIntersectionRef: null,
+    tableMeasurerRef: null,
+    isBulkActionsSticky: false,
+    bulkActionsAbsoluteOffset: 0,
+  }),
+}));
+
 const defaultEvent = {
   preventDefault: noop,
   stopPropagation: noop,

polaris-react/src/components/IndexTable/hooks/index.ts

@@ -0,0 +1 @@
+export {useIsBulkActionsSticky} from './use-is-bulk-actions-sticky';

polaris-react/src/components/IndexTable/hooks/use-is-bulk-actions-sticky.ts

@@ -0,0 +1,70 @@
+import {useEffect, useRef, useState} from 'react';
+
+import {debounce} from '../../../utilities/debounce';
+
+const DEBOUNCE_PERIOD = 250;
+
+export function useIsBulkActionsSticky() {
+  const [isBulkActionsSticky, setIsSticky] = useState(false);
+  const [bulkActionsAbsoluteOffset, setBulkActionsAbsoluteOffset] = useState(0);
+  const bulkActionsIntersectionRef = useRef<HTMLDivElement>(null);
+  const tableMeasurerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function computeTableHeight() {
+      const node = tableMeasurerRef.current;
+      if (!node) {
+        return 0;
+      }
+      return node.getBoundingClientRect().height;
+    }
+    const tableHeight = computeTableHeight();
+
+    const debouncedComputeTableHeight = debounce(
+      computeTableHeight,
+      DEBOUNCE_PERIOD,
+      {
+        trailing: true,
+      },
+    );
+
+    setBulkActionsAbsoluteOffset(tableHeight);
+
+    window.addEventListener('resize', debouncedComputeTableHeight);
+
+    return () =>
+      window.removeEventListener('resize', debouncedComputeTableHeight);
+  }, [tableMeasurerRef]);
+
+  useEffect(() => {
+    const handleIntersect = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry: IntersectionObserverEntry) => {
+        setIsSticky(!entry.isIntersecting);
+      });
+    };
+
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 1,
+    };
+    const observer = new IntersectionObserver(handleIntersect, options);
+
+    const node = bulkActionsIntersectionRef.current;
+
+    if (node) {
+      observer.observe(node);
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [bulkActionsIntersectionRef]);
+
+  return {
+    bulkActionsIntersectionRef,
+    tableMeasurerRef,
+    isBulkActionsSticky,
+    bulkActionsAbsoluteOffset,
+  };
+}

polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx

@@ -34,6 +34,15 @@ jest.mock('../../../utilities/debounce', () => ({
   },
 }));
 
+jest.mock('../hooks/use-is-bulk-actions-sticky', () => ({
+  useIsBulkActionsSticky: () => ({
+    bulkActionsIntersectionRef: null,
+    tableMeasurerRef: null,
+    isBulkActionsSticky: false,
+    bulkActionsAbsoluteOffset: 0,
+  }),
+}));
+
 const mockTableItems = [
   {
     id: 'item-1',