More refactoring and clean-up.

components/helpers/StickyHeader.js

@@ -1,23 +1,32 @@
 import { useEffect, useRef } from 'react';
+import { useMeasure, useCombinedRefs } from 'react-basics';
 import classNames from 'classnames';
 import useSticky from 'hooks/useSticky';
+import { UI_LAYOUT_BODY } from 'lib/constants';
 
-export default function StickyHeader({ className, stickyClassName, stickyStyle, children }) {
-  const { ref, isSticky } = useSticky();
-  const initialWidth = useRef(0);
-
-  useEffect(() => {
-    initialWidth.current = ref.current.clientWidth;
-  }, [ref]);
+export default function StickyHeader({
+  className,
+  stickyClassName,
+  stickyStyle,
+  enabled = true,
+  children,
+}) {
+  const { ref: scrollRef, isSticky } = useSticky({ scrollElementId: UI_LAYOUT_BODY });
+  const { ref: measureRef, dimensions } = useMeasure();
 
   return (
     <div
-      ref={ref}
-      data-sticky={isSticky}
-      className={classNames(className, { [stickyClassName]: isSticky })}
-      style={isSticky ? { ...stickyStyle, width: initialWidth.current } : null}
+      ref={measureRef}
+      data-sticky={enabled && isSticky}
+      style={enabled && isSticky ? { height: dimensions.height } : null}
     >
-      {children}
+      <div
+        ref={scrollRef}
+        className={classNames(className, { [stickyClassName]: enabled && isSticky })}
+        style={enabled && isSticky ? { ...stickyStyle, width: dimensions.width } : null}
+      >
+        {children}
+      </div>
     </div>
   );
 }