@ornikar/kitt-universal 22.1.1 → 22.2.0

package/dist/index-node-18.18.es.web.mjs

@@ -764,6 +764,7 @@ const cardModal = {
   borderRadius: 20,
   maxWidth,
   maxWidthWithPadding: maxWidth + overlayHorizontalPadding * 2,
+  minHeight: 280,
   shadow: {
     color: colors.black,
     offsetX: 0,
@@ -782,7 +783,7 @@ const cardModal = {
   },
   overlayPadding: {
     horizontal: 24,
-    vertical: 32
+    vertical: 80
   },
   animation: {
     overlay: {
@@ -3005,6 +3006,10 @@ function CardModalRotationContainer(props) {
     paddingY: "kitt.cardModal.overlayPadding.vertical",
     maxWidth: "kitt.cardModal.maxWidthWithPadding",
     width: "100%",
+    maxHeight: "100%",
+    _web: {
+      maxHeight: '100svh'
+    },
     ...props
   });
 }
@@ -3083,15 +3088,6 @@ function CardModalAnimation({
   });
 }
 
-function CardModalScrollContainer({
-  children,
-  ...props
-}) {
-  return /*#__PURE__*/jsx(ScrollView, {
-    ...props,
-    children: children
-  });
-}
 function CardModalBehaviour({
   children,
   visible,
@@ -3108,21 +3104,15 @@ function CardModalBehaviour({
   return /*#__PURE__*/jsx(ModalBehaviour, {
     visible: isModalBehaviourVisible,
     onClose: onClose,
-    children: /*#__PURE__*/jsx(CardModalScrollContainer, {
-      bounces: false,
-      contentContainerStyle: {
-        flexGrow: 1
+    children: /*#__PURE__*/jsx(CardModalAnimation, {
+      ...props,
+      visible: visible,
+      onExited: () => {
+        if (onExited) onExited();
+        setIsModalBehaviourVisible(false);
       },
-      children: /*#__PURE__*/jsx(CardModalAnimation, {
-        ...props,
-        visible: visible,
-        onExited: () => {
-          if (onExited) onExited();
-          setIsModalBehaviourVisible(false);
-        },
-        onClose: onClose,
-        children: children
-      })
+      onClose: onClose,
+      children: children
     })
   });
 }
@@ -3136,7 +3126,8 @@ function CardModalBody({
   paddingY = 'kitt.4',
   ...props
 }) {
-  return /*#__PURE__*/jsx(View, {
+  return /*#__PURE__*/jsx(ScrollView, {
+    showsVerticalScrollIndicator: false,
     paddingX: paddingX,
     paddingY: paddingY,
     ...props,
@@ -3236,6 +3227,7 @@ function CardModal({
     width: "100%",
     maxHeight: "100%",
     maxWidth: maxWidth,
+    minHeight: "kitt.cardModal.minHeight",
     children: children || /*#__PURE__*/jsxs(Fragment, {
       children: [header || null, body || null, footer || null]
     })
@@ -7409,7 +7401,8 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             height: theme.cardModal.header.height
           },
           maxWidth: theme.cardModal.maxWidth,
-          maxWidthWithPadding: theme.cardModal.maxWidthWithPadding
+          maxWidthWithPadding: theme.cardModal.maxWidthWithPadding,
+          minHeight: theme.cardModal.minHeight
         },
         dialogModal: {
           maxWidth: theme.dialogModal.maxWidth,
@@ -7523,7 +7516,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           padding: theme.button.padding
         },
         cardModal: {
-          overlayPadding: theme.dialogModal.overlayPadding
+          overlayPadding: theme.cardModal.overlayPadding
         },
         dialogModal: {
           overlayPadding: theme.dialogModal.overlayPadding
@@ -8348,11 +8341,6 @@ function NativeOnlyFlatList({
   });
 }
 
-function SimpleContainer({
-  children
-}) {
-  return children;
-}
 function NavigationModalBehaviour({
   children,
   visible,
@@ -8367,10 +8355,6 @@ function NavigationModalBehaviour({
     base: FullscreenModalAnimation,
     small: CardModalAnimation
   });
-  const CurrentContainerComponent = useBreakpointValue({
-    base: SimpleContainer,
-    small: CardModalScrollContainer
-  });
   const [isModalBehaviourVisible, setIsModalBehaviourVisible] = useState(visible);
   const [shouldAppear, setShouldAppear] = useState(appear);
   useEffect(() => {
@@ -8381,34 +8365,28 @@ function NavigationModalBehaviour({
   return /*#__PURE__*/jsx(ModalBehaviour, {
     visible: isModalBehaviourVisible,
     onClose: onClose,
-    children: /*#__PURE__*/jsx(CurrentContainerComponent, {
-      bounces: false,
-      contentContainerStyle: {
-        flexGrow: 1
-      },
-      children: /*#__PURE__*/jsx(AnimationComponent, {
-        ...props,
-        appear: shouldAppear,
-        visible: visible,
-        onEnter: () => {
-          if (onEnter) onEnter();
+    children: /*#__PURE__*/jsx(AnimationComponent, {
+      ...props,
+      appear: shouldAppear,
+      visible: visible,
+      onEnter: () => {
+        if (onEnter) onEnter();
 
-          // Once a children as been displayed, we force appear to false in order to avoid replaying animation on breakpoint change
-          setShouldAppear(false);
-        },
-        onExit: () => {
-          if (onExit) onExit();
+        // Once a children as been displayed, we force appear to false in order to avoid replaying animation on breakpoint change
+        setShouldAppear(false);
+      },
+      onExit: () => {
+        if (onExit) onExit();
 
-          // Reset appear value to its original value for future modal display
-          setShouldAppear(appear);
-        },
-        onExited: () => {
-          if (onExited) onExited();
-          setIsModalBehaviourVisible(false);
-        },
-        onClose: onClose,
-        children: children
-      })
+        // Reset appear value to its original value for future modal display
+        setShouldAppear(appear);
+      },
+      onExited: () => {
+        if (onExited) onExited();
+        setIsModalBehaviourVisible(false);
+      },
+      onClose: onClose,
+      children: children
     })
   });
 }