@react-navigation/elements 2.0.0-alpha.12 → 2.0.0-alpha.13

package/lib/commonjs/getDefaultSidebarWidth.js

@@ -4,23 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getDefaultSidebarWidth = void 0;
-var _reactNative = require("react-native");
+const APPROX_APP_BAR_HEIGHT = 56;
+const DEFAULT_DRAWER_WIDTH = 360;
 const getDefaultSidebarWidth = _ref => {
   let {
-    height,
     width
   } = _ref;
-  /*
-   * Default sidebar width is screen width - header height
-   * with a max width of 280 on mobile and 320 on tablet
-   * https://material.io/components/navigation-drawer
+  /**
+   * Default sidebar width is 360dp
+   * On screens smaller than 320dp, ideally the drawer would collapse to a tab bar
+   * https://m3.material.io/components/navigation-drawer/specs
    */
-  const smallerAxisSize = Math.min(height, width);
-  const isLandscape = width > height;
-  const isTablet = smallerAxisSize >= 600;
-  const appBarHeight = _reactNative.Platform.OS === 'ios' ? isLandscape ? 32 : 44 : 56;
-  const maxWidth = isTablet ? 320 : 280;
-  return Math.min(smallerAxisSize - appBarHeight, maxWidth);
+  if (width - APPROX_APP_BAR_HEIGHT <= 360) {
+    return width - APPROX_APP_BAR_HEIGHT;
+  }
+  return DEFAULT_DRAWER_WIDTH;
 };
 exports.getDefaultSidebarWidth = getDefaultSidebarWidth;
 //# sourceMappingURL=getDefaultSidebarWidth.js.map

package/lib/commonjs/getDefaultSidebarWidth.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","getDefaultSidebarWidth","_ref","height","width","smallerAxisSize","Math","min","isLandscape","isTablet","appBarHeight","Platform","OS","maxWidth","exports"],"sourceRoot":"../../src","sources":["getDefaultSidebarWidth.tsx"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEO,MAAMC,sBAAsB,GAAGC,IAAA,IAMhC;EAAA,IANiC;IACrCC,MAAM;IACNC;EAIF,CAAC,GAAAF,IAAA;EACC;AACF;AACA;AACA;AACA;EACE,MAAMG,eAAe,GAAGC,IAAI,CAACC,GAAG,CAACJ,MAAM,EAAEC,KAAK,CAAC;EAC/C,MAAMI,WAAW,GAAGJ,KAAK,GAAGD,MAAM;EAClC,MAAMM,QAAQ,GAAGJ,eAAe,IAAI,GAAG;EACvC,MAAMK,YAAY,GAAGC,qBAAQ,CAACC,EAAE,KAAK,KAAK,GAAIJ,WAAW,GAAG,EAAE,GAAG,EAAE,GAAI,EAAE;EACzE,MAAMK,QAAQ,GAAGJ,QAAQ,GAAG,GAAG,GAAG,GAAG;EAErC,OAAOH,IAAI,CAACC,GAAG,CAACF,eAAe,GAAGK,YAAY,EAAEG,QAAQ,CAAC;AAC3D,CAAC;AAACC,OAAA,CAAAb,sBAAA,GAAAA,sBAAA"}
+{"version":3,"names":["APPROX_APP_BAR_HEIGHT","DEFAULT_DRAWER_WIDTH","getDefaultSidebarWidth","_ref","width","exports"],"sourceRoot":"../../src","sources":["getDefaultSidebarWidth.tsx"],"mappings":";;;;;;AAAA,MAAMA,qBAAqB,GAAG,EAAE;AAChC,MAAMC,oBAAoB,GAAG,GAAG;AAEzB,MAAMC,sBAAsB,GAAGC,IAAA,IAAkC;EAAA,IAAjC;IAAEC;EAAyB,CAAC,GAAAD,IAAA;EACjE;AACF;AACA;AACA;AACA;EACE,IAAIC,KAAK,GAAGJ,qBAAqB,IAAI,GAAG,EAAE;IACxC,OAAOI,KAAK,GAAGJ,qBAAqB;EACtC;EAEA,OAAOC,oBAAoB;AAC7B,CAAC;AAACI,OAAA,CAAAH,sBAAA,GAAAA,sBAAA"}

