@apps-in-toss/framework 2.10.3 → 2.10.5

package/dist/index.cjs

@@ -1215,24 +1215,30 @@ var import_tds_react_native9 = require("@toss/tds-react-native");
 var import_react15 = require("react");
 var import_react_native20 = require("react-native");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function TopNavigation({ left, center, right }) {
+function TopNavigation(props) {
+  const { navigationBar } = getAppsInTossGlobals();
+  const parsedNavigationBar = navigationBar ? safeParseNavigationBar(navigationBar) : null;
+  const transparent = parsedNavigationBar?.transparentBackground ?? false;
+  const theme = parsedNavigationBar?.theme ?? "light";
+  if (transparent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TopTransparentNavigation, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TopDefaultNavigation, { theme, ...props });
+}
+function TopDefaultNavigation({ left, center, right, theme }) {
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   const navigation = (0, import_react_native19.useNavigation)();
   (0, import_react15.useEffect)(() => {
-    const { navigationBar } = getAppsInTossGlobals();
-    const parsedNavigationBar = navigationBar ? safeParseNavigationBar(navigationBar) : null;
-    const transparent = parsedNavigationBar?.transparentBackground ?? false;
-    const theme = parsedNavigationBar?.theme ?? "light";
     navigation.setOptions({
-      headerTransparent: transparent,
+      headerShown: true,
+      headerTransparent: false,
       header: () => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         import_react_native20.View,
         {
           style: {
             width: "100%",
-            backgroundColor: transparent ? void 0 : theme === "light" ? import_tds_react_native9.colors.lightThemeBackground : import_tds_react_native9.colors.darkThemeBackground
+            backgroundColor: theme === "light" ? import_tds_react_native9.colors.lightThemeBackground : import_tds_react_native9.colors.darkThemeBackground
           },
-          pointerEvents: "box-none",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native20.View, { style: { width: "100%", height: insets.top } }),
             /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
@@ -1278,9 +1284,60 @@ function TopNavigation({ left, center, right }) {
         }
       )
     });
-  }, [navigation, insets, left, center, right]);
+  }, [navigation, insets, left, center, right, theme]);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
 }
+function TopTransparentNavigation({ left, center, right }) {
+  const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+  const navigation = (0, import_react_native19.useNavigation)();
+  (0, import_react15.useEffect)(() => {
+    navigation.setOptions({
+      headerShown: false,
+      header: () => null
+    });
+  }, [navigation]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    import_react_native20.View,
+    {
+      style: {
+        position: "absolute",
+        top: insets.top,
+        left: insets.left,
+        right: insets.right,
+        height: 44,
+        zIndex: 1,
+        flexDirection: "row",
+        alignItems: "center"
+      },
+      pointerEvents: "box-none",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native20.View, { children: left }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_react_native20.View,
+          {
+            style: {
+              flex: 1,
+              flexDirection: "row",
+              alignItems: "center"
+            },
+            pointerEvents: "box-none",
+            children: center
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_react_native20.View,
+          {
+            style: {
+              flexDirection: "row",
+              alignItems: "center"
+            },
+            children: right
+          }
+        )
+      ]
+    }
+  );
+}
 
 // src/components/NavigationBar/TopNavigation/BackButton.tsx
 var import_react_native_svg = require("@granite-js/native/react-native-svg");
@@ -1327,8 +1384,6 @@ function HomeButton({ theme = "light", onPress, children }) {
         alignItems: "center",
         gap: 6,
         height: 34,
-        paddingLeft: 10,
-        paddingRight: 10,
         backgroundColor: theme === "light" ? import_tds_react_native10.colors.greyOpacity50 : "rgba(0, 0, 1, 0.58)",
         borderRadius: 99
       },
