jfs-components 0.1.30 → 0.1.32

package/lib/module/components/CategoryCard/CategoryCard.js

@@ -0,0 +1,258 @@
+"use strict";
+
+import React, { useCallback, useMemo } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTextLayout } from '../../utils/react-utils';
+import { usePressableWebSupport } from '../../utils/web-platform-utils';
+import Badge from '../Badge/Badge';
+import Image from '../Image/Image';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CATEGORY_CARD_STATE = 'Category Card State';
+const BADGE_OVERLAP = 11;
+const DEFAULT_CARD_WIDTH = 60;
+
+// Default modes from the Figma CategoryCard component. Overridable via `modes`.
+const CATEGORY_CARD_DEFAULT_MODES = Object.freeze({
+  AppearanceBrand: 'Tertiary',
+  'Badge Size': 'Small',
+  Context4: 'Badge',
+  "Radius": "None"
+});
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string') return value;
+  return fallback;
+};
+function resolveCategoryCardTokens(modes, active) {
+  const idleModes = {
+    ...modes,
+    [CATEGORY_CARD_STATE]: 'Idle'
+  };
+  const activeModes = {
+    ...modes,
+    [CATEGORY_CARD_STATE]: 'Active'
+  };
+  const resolvedModes = active ? activeModes : idleModes;
+  const gap = toNumber(getVariableByName('cardTab/gap', resolvedModes), 6);
+  const paddingHorizontal = toNumber(getVariableByName('cardTab/padding/horizontal', resolvedModes), 8);
+  const paddingVertical = toNumber(getVariableByName('cardTab/padding/vertical', resolvedModes), 8);
+  const radius = toNumber(getVariableByName('cardTab/radius', resolvedModes), 8);
+  const strokeWidth = toNumber(getVariableByName('cardTab/strokeWidth', resolvedModes), 1);
+  const strokeColor = getVariableByName('cardTab/stroke/color', resolvedModes) ?? '#f5f5f5';
+  const idleBackground = getVariableByName('cardTab/background/color', idleModes) ?? '#ffffff';
+  const activeBackground = getVariableByName('cardTab/background/color', activeModes) ?? '#f5f5f5';
+  const backgroundColor = active ? activeBackground : idleBackground;
+  const imageSize = toNumber(getVariableByName('cardTab/image/width', resolvedModes), 36);
+  const imageRadius = toNumber(getVariableByName('image/radius', resolvedModes), 0);
+  const fontFamily = getVariableByName('cardTab/label/fontFamily', resolvedModes) ?? 'JioType Var';
+  const fontSize = toNumber(getVariableByName('cardTab/label/fontSize', resolvedModes), 12);
+  const lineHeight = toNumber(getVariableByName('cardTab/label/lineHeight', resolvedModes), Math.round(fontSize * 1.3));
+  const fontWeight = toFontWeight(getVariableByName('cardTab/label/fontWeight', resolvedModes), '500');
+  const labelColor = getVariableByName('cardTab/label/color', resolvedModes) ?? '#000000';
+  return {
+    containerStyle: {
+      position: 'relative',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor,
+      borderColor: strokeColor,
+      borderWidth: strokeWidth,
+      borderStyle: 'solid',
+      borderRadius: radius,
+      paddingHorizontal,
+      paddingTop: paddingVertical,
+      paddingBottom: paddingVertical,
+      gap
+    },
+    labelStyle: {
+      color: labelColor,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      textAlign: 'center'
+    },
+    imageSize,
+    imageRadius
+  };
+}
+const pressedOverlayStyle = {
+  opacity: 0.85
+};
+const disabledOverlayStyle = {
+  opacity: 0.5
+};
+
+/**
+ * `CategoryCard` is a compact, tappable tile for category pickers and
+ * merchandising rails. It stacks a square image above a short label and can
+ * optionally show an overlapping badge at the top edge. Cards are typically
+ * laid out in a horizontal `ScrollView` or `HStack`.
+ *
+ * All visual values resolve through the `cardTab/*` design tokens with
+ * sensible Figma defaults so the card renders correctly out of the box.
+ *
+ * @component
+ * @param {CategoryCardProps} props
+ */
+function CategoryCard({
+  label = 'Popular',
+  imageSource,
+  imageSlot,
+  badge,
+  active = false,
+  width = DEFAULT_CARD_WIDTH,
+  disableTruncation,
+  singleLine,
+  onPress,
+  disabled = false,
+  modes: propModes = EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  webAccessibilityProps,
+  testID,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...CATEGORY_CARD_DEFAULT_MODES,
+    ...propModes
+  }), [globalModes, propModes]);
+  const resolvedModes = useMemo(() => ({
+    ...modes,
+    [CATEGORY_CARD_STATE]: active ? 'Active' : 'Idle'
+  }), [modes, active]);
+  const tokens = useMemo(() => resolveCategoryCardTokens(resolvedModes, active), [resolvedModes, active]);
+  const {
+    style: labelLayoutStyle,
+    ...labelTruncation
+  } = useMemo(() => resolveTextLayout({
+    disableTruncation,
+    singleLine,
+    numberOfLines: 1,
+    ellipsizeMode: 'tail'
+  }), [disableTruncation, singleLine]);
+  const processedImageSlot = useMemo(() => {
+    if (!imageSlot) return null;
+    const processed = cloneChildrenWithModes(imageSlot, resolvedModes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [imageSlot, resolvedModes]);
+  const imageNode = processedImageSlot ?? (imageSource !== undefined ? /*#__PURE__*/_jsx(Image, {
+    imageSource: imageSource,
+    width: tokens.imageSize,
+    height: tokens.imageSize,
+    ratio: 1,
+    resizeMode: "cover",
+    borderRadius: tokens.imageRadius,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no"
+  }) : /*#__PURE__*/_jsx(Image, {
+    imageSource: "https://www.figma.com/api/mcp/asset/0ee34871-646f-4736-be06-22fb6c0a4eed",
+    width: tokens.imageSize,
+    height: tokens.imageSize,
+    ratio: 1,
+    resizeMode: "cover",
+    borderRadius: tokens.imageRadius,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no"
+  }));
+  const a11yLabel = accessibilityLabel ?? (badge ? `${label}, ${badge}` : label);
+  const webProps = usePressableWebSupport({
+    restProps: rest,
+    onPress: disabled ? undefined : onPress,
+    disabled,
+    accessibilityLabel: a11yLabel,
+    webAccessibilityProps
+  });
+  const badgeNode = badge ? /*#__PURE__*/_jsx(View, {
+    style: BADGE_ANCHOR,
+    pointerEvents: "none",
+    children: /*#__PURE__*/_jsx(Badge, {
+      label: badge,
+      modes: resolvedModes,
+      style: BADGE_CENTER_STYLE
+    })
+  }) : null;
+
+  // Truncation needs a width bound so the ellipsis engages. `singleLine`
+  // must NOT fill the content box — otherwise the text is pinned to the left
+  // padding edge and only grows rightward. Intrinsic width + centered
+  // alignment lets overflow expand equally on both sides.
+  const labelWidthStyle = singleLine ? LABEL_OVERFLOW_CENTER_STYLE : LABEL_FILL_STYLE;
+  const pressableStyle = useCallback(({
+    pressed
+  }) => [tokens.containerStyle, {
+    width
+  }, badge ? {
+    marginTop: BADGE_OVERLAP
+  } : null, disabled ? disabledOverlayStyle : null, pressed && !disabled ? pressedOverlayStyle : null, style], [tokens.containerStyle, width, badge, disabled, style]);
+  return /*#__PURE__*/_jsxs(Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: a11yLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityState: {
+      disabled,
+      selected: active,
+      ...accessibilityState
+    },
+    onPress: onPress,
+    disabled: disabled,
+    style: pressableStyle,
+    testID: testID,
+    ...webProps,
+    children: [badgeNode, imageNode, /*#__PURE__*/_jsx(Text, {
+      style: [tokens.labelStyle, labelWidthStyle, labelLayoutStyle, labelStyle],
+      ...labelTruncation,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: label
+    })]
+  });
+}
+const BADGE_ANCHOR = {
+  position: 'absolute',
+  top: -BADGE_OVERLAP,
+  left: 0,
+  right: 0,
+  alignItems: 'center',
+  justifyContent: 'center',
+  zIndex: 1
+};
+const BADGE_CENTER_STYLE = {
+  alignSelf: 'center'
+};
+
+/** Lets the label fill the card width so the one-line ellipsis has a bound. */
+const LABEL_FILL_STYLE = {
+  width: '100%',
+  alignSelf: 'stretch'
+};
+
+/**
+ * Intrinsic width, horizontally centred. When the label is wider than the
+ * card it overflows left and right equally instead of growing only rightward
+ * from the padded content edge.
+ */
+const LABEL_OVERFLOW_CENTER_STYLE = {
+  alignSelf: 'center',
+  textAlign: 'center'
+};
+export default /*#__PURE__*/React.memo(CategoryCard);

