@ornikar/kitt-universal 22.1.0 → 22.2.0

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

@@ -9,7 +9,7 @@ import { CSSTransition } from 'react-transition-group';
 import { ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, useWindowDimensions } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import { parse } from 'twemoji-parser';
-import { CaretUpFillIcon, CaretDownFillIcon, EyeSlashFillIcon, EyeFillIcon, XRegularIcon } from '@ornikar/kitt-icons/phosphor';
+import { CaretUpFillIcon, CaretDownFillIcon, EyeClosedRegularIcon, EyeRegularIcon, XRegularIcon } from '@ornikar/kitt-icons/phosphor';
 import Downshift, { useSelect } from 'downshift';
 import { useDebouncedCallback } from 'use-debounce';
 import { Loader } from '@googlemaps/js-api-loader';
@@ -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]
     })
@@ -3839,7 +3831,7 @@ const InputText = /*#__PURE__*/forwardRef(({
   autoCorrect = true,
   textContentType = 'none',
   autoComplete = 'off',
-  inputMode = 'none',
+  inputMode = 'text',
   multiline,
   onSubmitEditing,
   ...props
@@ -5175,13 +5167,12 @@ function InputField({
 
 const InputNumber = /*#__PURE__*/forwardRef(({
   onChange,
-  keyboardType = 'numeric',
   ...props
 }, ref) => {
   return /*#__PURE__*/jsx(InputText, {
     ref: ref,
     ...props,
-    keyboardType: keyboardType,
+    inputMode: "numeric",
     onChange: event => {
       if (!onChange) return;
       const value = parseFloat(event.nativeEvent.text);
@@ -5213,7 +5204,7 @@ const InputPassword = /*#__PURE__*/forwardRef(({
       accessibilityRole: "button",
       onPress: () => setIsVisible(prev => !prev),
       children: /*#__PURE__*/jsx(InputIcon, {
-        icon: isVisible ? /*#__PURE__*/jsx(EyeSlashFillIcon, {}) : /*#__PURE__*/jsx(EyeFillIcon, {})
+        icon: isVisible ? /*#__PURE__*/jsx(EyeClosedRegularIcon, {}) : /*#__PURE__*/jsx(EyeRegularIcon, {})
       })
     })
   });
@@ -7410,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,
@@ -7524,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
@@ -8349,11 +8341,6 @@ function NativeOnlyFlatList({
   });
 }
 
-function SimpleContainer({
-  children
-}) {
-  return children;
-}
 function NavigationModalBehaviour({
   children,
   visible,
@@ -8368,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(() => {
@@ -8382,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
     })
   });
 }