jfs-components 0.1.30 → 0.1.32

package/src/components/CompareTable/CompareTable.tsx

@@ -163,6 +163,21 @@ export type CompareTableProps = {
      * no scrolling). @default undefined
      */
     columnWidth?: number;
+    /**
+     * When `true` (default), each section's header row (the gray header label)
+     * sticks to the top of the viewport when scrolling vertically, with multiple
+     * sticky headers stacking up as each reaches the top. Only applies in
+     * fixed-width scroll mode (`columnWidth` is set).
+     * @default true
+     */
+    stickyHeaders?: boolean;
+    /**
+     * When `true` (default), the section header label stays fixed on the left
+     * when scrolling horizontally. Only applies in fixed-width scroll mode
+     * (`columnWidth` is set).
+     * @default true
+     */
+    stickyHeaderLabel?: boolean;
 };
 
 const DEFAULT_COLUMNS: CompareTableColumn[] = [
@@ -205,6 +220,8 @@ function CompareTable({
     style,
     disableTruncation,
     columnWidth,
+    stickyHeaders = true,
+    stickyHeaderLabel = true,
 }: CompareTableProps) {
     // --- selection card tokens ------------------------------------------------
     const cardBg = (getVariableByName('selectionCard/background/color', modes) as string) ?? '#ffffff'
@@ -278,13 +295,13 @@ function CompareTable({
     // Stable per-section ref-callback instances so React doesn't detach/reattach
     // on every render (which would churn the map and re-fire scrollTo).
     const bodyRefCallbacks = useRef<Map<number, (r: ScrollView | null) => void>>(new Map())
-    /** Last offset we synced everyone to. Echoed onScroll events reporting this
-     *  same value are ignored — this is what prevents feedback loops. */
+    /** Tracks which ScrollView the user is currently dragging. Only the
+     *  actively-dragged ScrollView drives horizontal sync — programmatic
+     *  scrollTo echoes from synced peers are ignored, eliminating jitter. */
+    const draggingSource = useRef<'cards' | number | null>(null)
     const lastSyncX = useRef(0)
 
-    const applySync = useCallback((x: number, source: 'cards' | number) => {
-        if (Math.abs(x - lastSyncX.current) < 0.5) return
-        lastSyncX.current = x
+    const syncOthers = useCallback((source: 'cards' | number, x: number) => {
         if (source !== 'cards' && cardsScrollRef.current) {
             cardsScrollRef.current.scrollTo({ x, animated: false })
         }
@@ -295,18 +312,54 @@ function CompareTable({
         })
     }, [])
 
-    const onCardsScroll = useCallback(
-        (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-            applySync(e.nativeEvent.contentOffset.x, 'cards')
+    const onScrollBeginDrag = useCallback(
+        (source: 'cards' | number) => () => {
+            draggingSource.current = source
         },
-        [applySync],
+        [],
     )
 
-    const onBodyScroll = useCallback(
-        (idx: number) => (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-            applySync(e.nativeEvent.contentOffset.x, idx)
-        },
-        [applySync],
+    const onScrollEndDrag = useCallback(
+        (source: 'cards' | number) =>
+            (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+                const x = Math.round(e.nativeEvent.contentOffset.x)
+                if (x === lastSyncX.current) return
+                lastSyncX.current = x
+                syncOthers(source, x)
+            },
+        [syncOthers],
+    )
+
+    const onMomentumScrollEnd = useCallback(
+        (source: 'cards' | number) =>
+            (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+                if (draggingSource.current === source) {
+                    draggingSource.current = null
+                }
+                const x = Math.round(e.nativeEvent.contentOffset.x)
+                if (x === lastSyncX.current) return
+                lastSyncX.current = x
+                syncOthers(source, x)
+            },
+        [syncOthers],
+    )
+
+    /** Real-time scroll sync: only the actively-dragged ScrollView drives
+     *  sync on native — echoed onScroll events from programmatic scrollTo
+     *  on other ScrollViews are ignored because draggingSource won't match.
+     *  On web, onScrollBeginDrag never fires for mouse/trackpad, so skip
+     *  the guard and rely on the lastSyncX rounded-value check instead. */
+    const onScroll = useCallback(
+        (source: 'cards' | number) =>
+            (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+                if (Platform.OS !== 'web' && draggingSource.current !== source) return
+
+                const x = Math.round(e.nativeEvent.contentOffset.x)
+                if (x === lastSyncX.current) return
+                lastSyncX.current = x
+                syncOthers(source, x)
+            },
+        [syncOthers],
     )
 
     const getBodyRefCallback = useCallback((idx: number) => {
@@ -576,72 +629,62 @@ function CompareTable({
         </Table>
     )
 
-    // Render a single section in fixed-width scroll mode. Unlike `renderTable`
-    // (used in flex mode), the gray header row is rendered full-width OUTSIDE
-    // the body's horizontal ScrollView so it stays put horizontally (it does
-    // not slide with the cells) while still scrolling vertically with the table.
-    // The body rows live inside a horizontal ScrollView that is scroll-synced
-    // with the cards row and every other section's body.
-    const renderSection = (section: CompareTableSection, index: number) => (
-        <Accordion
-            key={section.key ?? section.title ?? index}
-            title={section.title}
-            defaultExpanded={section.defaultExpanded ?? index === 0}
-            modes={modes}
-        >
-            {section.header != null && (
-                <View
-                    style={{
-                        width: '100%',
-                        backgroundColor: headerBg,
-                        paddingHorizontal: headerPaddingH,
-                        paddingVertical: headerPaddingV,
-                        borderBottomWidth: cellBorderSize,
-                        borderBottomColor: cellBorderColor,
-                    }}
-                >
-                    <Text style={headerTextStyle}>{section.header}</Text>
-                </View>
-            )}
-            <ScrollView
-                ref={getBodyRefCallback(index)}
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                scrollEventThrottle={16}
-                onScroll={onBodyScroll(index)}
+    const renderHeaderContent = (section: CompareTableSection) =>
+        section.header != null ? (
+            <View
+                style={{
+                    backgroundColor: headerBg,
+                    paddingHorizontal: headerPaddingH,
+                    paddingVertical: headerPaddingV,
+                    borderBottomWidth: cellBorderSize,
+                    borderBottomColor: cellBorderColor,
+                }}
             >
-                <View style={{ width: contentWidth }}>
-                    {section.rows.map((row, rowIndex) => {
-                        const isLastRow = rowIndex === section.rows.length - 1
-                        return (
-                            <View
-                                key={row.key ?? rowIndex}
-                                style={{ flexDirection: 'row', width: '100%' }}
-                            >
-                                {Array.from({ length: columnCount }).map((_, colIndex) =>
-                                    renderTableCell(
-                                        renderCellContent(
-                                            row.values?.[colIndex],
-                                            `${rowIndex}-${colIndex}`,
-                                        ),
-                                        colIndex,
-                                        isLastRow,
-                                        colIndex,
+                <Text style={headerTextStyle}>{section.header}</Text>
+            </View>
+        ) : null
+
+    const renderBodyContent = (section: CompareTableSection, index: number) => (
+        <ScrollView
+            ref={getBodyRefCallback(index)}
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            onScroll={onScroll(index)}
+            onScrollBeginDrag={onScrollBeginDrag(index)}
+            onScrollEndDrag={onScrollEndDrag(index)}
+            onMomentumScrollEnd={onMomentumScrollEnd(index)}
+        >
+            <View style={{ width: contentWidth }}>
+                {section.rows.map((row, rowIndex) => {
+                    const isLastRow = rowIndex === section.rows.length - 1
+                    return (
+                        <View
+                            key={row.key ?? rowIndex}
+                            style={{ flexDirection: 'row', width: '100%' }}
+                        >
+                            {Array.from({ length: columnCount }).map((_, colIndex) =>
+                                renderTableCell(
+                                    renderCellContent(
+                                        row.values?.[colIndex],
+                                        `${rowIndex}-${colIndex}`,
                                     ),
+                                    colIndex,
+                                    isLastRow,
+                                    colIndex,
+                                ),
+                            )}
+                            {showAddCard &&
+                                renderTableCell(
+                                    null,
+                                    gridColumnCount - 1,
+                                    isLastRow,
+                                    '__add_spacer__',
                                 )}
-                                {showAddCard &&
-                                    renderTableCell(
-                                        null,
-                                        gridColumnCount - 1,
-                                        isLastRow,
-                                        '__add_spacer__',
-                                    )}
-                            </View>
-                        )
-                    })}
-                </View>
-            </ScrollView>
-        </Accordion>
+                        </View>
+                    )
+                })}
+            </View>
+        </ScrollView>
     )
 
     const outerStyle: ViewStyle = {
@@ -680,37 +723,94 @@ function CompareTable({
     }
 
     // --- fixed-width scroll mode: chained horizontal sync + sticky cards -----
-    // The cards row (index 0) is a sticky header of the vertical ScrollView so
-    // it pins to the top while the sections scroll beneath. The cards row is
-    // itself a horizontal ScrollView, synced with every section body. For the
-    // vertical scroll (and thus the sticky behaviour) to engage, the host must
-    // give CompareTable a bounded height (e.g. a sized container or flex:1).
+    // Build children and stickyHeaderIndices for the vertical ScrollView.
+    // When stickyHeaders is on, section headers are injected as direct children
+    // so React Native's stickyHeaderIndices can pin them with stacking.
+    const scrollChildren: React.ReactNode[] = []
+    const stickyIndices: number[] = []
+
+    if (showCardsRow) {
+        stickyIndices.push(scrollChildren.length)
+        scrollChildren.push(
+            <ScrollView
+                key="cards-row"
+                ref={cardsScrollRef}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                scrollEventThrottle={16}
+                onScroll={onScroll('cards')}
+                onScrollBeginDrag={onScrollBeginDrag('cards')}
+                onScrollEndDrag={onScrollEndDrag('cards')}
+                onMomentumScrollEnd={onMomentumScrollEnd('cards')}
+            >
+                <View style={{ flexDirection: 'row', width: contentWidth }}>
+                    {columns.map(renderCard)}
+                    {showAddCard && renderAddCard()}
+                </View>
+            </ScrollView>,
+        )
+    }
+
+    sections.forEach((section, index) => {
+        const sectionKey = section.key ?? section.title ?? index
+        const headerContent = renderHeaderContent(section)
+
+        if (stickyHeaders && headerContent != null) {
+            stickyIndices.push(scrollChildren.length)
+            scrollChildren.push(
+                <View
+                    key={`sticky-header-${sectionKey}`}
+                    style={{ width: '100%' }}
+                >
+                    {stickyHeaderLabel ? (
+                        headerContent
+                    ) : (
+                        <ScrollView
+                            horizontal
+                            showsHorizontalScrollIndicator={false}
+                        >
+                            <View style={{ width: contentWidth }}>
+                                {headerContent}
+                            </View>
+                        </ScrollView>
+                    )}
+                </View>,
+            )
+        }
+
+        scrollChildren.push(
+            <Accordion
+                key={sectionKey}
+                title={section.title}
+                defaultExpanded={section.defaultExpanded ?? index === 0}
+                modes={modes}
+            >
+                {!stickyHeaders && headerContent != null && (
+                    stickyHeaderLabel ? headerContent : (
+                        <ScrollView
+                            horizontal
+                            showsHorizontalScrollIndicator={false}
+                        >
+                            <View style={{ width: contentWidth }}>
+                                {headerContent}
+                            </View>
+                        </ScrollView>
+                    )
+                )}
+                {renderBodyContent(section, index)}
+            </Accordion>,
+        )
+    })
+
     return (
         <View style={[outerStyle, style, { flexDirection: 'column', flex: 1 }]}>
             <ScrollView
                 style={{ width: '100%', flex: 1 }}
-                stickyHeaderIndices={showCardsRow ? [0] : []}
+                stickyHeaderIndices={stickyIndices}
                 showsVerticalScrollIndicator={false}
                 directionalLockEnabled
             >
-                {showCardsRow && (
-                    <ScrollView
-                        ref={cardsScrollRef}
-                        horizontal
-                        showsHorizontalScrollIndicator={false}
-                        scrollEventThrottle={16}
-                        onScroll={onCardsScroll}
-                    >
-                        <View style={{ flexDirection: 'row', width: contentWidth }}>
-                            {columns.map(renderCard)}
-                            {showAddCard && renderAddCard()}
-                        </View>
-                    </ScrollView>
-                )}
-
-                <View style={{ width: '100%' }}>
-                    {sections.map(renderSection)}
-                </View>
+                {scrollChildren}
             </ScrollView>
         </View>
     )

package/src/components/ContentSheet/ContentSheet.tsx

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useMemo } from 'react'
 import {
   Platform,
+  ScrollView,
   Text,
   View,
   useWindowDimensions,
@@ -100,6 +101,12 @@ export type ContentSheetProps = {
    * `useAnimatedStyle`. Default `true`.
    */
   visible?: boolean
+  /**
+   * Max height of the sheet as a fraction (0–1) of the screen height.
+   * When content reaches this height the sheet becomes vertically scrollable.
+   * Default `0.7`.
+   */
+  maxHeightPercent?: number
   /** Optional style override applied to the sheet container. */
   style?: StyleProp<ViewStyle>
 } & Omit<ViewProps, 'style' | 'children'>
@@ -202,6 +209,7 @@ function ContentSheet({
   safeAreaBottom = true,
   pinToBottom = true,
   visible = true,
+  maxHeightPercent = 0.7,
   style,
   ...rest
 }: ContentSheetProps) {
@@ -220,22 +228,24 @@ function ContentSheet({
   const paddingBottom =
     resolved.paddingBottom + (safeAreaBottom ? bottomInset : 0)
 
+  // Entrance / exit "pop up from bottom" animation — mirrors the Drawer. The
+  // sheet is bottom-anchored, so a positive `translateY` equal to the window
+  // height parks it fully below the bottom edge. Springing it back to `0`
+  // produces the same bottom pop-up the Drawer uses. The shared value is
+  // initialised off-screen so the very first mount pops in (no flash).
+  const { height: windowHeight } = useWindowDimensions()
+  const maxHeight = windowHeight * maxHeightPercent
+
   const containerStyle = useMemo<StyleProp<ViewStyle>>(
     () => [
       pinToBottom ? pinnedStyle : null,
       resolved.container,
-      { paddingBottom },
+      { maxHeight, paddingBottom },
       style,
     ],
-    [pinToBottom, resolved.container, paddingBottom, style]
+    [pinToBottom, resolved.container, maxHeight, paddingBottom, style]
   )
 
-  // Entrance / exit "pop up from bottom" animation — mirrors the Drawer. The
-  // sheet is bottom-anchored, so a positive `translateY` equal to the window
-  // height parks it fully below the bottom edge. Springing it back to `0`
-  // produces the same bottom pop-up the Drawer uses. The shared value is
-  // initialised off-screen so the very first mount pops in (no flash).
-  const { height: windowHeight } = useWindowDimensions()
   const entrance = useSharedValue(windowHeight)
   useEffect(() => {
     entrance.value = withSpring(visible ? 0 : windowHeight, SPRING_CONFIG)
@@ -259,6 +269,7 @@ function ContentSheet({
         style={containerStyle}
         spacing={keyboardSpacing}
         entrance={entrance}
+        maxHeight={maxHeight}
         {...rest}
       >
         {header}
@@ -268,7 +279,7 @@ function ContentSheet({
   }
 
   return (
-    <AnimatedSheet style={containerStyle} entrance={entrance} {...rest}>
+    <AnimatedSheet style={containerStyle} entrance={entrance} maxHeight={maxHeight} {...rest}>
       {header}
       {processedChildren}
     </AnimatedSheet>
@@ -279,12 +290,14 @@ type KeyboardAwareSheetProps = {
   style: StyleProp<ViewStyle>
   spacing: number
   entrance: SharedValue<number>
+  maxHeight: number
   children: React.ReactNode
 } & Omit<ViewProps, 'style' | 'children'>
 
 type AnimatedSheetProps = {
   style: StyleProp<ViewStyle>
   entrance: SharedValue<number>
+  maxHeight: number
   children: React.ReactNode
 } & Omit<ViewProps, 'style' | 'children'>
 
@@ -300,6 +313,7 @@ function KeyboardAwareSheet({
   style,
   spacing,
   entrance,
+  maxHeight,
   children,
   ...rest
 }: KeyboardAwareSheetProps) {
@@ -315,7 +329,14 @@ function KeyboardAwareSheet({
 
   return (
     <Animated.View style={[style, animatedStyle]} {...rest}>
-      {children}
+      <ScrollView
+        style={{ maxHeight }}
+        bounces={false}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+      >
+        {children}
+      </ScrollView>
     </Animated.View>
   )
 }
@@ -328,6 +349,7 @@ function KeyboardAwareSheet({
 function AnimatedSheet({
   style,
   entrance,
+  maxHeight,
   children,
   ...rest
 }: AnimatedSheetProps) {
@@ -339,7 +361,14 @@ function AnimatedSheet({
 
   return (
     <Animated.View style={[style, animatedStyle]} {...rest}>
-      {children}
+      <ScrollView
+        style={{ maxHeight }}
+        bounces={false}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+      >
+        {children}
+      </ScrollView>
     </Animated.View>
   )
 }

package/src/components/CounterBadge/CounterBadge.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import {
+  View,
+  Text,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+
+export type CounterBadgeProps = {
+  /** The value shown inside the badge. */
+  value?: string
+  /** Modes used to resolve design tokens. Counter Badge exposes a single `Default` mode. */
+  modes?: Modes
+  style?: ViewStyle
+} & Omit<React.ComponentProps<typeof View>, 'style'>
+
+/**
+ * Counter Badge — a small token-driven pill that displays a value.
+ *
+ * All visual attributes resolve from the Figma `counterBadge/*` tokens via
+ * `getVariableByName`.
+ */
+function CounterBadge({
+  value = '99',
+  modes = EMPTY_MODES,
+  style,
+  ...rest
+}: CounterBadgeProps) {
+  // Resolve token values (fall back to the Figma defaults for the single
+  // `Default` mode so the badge still renders if a token is missing).
+  const backgroundColor =
+    (getVariableByName('counterBadge/background', modes) as string) ?? '#ebebec'
+  const foreground =
+    (getVariableByName('counterBadge/foreground', modes) as string) ?? '#0c0d10'
+  const fontFamily =
+    (getVariableByName('counterBadge/fontFamily', modes) as string) ?? 'JioType Var'
+  const fontWeightRaw =
+    getVariableByName('counterBadge/fontWeight', modes) ?? 500
+  const fontWeight =
+    typeof fontWeightRaw === 'number' ? String(fontWeightRaw) : (fontWeightRaw as string)
+  const fontSize =
+    Number(getVariableByName('counterBadge/fontSize', modes) ?? 8)
+  const lineHeight =
+    Number(getVariableByName('counterBadge/lineHeight', modes) ?? 8)
+  const paddingHorizontal =
+    Number(getVariableByName('counterBadge/padding/horizontal', modes) ?? 4)
+  // The Figma design pins vertical padding to 4px (matching horizontal), but the
+  // committed variables snapshot resolves `counterBadge/padding/vertical` to 5px
+  // (a stale export). Figma is the source of truth here, so hardcode 4px rather
+  // than trust the token, keeping the badge one pixel shorter to match the design.
+  const paddingVertical = 4
+  const borderRadius =
+    Number(getVariableByName('counterBadge/radius', modes) ?? 999)
+
+  const containerStyle: ViewStyle = {
+    backgroundColor,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius,
+    alignSelf: 'flex-start',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...((style as any) || {}),
+  }
+
+  const textStyle: TextStyle = {
+    color: foreground,
+    fontFamily,
+    fontWeight: fontWeight as TextStyle['fontWeight'],
+    fontSize,
+    lineHeight,
+    textAlign: 'center',
+  }
+
+  return (
+    <View style={containerStyle} {...rest}>
+      {/* Figma `wrap`: a centered box with a 10px minimum. */}
+      <View style={WRAP_STYLE}>
+        <Text style={textStyle}>{value}</Text>
+      </View>
+    </View>
+  )
+}
+
+// Figma `wrap` node (data-node-id 7701:10879): min-width 10, centered.
+const WRAP_STYLE: ViewStyle = {
+  minWidth: 10,
+  alignItems: 'center',
+  justifyContent: 'center',
+}
+
+export default CounterBadge