feat(ui): Add useIsStuck + Sticky component (#54215)

These utilities are primarily useful to add additional styling to stuck
elements.

Author: evanpurkhiser

static/app/components/sticky.tsx

@@ -0,0 +1,27 @@
+import {useRef} from 'react';
+import styled from '@emotion/styled';
+
+import {useIsStuck} from 'sentry/utils/useIsStuck';
+
+/**
+ * A component that will become stuck to the top of the page. Once the user has
+ * scrolled to it.
+ *
+ * The element will recieve a `data-stuck` attribute once it is stuck, useful
+ * for additional styling when the element becomes stuck.
+ */
+function TaggedSticky(props: React.ComponentProps<'div'>) {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const isStuck = useIsStuck(elementRef.current);
+
+  const stuckProps = isStuck ? {'data-stuck': ''} : {};
+
+  return <div ref={elementRef} {...stuckProps} {...props} />;
+}
+
+const Sticky = styled(TaggedSticky)`
+  position: sticky;
+  top: 0;
+`;
+
+export {Sticky};

static/app/utils/useIsStuck.tsx

@@ -0,0 +1,30 @@
+import 'intersection-observer'; // polyfill
+
+import {useEffect, useState} from 'react';
+
+/**
+ * Determine if a element with `position: sticky` is currently stuck.
+ */
+export function useIsStuck(el: HTMLElement | null) {
+  const [isStuck, setIsStuck] = useState(false);
+
+  useEffect(() => {
+    if (el === null) {
+      return () => {};
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => setIsStuck(entry.intersectionRatio < 1),
+      {
+        rootMargin: '-1px 0px 0px 0px',
+        threshold: [1],
+      }
+    );
+
+    observer.observe(el);
+
+    return () => observer.disconnect();
+  }, [el]);
+
+  return isStuck;
+}

static/app/views/issueList/actions/index.tsx

@@ -5,6 +5,7 @@ import uniq from 'lodash/uniq';
 import {bulkDelete, bulkUpdate, mergeGroups} from 'sentry/actionCreators/group';
 import {Alert} from 'sentry/components/alert';
 import Checkbox from 'sentry/components/checkbox';
+import {Sticky} from 'sentry/components/sticky';
 import {tct, tn} from 'sentry/locale';
 import GroupStore from 'sentry/stores/groupStore';
 import SelectedGroupStore from 'sentry/stores/selectedGroupStore';
@@ -179,8 +180,8 @@ function IssueListActions({
   }
 
   return (
-    <Sticky>
-      <StyledFlex>
+    <StickyActions>
+      <ActionsBar>
         {!disableActions && (
           <ActionsCheckbox isReprocessingQuery={displayReprocessingActions}>
             <Checkbox
@@ -219,7 +220,7 @@ function IssueListActions({
           isReprocessingQuery={displayReprocessingActions}
           isSavedSearchesOpen={isSavedSearchesOpen}
         />
-      </StyledFlex>
+      </ActionsBar>
       {!allResultsVisible && pageSelected && (
         <Alert type="warning" system>
           <SelectAllNotice data-test-id="issue-list-select-all-notice">
@@ -263,7 +264,7 @@ function IssueListActions({
           </SelectAllNotice>
         </Alert>
       )}
-    </Sticky>
+    </StickyActions>
   );
 }
 
@@ -323,13 +324,11 @@ function shouldConfirm(
   }
 }
 
-const Sticky = styled('div')`
-  position: sticky;
+const StickyActions = styled(Sticky)`
   z-index: ${p => p.theme.zIndex.issuesList.stickyHeader};
-  top: -1px;
 `;
 
-const StyledFlex = styled('div')`
+const ActionsBar = styled('div')`
   display: flex;
   min-height: 45px;
   padding-top: ${space(1)};