@ornikar/kitt-universal 31.4.0 → 32.0.0

package/dist/index-node-22.17.cjs.web.css

@@ -6,14 +6,6 @@
 .kitt-u_opacityEnterActive_o1t4vl7b{opacity:1;-webkit-transition:opacity 250ms cubic-bezier(0.42,0,1,1);transition:opacity 250ms cubic-bezier(0.42,0,1,1);}
 .kitt-u_opacityExit_ogyytm1{opacity:1;}
 .kitt-u_opacityExitActive_o18xvk52{opacity:0;-webkit-transition:opacity 250ms cubic-bezier(0.42,0,1,1);transition:opacity 250ms cubic-bezier(0.42,0,1,1);}
-.kitt-u_contentAnimationEnter_c1i0gle8{opacity:0;-webkit-transform:rotateZ(5deg) scale(0.8);-ms-transform:rotateZ(5deg) scale(0.8);transform:rotateZ(5deg) scale(0.8);}
-.kitt-u_contentAnimatioEnterActive_c1jmfkjw{opacity:1;-webkit-transform:rotateZ(0) scale(1);-ms-transform:rotateZ(0) scale(1);transform:rotateZ(0) scale(1);-webkit-transition:all 400ms cubic-bezier(0.77,0,0.175,1);transition:all 400ms cubic-bezier(0.77,0,0.175,1);}
-.kitt-u_contentAnimatioExit_cwjstxl{opacity:1;-webkit-transform:rotateZ(0) scale(1);-ms-transform:rotateZ(0) scale(1);transform:rotateZ(0) scale(1);}
-.kitt-u_contentAnimatioExitActive_c1almbvu{opacity:0;-webkit-transform:rotateZ(5deg) scale(0.8);-ms-transform:rotateZ(5deg) scale(0.8);transform:rotateZ(5deg) scale(0.8);-webkit-transition:all 400ms cubic-bezier(0.77,0,0.175,1);transition:all 400ms cubic-bezier(0.77,0,0.175,1);}
-.kitt-u_opacityEnter_o9rkayr{opacity:0;}
-.kitt-u_opacityEnterActive_od7zvm9{opacity:1;-webkit-transition:opacity 250ms cubic-bezier(0.42,0,1,1);transition:opacity 250ms cubic-bezier(0.42,0,1,1);}
-.kitt-u_opacityExit_opddo9j{opacity:1;}
-.kitt-u_opacityExitActive_o15v6ove{opacity:0;-webkit-transition:opacity 250ms cubic-bezier(0.42,0,1,1);transition:opacity 250ms cubic-bezier(0.42,0,1,1);}
 .kitt-u_inputTextContainer_i1encr9g{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;}.kitt-u_inputTextContainer_i1encr9g > *::-ms-clear,.kitt-u_inputTextContainer_i1encr9g > *::-ms-reveal{display:none;}.kitt-u_inputTextContainer_i1encr9g > *{-webkit-transition:border-color 200ms ease-in-out,background-color 200ms ease-in-out;transition:border-color 200ms ease-in-out,background-color 200ms ease-in-out;}
 .kitt-u_slideInFromBottomEnter_s1717rto{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);}
 .kitt-u_slideInFromBottomEnterActive_sux6xgc{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition:-webkit-transform 600ms cubic-bezier(0.77,0,0.175,1);-webkit-transition:transform 600ms cubic-bezier(0.77,0,0.175,1);transition:transform 600ms cubic-bezier(0.77,0,0.175,1);}

package/dist/index-node-22.17.cjs.web.js

@@ -9,6 +9,7 @@ const phosphor = require('@ornikar/kitt-icons/phosphor');
 const reactNative = require('react-native');
 const reactDom = require('react-dom');
 const reactTransitionGroup = require('react-transition-group');
+const Animated = require('react-native-reanimated');
 const parser = require('@twemoji/parser');
 const Downshift = require('downshift');
 const expoDocumentPicker = require('expo-document-picker');
@@ -16,7 +17,6 @@ const expoImagePicker = require('expo-image-picker');
 const useDebounce = require('use-debounce');
 const jsApiLoader = require('@googlemaps/js-api-loader');
 const libphonenumberJs = require('libphonenumber-js');
