@ornikar/kitt-universal 9.2.0 → 9.3.0

package/dist/index-node-14.17.cjs.js

@@ -1433,6 +1433,11 @@ const listItem = {
   innerMargin: 8
 };
 
+const navigationModal = {
+  height: 56,
+  padding: 16
+};
+
 const pageLoader = {
   size: 60,
   strokeWidth: 3,
@@ -1578,7 +1583,8 @@ const theme = {
   skeleton,
   tag,
   tooltip,
-  typography
+  typography,
+  navigationModal
 };
 
 function matchWindowSize({
@@ -2247,7 +2253,7 @@ function IconButton({
   });
 }
 
-const OnCloseContext = /*#__PURE__*/React.createContext(() => {});
+const OnCloseContext$1 = /*#__PURE__*/React.createContext(() => {});
 
 const HeaderView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Header__HeaderView",
@@ -2281,7 +2287,7 @@ function ModalHeader({
   right,
   children
 }) {
-  const onClose = React.useContext(OnCloseContext);
+  const onClose = React.useContext(OnCloseContext$1);
   const isIconLeft = !!left;
   return /*#__PURE__*/jsxRuntime.jsxs(HeaderView, {
     children: [isIconLeft && /*#__PURE__*/jsxRuntime.jsx(LeftIconView, {
@@ -2321,7 +2327,7 @@ function Modal({
   onEntered,
   onExited
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(OnCloseContext.Provider, {
+  return /*#__PURE__*/jsxRuntime.jsx(OnCloseContext$1.Provider, {
     value: onClose,
     children: /*#__PURE__*/jsxRuntime.jsx(reactNative.Modal, {
       transparent: true,
@@ -2886,7 +2892,7 @@ function TextArea({ ...props
   });
 }
 
-const Body = /*#__PURE__*/styled__default.View.withConfig({
+const Body$1 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Body",
   componentId: "kitt-universal__sc-1ofncfn-0"
 })(["", " background-color:", ";flex:1;"], ({
@@ -2901,7 +2907,7 @@ const Body = /*#__PURE__*/styled__default.View.withConfig({
 function FullScreenModalBody({
   children
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Body, {
+  return /*#__PURE__*/jsxRuntime.jsx(Body$1, {
     children: children
   });
 }
@@ -2926,7 +2932,7 @@ function getHeaderHorizontalMediumPadding(spacing) {
   return spacing * 6;
 }
 
-const Header = /*#__PURE__*/styled__default.View.withConfig({
+const Header$1 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Header",
   componentId: "kitt-universal__sc-dfmxi1-1"
 })(["", ";border-bottom-color:", ";border-bottom-width:1px;flex-direction:row;align-items:center;"], ({
@@ -3003,7 +3009,7 @@ function FullScreenModalHeader({
     setRightWidth(event.nativeEvent.layout.width);
   };
 
-  return /*#__PURE__*/jsxRuntime.jsxs(Header, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Header$1, {
     insetTop: reactNative.Platform.OS === 'ios' ? undefined : top,
     children: [left ? /*#__PURE__*/jsxRuntime.jsx(SideContainer, {
       onLayout: e => handleLayoutChange(e, 'left'),
@@ -3368,6 +3374,69 @@ function Message({
   });
 }
 
+function ModalBehaviourPortal({
+  children
+}) {
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: children
+  });
+}
+
+const OnCloseContext = /*#__PURE__*/React.createContext(() => {});
+function OnCloseProvider({
+  children,
+  onClose
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(OnCloseContext.Provider, {
+    value: onClose,
+    children: children
+  });
+}
+function useOnCloseModalBehaviour() {
+  const onClose = React.useContext(OnCloseContext);
+  return onClose;
+}
+
+function CloseButton({
+  children,
+  onPress
+}) {
+  const onCloseContextCallback = useOnCloseModalBehaviour();
+  return /*#__PURE__*/React.cloneElement(children, {
+    onPress: () => {
+      if (onPress) onPress();
+      onCloseContextCallback();
+    }
+  });
+}
+
+const ModalBehaviourContainer = /*#__PURE__*/styled__default(reactNative.View).withConfig({
+  displayName: "ModalBehaviour__ModalBehaviourContainer",
+  componentId: "kitt-universal__sc-tj3606-0"
+})(["", ""], () => {
+  if (reactNative.Platform.OS !== 'web') return undefined;
+  return styled.css(["position:fixed;top:0;left:0;width:100%;"]);
+});
+function ModalBehaviour({
+  children,
+  visible,
+  style,
+  onClose
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(OnCloseProvider, {
+    onClose: onClose,
+    children: /*#__PURE__*/jsxRuntime.jsx(ModalBehaviourPortal, {
+      visible: visible,
+      children: visible ? /*#__PURE__*/jsxRuntime.jsx(ModalBehaviourContainer, {
+        style: style,
+        children: children
+      }) : null
+    })
+  });
+}
+ModalBehaviour.CloseButton = CloseButton;
+
 const createKittSpaces = spacing => {
   const sizes = {};
 
@@ -3517,6 +3586,225 @@ const View = nativeBase.View;
 const ScrollView = nativeBase.ScrollView;
 const Pressable = nativeBase.Pressable;
 
+const ViewWithPadding = /*#__PURE__*/styled__default(reactNative.View).withConfig({
+  displayName: "ContentPadding__ViewWithPadding",
+  componentId: "kitt-universal__sc-1rprqcv-0"
+})(["padding:", ";"], ({
+  theme
+}) => `0 ${theme.kitt.navigationModal.padding}px`);
+function ContentPadding({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(ViewWithPadding, { ...props,
+    children: children
+  });
+}
+
+const StyledViewWithPadding = /*#__PURE__*/styled__default(ContentPadding).withConfig({
+  displayName: "Body__StyledViewWithPadding",
+  componentId: "kitt-universal__sc-oc39vn-0"
+})(["padding-top:", "px;padding-bottom:", "px;"], ({
+  theme
+}) => theme.kitt.spacing * 6, ({
+  theme,
+  $insetBottom
+}) => Math.max(theme.kitt.spacing * 4, $insetBottom));
+function Body({
+  children,
+  shouldHandleBottomNotch,
+  style,
+  ...props
+}) {
+  const {
+    bottom
+  } = reactNativeSafeAreaContext.useSafeAreaInsets();
+  const insetBottom = shouldHandleBottomNotch ? bottom : 0;
+  return /*#__PURE__*/jsxRuntime.jsx(StyledViewWithPadding, { ...props,
+    $insetBottom: insetBottom,
+    style: style,
+    children: children
+  });
+}
+
+const FooterContainer = /*#__PURE__*/styled__default(ContentPadding).withConfig({
+  displayName: "Footer__FooterContainer",
+  componentId: "kitt-universal__sc-1yjprfg-0"
+})(["padding-top:", "px;padding-bottom:", "px;", ";"], ({
+  theme
+}) => theme.kitt.spacing * 3, ({
+  theme,
+  $insetBottom
+}) => Math.max(theme.kitt.spacing * 3, $insetBottom), ({
+  $hasSeparator
+}) => {
+  if (!$hasSeparator) return undefined;
+  return styled.css(["border-top-width:1px;border-top-color:", ";"], ({
+    theme
+  }) => theme.kitt.colors.separator);
+});
+function Footer({
+  shouldHandleBottomNotch = true,
+  hasSeparator = true,
+  children,
+  style
+}) {
+  const {
+    bottom
+  } = reactNativeSafeAreaContext.useSafeAreaInsets();
+  const insetBottom = shouldHandleBottomNotch ? bottom : 0;
+  return /*#__PURE__*/jsxRuntime.jsx(FooterContainer, {
+    $insetBottom: insetBottom,
+    $hasSeparator: hasSeparator,
+    style: style,
+    children: children
+  });
+}
+
+const HeaderContainer = /*#__PURE__*/styled__default(ContentPadding).withConfig({
+  displayName: "Header__HeaderContainer",
+  componentId: "kitt-universal__sc-1g7sbq-0"
+})(["height:", "px;width:100%;justify-content:center;background-color:", ";padding-right:", "px;padding-left:", "px;", ";"], ({
+  theme
+}) => theme.kitt.navigationModal.height, ({
+  theme,
+  $isTransparent
+}) => {
+  if ($isTransparent) return 'transparent';
+  return theme.kitt.colors.uiBackgroundLight;
+}, ({
+  theme,
+  $hasRight
+}) => $hasRight ? theme.kitt.spacing * 2 : theme.kitt.navigationModal.padding, ({
+  theme,
+  $hasLeft
+}) => $hasLeft ? theme.kitt.spacing * 2 : theme.kitt.navigationModal.padding, ({
+  $hasSeparator
+}) => {
+  if (!$hasSeparator) return undefined;
+  return styled.css(["border-bottom-width:1px;border-bottom-color:", ";"], ({
+    theme
+  }) => theme.kitt.colors.separator);
+});
+const Row = /*#__PURE__*/styled__default(reactNative.View).withConfig({
+  displayName: "Header__Row",
+  componentId: "kitt-universal__sc-1g7sbq-1"
+})(["flex-direction:row;justify-content:", ";align-items:center;"], ({
+  $hasContent,
+  $hasLeft
+}) => !$hasContent && !$hasLeft ? 'flex-end' : 'space-between');
+const ButtonContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Header__ButtonContainer",
+  componentId: "kitt-universal__sc-1g7sbq-2"
+})(["width:", "px;"], ({
+  theme
+}) => theme.kitt.iconButton.width);
+const ChildrenComponent = /*#__PURE__*/styled__default(reactNative.View).withConfig({
+  displayName: "Header__ChildrenComponent",
+  componentId: "kitt-universal__sc-1g7sbq-3"
+})(["flex:1;align-items:center;", ";"], ({
+  theme,
+  $hasLeft,
+  $hasRight
+}) => {
+  const paddingHorizontal = theme.kitt.spacing * 2;
+  return styled.css(["padding-right:", "px;padding-left:", "px;"], $hasRight ? paddingHorizontal : 0, $hasLeft ? paddingHorizontal : 0);
+});
+const HeaderTitle = /*#__PURE__*/styled__default(Typography.Text).withConfig({
+  displayName: "Header__HeaderTitle",
+  componentId: "kitt-universal__sc-1g7sbq-4"
+})(["flex:1;text-align:", ";", ";"], ({
+  $hasLeft,
+  $hasRight
+}) => {
+  if (!$hasLeft && $hasRight) return 'left';
+  return 'center';
+}, ({
+  theme,
+  $hasLeft,
+  $hasRight
+}) => {
+  const paddingHorizontal = theme.kitt.spacing * 2;
+  return styled.css(["padding-right:", "px;padding-left:", "px;"], $hasRight ? paddingHorizontal : 0, $hasLeft ? paddingHorizontal : 0);
+});
+function Header({
+  hasSeparator = true,
+  isTransparent,
+  title,
+  children,
+  right,
+  left,
+  style
+}) {
+  const sharedProps = {
+    $hasLeft: Boolean(left),
+    $hasRight: Boolean(right)
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(HeaderContainer, {
+    $isTransparent: isTransparent,
+    $hasSeparator: hasSeparator,
+    $hasLeft: Boolean(left),
+    $hasRight: Boolean(right),
+    style: style,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Row, {
+      $hasContent: Boolean(title || children),
+      ...sharedProps,
+      children: [left ? /*#__PURE__*/jsxRuntime.jsx(ButtonContainer, {
+        children: left
+      }) : null, title ? /*#__PURE__*/jsxRuntime.jsx(HeaderTitle, { ...sharedProps,
+        variant: "bold",
+        children: title
+      }) : null, children ? /*#__PURE__*/jsxRuntime.jsx(ChildrenComponent, { ...sharedProps,
+        children: children
+      }) : null, right || left ? /*#__PURE__*/jsxRuntime.jsx(ButtonContainer, {
+        children: right
+      }) : null]
+    })
+  });
+}
+
+const NavigationModalContainer = /*#__PURE__*/styled__default(reactNative.View).withConfig({
+  displayName: "NavigationModalContainer",
+  componentId: "kitt-universal__sc-n0bwvk-0"
+})(["position:relative;background-color:", ";flex:1;", ""], ({
+  theme,
+  $backgroundColor
+}) => $backgroundColor || theme.kitt.colors.uiBackgroundLight, () => {
+  if (reactNative.Platform.OS !== 'web') return undefined;
+  return styled.css(["min-height:100vh;"]);
+});
+
+const ContainerWithoutHeader = /*#__PURE__*/styled__default(reactNative.View).withConfig({
+  displayName: "NavigationModal__ContainerWithoutHeader",
+  componentId: "kitt-universal__sc-ls8t24-0"
+})(["justify-content:space-between;flex:1;"]);
+function NavigationModal({
+  body,
+  header,
+  footer,
+  backgroundColor
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(NavigationModalContainer, {
+    $backgroundColor: backgroundColor,
+    children: [header ? /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
+      children: header
+    }) : null, /*#__PURE__*/jsxRuntime.jsxs(ContainerWithoutHeader, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(reactNative.ScrollView, {
+        bounces: false,
+        contentContainerStyle: {
+          flexGrow: 1,
+          position: 'relative'
+        },
+        children: body
+      }), footer || null]
+    })]
+  });
+}
+NavigationModal.Header = Header;
+NavigationModal.Footer = Footer;
+NavigationModal.Body = Body;
+NavigationModal.Padding = ContentPadding;
+
 function Notification({
   type,
   children,
@@ -4841,6 +5129,8 @@ exports.LoaderIcon = LoaderIcon;
 exports.MatchWindowSize = MatchWindowSize;
 exports.Message = Message;
 exports.Modal = Modal;
+exports.ModalBehaviour = ModalBehaviour;
+exports.NavigationModal = NavigationModal;
 exports.Notification = Notification;
 exports.Overlay = Overlay;
 exports.PageLoader = PageLoader;