@@ -1351,7 +1406,8 @@ function AppTitle({ title, iconUrl, theme = "light" }) {
       style: {
         flexDirection: "row",
         alignItems: "center",
-        gap: 6
+        gap: 6,
+        paddingHorizontal: 10
       },
       children: [
         iconUrl != null && iconUrl !== "" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -1489,10 +1545,7 @@ function DefaultNavigationBar() {
   const parsedNavigationBar = globals.navigationBar != null ? safeParseNavigationBar(globals.navigationBar) : null;
   const withHomeButton = parsedNavigationBar?.withHomeButton ?? false;
   const withBackButton = parsedNavigationBar?.withBackButton ?? true;
-  const withIcon = parsedNavigationBar?.withIcon ?? true;
   const withTitle = parsedNavigationBar?.withTitle ?? true;
-  const iconURL = withIcon ? globals.brandIcon : void 0;
-  const title = withTitle ? globals.brandDisplayName : void 0;
   const theme = parsedNavigationBar?.theme ?? "light";
   const { navigationRightButton } = useNavigationBarContext();
   const navigationEvent = useNavigationEvent();
@@ -1501,7 +1554,7 @@ function DefaultNavigationBar() {
     TopNavigation,
     {
       left: withBackButton ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BackButton, { theme, onPress: navigationEvent.handleBack }) : null,
-      center: title || iconURL ? withHomeButton ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(HomeButton, { theme, onPress: navigationEvent.handleHomeButtonClick, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AppTitle, { theme, title, iconUrl: iconURL }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AppTitle, { theme, title, iconUrl: iconURL }) : null,
+      center: withTitle ? withHomeButton ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(HomeButton, { theme, onPress: navigationEvent.handleHomeButtonClick, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AppTitle, { theme, title: globals.brandDisplayName, iconUrl: globals.brandIcon }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AppTitle, { theme, title: globals.brandDisplayName, iconUrl: globals.brandIcon }) : null,
       right: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Menu2,
         {
@@ -1759,10 +1812,7 @@ function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
   const parsedNavigationBar = globals.navigationBar != null ? safeParseNavigationBar(globals.navigationBar) : null;
   const withHomeButton = parsedNavigationBar?.withHomeButton ?? false;
   const withBackButton = parsedNavigationBar?.withBackButton ?? true;
-  const withIcon = parsedNavigationBar?.withIcon ?? true;
   const withTitle = parsedNavigationBar?.withTitle ?? true;
-  const iconURL = withIcon ? globals.brandIcon : void 0;
-  const title = withTitle ? globals.brandDisplayName : void 0;
   const theme = parsedNavigationBar?.theme ?? "light";
   const { navigationRightButton } = useNavigationBarContext();
   const handleClose = (0, import_react20.useCallback)(async () => {
@@ -1773,7 +1823,7 @@ function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
     TopNavigation,
     {
       left: withBackButton ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BackButton, { theme, onPress: onBackButtonClick }) : null,
-      center: title || iconURL ? withHomeButton ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(HomeButton, { theme, onPress: onHomeButtonClick, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AppTitle, { theme, title, iconUrl: iconURL }) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AppTitle, { theme, title, iconUrl: iconURL }) : null,
+      center: withTitle ? withHomeButton ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(HomeButton, { theme, onPress: onHomeButtonClick, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AppTitle, { theme, title: globals.brandDisplayName, iconUrl: globals.brandIcon }) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AppTitle, { theme, title: globals.brandDisplayName, iconUrl: globals.brandIcon }) : null,
       right: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         Menu2,
         {
@@ -3280,7 +3330,7 @@ function resolveTossAppBundleId(os) {
 var package_default = {
   name: "@apps-in-toss/framework",
   type: "module",
-  version: "2.10.3",
+  version: "2.10.5",
   description: "The framework for Apps In Toss",
   scripts: {
     typecheck: "tsc --noEmit",

package/dist/index.js

@@ -1178,24 +1178,30 @@ import { colors } from "@toss/tds-react-native";
 import { useEffect as useEffect6 } from "react";
 import { View as View3 } from "react-native";
 import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
-function TopNavigation({ left, center, right }) {
+function TopNavigation(props) {
+  const { navigationBar } = getAppsInTossGlobals();
+  const parsedNavigationBar = navigationBar ? safeParseNavigationBar(navigationBar) : null;
+  const transparent = parsedNavigationBar?.transparentBackground ?? false;
+  const theme = parsedNavigationBar?.theme ?? "light";
+  if (transparent) {
+    return /* @__PURE__ */ jsx10(TopTransparentNavigation, { ...props });
+  }
+  return /* @__PURE__ */ jsx10(TopDefaultNavigation, { theme, ...props });
+}
+function TopDefaultNavigation({ left, center, right, theme }) {
   const insets = useSafeAreaInsets();
   const navigation = useNavigation2();
   useEffect6(() => {
-    const { navigationBar } = getAppsInTossGlobals();
-    const parsedNavigationBar = navigationBar ? safeParseNavigationBar(navigationBar) : null;
-    const transparent = parsedNavigationBar?.transparentBackground ?? false;
-    const theme = parsedNavigationBar?.theme ?? "light";
     navigation.setOptions({
-      headerTransparent: transparent,
+      headerShown: true,
+      headerTransparent: false,
       header: () => /* @__PURE__ */ jsxs3(
         View3,
         {
           style: {
             width: "100%",
-            backgroundColor: transparent ? void 0 : theme === "light" ? colors.lightThemeBackground : colors.darkThemeBackground
+            backgroundColor: theme === "light" ? colors.lightThemeBackground : colors.darkThemeBackground
           },
-          pointerEvents: "box-none",
           children: [
             /* @__PURE__ */ jsx10(View3, { style: { width: "100%", height: insets.top } }),
             /* @__PURE__ */ jsxs3(
@@ -1241,9 +1247,60 @@ function TopNavigation({ left, center, right }) {
         }
       )
     });
-  }, [navigation, insets, left, center, right]);
+  }, [navigation, insets, left, center, right, theme]);
   return /* @__PURE__ */ jsx10(Fragment4, {});
 }
+function TopTransparentNavigation({ left, center, right }) {
+  const insets = useSafeAreaInsets();
+  const navigation = useNavigation2();
+  useEffect6(() => {
+    navigation.setOptions({
+      headerShown: false,
+      header: () => null
+    });
+  }, [navigation]);
+  return /* @__PURE__ */ jsxs3(
+    View3,
+    {
+      style: {
+        position: "absolute",
+        top: insets.top,
+        left: insets.left,
+        right: insets.right,
+        height: 44,
+        zIndex: 1,
+        flexDirection: "row",
+        alignItems: "center"
+      },
+      pointerEvents: "box-none",
+      children: [
+        /* @__PURE__ */ jsx10(View3, { children: left }),
+        /* @__PURE__ */ jsx10(
+          View3,
+          {
+            style: {
+              flex: 1,
+              flexDirection: "row",
+              alignItems: "center"
+            },
+            pointerEvents: "box-none",
+            children: center
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          View3,
+          {
+            style: {
+              flexDirection: "row",
+              alignItems: "center"
+            },
+            children: right
+          }
+        )
+      ]
+    }
+  );
+}
 
 // src/components/NavigationBar/TopNavigation/BackButton.tsx
 import { SvgXml } from "@granite-js/native/react-native-svg";
@@ -1290,8 +1347,6 @@ function HomeButton({ theme = "light", onPress, children }) {
         alignItems: "center",
         gap: 6,
         height: 34,
-        paddingLeft: 10,
-        paddingRight: 10,
         backgroundColor: theme === "light" ? colors2.greyOpacity50 : "rgba(0, 0, 1, 0.58)",
         borderRadius: 99
       },
@@ -1314,7 +1369,8 @@ function AppTitle({ title, iconUrl, theme = "light" }) {
       style: {
         flexDirection: "row",
         alignItems: "center",
-        gap: 6
+        gap: 6,
+        paddingHorizontal: 10
       },
       children: [
         iconUrl != null && iconUrl !== "" && /* @__PURE__ */ jsx13(
@@ -1452,10 +1508,7 @@ function DefaultNavigationBar() {
   const parsedNavigationBar = globals.navigationBar != null ? safeParseNavigationBar(globals.navigationBar) : null;
   const withHomeButton = parsedNavigationBar?.withHomeButton ?? false;
   const withBackButton = parsedNavigationBar?.withBackButton ?? true;
-  const withIcon = parsedNavigationBar?.withIcon ?? true;
   const withTitle = parsedNavigationBar?.withTitle ?? true;
-  const iconURL = withIcon ? globals.brandIcon : void 0;
-  const title = withTitle ? globals.brandDisplayName : void 0;
   const theme = parsedNavigationBar?.theme ?? "light";
   const { navigationRightButton } = useNavigationBarContext();
   const navigationEvent = useNavigationEvent();
@@ -1464,7 +1517,7 @@ function DefaultNavigationBar() {
     TopNavigation,
     {
       left: withBackButton ? /* @__PURE__ */ jsx16(BackButton, { theme, onPress: navigationEvent.handleBack }) : null,
-      center: title || iconURL ? withHomeButton ? /* @__PURE__ */ jsx16(HomeButton, { theme, onPress: navigationEvent.handleHomeButtonClick, children: /* @__PURE__ */ jsx16(AppTitle, { theme, title, iconUrl: iconURL }) }) : /* @__PURE__ */ jsx16(AppTitle, { theme, title, iconUrl: iconURL }) : null,
+      center: withTitle ? withHomeButton ? /* @__PURE__ */ jsx16(HomeButton, { theme, onPress: navigationEvent.handleHomeButtonClick, children: /* @__PURE__ */ jsx16(AppTitle, { theme, title: globals.brandDisplayName, iconUrl: globals.brandIcon }) }) : /* @__PURE__ */ jsx16(AppTitle, { theme, title: globals.brandDisplayName, iconUrl: globals.brandIcon }) : null,
       right: /* @__PURE__ */ jsx16(
         Menu2,
         {
@@ -1743,10 +1796,7 @@ function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
   const parsedNavigationBar = globals.navigationBar != null ? safeParseNavigationBar(globals.navigationBar) : null;
   const withHomeButton = parsedNavigationBar?.withHomeButton ?? false;
   const withBackButton = parsedNavigationBar?.withBackButton ?? true;
-  const withIcon = parsedNavigationBar?.withIcon ?? true;
   const withTitle = parsedNavigationBar?.withTitle ?? true;
-  const iconURL = withIcon ? globals.brandIcon : void 0;
-  const title = withTitle ? globals.brandDisplayName : void 0;
   const theme = parsedNavigationBar?.theme ?? "light";
   const { navigationRightButton } = useNavigationBarContext();
   const handleClose = useCallback8(async () => {
@@ -1757,7 +1807,7 @@ function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
     TopNavigation,
     {
       left: withBackButton ? /* @__PURE__ */ jsx22(BackButton, { theme, onPress: onBackButtonClick }) : null,
-      center: title || iconURL ? withHomeButton ? /* @__PURE__ */ jsx22(HomeButton, { theme, onPress: onHomeButtonClick, children: /* @__PURE__ */ jsx22(AppTitle, { theme, title, iconUrl: iconURL }) }) : /* @__PURE__ */ jsx22(AppTitle, { theme, title, iconUrl: iconURL }) : null,
+      center: withTitle ? withHomeButton ? /* @__PURE__ */ jsx22(HomeButton, { theme, onPress: onHomeButtonClick, children: /* @__PURE__ */ jsx22(AppTitle, { theme, title: globals.brandDisplayName, iconUrl: globals.brandIcon }) }) : /* @__PURE__ */ jsx22(AppTitle, { theme, title: globals.brandDisplayName, iconUrl: globals.brandIcon }) : null,
       right: /* @__PURE__ */ jsx22(
         Menu2,
         {
@@ -3272,7 +3322,7 @@ function resolveTossAppBundleId(os) {
 var package_default = {
   name: "@apps-in-toss/framework",
   type: "module",
-  version: "2.10.3",
+  version: "2.10.5",
   description: "The framework for Apps In Toss",
   scripts: {
     typecheck: "tsc --noEmit",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@apps-in-toss/framework",
   "type": "module",
-  "version": "2.10.3",
+  "version": "2.10.5",
   "description": "The framework for Apps In Toss",
   "scripts": {
     "typecheck": "tsc --noEmit",
@@ -55,12 +55,12 @@
     "ait": "./bin/ait.js"
   },
   "dependencies": {
-    "@apps-in-toss/analytics": "2.10.3",
-    "@apps-in-toss/cli": "2.10.3",
-    "@apps-in-toss/native-modules": "2.10.3",
-    "@apps-in-toss/plugins": "2.10.3",
-    "@apps-in-toss/types": "2.10.3",
-    "@apps-in-toss/user-scripts": "^2.10.3",
+    "@apps-in-toss/analytics": "2.10.5",
+    "@apps-in-toss/cli": "2.10.5",
+    "@apps-in-toss/native-modules": "2.10.5",
+    "@apps-in-toss/plugins": "2.10.5",
+    "@apps-in-toss/types": "2.10.5",
+    "@apps-in-toss/user-scripts": "^2.10.5",
     "es-hangul": "^2.3.2"
   },
   "devDependencies": {