feat: table: show scroller on table rows

src/components/Table/Internal/Body/Scroller.tsx

@@ -10,11 +10,11 @@ import { ButtonShape, ButtonSize, SecondaryButton } from '../../../Button';
 import { IconName } from '../../../Icon';
 import { ColumnType } from '../../Table.types';
 import { ScrollerProps, ScrollerRef } from '../OcTable.types';
-import { useDebounce } from '../../../../hooks/useDebounce';
 
 import styles from '../octable.module.scss';
 
 const BUTTON_HEIGHT: number = 36;
+const BUTTON_PADDING: number = 2;
 
 export const Scroller = React.forwardRef(
   <RecordType,>(
@@ -24,6 +24,7 @@ export const Scroller = React.forwardRef(
       scrollBodyRef,
       stickyOffsets,
       scrollHeaderRef,
+      titleRef,
       scrollLeftAriaLabelText,
       scrollRightAriaLabelText,
     }: ScrollerProps<RecordType>,
@@ -32,8 +33,8 @@ export const Scroller = React.forwardRef(
     const [visible, setVisible] = useState<boolean>(false);
     const [leftButtonVisible, setLeftButtonVisible] = useState<boolean>(false);
     const [rightButtonVisible, setRightButtonVisible] = useState<boolean>(true);
-    const [buttonStyle, setButtonStyle] = useState<React.CSSProperties>({});
-
+    const [hoveredRowBoundingRect, setHoveredRowBoundingRect] =
+      useState<DOMRect>(null);
     // todo @yash: handle rtl
 
     const scrollOffsets: number[] = useMemo(
@@ -68,54 +69,30 @@ export const Scroller = React.forwardRef(
       [stickyOffsets, flattenColumns]
     );
 
-    const computePosition = useCallback((): void => {
+    const getButtonTop = (): number => {
       if (!scrollBodyRef.current) {
-        return;
+        return 0;
       }
-      const {
-        height: scrollBodyHeight,
-        top: scrollBodyTop,
-        bottom: scrollBodyBottom,
-      } = scrollBodyRef.current.getBoundingClientRect();
+      const { top: scrollBodyTop } =
+        scrollBodyRef.current.getBoundingClientRect();
+      const { height: titleHeight = 0 } =
+        titleRef.current?.getBoundingClientRect?.() || {};
+
+      const { top: rowTop, height: rowHeight } = hoveredRowBoundingRect ?? {};
       const { height: stickyHeaderHeight = 0 } =
         scrollHeaderRef?.current?.getBoundingClientRect?.() || {};
-      const { height: viewportHeight } = document.body.getBoundingClientRect();
-
-      let buttonTop: number = 0;
-
-      if (scrollBodyTop > 0) {
-        // When the top of the table is in the viewport
-
-        if (scrollBodyBottom > viewportHeight) {
-          // When bottom of the table is out of the viewport
-          buttonTop = (viewportHeight - scrollBodyTop) / 2;
-        } else if (scrollBodyBottom < viewportHeight) {
-          // When full table is in the viewport
-          buttonTop = scrollBodyHeight / 2;
-        }
-      } else if (scrollBodyTop < 0) {
-        // When the top of the table is out the viewport
-
-        if (scrollBodyBottom > viewportHeight) {
-          // When bottom of the table is out of the viewport
-          buttonTop = Math.abs(scrollBodyTop) + viewportHeight / 2;
-        } else if (scrollBodyBottom < viewportHeight) {
-          // When bottom of the table is in the viewport
-          buttonTop =
-            Math.abs(scrollBodyTop) +
-            (viewportHeight - (viewportHeight - scrollBodyBottom)) / 2;
-        }
-      }
-      setButtonStyle({
-        top: buttonTop + stickyHeaderHeight - BUTTON_HEIGHT / 2,
-      });
-    }, []);
-
-    const debouncedComputePosition = useDebounce(computePosition, 500);
+      return (
+        rowTop -
+        scrollBodyTop +
+        stickyHeaderHeight +
+        rowHeight / 2 -
+        BUTTON_HEIGHT / 2 +
+        titleHeight
+      );
+    };
 
     const onMouseEnter = useCallback((): void => {
       setVisible(true);
-      computePosition();
     }, []);
 
     const onMouseLeave = useCallback((): void => setVisible(false), []);
@@ -160,14 +137,13 @@ export const Scroller = React.forwardRef(
 
     useImperativeHandle(ref, () => ({
       onBodyScroll,
+      onRowHover: setHoveredRowBoundingRect,
     }));
 
     useEffect(() => {
-      document.addEventListener('scroll', debouncedComputePosition);
       scrollBodyRef.current?.addEventListener?.('mouseenter', onMouseEnter);
       scrollBodyRef.current?.addEventListener?.('mouseleave', onMouseLeave);
       return () => {
-        document.removeEventListener('scroll', debouncedComputePosition);
         scrollBodyRef.current?.removeEventListener?.(
           'mouseenter',
           onMouseEnter
@@ -184,9 +160,9 @@ export const Scroller = React.forwardRef(
         <SecondaryButton
           classNames={styles.scrollerButton}
           style={{
-            left: leftButtonOffset,
+            left: leftButtonOffset + BUTTON_PADDING,
             opacity: leftButtonVisible && visible ? 1 : 0,
-            ...buttonStyle,
+            top: getButtonTop(),
           }}
           shape={ButtonShape.Round}
           size={ButtonSize.Medium}
@@ -199,9 +175,9 @@ export const Scroller = React.forwardRef(
         <SecondaryButton
           classNames={styles.scrollerButton}
           style={{
-            right: rightButtonOffset,
+            right: rightButtonOffset + BUTTON_PADDING,
             opacity: rightButtonVisible && visible ? 1 : 0,
-            ...buttonStyle,
+            top: getButtonTop(),
           }}
           shape={ButtonShape.Round}
           size={ButtonSize.Medium}

src/components/Table/Internal/FrameWrapper/FrameWrapper.tsx

@@ -1,6 +1,15 @@
-import React from 'react';
+import React, { ForwardedRef } from 'react';
 import { FrameWrapperProps } from './FrameWrapper.types';
 
-export const FrameWrapper = ({ classNames, children }: FrameWrapperProps) => {
-  return <div className={classNames}>{children}</div>;
-};
+export const FrameWrapper = React.forwardRef(
+  (
+    { classNames, children }: FrameWrapperProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    return (
+      <div ref={ref} className={classNames}>
+        {children}
+      </div>
+    );
+  }
+);

src/components/Table/Internal/OcTable.tsx

@@ -272,6 +272,7 @@ function OcTable<RecordType extends DefaultRecordType>(
   const scrollHeaderRef = useRef<HTMLDivElement>();
   const scrollBodyRef = useRef<HTMLDivElement>();
   const scrollSummaryRef = useRef<HTMLDivElement>();
+  const titleRef = useRef<HTMLDivElement>(null);
   const scrollerRef = useRef<ScrollerRef>(null);
   const [pingedLeft, setPingedLeft] = useState<boolean>(false);
   const [pingedRight, setPingedRight] = useState<boolean>(false);
@@ -495,7 +496,15 @@ function OcTable<RecordType extends DefaultRecordType>(
     return emptyText;
   }, [hasData, emptyText]);
 
-  // Body
+  const _onRowHoverEnter = useCallback(
+    (index: number, key: Key, event: React.MouseEvent<HTMLElement>) => {
+      const hoveredCell = event.target as HTMLElement;
+      scrollerRef.current?.onRowHover?.(hoveredCell.getBoundingClientRect());
+      onRowHoverEnter?.(index, key, event);
+    },
+    []
+  );
+
   const bodyTable = (
     <Body
       data={mergedData}
@@ -506,7 +515,7 @@ function OcTable<RecordType extends DefaultRecordType>(
       onRow={onRow}
       emptyNode={emptyNode}
       childrenColumnName={mergedChildrenColumnName}
-      onRowHoverEnter={onRowHoverEnter}
+      onRowHoverEnter={_onRowHoverEnter}
       onRowHoverLeave={onRowHoverLeave}
     />
   );
@@ -561,6 +570,7 @@ function OcTable<RecordType extends DefaultRecordType>(
               scrollBodyRef={scrollBodyRef}
               stickyOffsets={stickyOffsets}
               scrollHeaderRef={scrollHeaderRef}
+              titleRef={titleRef}
               scrollLeftAriaLabelText={scrollLeftAriaLabelText}
               scrollRightAriaLabelText={scrollRightAriaLabelText}
             />
@@ -666,6 +676,7 @@ function OcTable<RecordType extends DefaultRecordType>(
             ref={scrollerRef}
             {...columnContext}
             scrollBodyRef={scrollBodyRef}
+            titleRef={titleRef}
             stickyOffsets={stickyOffsets}
             scrollLeftAriaLabelText={scrollLeftAriaLabelText}
             scrollRightAriaLabelText={scrollRightAriaLabelText}
@@ -730,7 +741,7 @@ function OcTable<RecordType extends DefaultRecordType>(
         props={{ ...props, stickyOffsets, mergedExpandedKeys }}
       >
         {title && (
-          <FrameWrapper classNames={styles.tableTitle}>
+          <FrameWrapper ref={titleRef} classNames={styles.tableTitle}>
             {title(mergedData)}
           </FrameWrapper>
         )}

src/components/Table/Internal/OcTable.types.ts

@@ -417,6 +417,10 @@ export interface ScrollerProps<RecordType> {
   scrollBodyRef: RefObject<HTMLDivElement>;
   stickyOffsets: StickyOffsets;
   scrollHeaderRef?: RefObject<HTMLDivElement>;
+  /**
+   * Ref of the table title
+   */
+  titleRef?: RefObject<HTMLDivElement>;
   /**
    * The Table scroller right button aria label
    * @default 'Scroll right'
@@ -434,6 +438,10 @@ export type ScrollerRef = {
    * Helper method to handle body scroll changes
    */
   onBodyScroll: () => void;
+  /**
+   * Helper method triggered on hover of a row
+   */
+  onRowHover: (boundingRect: DOMRect) => void;
 };
 
 export interface OcTableProps<RecordType = unknown> {