jfs-components 0.1.28 → 0.1.32

package/src/components/CompareTable/CompareTable.tsx

@@ -1,10 +1,13 @@
-import React from 'react'
+import React, { useCallback, useRef } from 'react'
 import {
     View,
     Text,
     Pressable,
     Platform,
+    ScrollView,
     type ImageSourcePropType,
+    type NativeScrollEvent,
+    type NativeSyntheticEvent,
     type StyleProp,
     type ViewStyle,
     type TextStyle,
@@ -140,6 +143,41 @@ export type CompareTableProps = {
      * lines as it needs even when horizontal space is tight.
      */
     disableTruncation?: boolean;
+    /**
+     * Fixed width (px) for every selection card and every table cell — all
+     * columns share this width. When set, the component enters **scroll mode**:
+     *
+     *  - The cards row and each section's table body become independent
+     *    horizontal `ScrollView`s whose scroll events are **chained** — moving
+     *    one moves every other in lockstep (the cards always stay aligned with
+     *    the cells beneath them).
+     *  - The cards row becomes a **sticky header** at the top: it pins in place
+     *    on the vertical axis (does not scroll away) while the sections scroll
+     *    beneath it. Requires the host to give `CompareTable` a bounded height.
+     *  - The gray table-header rows (each section's `header`) are rendered
+     *    full-width **outside** the horizontal scroll, so they stay put
+     *    horizontally (they don't slide with the cells) while still scrolling
+     *    vertically with the table.
+     *
+     * Omit to keep the original flex layout (columns share the available width,
+     * 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[] = [
@@ -181,6 +219,9 @@ function CompareTable({
     modes = EMPTY_MODES,
     style,
     disableTruncation,
+    columnWidth,
+    stickyHeaders = true,
+    stickyHeaderLabel = true,
 }: CompareTableProps) {
     // --- selection card tokens ------------------------------------------------
     const cardBg = (getVariableByName('selectionCard/background/color', modes) as string) ?? '#ffffff'
@@ -238,6 +279,108 @@ function CompareTable({
     const showAddCard = onAddColumn != null && columnCount < maxColumns
     /** Grid columns shared by the selection-card row and every table row. */
     const gridColumnCount = columnCount + (showAddCard ? 1 : 0)
+    const showCardsRow = columnCount > 0 || showAddCard
+
+    // --- fixed-width scroll mode -------------------------------------------
+    // `columnWidth` opts the component into scroll mode (see prop doc). In that
+    // mode the cards row and each section's table body are independent
+    // horizontal ScrollViews; their scroll events are chained so they move in
+    // lockstep, and the cards row pins to the top on the vertical axis.
+    const useFixedWidth = columnWidth != null
+    /** Total scrollable content width shared by every horizontal surface. */
+    const contentWidth = useFixedWidth ? gridColumnCount * (columnWidth as number) : 0
+
+    const cardsScrollRef = useRef<ScrollView>(null)
+    const bodyScrollRefs = useRef<Map<number, ScrollView>>(new Map())
+    // 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())
+    /** 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 syncOthers = useCallback((source: 'cards' | number, x: number) => {
+        if (source !== 'cards' && cardsScrollRef.current) {
+            cardsScrollRef.current.scrollTo({ x, animated: false })
+        }
+        bodyScrollRefs.current.forEach((ref, idx) => {
+            if (source === 'cards' || idx !== source) {
+                ref.scrollTo({ x, animated: false })
+            }
+        })
+    }, [])
+
+    const onScrollBeginDrag = useCallback(
+        (source: 'cards' | number) => () => {
+            draggingSource.current = source
+        },
+        [],
+    )
+
+    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) => {
+        let cb = bodyRefCallbacks.current.get(idx)
+        if (!cb) {
+            cb = (ref: ScrollView | null) => {
+                if (ref) {
+                    bodyScrollRefs.current.set(idx, ref)
+                    // Bring a freshly-expanded section's body into sync with
+                    // the rest of the surfaces.
+                    if (lastSyncX.current > 0) {
+                        ref.scrollTo({ x: lastSyncX.current, animated: false })
+                    }
+                } else {
+                    bodyScrollRefs.current.delete(idx)
+                }
+            }
+            bodyRefCallbacks.current.set(idx, cb)
+        }
+        return cb
+    }, [])
 
     const cardLabelStyle: TextStyle = {
         ...NO_WRAP_TEXT,
@@ -273,8 +416,7 @@ function CompareTable({
     }
 
     const cardStyle: ViewStyle = {
-        flex: 1,
-        minWidth: 0,
+        ...(useFixedWidth ? { width: columnWidth as number } : { flex: 1, minWidth: 0 }),
         minHeight: 147,
         backgroundColor: cardBg,
         borderRadius: cardRadius,
@@ -420,6 +562,7 @@ function CompareTable({
                 key={key}
                 modes={modes}
                 flex={1}
+                width={useFixedWidth ? columnWidth : undefined}
                 align="left"
                 isLastColumn={isLastCol}
                 isLastRow={isLastRow}
@@ -486,38 +629,189 @@ function CompareTable({
         </Table>
     )
 
-    return (
-        <View
-            style={[
-                {
-                    width: '100%',
-                    backgroundColor: cardBg,
-                    borderWidth: 1,
-                    borderColor: '#e8e8e8',
-                    overflow: 'hidden',
-                },
-                style,
-            ]}
+    const renderHeaderContent = (section: CompareTableSection) =>
+        section.header != null ? (
+            <View
+                style={{
+                    backgroundColor: headerBg,
+                    paddingHorizontal: headerPaddingH,
+                    paddingVertical: headerPaddingV,
+                    borderBottomWidth: cellBorderSize,
+                    borderBottomColor: cellBorderColor,
+                }}
+            >
+                <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)}
         >
-            {(columnCount > 0 || showAddCard) && (
-                <View style={{ flexDirection: 'row', width: '100%' }}>
+            <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__',
+                                )}
+                        </View>
+                    )
+                })}
+            </View>
+        </ScrollView>
+    )
+
+    const outerStyle: ViewStyle = {
+        width: '100%',
+        backgroundColor: cardBg,
+        borderWidth: 1,
+        borderColor: '#e8e8e8',
+        overflow: 'hidden',
+    }
+
+    // --- flex mode (columnWidth omitted): original behaviour, unchanged -------
+    if (!useFixedWidth) {
+        return (
+            <View style={[outerStyle, style]}>
+                {showCardsRow && (
+                    <View style={{ flexDirection: 'row', width: '100%' }}>
+                        {columns.map(renderCard)}
+                        {showAddCard && renderAddCard()}
+                    </View>
+                )}
+
+                <View style={{ width: '100%' }}>
+                    {sections.map((section, index) => (
+                        <Accordion
+                            key={section.key ?? section.title ?? index}
+                            title={section.title}
+                            defaultExpanded={section.defaultExpanded ?? index === 0}
+                            modes={modes}
+                        >
+                            {renderTable(section)}
+                        </Accordion>
+                    ))}
+                </View>
+            </View>
+        )
+    }
+
+    // --- fixed-width scroll mode: chained horizontal sync + sticky cards -----
+    // 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>,
+        )
+    }
 
-            <View style={{ width: '100%' }}>
-                {sections.map((section, index) => (
-                    <Accordion
-                        key={section.key ?? section.title ?? index}
-                        title={section.title}
-                        defaultExpanded={section.defaultExpanded ?? index === 0}
-                        modes={modes}
-                    >
-                        {renderTable(section)}
-                    </Accordion>
-                ))}
-            </View>
+    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={stickyIndices}
+                showsVerticalScrollIndicator={false}
+                directionalLockEnabled
+            >
+                {scrollChildren}
+            </ScrollView>
         </View>
     )
 }

package/src/components/ContentSheet/ContentSheet.tsx

@@ -1,8 +1,10 @@
-import React, { useContext, useMemo } from 'react'
+import React, { useContext, useEffect, useMemo } from 'react'
 import {
   Platform,
+  ScrollView,
   Text,
   View,
+  useWindowDimensions,
   type StyleProp,
   type TextStyle,
   type ViewProps,
@@ -11,6 +13,9 @@ import {
 import Animated, {
   useAnimatedKeyboard,
   useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  type SharedValue,
 } from 'react-native-reanimated'
 import { SafeAreaInsetsContext } from 'react-native-safe-area-context'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
@@ -19,6 +24,18 @@ import type { Modes } from '../../design-tokens'
 
 const IS_WEB = Platform.OS === 'web'
 
+// Spring config — mirrors the Drawer's bottom pop-up spring so the two
+// bottom-sheet surfaces share the exact same entrance feel (slight bounce,
+// snappy). Keep in sync with `Drawer.tsx` SPRING_CONFIG.
+const SPRING_CONFIG = {
+  damping: 32,
+  stiffness: 300,
+  mass: 1,
+  overshootClamping: false,
+  restDisplacementThreshold: 0.1,
+  restSpeedThreshold: 0.1,
+}
+
 export type ContentSheetProps = {
   /**
    * Sheet content. The sheet is one big slot: whatever you place here is
@@ -71,6 +88,25 @@ export type ContentSheetProps = {
    * works in both modes.
    */
   pinToBottom?: boolean
+  /**
+   * Controls whether the sheet is on-screen. When this becomes `true` the sheet
+   * springs up from the bottom edge (off-screen → on-screen) using the same
+   * spring as the {@link Drawer} (`damping: 32`, `stiffness: 300`); when it
+   * becomes `false` it springs back down below the bottom edge. The sheet pops
+   * up on mount by default.
+   *
+   * The animation runs entirely on the UI thread via `react-native-reanimated`
+   * (no re-renders) and composes with keyboard avoidance — the entrance
+   * `translateY` and the keyboard `translateY` are summed in a single
+   * `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'>
@@ -172,6 +208,8 @@ function ContentSheet({
   keyboardSpacing = 0,
   safeAreaBottom = true,
   pinToBottom = true,
+  visible = true,
+  maxHeightPercent = 0.7,
   style,
   ...rest
 }: ContentSheetProps) {
@@ -190,20 +228,35 @@ 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]
   )
 
+  const entrance = useSharedValue(windowHeight)
+  useEffect(() => {
+    entrance.value = withSpring(visible ? 0 : windowHeight, SPRING_CONFIG)
+  }, [visible, windowHeight, entrance])
+
   // Switching between the keyboard-aware and plain implementation is keyed off
   // `avoidKeyboard` (and platform). Because they are distinct component types,
   // React remounts on toggle, so the conditional `useAnimatedKeyboard` hook
-  // inside `KeyboardAwareSheet` always runs in a stable hook order.
+  // inside `KeyboardAwareSheet` always runs in a stable hook order. Both
+  // branches receive the `entrance` shared value so the bottom pop-up plays in
+  // every configuration.
   const header = title ? (
     <View style={resolved.headerStyle}>
       <Text style={resolved.titleStyle}>{title}</Text>
@@ -215,6 +268,8 @@ function ContentSheet({
       <KeyboardAwareSheet
         style={containerStyle}
         spacing={keyboardSpacing}
+        entrance={entrance}
+        maxHeight={maxHeight}
         {...rest}
       >
         {header}
@@ -224,42 +279,96 @@ function ContentSheet({
   }
 
   return (
-    <View style={containerStyle} {...rest}>
+    <AnimatedSheet style={containerStyle} entrance={entrance} maxHeight={maxHeight} {...rest}>
       {header}
       {processedChildren}
-    </View>
+    </AnimatedSheet>
   )
 }
 
 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'>
 
 /**
  * Native-only wrapper that lifts the sheet by the live keyboard height. The
  * translation is computed on the UI thread from `useAnimatedKeyboard`, so the
- * sheet tracks the keyboard frame-for-frame without any JS work.
+ * sheet tracks the keyboard frame-for-frame without any JS work. The keyboard
+ * offset is summed with the entrance `translateY` (the bottom pop-up) inside a
+ * single `useAnimatedStyle` so both motions stay on the UI thread and never
+ * fight each other.
  */
 function KeyboardAwareSheet({
   style,
   spacing,
+  entrance,
+  maxHeight,
   children,
   ...rest
 }: KeyboardAwareSheetProps) {
   const keyboard = useAnimatedKeyboard()
 
-  const keyboardStyle = useAnimatedStyle(() => {
+  const animatedStyle = useAnimatedStyle(() => {
     const height = keyboard.height.value
+    const keyboardOffset = height > 0 ? -(height + spacing) : 0
+    return {
+      transform: [{ translateY: entrance.value + keyboardOffset }],
+    }
+  })
+
+  return (
+    <Animated.View style={[style, animatedStyle]} {...rest}>
+      <ScrollView
+        style={{ maxHeight }}
+        bounces={false}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+      >
+        {children}
+      </ScrollView>
+    </Animated.View>
+  )
+}
+
+/**
+ * Entrance-only animated sheet (web, or when keyboard avoidance is disabled).
+ * Applies the same bottom pop-up `translateY` as `KeyboardAwareSheet`, minus
+ * the keyboard offset.
+ */
+function AnimatedSheet({
+  style,
+  entrance,
+  maxHeight,
+  children,
+  ...rest
+}: AnimatedSheetProps) {
+  const animatedStyle = useAnimatedStyle(() => {
     return {
-      transform: [{ translateY: height > 0 ? -(height + spacing) : 0 }],
+      transform: [{ translateY: entrance.value }],
     }
   })
 
   return (
-    <Animated.View style={[style, keyboardStyle]} {...rest}>
-      {children}
+    <Animated.View style={[style, animatedStyle]} {...rest}>
+      <ScrollView
+        style={{ maxHeight }}
+        bounces={false}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+      >
+        {children}
+      </ScrollView>
     </Animated.View>
   )
 }