@umituz/react-native-design-system 4.25.88 → 4.25.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.88",
+  "version": "4.25.89",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/responsive/compute/computeResponsivePositioning.ts

@@ -28,7 +28,8 @@ export interface ComputedResponsivePositioning {
 }
 
 export const computeResponsivePositioning = (
-  insets: { top: number; bottom: number; left: number; right: number }
+  insets: { top: number; bottom: number; left: number; right: number },
+  dimensions?: { width: number; height: number }
 ): ComputedResponsivePositioning => ({
   horizontalPadding: getResponsiveHorizontalPadding(undefined, insets),
   verticalPadding: getResponsiveVerticalPadding(insets),
@@ -36,7 +37,7 @@ export const computeResponsivePositioning = (
   fabPosition: getResponsiveFABPosition(insets),
   screenLayoutConfig: getScreenLayoutConfig(insets),
   tabBarConfig: getResponsiveTabBarConfig(insets),
-  modalLayout: getResponsiveModalLayout(),
-  bottomSheetLayout: getResponsiveBottomSheetLayout(),
-  dialogLayout: getResponsiveDialogLayout(),
+  modalLayout: getResponsiveModalLayout(dimensions),
+  bottomSheetLayout: getResponsiveBottomSheetLayout(dimensions),
+  dialogLayout: getResponsiveDialogLayout(dimensions),
 });

package/src/responsive/responsiveModal.ts

@@ -70,9 +70,9 @@ export const getResponsiveMinModalHeight = (dimensions?: { height: number }): nu
   }
 };
 
-export const getResponsiveModalWidth = (): number => {
+export const getResponsiveModalWidth = (dimensions?: { width: number }): number => {
   try {
-    const { width } = getScreenDimensions();
+    const { width } = dimensions || getScreenDimensions();
     const isTabletDevice = isTablet();
 
     const widthPercent = isTabletDevice
@@ -89,9 +89,9 @@ export const getResponsiveModalWidth = (): number => {
   }
 };
 
-export const getResponsiveModalHeight = (): number => {
+export const getResponsiveModalHeight = (dimensions?: { height: number }): number => {
   try {
-    const { height } = getScreenDimensions();
+    const { height } = dimensions || getScreenDimensions();
     const isTabletDevice = isTablet();
 
     if (isTabletDevice) {
@@ -136,12 +136,12 @@ export const getResponsiveBackdropOpacity = (): number => {
   return MODAL_CONFIG.BACKDROP_OPACITY_DEFAULT;
 };
 
-export const getResponsiveModalLayout = (): ResponsiveModalLayout => {
+export const getResponsiveModalLayout = (dimensions?: { width: number; height: number }): ResponsiveModalLayout => {
   const isTabletDevice = isTablet();
 
   return {
-    width: getResponsiveModalWidth(),
-    height: getResponsiveModalHeight(),
+    width: getResponsiveModalWidth(dimensions),
+    height: getResponsiveModalHeight(dimensions),
     maxWidth: getResponsiveModalMaxWidth(),
     borderRadius: getResponsiveModalBorderRadius(),
     backdropOpacity: getResponsiveBackdropOpacity(),
@@ -151,8 +151,8 @@ export const getResponsiveModalLayout = (): ResponsiveModalLayout => {
   };
 };
 
-export const getResponsiveBottomSheetLayout = (): ResponsiveBottomSheetLayout => {
-  const { height } = getScreenDimensions();
+export const getResponsiveBottomSheetLayout = (dimensions?: { width: number; height: number }): ResponsiveBottomSheetLayout => {
+  const { height } = dimensions || getScreenDimensions();
 
   return {
     minHeight: MODAL_CONFIG.BOTTOM_SHEET_MIN_HEIGHT,
@@ -161,8 +161,8 @@ export const getResponsiveBottomSheetLayout = (): ResponsiveBottomSheetLayout =>
   };
 };
 
-export const getResponsiveDialogLayout = (): ResponsiveDialogLayout => {
-  const { width, height } = getScreenDimensions();
+export const getResponsiveDialogLayout = (dimensions?: { width: number; height: number }): ResponsiveDialogLayout => {
+  const { width, height } = dimensions || getScreenDimensions();
 
   return {
     width: Math.min(

package/src/responsive/useResponsive.ts

@@ -59,7 +59,7 @@ export const useResponsive = (): UseResponsiveReturn => {
       const dimensions = { width, height };
       const deviceInfo = computeDeviceInfo(dimensions);
       const sizes = computeResponsiveSizes(dimensions);
-      const positioning = computeResponsivePositioning(insets);
+      const positioning = computeResponsivePositioning(insets, dimensions);
       const onboarding = computeOnboardingSizes(deviceInfo);
       const iPadLayout = deviceInfo.isTabletDevice ? getIPadLayoutInfo() : null;