@ornikar/kitt-universal 31.1.0 → 31.2.0

package/dist/index.es.web.js

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useContext, createContext, forwardRef, useMemo, cloneElement, useRef, useEffect, useState, Children, useReducer, useCallback, Fragment as Fragment$1 } from 'react';
+import { useContext, createContext, forwardRef, useMemo, cloneElement, useState, useRef, useCallback, useLayoutEffect, useEffect, Children, useReducer, Fragment as Fragment$1 } from 'react';
 import { View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, Image as Image$1, FlatList as FlatList$1, SectionList as SectionList$1, Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Center as Center$1, useBreakpointValue as useBreakpointValue$1, useSx, Text, Input, NativeBaseProvider, extendTheme } from 'native-base';
 export { useClipboard, useContrastText, useMediaQuery, useSx, useToken } from 'native-base';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
@@ -11,10 +11,9 @@ import _typeof from '@babel/runtime/helpers/typeof';
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import { SpinnerGapRegularIcon, UserRegularIcon, XRegularIcon, ArrowLeftRegularIcon, CaretUpFillIcon, CaretDownFillIcon, MapPinRegularIcon, EyeClosedRegularIcon, EyeRegularIcon, CheckCircleFillIcon, CaretDownRegularIcon, CaretRightRegularIcon, InfoRegularIcon, WarningRegularIcon, CheckRegularIcon, WarningCircleRegularIcon, ArrowCounterClockwiseRegularIcon, InfoFillIcon, WarningCircleFillIcon, WarningFillIcon } from '@ornikar/kitt-icons/phosphor';
-import { Animated, Easing, StyleSheet, Modal, ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, useWindowDimensions } from 'react-native';
+import { Animated, Easing, ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, StyleSheet, useWindowDimensions } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import { createPortal } from 'react-dom';
-import Animated$1, { useAnimatedStyle, withTiming, Easing as Easing$1, runOnJS, useSharedValue, withSpring, interpolateColor, useAnimatedProps, withDelay, withRepeat, interpolate, ReducedMotionConfig, ReduceMotion } from 'react-native-reanimated';
 import { CSSTransition } from 'react-transition-group';
 import { parse } from '@twemoji/parser';
 import Downshift, { useSelect } from 'downshift';
@@ -23,6 +22,7 @@ import { launchImageLibraryAsync } from 'expo-image-picker';
 import { useDebouncedCallback } from 'use-debounce';
 import { Loader } from '@googlemaps/js-api-loader';
 import { parseNumber, getCountryCallingCode, isValidNumber } from 'libphonenumber-js';
+import Animated$1, { useAnimatedStyle, withSpring, withTiming, useSharedValue, interpolateColor, Easing as Easing$1, useAnimatedProps, withDelay, withRepeat, interpolate, runOnJS, ReducedMotionConfig, ReduceMotion } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Svg, { Circle as Circle$1 } from 'react-native-svg';
 import { useFloating, autoUpdate, offset, autoPlacement, shift, arrow } from '@floating-ui/react-dom';
@@ -2863,7 +2863,7 @@ function ActionCardDisabled(_ref) {
   });
 }
 
