@worldcoin/mini-apps-ui-kit-react 1.3.2 → 1.3.4

package/dist/components/AlertDialog/AlertDialog.js

@@ -5,6 +5,7 @@ import * as React from "react";
 import { Drawer } from "../../node_modules/.pnpm/vaul@1.1.2_@types_react-dom@18.3.7_@types_react@18.3.23__@types_react@18.3.23_react-dom@18.3._hck6bgtscpcdlplcvchrs7yfhu/node_modules/vaul/dist/index.js";
 import { XMark } from "../Icons/XMark.js";
 import { AlertDialogContext, useAlertDialog } from "./use-alert-dialog.js";
+import { useSafeAreaInsets } from "../SafeAreaView/useSafeAreaInsets.js";
 import { BottomBar } from "../BottomBar/BottomBar.js";
 import { Typography } from "../Typography/Typography.js";
 import { Button } from "../Button/Button.js";
@@ -29,25 +30,37 @@ AlertDialogTrigger.displayName = "AlertDialogTrigger";
 const AlertDialogPortal = Drawer.Portal;
 const AlertDialogClose = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Drawer.Close, { ref, ...props }));
 AlertDialogClose.displayName = "AlertDialogClose";
-const AlertDialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
-  /* @__PURE__ */ jsx(
-    Drawer.Overlay,
-    {
-      ref,
-      className: cn("fixed inset-0 z-50 bg-gray-900/40", className),
-      ...props
-    }
-  ),
-  /* @__PURE__ */ jsx(
-    Drawer.Content,
-    {
-      ref,
-      className: cn("fixed inset-x-0 bottom-0 z-50 mt-24 h-auto", className),
-      ...props,
-      children: /* @__PURE__ */ jsx("div", { className: "flex flex-col rounded-[1.75rem] bg-gray-0 m-3 p-8", children })
-    }
-  )
-] }));
+const AlertDialogContent = React.forwardRef(({ className, children, ...props }, ref) => {
+  const safe = useSafeAreaInsets();
+  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx(
+      Drawer.Overlay,
+      {
+        ref,
+        className: cn("fixed inset-0 z-50 bg-gray-900/40", className),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Drawer.Content,
+      {
+        ref,
+        className: cn("fixed inset-x-0 bottom-0 z-50 mt-24 h-auto", className),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex flex-col rounded-[1.75rem] bg-gray-0 m-3 p-8",
+            style: {
+              marginBottom: Math.max(safe.bottom, 12)
+            },
+            children
+          }
+        )
+      }
+    )
+  ] });
+});
 AlertDialogContent.displayName = "AlertDialogContent";
 const AlertDialogHeader = ({ icon, children, ...props }) => {
   const { dismissible } = useAlertDialog();

package/dist/components/SafeAreaView/SafeAreaView.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { cn } from "../../lib/utils.js";

package/dist/components/SafeAreaView/useSafeAreaInsets.js

@@ -1,7 +1,29 @@
+"use client";
+import { useState, useEffect } from "react";
+const defaultSafeAreaInsets = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+};
 function useSafeAreaInsets() {
-  var _a, _b;
-  const safeAreaInsets = (_b = (_a = window == null ? void 0 : window.MiniKit) == null ? void 0 : _a.deviceProperties) == null ? void 0 : _b.safeAreaInsets;
-  return safeAreaInsets ?? { top: 0, right: 0, bottom: 0, left: 0 };
+  const [safeAreaInsets, setSafeAreaInsets] = useState(() => {
+    var _a, _b;
+    if (typeof window !== "undefined") {
+      return ((_b = (_a = window == null ? void 0 : window.MiniKit) == null ? void 0 : _a.deviceProperties) == null ? void 0 : _b.safeAreaInsets) ?? defaultSafeAreaInsets;
+    }
+    return defaultSafeAreaInsets;
+  });
+  useEffect(() => {
+    var _a, _b;
+    if (typeof window !== "undefined") {
+      const insets = (_b = (_a = window == null ? void 0 : window.MiniKit) == null ? void 0 : _a.deviceProperties) == null ? void 0 : _b.safeAreaInsets;
+      if (insets && JSON.stringify(insets) !== JSON.stringify(safeAreaInsets)) {
+        setSafeAreaInsets(insets);
+      }
+    }
+  }, [safeAreaInsets]);
+  return safeAreaInsets;
 }
 export {
   useSafeAreaInsets

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worldcoin/mini-apps-ui-kit-react",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",