package/lib/module/getDefaultSidebarWidth.js

@@ -1,19 +1,17 @@
-import { Platform } from 'react-native';
+const APPROX_APP_BAR_HEIGHT = 56;
+const DEFAULT_DRAWER_WIDTH = 360;
 export const getDefaultSidebarWidth = _ref => {
   let {
-    height,
     width
   } = _ref;
-  /*
-   * Default sidebar width is screen width - header height
-   * with a max width of 280 on mobile and 320 on tablet
-   * https://material.io/components/navigation-drawer
+  /**
+   * Default sidebar width is 360dp
+   * On screens smaller than 320dp, ideally the drawer would collapse to a tab bar
+   * https://m3.material.io/components/navigation-drawer/specs
    */
-  const smallerAxisSize = Math.min(height, width);
-  const isLandscape = width > height;
-  const isTablet = smallerAxisSize >= 600;
-  const appBarHeight = Platform.OS === 'ios' ? isLandscape ? 32 : 44 : 56;
-  const maxWidth = isTablet ? 320 : 280;
-  return Math.min(smallerAxisSize - appBarHeight, maxWidth);
+  if (width - APPROX_APP_BAR_HEIGHT <= 360) {
+    return width - APPROX_APP_BAR_HEIGHT;
+  }
+  return DEFAULT_DRAWER_WIDTH;
 };
 //# sourceMappingURL=getDefaultSidebarWidth.js.map

package/lib/module/getDefaultSidebarWidth.js.map