package/lib/module/components/CompareTable/CompareTable.js

@@ -107,7 +107,9 @@ function CompareTable({
   modes = EMPTY_MODES,
   style,
   disableTruncation,
-  columnWidth
+  columnWidth,
+  stickyHeaders = true,
+  stickyHeaderLabel = true
 }) {
   // --- selection card tokens ------------------------------------------------
   const cardBg = getVariableByName('selectionCard/background/color', modes) ?? '#ffffff';
@@ -179,12 +181,12 @@ 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(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(null);
   const lastSyncX = useRef(0);
-  const applySync = useCallback((x, source) => {
-    if (Math.abs(x - lastSyncX.current) < 0.5) return;
-    lastSyncX.current = x;
+  const syncOthers = useCallback((source, x) => {
     if (source !== 'cards' && cardsScrollRef.current) {
       cardsScrollRef.current.scrollTo({
         x,
@@ -200,12 +202,37 @@ function CompareTable({
       }
     });
   }, []);
-  const onCardsScroll = useCallback(e => {
-    applySync(e.nativeEvent.contentOffset.x, 'cards');
-  }, [applySync]);
-  const onBodyScroll = useCallback(idx => e => {
-    applySync(e.nativeEvent.contentOffset.x, idx);
-  }, [applySync]);
+  const onScrollBeginDrag = useCallback(source => () => {
+    draggingSource.current = source;
+  }, []);
+  const onScrollEndDrag = useCallback(source => e => {
+    const x = Math.round(e.nativeEvent.contentOffset.x);
+    if (x === lastSyncX.current) return;
+    lastSyncX.current = x;
+    syncOthers(source, x);
+  }, [syncOthers]);
+  const onMomentumScrollEnd = useCallback(source => e => {
+    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 => e => {
+    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 => {
     let cb = bodyRefCallbacks.current.get(idx);
     if (!cb) {
@@ -436,55 +463,45 @@ function CompareTable({
       })
     })]
   });
-
-  // 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, index) => /*#__PURE__*/_jsxs(Accordion, {
-    title: section.title,
-    defaultExpanded: section.defaultExpanded ?? index === 0,
-    modes: modes,
-    children: [section.header != null && /*#__PURE__*/_jsx(View, {
+  const renderHeaderContent = section => section.header != null ? /*#__PURE__*/_jsx(View, {
+    style: {
+      backgroundColor: headerBg,
+      paddingHorizontal: headerPaddingH,
+      paddingVertical: headerPaddingV,
+      borderBottomWidth: cellBorderSize,
+      borderBottomColor: cellBorderColor
+    },
+    children: /*#__PURE__*/_jsx(Text, {
+      style: headerTextStyle,
+      children: section.header
+    })
+  }) : null;
+  const renderBodyContent = (section, index) => /*#__PURE__*/_jsx(ScrollView, {
+    ref: getBodyRefCallback(index),
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    onScroll: onScroll(index),
+    onScrollBeginDrag: onScrollBeginDrag(index),
+    onScrollEndDrag: onScrollEndDrag(index),
+    onMomentumScrollEnd: onMomentumScrollEnd(index),
+    children: /*#__PURE__*/_jsx(View, {
       style: {
-        width: '100%',
-        backgroundColor: headerBg,
-        paddingHorizontal: headerPaddingH,
-        paddingVertical: headerPaddingV,
-        borderBottomWidth: cellBorderSize,
-        borderBottomColor: cellBorderColor
+        width: contentWidth
       },
-      children: /*#__PURE__*/_jsx(Text, {
-        style: headerTextStyle,
-        children: section.header
-      })
-    }), /*#__PURE__*/_jsx(ScrollView, {
-      ref: getBodyRefCallback(index),
-      horizontal: true,
-      showsHorizontalScrollIndicator: false,
-      scrollEventThrottle: 16,
-      onScroll: onBodyScroll(index),
-      children: /*#__PURE__*/_jsx(View, {
-        style: {
-          width: contentWidth
-        },
-        children: section.rows.map((row, rowIndex) => {
-          const isLastRow = rowIndex === section.rows.length - 1;
-          return /*#__PURE__*/_jsxs(View, {
-            style: {
-              flexDirection: 'row',
-              width: '100%'
-            },
-            children: [Array.from({
-              length: columnCount
-            }).map((_, colIndex) => renderTableCell(renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`), colIndex, isLastRow, colIndex)), showAddCard && renderTableCell(null, gridColumnCount - 1, isLastRow, '__add_spacer__')]
-          }, row.key ?? rowIndex);
-        })
+      children: section.rows.map((row, rowIndex) => {
+        const isLastRow = rowIndex === section.rows.length - 1;
+        return /*#__PURE__*/_jsxs(View, {
+          style: {
+            flexDirection: 'row',
+            width: '100%'
+          },
+          children: [Array.from({
+            length: columnCount
+          }).map((_, colIndex) => renderTableCell(renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`), colIndex, isLastRow, colIndex)), showAddCard && renderTableCell(null, gridColumnCount - 1, isLastRow, '__add_spacer__')]
+        }, row.key ?? rowIndex);
       })
-    })]
-  }, section.key ?? section.title ?? index);
+    })
+  });
   const outerStyle = {
     width: '100%',
     backgroundColor: cardBg,
@@ -518,43 +535,82 @@ 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 = [];
+  const stickyIndices = [];
+  if (showCardsRow) {
+    stickyIndices.push(scrollChildren.length);
+    scrollChildren.push(/*#__PURE__*/_jsx(ScrollView, {
+      ref: cardsScrollRef,
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      scrollEventThrottle: 16,
+      onScroll: onScroll('cards'),
+      onScrollBeginDrag: onScrollBeginDrag('cards'),
+      onScrollEndDrag: onScrollEndDrag('cards'),
+      onMomentumScrollEnd: onMomentumScrollEnd('cards'),
+      children: /*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          width: contentWidth
+        },
+        children: [columns.map(renderCard), showAddCard && renderAddCard()]
+      })
+    }, "cards-row"));
+  }
+  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(/*#__PURE__*/_jsx(View, {
+        style: {
+          width: '100%'
+        },
+        children: stickyHeaderLabel ? headerContent : /*#__PURE__*/_jsx(ScrollView, {
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          children: /*#__PURE__*/_jsx(View, {
+            style: {
+              width: contentWidth
+            },
+            children: headerContent
+          })
+        })
+      }, `sticky-header-${sectionKey}`));
+    }
+    scrollChildren.push(/*#__PURE__*/_jsxs(Accordion, {
+      title: section.title,
+      defaultExpanded: section.defaultExpanded ?? index === 0,
+      modes: modes,
+      children: [!stickyHeaders && headerContent != null && (stickyHeaderLabel ? headerContent : /*#__PURE__*/_jsx(ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            width: contentWidth
+          },
+          children: headerContent
+        })
+      })), renderBodyContent(section, index)]
+    }, sectionKey));
+  });
   return /*#__PURE__*/_jsx(View, {
     style: [outerStyle, style, {
       flexDirection: 'column',
       flex: 1
     }],
-    children: /*#__PURE__*/_jsxs(ScrollView, {
+    children: /*#__PURE__*/_jsx(ScrollView, {
       style: {
         width: '100%',
         flex: 1
       },
-      stickyHeaderIndices: showCardsRow ? [0] : [],
+      stickyHeaderIndices: stickyIndices,
       showsVerticalScrollIndicator: false,
       directionalLockEnabled: true,
-      children: [showCardsRow && /*#__PURE__*/_jsx(ScrollView, {
-        ref: cardsScrollRef,
-        horizontal: true,
-        showsHorizontalScrollIndicator: false,
-        scrollEventThrottle: 16,
-        onScroll: onCardsScroll,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: {
-            flexDirection: 'row',
-            width: contentWidth
-          },
-          children: [columns.map(renderCard), showAddCard && renderAddCard()]
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: {
-          width: '100%'
-        },
-        children: sections.map(renderSection)
-      })]
+      children: scrollChildren
     })
   });
 }

package/lib/module/components/ContentSheet/ContentSheet.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { useContext, useEffect, useMemo } from 'react';
-import { Platform, Text, View, useWindowDimensions } from 'react-native';
+import { Platform, ScrollView, Text, View, useWindowDimensions } from 'react-native';
 import Animated, { useAnimatedKeyboard, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
@@ -104,6 +104,7 @@ function ContentSheet({
   safeAreaBottom = true,
   pinToBottom = true,
   visible = true,
+  maxHeightPercent = 0.7,
   style,
   ...rest
 }) {
@@ -115,9 +116,6 @@ function ContentSheet({
   const resolved = useMemo(() => resolveContentSheetStyle(modes), [modes]);
   const processedChildren = useMemo(() => cloneChildrenWithModes(flattenChildren(children), modes), [children, modes]);
   const paddingBottom = resolved.paddingBottom + (safeAreaBottom ? bottomInset : 0);
-  const containerStyle = useMemo(() => [pinToBottom ? pinnedStyle : null, resolved.container, {
-    paddingBottom
-  }, style], [pinToBottom, resolved.container, 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
@@ -127,6 +125,11 @@ function ContentSheet({
   const {
     height: windowHeight
   } = useWindowDimensions();
+  const maxHeight = windowHeight * maxHeightPercent;
+  const containerStyle = useMemo(() => [pinToBottom ? pinnedStyle : null, resolved.container, {
+    maxHeight,
+    paddingBottom
+  }, style], [pinToBottom, resolved.container, maxHeight, paddingBottom, style]);
   const entrance = useSharedValue(windowHeight);
   useEffect(() => {
     entrance.value = withSpring(visible ? 0 : windowHeight, SPRING_CONFIG);
@@ -150,6 +153,7 @@ function ContentSheet({
       style: containerStyle,
       spacing: keyboardSpacing,
       entrance: entrance,
+      maxHeight: maxHeight,
       ...rest,
       children: [header, processedChildren]
     });
@@ -157,6 +161,7 @@ function ContentSheet({
   return /*#__PURE__*/_jsxs(AnimatedSheet, {
     style: containerStyle,
     entrance: entrance,
+    maxHeight: maxHeight,
     ...rest,
     children: [header, processedChildren]
   });
@@ -173,6 +178,7 @@ function KeyboardAwareSheet({
   style,
   spacing,
   entrance,
+  maxHeight,
   children,
   ...rest
 }) {
@@ -189,7 +195,15 @@ function KeyboardAwareSheet({
   return /*#__PURE__*/_jsx(Animated.View, {
     style: [style, animatedStyle],
     ...rest,
-    children: children
+    children: /*#__PURE__*/_jsx(ScrollView, {
+      style: {
+        maxHeight
+      },
+      bounces: false,
+      showsVerticalScrollIndicator: false,
+      keyboardShouldPersistTaps: "handled",
+      children: children
+    })
   });
 }
 
@@ -201,6 +215,7 @@ function KeyboardAwareSheet({
 function AnimatedSheet({
   style,
   entrance,
+  maxHeight,
   children,
   ...rest
 }) {
@@ -214,7 +229,15 @@ function AnimatedSheet({
   return /*#__PURE__*/_jsx(Animated.View, {
     style: [style, animatedStyle],
     ...rest,
-    children: children
+    children: /*#__PURE__*/_jsx(ScrollView, {
+      style: {
+        maxHeight
+      },
+      bounces: false,
+      showsVerticalScrollIndicator: false,
+      keyboardShouldPersistTaps: "handled",
+      children: children
+    })
   });
 }
 export default ContentSheet;