@fluid-app/portal-sdk 0.1.447 → 0.1.449

package/dist/{ContactsScreen-Ds-J6GFM.mjs → ContactsScreen-DjMBu144.mjs}

@@ -15,6 +15,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { z } from "zod";
 import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Calendar, Check, ChevronLeft, ChevronRight, CircleCheck, Copy, EllipsisVertical, List, ListOrdered, ListTodo, Loader, Mail, MapPin, MoreHorizontal, Paperclip, Pencil, Phone, Plus, Search, Settings, StickyNote, Trash2, Users, X } from "lucide-react";
 import { FormProvider, useFormContext, useWatch } from "react-hook-form";
+import { MobileBottomSheet } from "@fluid-app/ui-components/components/MobileBottomSheet";
 import { Combobox } from "@fluid-app/ui-components/components/Combobox";
 //#region ../../platform/api-client-core/src/parse-api-errors.ts
 /**
@@ -198,6 +199,22 @@ function parseApiErrors(error, fallback) {
 	return appendRequestId(description ?? fallback, requestId);
 }
 //#endregion
+//#region ../react/src/shell/use-mobile.ts
+const MOBILE_BREAKPOINT$1 = 768;
+function useIsMobile$1() {
+	const [isMobile, setIsMobile] = useState(false);
+	useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT$1 - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT$1);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT$1);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return isMobile;
+}
+//#endregion
 //#region ../../contacts/ui/src/portal/hooks/groups/invalidate-contact-caches.ts
 function invalidateContactCaches(queryClient) {
 	queryClient.invalidateQueries({ queryKey: CONTACTS_QUERY_KEYS.all("contacts") });
@@ -1210,6 +1227,7 @@ const ContactDetailsForm = ({ className, countries = DEFAULT_COUNTRIES, renderAv
 							}) }), /* @__PURE__ */ jsx(SelectContent, {
 								position: "popper",
 								sideOffset: 4,
+								className: "z-[1060]",
 								children: effectiveStatusOptions.map((opt) => /* @__PURE__ */ jsx(SelectItem, {
 									value: opt.value,
 									children: opt.name
@@ -1305,7 +1323,8 @@ const ContactDetailsForm = ({ className, countries = DEFAULT_COUNTRIES, renderAv
 							})),
 							value: field.value ?? "",
 							onValueChange: field.onChange,
-							placeholder: t("placeholder_country")
+							placeholder: t("placeholder_country"),
+							zIndex: 1060
 						}) }),
 						/* @__PURE__ */ jsx(FormMessage, {})
 					] })
@@ -4586,7 +4605,8 @@ const CREATE_DEFAULT_VALUES = {
 	metadata: {},
 	affiliate: {}
 };
-function ContactCreateView({ onNavigate, onCreateContact }) {
+function ContactCreateView({ onNavigate, onCreateContact, asSheet = false }) {
+	const { t } = useContactsTranslation();
 	const formRef = useRef(null);
 	const { locale } = useActiveLocale();
 	const countriesAdapter = useCountriesApi();
@@ -4619,13 +4639,42 @@ function ContactCreateView({ onNavigate, onCreateContact }) {
 		if (affiliate && Object.keys(affiliate).length > 0) payload.affiliate = affiliate;
 		mutate(payload);
 	}, () => {}), [methods, mutate]);
