@ornikar/kitt-universal 9.30.2 → 9.31.0

package/dist/index-browser-all.es.js

@@ -918,6 +918,7 @@ var lateOceanColorPalette = {
   englishVermillon: '#D44148',
   goldCrayola: '#F8C583',
   aero: '#89BDDD',
+  seaShell: '#FFF9F3',
   transparent: 'transparent',
   moonPurple: '#DBD6F9',
   moonPurpleLight1: '#EDEBFC'
@@ -5850,12 +5851,13 @@ function ContentPadding(_ref2) {
   }));
 }
 
-var _excluded$6 = ["children", "shouldHandleBottomNotch", "style"];
+var _excluded$6 = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
 var StyledViewWithPadding = /*#__PURE__*/styled(ContentPadding).withConfig({
   displayName: "Body__StyledViewWithPadding"
 })(["padding-top:", "px;padding-bottom:", "px;"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.spacing * 6;
+  var theme = _ref.theme,
+    $insetTop = _ref.$insetTop;
+  return Math.max(theme.kitt.spacing * 6, $insetTop);
 }, function (_ref2) {
   var theme = _ref2.theme,
     $insetBottom = _ref2.$insetBottom;
@@ -5865,12 +5867,16 @@ function Body(_ref3) {
   var children = _ref3.children,
     shouldHandleBottomNotch = _ref3.shouldHandleBottomNotch,
     style = _ref3.style,
+    shouldHandleTopNotch = _ref3.shouldHandleTopNotch,
     props = _objectWithoutProperties(_ref3, _excluded$6);
   var _useSafeAreaInsets = useSafeAreaInsets(),
-    bottom = _useSafeAreaInsets.bottom;
+    bottom = _useSafeAreaInsets.bottom,
+    top = _useSafeAreaInsets.top;
   var insetBottom = shouldHandleBottomNotch ? bottom : 0;
+  var insetTop = shouldHandleTopNotch ? top : 0;
   return /*#__PURE__*/jsx(StyledViewWithPadding, _objectSpread(_objectSpread({}, props), {}, {
     $insetBottom: insetBottom,
+    $insetTop: insetTop,
     style: style,
     children: children
   }));
@@ -5913,9 +5919,10 @@ function Footer(_ref5) {
 
 var HeaderContainer = /*#__PURE__*/styled(ContentPadding).withConfig({
   displayName: "Header__HeaderContainer"
-})(["height:", "px;width:100%;justify-content:center;background-color:", ";padding-right:", "px;padding-left:", "px;", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.navigationModal.height;
+})(["height:", "px;width:100%;justify-content:center;background-color:", ";padding-right:", "px;padding-left:", "px;padding-top:", "px;", ";"], function (_ref) {
+  var theme = _ref.theme,
+    $insetTop = _ref.$insetTop;
+  return theme.kitt.navigationModal.height + $insetTop;
 }, function (_ref2) {
   var theme = _ref2.theme,
     $isTransparent = _ref2.$isTransparent;
@@ -5930,64 +5937,73 @@ var HeaderContainer = /*#__PURE__*/styled(ContentPadding).withConfig({
     $hasLeft = _ref4.$hasLeft;
   return $hasLeft ? theme.kitt.spacing * 2 : theme.kitt.navigationModal.padding;
 }, function (_ref5) {
-  var $hasSeparator = _ref5.$hasSeparator;
+  var $insetTop = _ref5.$insetTop;
+  return $insetTop;
+}, function (_ref6) {
+  var $hasSeparator = _ref6.$hasSeparator;
   if (!$hasSeparator) return undefined;
-  return css(["border-bottom-width:1px;border-bottom-color:", ";"], function (_ref6) {
-    var theme = _ref6.theme;
+  return css(["border-bottom-width:1px;border-bottom-color:", ";"], function (_ref7) {
+    var theme = _ref7.theme;
     return theme.kitt.colors.separator;
   });
 });
 var Row = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "Header__Row"
-})(["flex-direction:row;justify-content:", ";align-items:center;"], function (_ref7) {
-  var $hasContent = _ref7.$hasContent,
-    $hasLeft = _ref7.$hasLeft;
+})(["flex-direction:row;justify-content:", ";align-items:center;"], function (_ref8) {
+  var $hasContent = _ref8.$hasContent,
+    $hasLeft = _ref8.$hasLeft;
   return !$hasContent && !$hasLeft ? 'flex-end' : 'space-between';
 });
 var ButtonContainer = /*#__PURE__*/styled.View.withConfig({
   displayName: "Header__ButtonContainer"
-})(["width:", "px;"], function (_ref8) {
-  var theme = _ref8.theme;
+})(["width:", "px;"], function (_ref9) {
+  var theme = _ref9.theme;
   return theme.kitt.iconButton.width;
 });
 var ChildrenComponent = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "Header__ChildrenComponent"
-})(["flex:1;align-items:center;", ";"], function (_ref9) {
-  var theme = _ref9.theme,
-    $hasLeft = _ref9.$hasLeft,
-    $hasRight = _ref9.$hasRight;
+})(["flex:1;align-items:center;", ";"], function (_ref10) {
+  var theme = _ref10.theme,
+    $hasLeft = _ref10.$hasLeft,
+    $hasRight = _ref10.$hasRight;
   var paddingHorizontal = theme.kitt.spacing * 2;
   return css(["padding-right:", "px;padding-left:", "px;"], $hasRight ? paddingHorizontal : 0, $hasLeft ? paddingHorizontal : 0);
 });
 var HeaderTitle = /*#__PURE__*/styled(Typography.Text).withConfig({
   displayName: "Header__HeaderTitle"
-})(["flex:1;text-align:", ";", ";"], function (_ref10) {
-  var $hasLeft = _ref10.$hasLeft,
-    $hasRight = _ref10.$hasRight;
+})(["flex:1;text-align:", ";", ";"], function (_ref11) {
+  var $hasLeft = _ref11.$hasLeft,
+    $hasRight = _ref11.$hasRight;
   if (!$hasLeft && $hasRight) return 'left';
   return 'center';
-}, function (_ref11) {
-  var theme = _ref11.theme,
-    $hasLeft = _ref11.$hasLeft,
-    $hasRight = _ref11.$hasRight;
+}, function (_ref12) {
+  var theme = _ref12.theme,
+    $hasLeft = _ref12.$hasLeft,
+    $hasRight = _ref12.$hasRight;
   var paddingHorizontal = theme.kitt.spacing * 2;
   return css(["padding-right:", "px;padding-left:", "px;"], $hasRight ? paddingHorizontal : 0, $hasLeft ? paddingHorizontal : 0);
 });
-function Header(_ref12) {
-  var _ref12$hasSeparator = _ref12.hasSeparator,
-    hasSeparator = _ref12$hasSeparator === void 0 ? true : _ref12$hasSeparator,
-    isTransparent = _ref12.isTransparent,
-    title = _ref12.title,
-    children = _ref12.children,
-    right = _ref12.right,
-    left = _ref12.left,
-    style = _ref12.style;
+function Header(_ref13) {
+  var _ref13$hasSeparator = _ref13.hasSeparator,
+    hasSeparator = _ref13$hasSeparator === void 0 ? true : _ref13$hasSeparator,
+    isTransparent = _ref13.isTransparent,
+    title = _ref13.title,
+    children = _ref13.children,
+    right = _ref13.right,
+    left = _ref13.left,
+    _ref13$shouldHandleTo = _ref13.shouldHandleTopNotch,
+    shouldHandleTopNotch = _ref13$shouldHandleTo === void 0 ? true : _ref13$shouldHandleTo,
+    style = _ref13.style;
+  var _useSafeAreaInsets = useSafeAreaInsets(),
+    top = _useSafeAreaInsets.top;
+  var insetTop = shouldHandleTopNotch ? top : 0;
   var sharedProps = {
     $hasLeft: Boolean(left),
     $hasRight: Boolean(right)
   };
   return /*#__PURE__*/jsx(HeaderContainer, {
     $isTransparent: isTransparent,
+    $insetTop: insetTop,
     $hasSeparator: hasSeparator,
     $hasLeft: Boolean(left),
     $hasRight: Boolean(right),
@@ -6059,9 +6075,7 @@ function NativeOpacityAnimation(_ref) {
 }
 
 function NativeSlideInAnimation(_ref) {
-  var _ref$topInset = _ref.topInset,
-    topInset = _ref$topInset === void 0 ? 0 : _ref$topInset,
-    visible = _ref.visible,
+  var visible = _ref.visible,
     children = _ref.children,
     onEntered = _ref.onEntered,
     onExited = _ref.onExited;
@@ -6078,7 +6092,6 @@ function NativeSlideInAnimation(_ref) {
     // Since animation callback is called on component mount, we must make sure that the animation has been runed once to call it an exit
     if (!visible && hasRunAnimationRef.current) onExited();
   }
-  var viewportHeight = wHeight - topInset;
   var translateStyle = useAnimatedStyle(function () {
     var _f = function () {
       var _theme$kitt$navigatio = theme.kitt.navigationModal.animation.content,
@@ -6091,7 +6104,7 @@ function NativeSlideInAnimation(_ref) {
         y2 = _easing[3];
       return {
         transform: [{
-          translateY: withTiming(visible ? 0 : viewportHeight, {
+          translateY: withTiming(visible ? 0 : wHeight, {
             duration: duration,
             easing: Easing$1.bezier(x1, y1, x2, y2)
           }, function () {
@@ -6105,7 +6118,7 @@ function NativeSlideInAnimation(_ref) {
             };
             _f.asString = "function _f(isFinished){const{runOnJS,handleAnimationFinished}=jsThis._closure;{if(!isFinished)return;runOnJS(handleAnimationFinished)();}}";
             _f.__workletHash = 14707844242190;
-            _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/NavigationModal/components/NativeSlideInAnimation.tsx (49:12)";
+            _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/NavigationModal/components/NativeSlideInAnimation.tsx (45:12)";
             return _f;
           }())
         }]
@@ -6123,24 +6136,27 @@ function NativeSlideInAnimation(_ref) {
       },
       withTiming: withTiming,
       visible: visible,
-      viewportHeight: viewportHeight,
+      wHeight: wHeight,
       Easing: {
         bezier: Easing$1.bezier
       },
       runOnJS: runOnJS,
       handleAnimationFinished: handleAnimationFinished
     };
-    _f.asString = "function _f(){const{theme,withTiming,visible,viewportHeight,Easing,runOnJS,handleAnimationFinished}=jsThis._closure;{const{duration:duration,easing:easing}=theme.kitt.navigationModal.animation.content;const[x1,y1,x2,y2]=easing;return{transform:[{translateY:withTiming(visible?0:viewportHeight,{duration:duration,easing:Easing.bezier(x1,y1,x2,y2)},function(isFinished){if(!isFinished)return;runOnJS(handleAnimationFinished)();})}]};}}";
-    _f.__workletHash = 505483620545;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/NavigationModal/components/NativeSlideInAnimation.tsx (39:42)";
+    _f.asString = "function _f(){const{theme,withTiming,visible,wHeight,Easing,runOnJS,handleAnimationFinished}=jsThis._closure;{const{duration:duration,easing:easing}=theme.kitt.navigationModal.animation.content;const[x1,y1,x2,y2]=easing;return{transform:[{translateY:withTiming(visible?0:wHeight,{duration:duration,easing:Easing.bezier(x1,y1,x2,y2)},function(isFinished){if(!isFinished)return;runOnJS(handleAnimationFinished)();})}]};}}";
+    _f.__workletHash = 14160876288353;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/NavigationModal/components/NativeSlideInAnimation.tsx (35:42)";
     return _f;
   }());
   return /*#__PURE__*/jsx(Animated.View, {
     style: [{
       transform: [{
-        translateY: viewportHeight
+        translateY: wHeight
       }]
-    }, translateStyle],
+    }, translateStyle, {
+      width: '100%',
+      flex: 1
+    }],
     children: children
   });
 }
@@ -6152,8 +6168,6 @@ function NavigationModalAnimation(_ref) {
     onEntered = _ref.onEntered,
     onExit = _ref.onExit,
     onExited = _ref.onExited;
-  var _useSafeAreaInsets = useSafeAreaInsets(),
-    top = _useSafeAreaInsets.top;
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalVisible = _useState2[0],
@@ -6194,14 +6208,14 @@ function NavigationModalAnimation(_ref) {
         children: /*#__PURE__*/jsx(Overlay, {
           onPress: handleAnimationExited
         })
-      }), /*#__PURE__*/jsxs(NativeSlideInAnimation, {
-        topInset: top,
+      }), /*#__PURE__*/jsx(NativeSlideInAnimation, {
         visible: isContentVisible,
         onExited: handleAnimationExited,
         onEntered: onEntered,
-        children: [/*#__PURE__*/jsx(View, {
-          height: top
-        }), children]
+        children: /*#__PURE__*/jsx(View, {
+          flex: 1,
+          children: children
+        })
       })]
     })
   });