-const Animated = require('react-native-reanimated');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
 const Svg = require('react-native-svg');
 const reactDom$1 = require('@floating-ui/react-dom');
@@ -26,8 +26,8 @@ const isChromatic = require('chromatic/isChromatic');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
-const Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
 const Animated__default = /*#__PURE__*/_interopDefaultLegacy(Animated);
+const Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
 const Svg__default = /*#__PURE__*/_interopDefaultLegacy(Svg);
 const isChromatic__default = /*#__PURE__*/_interopDefaultLegacy(isChromatic);
 
@@ -4332,29 +4332,29 @@ const CardModalRotationContainer = /*#__PURE__*/react.forwardRef((props, ref) =>
   });
 });
 
-const contentAnimationEnter$1 = "kitt-u_contentAnimationEnter_c11xxy4r";
-const contentAnimatioEnterActive$1 = "kitt-u_contentAnimatioEnterActive_cl52117";
-const contentAnimatioExit$1 = "kitt-u_contentAnimatioExit_cyjczep";
-const contentAnimatioExitActive$1 = "kitt-u_contentAnimatioExitActive_cpsy3dt";
-const contentAnimationClassNames$1 = {
-  appear: contentAnimationEnter$1,
-  appearActive: contentAnimatioEnterActive$1,
-  enter: contentAnimationEnter$1,
-  enterActive: contentAnimatioEnterActive$1,
-  exit: contentAnimatioExit$1,
-  exitActive: contentAnimatioExitActive$1
+const contentAnimationEnter = "kitt-u_contentAnimationEnter_c11xxy4r";
+const contentAnimatioEnterActive = "kitt-u_contentAnimatioEnterActive_cl52117";
+const contentAnimatioExit = "kitt-u_contentAnimatioExit_cyjczep";
+const contentAnimatioExitActive = "kitt-u_contentAnimatioExitActive_cpsy3dt";
+const contentAnimationClassNames = {
+  appear: contentAnimationEnter,
+  appearActive: contentAnimatioEnterActive,
+  enter: contentAnimationEnter,
+  enterActive: contentAnimatioEnterActive,
+  exit: contentAnimatioExit,
+  exitActive: contentAnimatioExitActive
 };
-const opacityEnter$2 = "kitt-u_opacityEnter_o1ae40dx";
-const opacityEnterActive$2 = "kitt-u_opacityEnterActive_o1t4vl7b";
-const opacityExit$2 = "kitt-u_opacityExit_ogyytm1";
-const opacityExitActive$2 = "kitt-u_opacityExitActive_o18xvk52";
-const opacityClassNames$2 = {
-  appear: opacityEnter$2,
-  appearActive: opacityEnterActive$2,
-  enter: opacityEnter$2,
-  enterActive: opacityEnterActive$2,
-  exit: opacityExit$2,
-  exitActive: opacityExitActive$2
+const opacityEnter$1 = "kitt-u_opacityEnter_o1ae40dx";
+const opacityEnterActive$1 = "kitt-u_opacityEnterActive_o1t4vl7b";
+const opacityExit$1 = "kitt-u_opacityExit_ogyytm1";
+const opacityExitActive$1 = "kitt-u_opacityExitActive_o18xvk52";
+const opacityClassNames$1 = {
+  appear: opacityEnter$1,
+  appearActive: opacityEnterActive$1,
+  enter: opacityEnter$1,
+  enterActive: opacityEnterActive$1,
+  exit: opacityExit$1,
+  exitActive: opacityExitActive$1
 };
 function CardModalAnimation({
   children,
@@ -4390,7 +4390,7 @@ function CardModalAnimation({
       ...sharedProps,
       nodeRef: overlayRef,
       timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames$2,
+      classNames: opacityClassNames$1,
       children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
         ref: overlayRef,
         onPress: onClose
@@ -4399,7 +4399,7 @@ function CardModalAnimation({
       ...sharedProps,
       nodeRef: contentRef,
       timeout: isAnimationEnabled ? animation.content.duration : 0,
-      classNames: contentAnimationClassNames$1,
+      classNames: contentAnimationClassNames,
       onEnter: onEnter,
       onEntered: onEntered,
       onExit: onExit,
@@ -4936,87 +4936,167 @@ const ChoicesElements = {
   ButtonChoices
 };
 
-const contentAnimationEnter = "kitt-u_contentAnimationEnter_c1i0gle8";
-const contentAnimatioEnterActive = "kitt-u_contentAnimatioEnterActive_c1jmfkjw";
-const contentAnimatioExit = "kitt-u_contentAnimatioExit_cwjstxl";
-const contentAnimatioExitActive = "kitt-u_contentAnimatioExitActive_c1almbvu";
-const contentAnimationClassNames = {
-  appear: contentAnimationEnter,
-  appearActive: contentAnimatioEnterActive,
-  enter: contentAnimationEnter,
-  enterActive: contentAnimatioEnterActive,
-  exit: contentAnimatioExit,
-  exitActive: contentAnimatioExitActive
-};
-const opacityEnter$1 = "kitt-u_opacityEnter_o9rkayr";
-const opacityEnterActive$1 = "kitt-u_opacityEnterActive_od7zvm9";
-const opacityExit$1 = "kitt-u_opacityExit_opddo9j";
-const opacityExitActive$1 = "kitt-u_opacityExitActive_o15v6ove";
-const opacityClassNames$1 = {
-  appear: opacityEnter$1,
-  appearActive: opacityEnterActive$1,
-  enter: opacityEnter$1,
-  enterActive: opacityEnterActive$1,
-  exit: opacityExit$1,
-  exitActive: opacityExitActive$1
-};
-function DialogModalAnimation({
+function NativeOpacityAnimation({
+  visible,
   children,
-  appear = true,
+  onExited
+}) {
+  const theme = useTheme();
+  const hasRunAnimationRef = react.useRef(false);
+  react.useEffect(() => {
+    if (visible) {
+      hasRunAnimationRef.current = true;
+    }
+  }, [visible]);
+  function handleAnimationFinished() {
+    if (!visible && hasRunAnimationRef.current) {
+      onExited();
+    }
+  }
+  const opacityStyle = Animated.useAnimatedStyle(() => {
+    const {
+      duration,
+      easing
+    } = theme.kitt.dialogModal.animation.overlay;
+    const {
+      x1,
+      y1,
+      x2,
+      y2
+    } = easing;
+    return {
+      opacity: Animated.withTiming(visible ? 1 : 0, {
+        duration,
+        easing: Animated.Easing.bezier(x1, y1, x2, y2)
+      }, isFinished => {
+        if (!isFinished) return;
+        Animated.runOnJS(handleAnimationFinished)();
+      })
+    };
+  }, [theme, visible, handleAnimationFinished]);
+  return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
+    style: [reactNative.StyleSheet.absoluteFillObject, opacityStyle],
+    children: children
+  });
+}
+
+function NativeRotationAnimation({
   visible,
-  unmountOnExit = true,
-  isAnimationEnabled = true,
+  children,
+  onEntered,
+  onExited
+}) {
+  const theme = useTheme();
+  const hasRunAnimationRef = react.useRef(false);
+  const rotation = Animated.useSharedValue(0.8);
+  react.useEffect(() => {
+    if (visible) {
+      hasRunAnimationRef.current = true;
+    }
+  }, [visible]);
+  function handleAnimationFinished() {
+    if (visible) {
+      if (onEntered) onEntered();
+    }
+    if (!visible && hasRunAnimationRef.current) onExited();
+  }
+  const animatedStyle = Animated.useAnimatedStyle(() => {
+    const {
+      duration,
+      easing
+    } = theme.kitt.dialogModal.animation.content;
+    const {
+      x1,
+      y1,
+      x2,
+      y2
+    } = easing;
+    rotation.value = Animated.withTiming(visible ? 0 : 5, {
+      duration,
+      easing: Animated.Easing.bezier(x1, y1, x2, y2)
+    }, isFinished => {
+      if (!isFinished) return;
+      Animated.runOnJS(handleAnimationFinished)();
+    });
+    return {
+      opacity: Animated.withTiming(visible ? 1 : 0, {
+        duration,
+        easing: Animated.Easing.bezier(x1, y1, x2, y2)
+      }),
+      transform: [{
+        scale: Animated.withTiming(visible ? 1 : 0.8, {
+          duration,
+          easing: Animated.Easing.bezier(x1, y1, x2, y2)
+        })
+      }, {
+        rotateZ: `${rotation.value}deg`
+      }]
+    };
+  }, [theme, visible, rotation, handleAnimationFinished]);
+  return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
+    style: [animatedStyle],
+    children: children
+  });
+}
+
+function DialogModalAnimation({
+  visible,
+  children,
   onEnter,
   onEntered,
   onExit,
   onExited,
-  onClose,
-  ...props
+  onClose
 }) {
-  // React 19 has removed the ReactDOM.findDOMNode method. We need to use refs to access DOM nodes in CSSTransition.
-  // See https://github.com/reactjs/react-transition-group/issues/918
-  const overlayRef = react.useRef(null);
-  const contentRef = react.useRef(null);
-  const theme = useTheme();
-  const {
-    animation
-  } = theme.kitt.dialogModal;
-  const sharedProps = {
-    in: visible,
-    appear,
-    unmountOnExit
+  const [isModalVisible, setIsModalVisible] = react.useState(visible);
+  const [isContentVisible, setIsContentVisible] = react.useState(false);
+  const handleAnimationExited = () => {
+    setIsModalVisible(false);
+    // Android doesn't handle the onDismiss callback on the modal, we need to call it manually
   };
-  return /*#__PURE__*/jsxRuntime.jsxs(View, {
-    ...props,
-    height: "100%",
-    justifyContent: "center",
-    children: [/*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
-      ...sharedProps,
-      nodeRef: overlayRef,
-      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames$1,
-      children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
-        ref: overlayRef,
-        onPress: onClose
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
-      ...sharedProps,
-      nodeRef: contentRef,
-      timeout: isAnimationEnabled ? animation.content.duration : 0,
-      classNames: contentAnimationClassNames,
-      onEnter: onEnter,
-      onEntered: onEntered,
-      onExit: onExit,
-      onExited: onExited,
-      children: /*#__PURE__*/jsxRuntime.jsx(View, {
-        ref: contentRef,
-        alignItems: "center",
-        paddingX: "kitt.dialogModal.overlayPadding.horizontal",
-        paddingY: "kitt.dialogModal.overlayPadding.vertical",
-        margin: "auto",
-        children: children
-      })
-    })]
+  react.useEffect(() => {
+    if (!(!visible && isContentVisible)) return;
+    if (onExit) onExit();
+    setIsContentVisible(false);
+  }, [visible, isContentVisible, onExit]);
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.Modal, {
+    transparent: true,
+    supportedOrientations: ['landscape', 'portrait'],
+    visible: isModalVisible,
+    onShow: () => {
+      if (onEnter) onEnter();
+      setIsContentVisible(true);
+    },
+    onDismiss: () => {
+      if (onExited) onExited();
+    },
+    children: /*#__PURE__*/jsxRuntime.jsxs(View
+    // This is an ugly workaround to make the Modal calculate its height correctly on Android.
+    // This ugly workaround is used in FullScreenModalAnimation and CardModalAnimation as well
+    // TODO [expo@>=53]: Check if still needed
+    , {
+      height: undefined,
+      position: "relative",
+      flexGrow: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      children: [/*#__PURE__*/jsxRuntime.jsx(NativeOpacityAnimation, {
+        visible: isContentVisible,
+        onExited: handleAnimationExited,
+        children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
+          onPress: onClose
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(NativeRotationAnimation, {
+        visible: isContentVisible,
+        onExited: handleAnimationExited,
+        onEntered: onEntered,
+        children: /*#__PURE__*/jsxRuntime.jsx(View, {
+          paddingX: "kitt.dialogModal.overlayPadding.horizontal",
+          paddingY: "kitt.dialogModal.overlayPadding.vertical",
+          children: children
+        })
+      })]
+    })
   });
 }
 
@@ -6246,6 +6326,82 @@ function ImagePicker({
   });
 }
 
+function InputAddressOption({
+  item,
+  mainText,
+  secondaryText
+}) {
+  const sharedTransform = {
+    style: {
+      transform: 'translateY(4px)'
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(Autocomplete.Option, {
+    item: item,
+    testID: "kitt.InputAddressOption.item",
+    children: /*#__PURE__*/jsxRuntime.jsxs(HStack, {
+      space: "kitt.2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(View, {
+        _web: sharedTransform,
+        _ios: sharedTransform,
+        _android: sharedTransform,
+        children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+          icon: /*#__PURE__*/jsxRuntime.jsx(phosphor.MapPinRegularIcon, {}),
+          color: "black"
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(View, {
+        flexShrink: 1,
+        children: /*#__PURE__*/jsxRuntime.jsxs(Typography.Text, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+            variant: "bold",
+            children: mainText
+          }), secondaryText ? /*#__PURE__*/jsxRuntime.jsxs(Typography.Text, {
+            color: "black-light",
+            variant: "bold",
+            children: [' ', secondaryText]
+          }) : null]
+        })
+      })]
+    })
+  });
+}
+
+function InputAddress({
+  errorElement,
+  initialValue,
+  emptyResultsElement,
+  onChange,
+  items,
+  isLoading,
+  hasError,
+  onInputChange,
+  onSelectItem,
+  convertInitialValue,
+  renderItem,
+  ...props
+}) {
+  const formattedInitialValue = initialValue ? convertInitialValue(initialValue) : undefined;
+  return /*#__PURE__*/jsxRuntime.jsx(Autocomplete, {
+    ...props,
+    initialValue: formattedInitialValue,
+    right: isLoading ? /*#__PURE__*/jsxRuntime.jsx(Icon, {
+      icon: /*#__PURE__*/jsxRuntime.jsx(LoaderIcon, {}),
+      color: "kitt.black"
+    }) : undefined,
+    errorElement: hasError ? errorElement : null,
+    emptyResultsElement: items.length === 0 ? emptyResultsElement : null,
+    onInputChange: value => onInputChange(value),
+    onChange: item => onSelectItem(item, onChange),
+    children: items.map(item => {
+      const itemElement = renderItem(item);
+      return /*#__PURE__*/react.cloneElement(itemElement, {
+        item
+      });
+    })
+  });
+}
+InputAddress.Option = InputAddressOption;
+
 const GoogleMapsApiKeyContext = /*#__PURE__*/react.createContext(undefined);
 function GoogleMapsApiKeyProvider({
   children,
@@ -6571,7 +6727,7 @@ function useGoogleMapsAutocomplete() {
   return context;
 }
 
-function InputAddressOption({
+function InputAddressOptionLegacy({
   item
 }) {
   const sharedTransform = {
@@ -6581,7 +6737,7 @@ function InputAddressOption({
   };
   return /*#__PURE__*/jsxRuntime.jsx(Autocomplete.Option, {
     item: item,
-    testID: "kitt.InputAddressOption.item",
+    testID: "kitt.InputAddressOptionLegacy.item",
     children: /*#__PURE__*/jsxRuntime.jsxs(HStack, {
       space: "kitt.2",
       children: [/*#__PURE__*/jsxRuntime.jsx(View, {
@@ -6642,7 +6798,7 @@ function formatInitialValueToAutocompletePrediction(address, placeId) {
   };
 }
 
-function InputAddress({
+function InputAddressLegacy({
   initialValue,
   itemToString = defaultItemToString,
   errorElement,
@@ -6675,12 +6831,12 @@ function InputAddress({
     onChange: v => {
       onSelectItem(v, onChange);
     },
-    children: state.items.map(item => /*#__PURE__*/jsxRuntime.jsx(InputAddressOption, {
+    children: state.items.map(item => /*#__PURE__*/jsxRuntime.jsx(InputAddressOptionLegacy, {
       item: item
     }, item.place_id))
   });
 }
-InputAddress.Option = InputAddressOption;
+InputAddressLegacy.Option = InputAddressOptionLegacy;
 
 const InputEmail = /*#__PURE__*/react.forwardRef((props, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
@@ -13684,6 +13840,7 @@ exports.Image = Image;
 exports.ImagePicker = ImagePicker;
 exports.InfoCard = InfoCard;
 exports.InputAddress = InputAddress;
+exports.InputAddressLegacy = InputAddressLegacy;
 exports.InputEmail = InputEmail;
 exports.InputFeedback = InputFeedback;
 exports.InputField = InputField;