fix: review comments

Author: Elessar1802

src/Shared/Hooks/useStickyEvent/types.ts

@@ -19,15 +19,23 @@ 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
 } & (
     | {
           /**
            * Reference to the scroll container element that contains the sticky element
            *
-           * Either the reference can be passed or its class name
+           * Either the reference can be passed or its querySelector
            */
           containerRef: MutableRefObject<T>
-          containerClassName?: never
+          containerSelector?: never
       }
-    | { containerClassName: string; containerRef?: never }
+    | { containerSelector: string; containerRef?: never }
 )

src/Shared/Hooks/useStickyEvent/useStickyEvent.ts

@@ -13,29 +13,31 @@ import './styles.scss'
  */
 const useStickyEvent = <T extends HTMLElement = HTMLDivElement>({
     callback,
-    containerClassName,
+    containerSelector,
     containerRef,
-    isStickyElementMounted,
     identifier,
+    topOffset,
+    isStickyElementMounted = true,
 }: UseStickyEventProps<T>) => {
     const stickyElementRef = useRef<T>(null)
 
     useEffect(
         () => {
-            if (!stickyElementRef.current || (!isNullOrUndefined(isStickyElementMounted) && !isStickyElementMounted)) {
+            if (!stickyElementRef.current || !isStickyElementMounted) {
                 return noop
             }
 
             const stickyElementParent = containerRef
                 ? containerRef.current
-                : Array.from(document.getElementsByClassName(containerClassName)).find((element) =>
+                : Array.from(document.querySelectorAll(containerSelector)).find((element) =>
                       element.contains(stickyElementRef.current),
                   )
 
             if (!stickyElementParent) {
                 return noop
             }
 
+            // NOTE: these values are being used as closures
             let previousStuckState: boolean
             let hasSentinelLeftView: boolean
             let hasHeaderLeftView: boolean
@@ -75,14 +77,15 @@ 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 =
-                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 = 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)
 
             stickyElementRef.current.appendChild(sentinelElement)