+	const handleNavigateToList = useCallback(() => {
+		onNavigate({
+			view: "browse",
+			selectedContactId: null
+		});
+	}, [onNavigate]);
+	if (asSheet) return /* @__PURE__ */ jsx(MobileBottomSheet, {
+		open: true,
+		onOpenChange: (nextOpen) => {
+			if (!nextOpen) handleNavigateToList();
+		},
+		title: t("breadcrumb_new"),
+		children: /* @__PURE__ */ jsx(FormProvider, {
+			...methods,
+			children: /* @__PURE__ */ jsxs("form", {
+				ref: formRef,
+				onSubmit,
+				className: "space-y-6 px-2 pb-2",
+				children: [/* @__PURE__ */ jsx(ContactDetailsForm, { countries: countryOptions }), /* @__PURE__ */ jsxs("div", {
+					className: "flex justify-end gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						onClick: handleNavigateToList,
+						children: t("cancel")
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						disabled: mutation.isPending,
+						children: mutation.isPending ? t("adding") : t("add_contact")
+					})]
+				})]
+			})
+		})
+	});
 	return /* @__PURE__ */ jsx(ContactCreateScreen, {
-		onNavigateToList: useCallback(() => {
-			onNavigate({
-				view: "browse",
-				selectedContactId: null
-			});
-		}, [onNavigate]),
+		onNavigateToList: handleNavigateToList,
 		onSubmit: () => formRef.current?.requestSubmit(),
 		isPending: mutation.isPending,
 		children: /* @__PURE__ */ jsx(FormProvider, {
@@ -4645,6 +4694,7 @@ function ContactCreateView({ onNavigate, onCreateContact }) {
 function ContactsScreen({ onContactSelect, onCreateContact, background, textColor, accentColor, padding, borderRadius, defaultViewMode, ...divProps }) {
 	const { currentSlug, navigate } = useAppNavigation();
 	const subPage = currentSlug.split("/")[1];
+	const isMobile = useIsMobile$1();
 	const [nav, setNav] = useState({
 		view: "browse",
 		selectedContactId: null
@@ -4668,6 +4718,10 @@ function ContactsScreen({ onContactSelect, onCreateContact, background, textColo
 	const handleManageGroups = useCallback(() => {
 		navigate("contacts/manage-groups");
 	}, [navigate]);
+	const handleCreateNavigate = useCallback((state) => {
+		setNav(state);
+		if (state.view === "browse" && state.selectedContactId) setHighlightContactId(state.selectedContactId);
+	}, []);
 	const [createGroupOpen, setCreateGroupOpen] = useState(false);
 	const [highlightGroupName, setHighlightGroupName] = useState(null);
 	useEffect(() => {
@@ -4690,21 +4744,22 @@ function ContactsScreen({ onContactSelect, onCreateContact, background, textColo
 				});
 				navigate("contacts");
 			}
-		}) : nav.view === "new" ? /* @__PURE__ */ jsx(ContactCreateView, {
-			onNavigate: (state) => {
-				setNav(state);
-				if (state.view === "browse" && state.selectedContactId) setHighlightContactId(state.selectedContactId);
-			},
+		}) : nav.view === "new" && !isMobile ? /* @__PURE__ */ jsx(ContactCreateView, {
+			onNavigate: handleCreateNavigate,
 			onCreateContact
-		}) : /* @__PURE__ */ jsx(ContactBrowseView, {
-			selectedContactId: nav.selectedContactId,
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ContactBrowseView, {
+			selectedContactId: nav.view === "browse" ? nav.selectedContactId : null,
 			highlightContactId,
 			onSelect: handleSelect,
 			onAdd: handleAdd,
 			onManageGroups: handleManageGroups,
 			onCreateGroup: handleCreateGroup,
 			highlightGroupName
-		}), /* @__PURE__ */ jsx(GroupDialog, {
+		}), nav.view === "new" && isMobile ? /* @__PURE__ */ jsx(ContactCreateView, {
+			asSheet: true,
+			onNavigate: handleCreateNavigate,
+			onCreateContact
+		}) : null] }), /* @__PURE__ */ jsx(GroupDialog, {
 			mode: "create",
 			open: createGroupOpen,
 			onOpenChange: (open) => setCreateGroupOpen(open),
@@ -4724,6 +4779,6 @@ const contactsScreenPropertySchema = {
 	fields: []
 };
 //#endregion
-export { ContactsScreen_exports as n, contactsScreenPropertySchema as r, ContactsScreen as t };
+export { useIsMobile$1 as i, ContactsScreen_exports as n, contactsScreenPropertySchema as r, ContactsScreen as t };
 
-//# sourceMappingURL=ContactsScreen-Ds-J6GFM.mjs.map
+//# sourceMappingURL=ContactsScreen-DjMBu144.mjs.map