chore: remove topOffset & handle calc in top

Author: Elessar1802

src/Shared/Helpers.tsx

@@ -1063,5 +1063,5 @@ export const deriveBorderRadiusAndBorderClassFromConfig = ({
     return `${deriveBorderClassFromConfig(borderConfig)} ${deriveBorderRadiusClassFromConfig({ top, right, bottom, left })}`
 }
 
-export const getClassNameForStickyHeaderWithShadow = (isStuck: boolean) =>
-    `dc__position-sticky dc__top-0 dc__transition--box-shadow ${isStuck ? 'dc__box-shadow--header' : ''}`
+export const getClassNameForStickyHeaderWithShadow = (isStuck: boolean, topClassName = 'dc__top-0') =>
+    `dc__position-sticky ${topClassName} dc__transition--box-shadow ${isStuck ? 'dc__box-shadow--header' : ''}`

src/Shared/Hooks/useStickyEvent/types.ts

@@ -1,10 +1,6 @@
-import { Dispatch, SetStateAction, MutableRefObject } from 'react'
+import { MutableRefObject } from 'react'
 
 export type UseStickyEventProps<T extends HTMLElement = HTMLDivElement> = {
-    /**
-     * Callback function that is called when the sticky element is 'stuck' or 'unstuck'
-     */
-    callback: (isStuck: boolean) => void | Dispatch<SetStateAction<boolean>>
     /**
      * Unique identifier used to create the id of the sentinel element
      *
@@ -19,14 +15,6 @@ export type UseStickyEventProps<T extends HTMLElement = HTMLDivElement> = {
      * - If the sticky element is always rendered, this flag can be ignored.
      */
     isStickyElementMounted?: boolean
-    /**
-     * The top offset value of the sticky element.
-     * This can be a CSS value such as '10px', '1rem', or 'calc(100% + 10px)'.
-     *
-     * If the top value is specified in 'px' or 'rem', this value can be ignored.
-     * Use this only if the top value is specified in percentage or uses 'calc'.
-     */
-    topOffset?: string
 } & (
     | {
           /**
@@ -39,3 +27,8 @@ export type UseStickyEventProps<T extends HTMLElement = HTMLDivElement> = {
       }
     | { containerSelector: string; containerRef?: never }
 )
+
+export interface UseStickyEventReturnType<T extends HTMLElement = HTMLDivElement> {
+    isStuck: boolean
+    stickyElementRef: MutableRefObject<T>
+}

src/Shared/Hooks/useStickyEvent/useStickyEvent.ts

@@ -1,8 +1,9 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { isNullOrUndefined } from '@Shared/Helpers'
 import { noop } from '@Common/Helper'
-import { UseStickyEventProps } from './types'
-import { FALLBACK_SENTINEL_HEIGHT, OBSERVER_ROOT_MARGIN, OBSERVER_THRESHOLD } from './constants'
+import { UseStickyEventProps, UseStickyEventReturnType } from './types'
+import { OBSERVER_ROOT_MARGIN, OBSERVER_THRESHOLD } from './constants'
+import { getHeightForStickyElementTopOffset } from './utils'
 
 import './styles.scss'
 
@@ -12,14 +13,13 @@ import './styles.scss'
  * as a reference for the implementation
  */
 const useStickyEvent = <T extends HTMLElement = HTMLDivElement>({
-    callback,
     containerSelector,
     containerRef,
     identifier,
-    topOffset,
     isStickyElementMounted = true,
-}: UseStickyEventProps<T>) => {
+}: UseStickyEventProps<T>): UseStickyEventReturnType<T> => {
     const stickyElementRef = useRef<T>(null)
+    const [isStuck, setIsStuck] = useState(false)
 
     useEffect(
         () => {
@@ -43,7 +43,6 @@ const useStickyEvent = <T extends HTMLElement = HTMLDivElement>({
             // Using IntersectionObserver, we observe both the sticky element and the sentinel.
             // When the sentinel is not fully in view, isIntersecting is false,
             // indicating the sticky element is stuck given it is fully in view.
-            let previousStuckState: boolean
             let hasSentinelLeftView: boolean
             let hasHeaderLeftView: boolean
 
@@ -65,12 +64,7 @@ const useStickyEvent = <T extends HTMLElement = HTMLDivElement>({
                         }
                     })
 
-                    const isStuck = hasSentinelLeftView && !hasHeaderLeftView
-
-                    if (isNullOrUndefined(previousStuckState) || isStuck !== previousStuckState) {
-                        callback(isStuck)
-                        previousStuckState = isStuck
-                    }
+                    setIsStuck(hasSentinelLeftView && !hasHeaderLeftView)
                 },
                 { root: stickyElementParent, threshold: OBSERVER_THRESHOLD, rootMargin: OBSERVER_ROOT_MARGIN },
             )
@@ -86,15 +80,7 @@ const useStickyEvent = <T extends HTMLElement = HTMLDivElement>({
             // The sentinel element's height must exceed the sticky element's top CSS value.
             // This guarantees that when the sticky element sticks to the container's edge,
             // the sentinel element will extend beyond the scroll container.
-            sentinelElement.style.height = topOffset
-                ? `calc(${topOffset} + 1px)`
-                : (window.getComputedStyle(stickyElementRef.current).top?.replace(/[0-9]+/g, (match) => {
-                      const nMatch = Number(match)
-                      if (Number.isNaN(nMatch)) {
-                          return FALLBACK_SENTINEL_HEIGHT
-                      }
-                      return `${nMatch + 1}`
-                  }) ?? FALLBACK_SENTINEL_HEIGHT)
+            sentinelElement.style.height = getHeightForStickyElementTopOffset<T>({ stickyElementRef })
 
             stickyElementRef.current.appendChild(sentinelElement)
 
@@ -114,7 +100,7 @@ const useStickyEvent = <T extends HTMLElement = HTMLDivElement>({
         isNullOrUndefined(isStickyElementMounted) ? [] : [isStickyElementMounted],
     )
 
-    return { stickyElementRef }
+    return { stickyElementRef, isStuck }
 }
 
 export default useStickyEvent

src/Shared/Hooks/useStickyEvent/utils.ts

@@ -0,0 +1,29 @@
+import { FALLBACK_SENTINEL_HEIGHT } from './constants'
+import { UseStickyEventReturnType } from './types'
+
+export const getHeightForStickyElementTopOffset = <T extends HTMLElement>({
+    stickyElementRef,
+}: Pick<UseStickyEventReturnType<T>, 'stickyElementRef'>) => {
+    const topValue = window.getComputedStyle(stickyElementRef.current).top
+
+    if (!topValue) {
+        return FALLBACK_SENTINEL_HEIGHT
+    }
+
+    const calcRegex = /calc\(.*\)/g
+    const doesTopOffsetContainCalc = calcRegex.test(topValue)
+
+    if (doesTopOffsetContainCalc) {
+        return topValue.replace(calcRegex, (match) => `calc(${match} + 1px)`)
+    }
+
+    return topValue.replace(/\d+(\.\d+)?/g, (match) => {
+        const nMatch = Number(match)
+
+        if (Number.isNaN(nMatch)) {
+            return FALLBACK_SENTINEL_HEIGHT
+        }
+
+        return `${nMatch + 1}`
+    })
+}