Merge pull request #606 from devtron-labs/feat/rb-keyboard-nav

Elessar1802 · web-flow · commit a252b07cc9d5 · 2025-03-10T18:25:05.000+05:30
feat: add useStickyEvent hook
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.8.9",
+    "version": "1.8.10",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
diff --git a/src/Common/SegmentedBarChart/SegmentedBarChart.tsx b/src/Common/SegmentedBarChart/SegmentedBarChart.tsx
@@ -21,58 +21,71 @@ import { FALLBACK_ENTITY } from './constants'
 import './styles.scss'
 
 const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
-    entities = [FALLBACK_ENTITY],
+    entities: userEntities = [FALLBACK_ENTITY],
     rootClassName,
     countClassName,
     labelClassName,
     isProportional,
     swapLegendAndBar = false,
     showAnimationOnBar = false,
+    isLoading,
 }) => {
+    const entities = isLoading ? [FALLBACK_ENTITY] : userEntities
     const total = entities.reduce((sum, entity) => entity.value + sum, 0)
     const filteredEntities = entities.filter((entity) => !!entity.value)
 
     const calcSegmentWidth = (entity: Entity) => `${(entity.value / total) * 100}%`
 
-    const renderLabel = (label: string) => (
-        <span className={labelClassName} data-testid={`segmented-bar-chart-${label}-label`}>
-            {label}
-        </span>
-    )
+    const renderLabel = (label: Entity['label']) =>
+        isLoading ? (
+            <div className="shimmer w-120" />
+        ) : (
+            <span className={labelClassName} data-testid={`segmented-bar-chart-${label}-label`}>
+                {label}
+            </span>
+        )
 
-    const renderValue = (value: string | number, label: string) => (
-        <span className={countClassName} data-testid={`segmented-bar-chart-${label}-value`}>
-            {isProportional ? `${value}/${total}` : value}
-        </span>
-    )
+    const renderValue = (value: Entity['value'], label: Entity['label']) =>
+        isLoading ? (
+            <div className="shimmer w-64 lh-1-5 h-24" />
+        ) : (
+            <span className={countClassName} data-testid={`segmented-bar-chart-${label}-value`}>
+                {isProportional ? `${value}/${total}` : value}
+            </span>
+        )
 
     const renderContent = () => {
         if (isProportional) {
             return filteredEntities.map((entity, idx) => (
                 // eslint-disable-next-line react/no-array-index-key
-                <div key={idx} className="flexbox-col">
+                <div key={idx} className={`flexbox-col ${isLoading ? 'dc__gap-10' : ''}`}>
                     {renderValue(entity.value, entity.label)}
+
                     <div className="flex left dc__gap-6">
-                        <span style={{ backgroundColor: entity.color }} className="h-12 dc__border-radius-2 w-4" />
+                        {!isLoading && (
+                            <span style={{ backgroundColor: entity.color }} className="h-12 dc__border-radius-2 w-4" />
+                        )}
+
                         {renderLabel(entity.label)}
                     </div>
                 </div>
             ))
         }
+
         return entities.map((entity, idx) => (
             // eslint-disable-next-line react/no-array-index-key
             <div key={idx} className="flexbox  dc__gap-4 dc__align-items-center">
-                <div className="dot" style={{ backgroundColor: entity.color, width: '10px', height: '10px' }} />
+                {!isLoading && (
+                    <div className="dot" style={{ backgroundColor: entity.color, width: '10px', height: '10px' }} />
+                )}
+
                 {renderValue(entity.value, entity.label)}
+
                 {renderLabel(entity.label)}
             </div>
         ))
     }
 
-    if (!entities.length) {
-        return null
-    }
-
     const renderLegend = () => (
         <div className={`flexbox flex-wrap dc__row-gap-4 ${isProportional ? 'dc__gap-24' : 'dc__gap-16'}`}>
             {renderContent()}
@@ -92,16 +105,21 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
         >
             {filteredEntities.map((entity, index, map) => (
                 <div
-                    key={entity.label}
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={index}
                     className={`h-8 ${index === 0 ? 'dc__left-radius-4' : ''} ${
                         index === map.length - 1 ? 'dc__right-radius-4' : ''
-                    }`}
+                    } ${isLoading ? 'shimmer' : ''}`}
                     style={{ backgroundColor: entity.color, width: calcSegmentWidth(entity) }}
                 />
             ))}
         </motion.div>
     )
 
+    if (!entities.length) {
+        return null
+    }
+
     return (
         <div className={`flexbox-col w-100 dc__gap-12 ${rootClassName}`}>
             {swapLegendAndBar ? (
diff --git a/src/Common/SegmentedBarChart/constants.ts b/src/Common/SegmentedBarChart/constants.ts
@@ -17,5 +17,5 @@
 export const FALLBACK_ENTITY = {
     color: 'var(--N300)',
     label: '-',
-    value: 0,
+    value: 1,
 }
diff --git a/src/Common/SegmentedBarChart/types.ts b/src/Common/SegmentedBarChart/types.ts
@@ -28,4 +28,5 @@ export interface SegmentedBarChartProps {
     isProportional?: boolean
     swapLegendAndBar?: boolean
     showAnimationOnBar?: boolean
+    isLoading?: boolean
 }
diff --git a/src/Shared/Helpers.tsx b/src/Shared/Helpers.tsx
@@ -1062,3 +1062,6 @@ export const deriveBorderRadiusAndBorderClassFromConfig = ({
     const { top, right, bottom, left } = getSanitizedBorderConfig(borderRadiusConfig)
     return `${deriveBorderClassFromConfig(borderConfig)} ${deriveBorderRadiusClassFromConfig({ top, right, bottom, left })}`
 }
+
+export const getClassNameForStickyHeaderWithShadow = (isStuck: boolean, topClassName = 'dc__top-0') =>
+    `dc__position-sticky ${topClassName} dc__transition--box-shadow ${isStuck ? 'dc__box-shadow--header' : ''}`
diff --git a/src/Shared/Hooks/index.ts b/src/Shared/Hooks/index.ts
@@ -18,3 +18,4 @@ export * from './UsePrompt'
 export * from './useGetResourceKindsOptions'
 export * from './UseDownload'
 export * from './useForm'
+export * from './useStickyEvent'
diff --git a/src/Shared/Hooks/useStickyEvent/constants.ts b/src/Shared/Hooks/useStickyEvent/constants.ts
@@ -0,0 +1,3 @@
+export const FALLBACK_SENTINEL_HEIGHT = '1px'
+export const OBSERVER_THRESHOLD = 1
+export const OBSERVER_ROOT_MARGIN = '0px'
diff --git a/src/Shared/Hooks/useStickyEvent/index.ts b/src/Shared/Hooks/useStickyEvent/index.ts
@@ -0,0 +1 @@
+export { default as useStickyEvent } from './useStickyEvent'
diff --git a/src/Shared/Hooks/useStickyEvent/styles.scss b/src/Shared/Hooks/useStickyEvent/styles.scss
@@ -0,0 +1,9 @@
+.sticky-container__sentinel {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    right: 0;
+    flex-shrink: 0;
+    visibility: hidden;
+    z-index: -1;
+}
diff --git a/src/Shared/Hooks/useStickyEvent/types.ts b/src/Shared/Hooks/useStickyEvent/types.ts
@@ -0,0 +1,34 @@
+import { MutableRefObject } from 'react'
+
+export type UseStickyEventProps<T extends HTMLElement = HTMLDivElement> = {
+    /**
+     * Unique identifier used to create the id of the sentinel element
+     *
+     * A sentinel element is used to determine when the sticky element is 'stuck'
+     * It is dynamically created and appended to the DOM
+     */
+    identifier: string
+    /**
+     * Indicates whether the sticky element is conditionally rendered.
+     * - Set to true if the sticky element is mounted.
+     * - Set to false if the sticky element is not mounted.
+     * - If the sticky element is always rendered, this flag can be ignored.
+     */
+    isStickyElementMounted?: boolean
+} & (
+    | {
+          /**
+           * Reference to the scroll container element that contains the sticky element
+           *
+           * Either the reference can be passed or its querySelector
+           */
+          containerRef: MutableRefObject<T>
+          containerSelector?: never
+      }
+    | { containerSelector: string; containerRef?: never }
+)
+
+export interface UseStickyEventReturnType<T extends HTMLElement = HTMLDivElement> {
+    isStuck: boolean
+    stickyElementRef: MutableRefObject<T>
+}
diff --git a/src/Shared/Hooks/useStickyEvent/useStickyEvent.ts b/src/Shared/Hooks/useStickyEvent/useStickyEvent.ts
@@ -0,0 +1,106 @@
+import { useEffect, useRef, useState } from 'react'
+import { isNullOrUndefined } from '@Shared/Helpers'
+import { noop } from '@Common/Helper'
+import { UseStickyEventProps, UseStickyEventReturnType } from './types'
+import { OBSERVER_ROOT_MARGIN, OBSERVER_THRESHOLD } from './constants'
+import { getHeightForStickyElementTopOffset } from './utils'
+
+import './styles.scss'
+
+/**
+ * Please read
+ *   https://developer.chrome.com/docs/css-ui/sticky-headers
+ * as a reference for the implementation
+ */
+const useStickyEvent = <T extends HTMLElement = HTMLDivElement>({
+    containerSelector,
+    containerRef,
+    identifier,
+    isStickyElementMounted = true,
+}: UseStickyEventProps<T>): UseStickyEventReturnType<T> => {
+    const stickyElementRef = useRef<T>(null)
+    const [isStuck, setIsStuck] = useState(false)
+
+    useEffect(
+        () => {
+            if (!stickyElementRef.current || !isStickyElementMounted) {
+                return noop
+            }
+
+            const stickyElementParent = containerRef
+                ? containerRef.current
+                : Array.from(document.querySelectorAll(containerSelector)).find((element) =>
+                      element.contains(stickyElementRef.current),
+                  )
+
+            if (!stickyElementParent) {
+                return noop
+            }
+
+            // The sentinel is a div used to detect when the sticky element is stuck.
+            // It is taller than the sticky element's top offset, ensuring it overflows
+            // the container when the sticky element sticks to the top.
+            // 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 hasSentinelLeftView: boolean
+            let hasHeaderLeftView: boolean
+
+            const sentinelId = `${identifier}__sentinel`
+
+            const intersectionObserver = new IntersectionObserver(
+                (entries) => {
+                    entries.forEach((entry) => {
+                        switch (entry.target.id) {
+                            case sentinelId:
+                                // NOTE: Since the threshold is set to 1.0, isIntersecting will be
+                                // true only when the target element is fully within the container
+                                // (root). If even a single pixel of the target element is outside
+                                // the container, isIntersecting will be false.
+                                hasSentinelLeftView = !entry.isIntersecting
+                                break
+                            default:
+                                hasHeaderLeftView = !entry.isIntersecting
+                        }
+                    })
+
+                    setIsStuck(hasSentinelLeftView && !hasHeaderLeftView)
+                },
+                { root: stickyElementParent, threshold: OBSERVER_THRESHOLD, rootMargin: OBSERVER_ROOT_MARGIN },
+            )
+
+            let sentinelElement = document.getElementById(sentinelId)
+
+            if (!sentinelElement) {
+                sentinelElement = document.createElement('div')
+                sentinelElement.id = sentinelId
+                sentinelElement.classList.add('sticky-container__sentinel')
+            }
+
+            // 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 = getHeightForStickyElementTopOffset<T>({ stickyElementRef })
+
+            stickyElementRef.current.appendChild(sentinelElement)
+
+            intersectionObserver.observe(sentinelElement)
+            intersectionObserver.observe(stickyElementRef.current)
+
+            return () => {
+                intersectionObserver.disconnect()
+            }
+        },
+        // NOTE: The isStickyElementMounted dependency ensures that this effect
+        // runs not only on mount/unmount but also when the isStickyElementMounted value changes.
+        // This is important because the sticky element might not be present during
+        // the initial render and could be added later based on certain conditions.
+        // By using isStickyElementMounted as a dependency, we make sure that the effect
+        // re-runs when the element is rendered, allowing the stickyElementRef to be populated.
+        isNullOrUndefined(isStickyElementMounted) ? [] : [isStickyElementMounted],
+    )
+
+    return { stickyElementRef, isStuck }
+}
+
+export default useStickyEvent
diff --git a/src/Shared/Hooks/useStickyEvent/utils.ts b/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}`
+    })
+}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@devtron-labs/devtron-fe-common-lib",`
`3`		`- "version": "1.8.9",`
	`3`	`+ "version": "1.8.10",`
`4`	`4`	`"description": "Supporting common component library",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/index.js",`
Original file line number	Diff line number	Diff line change
`@@ -17,5 +17,5 @@`
`17`	`17`	`export const FALLBACK_ENTITY = {`
`18`	`18`	`color: 'var(--N300)',`
`19`	`19`	`label: '-',`
`20`		`- value: 0,`
	`20`	`+ value: 1,`
`21`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -28,4 +28,5 @@ export interface SegmentedBarChartProps {`
`28`	`28`	`isProportional?: boolean`
`29`	`29`	`swapLegendAndBar?: boolean`
`30`	`30`	`showAnimationOnBar?: boolean`
	`31`	`+ isLoading?: boolean`
`31`	`32`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1062,3 +1062,6 @@ export const deriveBorderRadiusAndBorderClassFromConfig = ({`
`1062`	`1062`	`const { top, right, bottom, left } = getSanitizedBorderConfig(borderRadiusConfig)`
`1063`	`1063`	return `${deriveBorderClassFromConfig(borderConfig)} ${deriveBorderRadiusClassFromConfig({ top, right, bottom, left })}`
`1064`	`1064`	`}`
	`1065`	`+`
	`1066`	`+export const getClassNameForStickyHeaderWithShadow = (isStuck: boolean, topClassName = 'dc__top-0') =>`
	`1067`	+ `dc__position-sticky ${topClassName} dc__transition--box-shadow ${isStuck ? 'dc__box-shadow--header' : ''}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export const FALLBACK_SENTINEL_HEIGHT = '1px'`
	`2`	`+export const OBSERVER_THRESHOLD = 1`
	`3`	`+export const OBSERVER_ROOT_MARGIN = '0px'`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as useStickyEvent } from './useStickyEvent'`