-var _excluded$P = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
+var _excluded$Q = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
 function ActionCard(_ref) {
   var children = _ref.children,
     _ref$variant = _ref.variant,
@@ -2876,7 +2876,7 @@ function ActionCard(_ref) {
     isHovered = _ref.isHovered,
     isPressed = _ref.isPressed,
     isFocused = _ref.isFocused,
-    props = _objectWithoutProperties(_ref, _excluded$P);
+    props = _objectWithoutProperties(_ref, _excluded$Q);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     children: disabled ? /*#__PURE__*/jsx(ActionCardDisabled, {
       borderRadius: borderRadius,
@@ -3208,7 +3208,7 @@ var getTypographyTypeWithAncestorValue = function (type, typographyTypeInContext
   return !!isAllValuesUndefined && !!typographyTypeInContext ? typographyTypeInContext : type;
 };
 
-var _excluded$O = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$P = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var TypographyFamilyContext = /*#__PURE__*/createContext(null);
 var TypographyTypeContext = /*#__PURE__*/createContext(null);
 var TypographyVariantContext = /*#__PURE__*/createContext(undefined);
@@ -3333,7 +3333,7 @@ var TypographyBase = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     } : _ref2$type,
     variant = _ref2.variant,
     color = _ref2.color,
-    otherProps = _objectWithoutProperties(_ref2, _excluded$O);
+    otherProps = _objectWithoutProperties(_ref2, _excluded$P);
   var sx = useSx();
 
   // ancestors
@@ -3495,12 +3495,12 @@ function Icon(_ref) {
   });
 }
 
-var _excluded$N = ["color", "size"],
+var _excluded$O = ["color", "size"],
   _excluded2$6 = ["color"];
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
     size = _ref.size,
-    props = _objectWithoutProperties(_ref, _excluded$N);
+    props = _objectWithoutProperties(_ref, _excluded$O);
   var colorValue = getTypographyColorValue(color);
   var sx = useSx();
   var _sx = sx({
@@ -3540,7 +3540,7 @@ var getButtonTextColorByType = function (type, variant, isHovered, isPressed, is
   return "".concat(baseKey, ".default");
 };
 
-var _excluded$M = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing", "size"];
+var _excluded$N = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing", "size"];
 function ButtonContentChildren(_ref) {
   var type = _ref.type,
     icon = _ref.icon,
@@ -3640,7 +3640,7 @@ function ButtonContent(_ref2) {
     _ref2.isFocused;
     var innerSpacing = _ref2.innerSpacing,
     size = _ref2.size,
-    props = _objectWithoutProperties(_ref2, _excluded$M);
+    props = _objectWithoutProperties(_ref2, _excluded$N);
   var color = getButtonTextColorByType(type, variant, isHovered, isPressed, isDisabled);
   return /*#__PURE__*/jsx(View, {
     _web: {
@@ -3665,6 +3665,81 @@ function ButtonContent(_ref2) {
   });
 }
 
+function ButtonGauge(_ref) {
+  var duration = _ref.duration,
+    running = _ref.running,
+    onEnded = _ref.onEnded;
+  var _useState = useState(100),
+    _useState2 = _slicedToArray(_useState, 2),
+    translate = _useState2[0],
+    setTranslate = _useState2[1];
+  var startTimeRef = useRef(0);
+  var pauseTimeRef = useRef(0);
+  var rafRef = useRef(undefined);
+  var distance = 100;
+  var draw = useCallback(function (timestamp) {
+    var timeElapsedSinceStart = timestamp - startTimeRef.current;
+    // Since the time between frame is not reliable and regular, we have to
+    // limit the progress to prevent overflows
+    var safeProgress = Math.min(distance * timeElapsedSinceStart / duration, distance);
+    setTranslate(safeProgress);
+    if (safeProgress < distance) {
+      if (!rafRef) return;
+      rafRef.current = requestAnimationFrame(draw);
+      return;
+    }
+    onEnded();
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+    }
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  useLayoutEffect(function () {
+    if (running) {
+      // Resuming from pause
+      if (pauseTimeRef.current > 0) {
+        startTimeRef.current += global.performance.now() - pauseTimeRef.current;
+        draw(global.performance.now());
+        return;
+      }
+
+      // First launch
+      startTimeRef.current = global.performance.now();
+      draw(startTimeRef.current);
+    }
+
+    // On pause
+    if (!running && rafRef.current) {
+      pauseTimeRef.current = global.performance.now();
+      cancelAnimationFrame(rafRef.current);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [running]);
+  useEffect(function () {
+    return function () {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/jsx(View, {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    overflow: "hidden",
+    alignItems: "flex-end",
+    borderRadius: "kitt.button.borderRadius",
+    children: /*#__PURE__*/jsx(View, {
+      width: "".concat(translate, "%"),
+      height: "100%",
+      backgroundColor: "kitt.palettes.deepPurple['white-alpha.20']"
+    })
+  });
+}
+
 function ButtonPadding(_ref) {
   var children = _ref.children,
     size = _ref.size,
@@ -3736,6 +3811,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     hrefAttrs = _ref.hrefAttrs,
     withBadge = _ref.withBadge,
     badgeCount = _ref.badgeCount,
+    timerAttrs = _ref.timerAttrs,
     _ref$accessibilityRol = _ref.accessibilityRole,
     accessibilityRole = _ref$accessibilityRol === void 0 ? 'button' : _ref$accessibilityRol,
     _ref$innerSpacing = _ref.innerSpacing,
@@ -3780,7 +3856,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
-      return /*#__PURE__*/jsx(AnimatedContainer$2, {
+      return /*#__PURE__*/jsxs(AnimatedContainer$2, {
         animatedStyles: animatedStyles,
         type: type,
         isHovered: isHovered || isHoveredInternal,
@@ -3790,7 +3866,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
         size: size,
         isIconOnly: isIconOnly,
         isStretch: stretch,
-        children: /*#__PURE__*/jsxs(ButtonPadding, {
+        children: [timerAttrs ? /*#__PURE__*/jsx(ButtonGauge, _objectSpread({}, timerAttrs)) : null, /*#__PURE__*/jsxs(ButtonPadding, {
           size: size,
           isIconOnly: isIconOnly,
           children: [/*#__PURE__*/jsx(ButtonContent, {
@@ -3812,7 +3888,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
             isHovered: isHovered,
             isPressed: isPressed
           })]
-        })
+        })]
       });
     }
   });
@@ -3865,7 +3941,7 @@ function LoaderIcon(_ref) {
   });
 }
 
-var _excluded$L = ["as", "onPress", "disabled", "icon", "stretch"];
+var _excluded$M = ["as", "onPress", "disabled", "icon", "stretch"];
 var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var as = _ref.as,
     onPress = _ref.onPress,
@@ -3876,7 +3952,7 @@ var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       base: true,
       medium: false
     } : _ref$stretch,
-    props = _objectWithoutProperties(_ref, _excluded$L);
+    props = _objectWithoutProperties(_ref, _excluded$M);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isLoading = _useState2[0],
@@ -3954,7 +4030,7 @@ function ActionsButton(_ref) {
   }, props));
 }
 
-var _excluded$K = ["children", "layout", "reversed"];
+var _excluded$L = ["children", "layout", "reversed"];
 function getCurrentLayout(layout) {
   if (!layout) return {
     base: 'stretch',
@@ -3986,7 +4062,7 @@ function Actions(_ref) {
     reversed = _ref$reversed === void 0 ? {
       base: false
     } : _ref$reversed,
-    props = _objectWithoutProperties(_ref, _excluded$K);
+    props = _objectWithoutProperties(_ref, _excluded$L);
   var shouldReverse = typeof reversed === 'boolean' ? {
     base: !!reversed
   } : createResponsiveStyleFromProp(reversed, true, false);
@@ -4039,7 +4115,7 @@ function getInitials(firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
 }
 
-var _excluded$J = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
+var _excluded$K = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
 function AvatarContent(_ref) {
   var size = _ref.size,
     src = _ref.src,
@@ -4102,7 +4178,7 @@ function Avatar(_ref2) {
     height = _ref2.height,
     dark = _ref2.dark,
     disabled = _ref2.disabled,
-    props = _objectWithoutProperties(_ref2, _excluded$J);
+    props = _objectWithoutProperties(_ref2, _excluded$K);
   var currentSize = getCurrentSize({
     size: size,
     sizeVariant: sizeVariant
@@ -4288,159 +4364,84 @@ var CardModalRotationContainer = /*#__PURE__*/forwardRef(function (props, ref) {
   }));
 });
 
-function NativeOpacityAnimation(_ref) {
-  var visible = _ref.visible,
-    children = _ref.children,
-    onExited = _ref.onExited;
-  var theme = useTheme();
-  var hasRunAnimationRef = useRef(false);
-  function handleAnimationFinished() {
-    if (visible) {
-      hasRunAnimationRef.current = true;
-    }
-    if (!visible && hasRunAnimationRef.current) {
-      onExited();
-    }
-  }
-  var opacityStyle = useAnimatedStyle(function () {
-    var _theme$kitt$cardModal = theme.kitt.cardModal.animation.overlay,
-      duration = _theme$kitt$cardModal.duration,
-      easing = _theme$kitt$cardModal.easing;
-    var x1 = easing.x1,
-      y1 = easing.y1,
-      x2 = easing.x2,
-      y2 = easing.y2;
-    return {
-      opacity: withTiming(visible ? 1 : 0, {
-        duration: duration,
-        easing: Easing$1.bezier(x1, y1, x2, y2)
-      }, function (isFinished) {
-        if (!isFinished) return;
-        runOnJS(handleAnimationFinished)();
-      })
-    };
-  }, [visible]);
-  return /*#__PURE__*/jsx(Animated$1.View, {
-    style: [StyleSheet.absoluteFillObject, opacityStyle],
-    children: children
-  });
-}
-
-function NativeRotationAnimation(_ref) {
-  var visible = _ref.visible,
-    children = _ref.children,
-    onEntered = _ref.onEntered,
-    onExited = _ref.onExited;
-  var theme = useTheme();
-  var hasRunAnimationRef = useRef(false);
-  var rotation = useSharedValue(0.8);
-  function handleAnimationFinished() {
-    if (visible) {
-      if (onEntered) onEntered();
-      hasRunAnimationRef.current = true;
-    }
-    if (!visible && hasRunAnimationRef.current) onExited();
-  }
-  var animatedStyle = useAnimatedStyle(function () {
-    var _theme$kitt$cardModal = theme.kitt.cardModal.animation.content,
-      duration = _theme$kitt$cardModal.duration,
-      easing = _theme$kitt$cardModal.easing;
-    var x1 = easing.x1,
-      y1 = easing.y1,
-      x2 = easing.x2,
-      y2 = easing.y2;
-    rotation.value = withTiming(visible ? 0 : 5, {
-      duration: duration,
-      easing: Easing$1.bezier(x1, y1, x2, y2)
-    }, function (isFinished) {
-      if (!isFinished) return;
-      runOnJS(handleAnimationFinished)();
-    });
-    return {
-      opacity: withTiming(visible ? 1 : 0, {
-        duration: duration,
-        easing: Easing$1.bezier(x1, y1, x2, y2)
-      }),
-      transform: [{
-        scale: withTiming(visible ? 1 : 0.8, {
-          duration: duration,
-          easing: Easing$1.bezier(x1, y1, x2, y2)
-        })
-      }, {
-        rotateZ: "".concat(rotation.value, "deg")
-      }]
-    };
-  }, [rotation, visible]);
-  return /*#__PURE__*/jsx(Animated$1.View, {
-    style: [{
-      flexShrink: 1
-    }, animatedStyle],
-    children: children
-  });
-}
-
+var _excluded$J = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
+var contentAnimationEnter$1 = "kitt-u_contentAnimationEnter_c11xxy4r";
+var contentAnimatioEnterActive$1 = "kitt-u_contentAnimatioEnterActive_cl52117";
+var contentAnimatioExit$1 = "kitt-u_contentAnimatioExit_cyjczep";
+var contentAnimatioExitActive$1 = "kitt-u_contentAnimatioExitActive_cpsy3dt";
+var contentAnimationClassNames$1 = {
+  appear: contentAnimationEnter$1,
+  appearActive: contentAnimatioEnterActive$1,
+  enter: contentAnimationEnter$1,
+  enterActive: contentAnimatioEnterActive$1,
+  exit: contentAnimatioExit$1,
+  exitActive: contentAnimatioExitActive$1
+};
+var opacityEnter$2 = "kitt-u_opacityEnter_o1ae40dx";
+var opacityEnterActive$2 = "kitt-u_opacityEnterActive_o1t4vl7b";
+var opacityExit$2 = "kitt-u_opacityExit_ogyytm1";
+var opacityExitActive$2 = "kitt-u_opacityExitActive_o18xvk52";
+var opacityClassNames$2 = {
+  appear: opacityEnter$2,
+  appearActive: opacityEnterActive$2,
+  enter: opacityEnter$2,
+  enterActive: opacityEnterActive$2,
+  exit: opacityExit$2,
+  exitActive: opacityExitActive$2
+};
 function CardModalAnimation(_ref) {
-  var visible = _ref.visible,
-    children = _ref.children,
+  var children = _ref.children,
+    _ref$appear = _ref.appear,
+    appear = _ref$appear === void 0 ? true : _ref$appear,
+    visible = _ref.visible,
+    _ref$unmountOnExit = _ref.unmountOnExit,
+    unmountOnExit = _ref$unmountOnExit === void 0 ? true : _ref$unmountOnExit,
+    _ref$isAnimationEnabl = _ref.isAnimationEnabled,
+    isAnimationEnabled = _ref$isAnimationEnabl === void 0 ? true : _ref$isAnimationEnabl,
     onEnter = _ref.onEnter,
     onEntered = _ref.onEntered,
     onExit = _ref.onExit,
     onExited = _ref.onExited,
-    onClose = _ref.onClose;
-  var _useState = useState(visible),
-    _useState2 = _slicedToArray(_useState, 2),
-    isModalVisible = _useState2[0],
-    setIsModalVisible = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isContentVisible = _useState4[0],
-    setIsContentVisible = _useState4[1];
-  var handleAnimationExited = function () {
-    setIsModalVisible(false);
-    // Android doesn't handle the onDismiss callback on the modal, we need to call it manually
+    onClose = _ref.onClose,
+    props = _objectWithoutProperties(_ref, _excluded$J);
+  // 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
+  var overlayRef = useRef(null);
+  var contentRef = useRef(null);
+  var theme = useTheme();
+  var animation = theme.kitt.cardModal.animation;
+  var sharedProps = {
+    "in": visible,
+    appear: appear,
+    unmountOnExit: unmountOnExit
   };
-  useEffect(function () {
-    if (!(!visible && isContentVisible)) return;
-    if (onExit) onExit();
-    setIsContentVisible(false);
-  }, [visible, isContentVisible, onExit]);
-  return /*#__PURE__*/jsx(Modal, {
-    transparent: true,
-    supportedOrientations: ['landscape', 'portrait'],
-    visible: isModalVisible,
-    onShow: function () {
-      if (onEnter) onEnter();
-      setIsContentVisible(true);
-    },
-    onDismiss: function () {
-      if (onExited) onExited();
-    },
-    children: /*#__PURE__*/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 DialogModalAnimation as well
-    // TODO [expo@>=53]: Check if still needed
-    , {
-      height: undefined,
-      position: "relative",
-      flexGrow: 1,
-      justifyContent: "center",
-      alignItems: "center",
-      children: [/*#__PURE__*/jsx(NativeOpacityAnimation, {
-        visible: isContentVisible,
-        onExited: handleAnimationExited,
-        children: /*#__PURE__*/jsx(Overlay, {
-          onPress: onClose
-        })
-      }), /*#__PURE__*/jsx(CardModalRotationContainer, {
-        children: /*#__PURE__*/jsx(NativeRotationAnimation, {
-          visible: isContentVisible,
-          onExited: handleAnimationExited,
-          onEntered: onEntered,
-          children: children
-        })
-      })]
-    })
-  });
+  return /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread({}, props), {}, {
+    height: "100%",
+    justifyContent: "center",
+    children: [/*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
+      nodeRef: overlayRef,
+      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
+      classNames: opacityClassNames$2,
+      children: /*#__PURE__*/jsx(Overlay, {
+        ref: overlayRef,
+        onPress: onClose
+      })
+    })), /*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
+      nodeRef: contentRef,
+      timeout: isAnimationEnabled ? animation.content.duration : 0,
+      classNames: contentAnimationClassNames$1,
+      onEnter: onEnter,
+      onEntered: onEntered,
+      onExit: onExit,
+      onExited: onExited,
+      children: /*#__PURE__*/jsx(CardModalRotationContainer, {
+        ref: contentRef,
+        alignItems: "center",
+        margin: "auto",
+        children: children
+      })
+    }))]
+  }));
 }
 
 var _excluded$I = ["children", "visible", "onClose", "onExited"];