@proximus/lavender-bottomsheet-native 2.1.1-alpha.41 → 2.1.1-alpha.43

package/dist/BottomSheet.d.ts

@@ -23,6 +23,13 @@ export interface IBottomSheetProps {
     sizes?: SheetSize[];
     dimBackground?: boolean;
     allowScroll?: boolean;
+    /**
+     * Caps the overall height of the sheet (in pixels). When the content is
+     * taller than this, the scrollable area (see `allowScroll`) scrolls
+     * internally instead of the sheet growing. Forwarded to TrueSheet's own
+     * `maxHeight`, which is what enables TrueSheet's nested-scroll coordination.
+     */
+    maxHeight?: number;
     testID?: string;
     children?: ReactElement | ReactElement[];
     customButtons?: ReactNode;

package/dist/BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../src/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAa,MAAM,iCAAiC,CAAC;AAUvE,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,uCAAuC,CAAC,EAAE,MAAM,CAAC;IACjD,sCAAsC,CAAC,EAAE,MAAM,CAAC;IAChD,4BAA4B,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1C,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,sCAAsC,CAAC,EAAE,MAAM,CAAC;IAChD,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C,2BAA2B,CAAC,EAAE,MAAM,IAAI,CAAC;IACzC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IAEpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAEzC,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,qBAqDrD;AACD,wBAAgB,SAAS,CAAC,KAAK,EAAE,iBAAiB,qBAiCjD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,iBAAiB,qBAsElD"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../src/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAa,MAAM,iCAAiC,CAAC;AAUvE,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,uCAAuC,CAAC,EAAE,MAAM,CAAC;IACjD,sCAAsC,CAAC,EAAE,MAAM,CAAC;IAChD,4BAA4B,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1C,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,sCAAsC,CAAC,EAAE,MAAM,CAAC;IAChD,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C,2BAA2B,CAAC,EAAE,MAAM,IAAI,CAAC;IACzC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IAEpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAEzC,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,qBAsErD;AACD,wBAAgB,SAAS,CAAC,KAAK,EAAE,iBAAiB,qBAiCjD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,iBAAiB,qBAsElD"}

package/dist/BottomSheet.js

@@ -2,18 +2,18 @@ import React, { useEffect, useRef } from 'react';
 import { TrueSheet } from '@solidx/react-native-true-sheet';
 import { e2eID } from '@proximus/lavender-common-native';
 import { ScrollView, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from '@proximus/lavender-styling-native';
 import { Body, Fonts, Header } from '@proximus/lavender-texts-native';
 import { PxSeparator } from '@proximus/lavender-separator-native';
 import { PxButton } from '@proximus/lavender-button-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { PxIcon } from '@proximus/lavender-icon-native';
 export function PxBottomSheet(props) {
     const trueSheetRef = useRef(null);
     const scrollViewRef = useRef(null);
-    const { theme } = useTheme();
     const { bottom } = useSafeAreaInsets();
-    const { testID = 'px-bottom-sheet', dimBackground = true, opened, onDismiss, sizes = ['auto', 'large'], } = props;
+    const { theme } = useTheme();
+    const { testID = 'px-bottom-sheet', dimBackground = true, opened, onDismiss, maxHeight, sizes = ['auto', 'large'], } = props;
     useEffect(() => {
         if (opened) {
             trueSheetRef.current?.present();
@@ -22,17 +22,24 @@ export function PxBottomSheet(props) {
             trueSheetRef.current?.dismiss();
         }
     }, [opened]);
-    const children = props.allowScroll ? (React.createElement(ScrollView, { ref: scrollViewRef }, props.children)) : props.children ? (React.createElement(View, null, props.children)) : undefined;
-    return (React.createElement(TrueSheet, { edgeToEdge: true, contentContainerStyle: {
+    const children = props.allowScroll ? (React.createElement(ScrollView, { contentContainerStyle: {
             padding: theme.t('PaddingLMobile').number,
-            paddingBottom: theme.t('PaddingLMobile').number + bottom,
+            paddingBottom: theme.t('PaddingLMobile').number + 2 * bottom,
             gap: theme.t('SpacingLMobile').number,
-        }, onDismiss: onDismiss, sizes: sizes, dimmed: dimBackground, scrollRef: scrollViewRef, blurTint: 'prominent', 
-        // We force the background color to be light https://pxs.tpondemand.com/restui/board.aspx?#page=bug/4850655
-        style: { backgroundColor: theme.t('ColorBackgroundSurfaceLight') }, backgroundColor: theme.t('ColorBackgroundSurfaceLight'), ref: trueSheetRef, ...e2eID(testID) },
+        }, ref: scrollViewRef, nestedScrollEnabled: true, keyboardShouldPersistTaps: "handled" },
         React.createElement(TitleZone, { ...props }),
-        children,
+        props.children && React.createElement(View, null, props.children),
+        React.createElement(ButtonZone, { ...props }))) : (React.createElement(View, { style: {
+            padding: theme.t('PaddingLMobile').number,
+            paddingBottom: theme.t('PaddingLMobile').number,
+            gap: theme.t('SpacingLMobile').number,
+        } },
+        React.createElement(TitleZone, { ...props }),
+        props.children && React.createElement(View, null, props.children),
         React.createElement(ButtonZone, { ...props })));
+    return (React.createElement(TrueSheet, { edgeToEdge: true, onDismiss: onDismiss, sizes: sizes, maxHeight: maxHeight, dimmed: dimBackground, scrollRef: scrollViewRef, blurTint: 'prominent', 
+        // We force the background color to be light https://pxs.tpondemand.com/restui/board.aspx?#page=bug/4850655
+        style: { backgroundColor: theme.t('ColorBackgroundSurfaceLight') }, backgroundColor: theme.t('ColorBackgroundSurfaceLight'), ref: trueSheetRef, ...e2eID(testID) }, children));
 }
 export function TitleZone(props) {
     const { theme } = useTheme();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-bottomsheet-native",
-  "version": "2.1.1-alpha.41",
+  "version": "2.1.1-alpha.43",
   "description": "Bottom sheet component",
   "license": "MIT",
   "main": "dist/index.js",