@@ -1 +1 @@
-{"version":3,"names":["Platform","getDefaultSidebarWidth","_ref","height","width","smallerAxisSize","Math","min","isLandscape","isTablet","appBarHeight","OS","maxWidth"],"sourceRoot":"../../src","sources":["getDefaultSidebarWidth.tsx"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,cAAc;AAEvC,OAAO,MAAMC,sBAAsB,GAAGC,IAAA,IAMhC;EAAA,IANiC;IACrCC,MAAM;IACNC;EAIF,CAAC,GAAAF,IAAA;EACC;AACF;AACA;AACA;AACA;EACE,MAAMG,eAAe,GAAGC,IAAI,CAACC,GAAG,CAACJ,MAAM,EAAEC,KAAK,CAAC;EAC/C,MAAMI,WAAW,GAAGJ,KAAK,GAAGD,MAAM;EAClC,MAAMM,QAAQ,GAAGJ,eAAe,IAAI,GAAG;EACvC,MAAMK,YAAY,GAAGV,QAAQ,CAACW,EAAE,KAAK,KAAK,GAAIH,WAAW,GAAG,EAAE,GAAG,EAAE,GAAI,EAAE;EACzE,MAAMI,QAAQ,GAAGH,QAAQ,GAAG,GAAG,GAAG,GAAG;EAErC,OAAOH,IAAI,CAACC,GAAG,CAACF,eAAe,GAAGK,YAAY,EAAEE,QAAQ,CAAC;AAC3D,CAAC"}
+{"version":3,"names":["APPROX_APP_BAR_HEIGHT","DEFAULT_DRAWER_WIDTH","getDefaultSidebarWidth","_ref","width"],"sourceRoot":"../../src","sources":["getDefaultSidebarWidth.tsx"],"mappings":"AAAA,MAAMA,qBAAqB,GAAG,EAAE;AAChC,MAAMC,oBAAoB,GAAG,GAAG;AAEhC,OAAO,MAAMC,sBAAsB,GAAGC,IAAA,IAAkC;EAAA,IAAjC;IAAEC;EAAyB,CAAC,GAAAD,IAAA;EACjE;AACF;AACA;AACA;AACA;EACE,IAAIC,KAAK,GAAGJ,qBAAqB,IAAI,GAAG,EAAE;IACxC,OAAOI,KAAK,GAAGJ,qBAAqB;EACtC;EAEA,OAAOC,oBAAoB;AAC7B,CAAC"}

package/lib/typescript/src/getDefaultSidebarWidth.d.ts

@@ -1,5 +1,4 @@
-export declare const getDefaultSidebarWidth: ({ height, width, }: {
-    height: number;
+export declare const getDefaultSidebarWidth: ({ width }: {
     width: number;
 }) => number;
 //# sourceMappingURL=getDefaultSidebarWidth.d.ts.map

package/lib/typescript/src/getDefaultSidebarWidth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getDefaultSidebarWidth.d.ts","sourceRoot":"","sources":["../../../src/getDefaultSidebarWidth.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB;YAIzB,MAAM;WACP,MAAM;YAcd,CAAC"}
+{"version":3,"file":"getDefaultSidebarWidth.d.ts","sourceRoot":"","sources":["../../../src/getDefaultSidebarWidth.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,sBAAsB;WAAwB,MAAM;YAWhE,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/elements",
   "description": "UI Components for React Navigation",
-  "version": "2.0.0-alpha.12",
+  "version": "2.0.0-alpha.13",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -41,7 +41,7 @@
   },
   "devDependencies": {
     "@react-native-masked-view/masked-view": "0.3.0",
-    "@react-navigation/native": "^7.0.0-alpha.14",
+    "@react-navigation/native": "^7.0.0-alpha.15",
     "@testing-library/react-native": "^12.4.3",
     "@types/react": "~18.2.45",
     "del-cli": "^5.1.0",
@@ -51,7 +51,7 @@
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^7.0.0-alpha.14",
+    "@react-navigation/native": "^7.0.0-alpha.15",
     "react": ">= 18.2.0",
     "react-native": ">= 0.72.0",
     "react-native-safe-area-context": ">= 4.0.0"
@@ -70,5 +70,5 @@
       ]
     ]
   },
-  "gitHead": "d0b5489cb3eb8092d05b8d058ba5774d0538cec6"
+  "gitHead": "b1ed6b0d299189c62f0dc8d7171c243adc674a30"
 }

package/src/getDefaultSidebarWidth.tsx

@@ -1,22 +1,15 @@
-import { Platform } from 'react-native';
+const APPROX_APP_BAR_HEIGHT = 56;
+const DEFAULT_DRAWER_WIDTH = 360;
 
-export const getDefaultSidebarWidth = ({
-  height,
-  width,
-}: {
-  height: number;
-  width: number;
-}) => {
-  /*
-   * Default sidebar width is screen width - header height
-   * with a max width of 280 on mobile and 320 on tablet
-   * https://material.io/components/navigation-drawer
+export const getDefaultSidebarWidth = ({ width }: { width: number }) => {
+  /**
+   * Default sidebar width is 360dp
+   * On screens smaller than 320dp, ideally the drawer would collapse to a tab bar
+   * https://m3.material.io/components/navigation-drawer/specs
    */
-  const smallerAxisSize = Math.min(height, width);
-  const isLandscape = width > height;
-  const isTablet = smallerAxisSize >= 600;
-  const appBarHeight = Platform.OS === 'ios' ? (isLandscape ? 32 : 44) : 56;
-  const maxWidth = isTablet ? 320 : 280;
+  if (width - APPROX_APP_BAR_HEIGHT <= 360) {
+    return width - APPROX_APP_BAR_HEIGHT;
+  }
 
-  return Math.min(smallerAxisSize - appBarHeight, maxWidth);
+  return DEFAULT_DRAWER_WIDTH;
 };