secullum-react-native-ui 4.18.2 → 4.18.4

package/lib/components/Modal.js

@@ -2,7 +2,32 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
 const React = require("react");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const layout_1 = require("../modules/layout");
 const react_native_1 = require("react-native");
+// From the most specific to the most generic, in the order Yoga resolves each edge.
+// paddingStart/End map to left/right in LTR, which is the only case we support.
+const paddingSources = {
+    top: ['paddingTop', 'paddingVertical', 'padding'],
+    bottom: ['paddingBottom', 'paddingVertical', 'padding'],
+    left: ['paddingStart', 'paddingLeft', 'paddingHorizontal', 'padding'],
+    right: ['paddingEnd', 'paddingRight', 'paddingHorizontal', 'padding']
+};
+const resolvePadding = (style, edge) => {
+    for (const key of paddingSources[edge]) {
+        const value = style[key];
+        if (typeof value === 'number') {
+            return value;
+        }
+        // Percentages and 'auto' can't be added to an inset in dp. The safe area wins,
+        // since it's the one that can't be missing. If both are needed, declare the
+        // padding on the container instead.
+        if (value != null) {
+            return 0;
+        }
+    }
+    return 0;
+};
 class Modal extends React.Component {
     constructor() {
         super(...arguments);
@@ -22,8 +47,32 @@ class Modal extends React.Component {
         const { children, visible, overlayStyle, onRequestClose } = this.props;
         const { isMounted } = this.state;
         return (React.createElement(react_native_1.Modal, { animationType: react_native_1.Platform.OS === 'ios' ? 'none' : 'fade', transparent: true, visible: visible, supportedOrientations: ['landscape', 'portrait'], onRequestClose: onRequestClose, onShow: this.handleShow },
-            React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: onRequestClose },
-                React.createElement(react_native_1.View, { style: [styles.overlay, overlayStyle] }, react_native_1.Platform.OS !== 'android' || isMounted ? children : React.createElement(react_native_1.View, null)))));
+            React.createElement(react_native_safe_area_context_1.SafeAreaInsetsContext.Consumer, null, insets => {
+                const flattenedOverlayStyle = react_native_1.StyleSheet.flatten([
+                    styles.overlay,
+                    overlayStyle
+                ]);
+                // sec-issues#14678: On edge-to-edge the modal window is the whole screen,
+                // including the system bar areas, and React Native no longer applies
+                // fitsSystemWindows to that window. The safe area is added to the padding
+                // of the consumer that already declared it and is applied last, so that
+                // no overlayStyle accidentally overrides it. On Android, when the navigation
+                // bar moves to the side, the inset comes in from the left or right instead
+                // of from the bottom.
+                const safeAreaStyle = (0, layout_1.isEdgeToEdge)() && insets
+                    ? {
+                        paddingTop: resolvePadding(flattenedOverlayStyle, 'top') + insets.top,
+                        paddingBottom: resolvePadding(flattenedOverlayStyle, 'bottom') +
+                            insets.bottom,
+                        paddingLeft: resolvePadding(flattenedOverlayStyle, 'left') +
+                            insets.left,
+                        paddingRight: resolvePadding(flattenedOverlayStyle, 'right') +
+                            insets.right
+                    }
+                    : null;
+                return (React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: onRequestClose },
+                    React.createElement(react_native_1.View, { style: [flattenedOverlayStyle, safeAreaStyle] }, react_native_1.Platform.OS !== 'android' || isMounted ? children : React.createElement(react_native_1.View, null))));
+            })));
     }
 }
 exports.Modal = Modal;

package/lib/modules/layout.d.ts

@@ -1 +1,9 @@
 export declare const isTablet: () => boolean;
+/**
+ * Whether the app window draws behind the system bars (edge-to-edge).
+ * Starting on Android 15 (API 35) this mode is enforced, and the content has to
+ * reserve the status and navigation bar areas on its own.
+ *
+ * @see {@link https://developer.android.com/develop/ui/views/layout/edge-to-edge|Android documentation}
+ */
+export declare const isEdgeToEdge: () => boolean;

package/lib/modules/layout.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isTablet = void 0;
+exports.isEdgeToEdge = exports.isTablet = void 0;
 const react_native_1 = require("react-native");
 const isTablet = () => {
     if (react_native_1.Platform.OS === 'web') {
@@ -10,3 +10,14 @@ const isTablet = () => {
         react_native_1.Dimensions.get('window').width >= 500);
 };
 exports.isTablet = isTablet;
+/**
+ * Whether the app window draws behind the system bars (edge-to-edge).
+ * Starting on Android 15 (API 35) this mode is enforced, and the content has to
+ * reserve the status and navigation bar areas on its own.
+ *
+ * @see {@link https://developer.android.com/develop/ui/views/layout/edge-to-edge|Android documentation}
+ */
+const isEdgeToEdge = () => {
+    return react_native_1.Platform.OS === 'android' && Number(react_native_1.Platform.Version) >= 35;
+};
+exports.isEdgeToEdge = isEdgeToEdge;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "secullum-react-native-ui",
-  "version": "4.18.2",
+  "version": "4.18.4",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
@@ -46,13 +46,15 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-native": "^0.52 || ^0.53 || ^0.54 || ^0.55 || ^0.63",
+    "react-native-safe-area-context": "^4.10.5",
     "rimraf": "^2.6.2",
     "typescript": "^4.8.3"
   },
   "peerDependencies": {
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-native": "^0.52 || ^0.53 || ^0.54 || ^0.55 || ^0.63"
+    "react-native": "^0.52 || ^0.53 || ^0.54 || ^0.55 || ^0.63",
+    "react-native-safe-area-context": ">=4.0.0"
   },
   "resolutions": {
     "docz-plugin-css/node-sass": "~9.0.0",