@fluid-app/portal-sdk 0.1.447 → 0.1.449

package/dist/{ContactsScreen-CbWOdrpK.cjs → ContactsScreen-C1kfIxoL.cjs}

@@ -1,6 +1,6 @@
 require("./chunk-9hOWP6kD.cjs");
 require("./ContactsTranslationBridge-BvkMkPED.cjs");
-const require_ContactsScreen = require("./ContactsScreen-BMnHQQQj.cjs");
+const require_ContactsScreen = require("./ContactsScreen-CBXOEkvz.cjs");
 require("./static-dict-adapter-Dk_ZWOUI.cjs");
 require("./translation-api-context-factory-DkXq_vPq.cjs");
 require("./task-composer-form-oKkUtTAg.cjs");

package/dist/{ContactsScreen-BMnHQQQj.cjs → ContactsScreen-CBXOEkvz.cjs}

@@ -16,6 +16,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let zod = require("zod");
 let lucide_react = require("lucide-react");
 let react_hook_form = require("react-hook-form");
+let _fluid_app_ui_components_components_MobileBottomSheet = require("@fluid-app/ui-components/components/MobileBottomSheet");
 let _fluid_app_ui_components_components_Combobox = require("@fluid-app/ui-components/components/Combobox");
 //#region ../../platform/api-client-core/src/parse-api-errors.ts
 /**
@@ -484,6 +485,22 @@ var Sub2 = ContextMenuSub$1;
 var SubTrigger2 = ContextMenuSubTrigger$1;
 var SubContent2 = ContextMenuSubContent$1;
 //#endregion
+//#region ../react/src/shell/use-mobile.ts
+const MOBILE_BREAKPOINT$1 = 768;
+function useIsMobile$1() {
+	const [isMobile, setIsMobile] = (0, react.useState)(false);
+	(0, react.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: require_task_composer_form.CONTACTS_QUERY_KEYS.all("contacts") });
@@ -1496,6 +1513,7 @@ const ContactDetailsForm = ({ className, countries = DEFAULT_COUNTRIES, renderAv
 							}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectContent, {
 								position: "popper",
 								sideOffset: 4,
+								className: "z-[1060]",
 								children: effectiveStatusOptions.map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectItem, {
 									value: opt.value,
 									children: opt.name
@@ -1591,7 +1609,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__ */ (0, react_jsx_runtime.jsx)(require_src.FormMessage, {})
 					] })
@@ -4868,7 +4887,8 @@ const CREATE_DEFAULT_VALUES = {
 	metadata: {},
 	affiliate: {}
 };
-function ContactCreateView({ onNavigate, onCreateContact }) {
+function ContactCreateView({ onNavigate, onCreateContact, asSheet = false }) {
+	const { t } = require_task_composer_form.useContactsTranslation();
 	const formRef = (0, react.useRef)(null);
 	const { locale } = require_static_dict_adapter.useActiveLocale();
 	const countriesAdapter = require_ContactsTranslationBridge.useCountriesApi();
@@ -4901,13 +4921,42 @@ function ContactCreateView({ onNavigate, onCreateContact }) {
 		if (affiliate && Object.keys(affiliate).length > 0) payload.affiliate = affiliate;
 		mutate(payload);
 	}, () => {}), [methods, mutate]);
+	const handleNavigateToList = (0, react.useCallback)(() => {
+		onNavigate({
+			view: "browse",
+			selectedContactId: null
+		});
+	}, [onNavigate]);
+	if (asSheet) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_components_components_MobileBottomSheet.MobileBottomSheet, {
+		open: true,
+		onOpenChange: (nextOpen) => {
+			if (!nextOpen) handleNavigateToList();
+		},
+		title: t("breadcrumb_new"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_hook_form.FormProvider, {
+			...methods,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+				ref: formRef,
+				onSubmit,
+				className: "space-y-6 px-2 pb-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactDetailsForm, { countries: countryOptions }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex justify-end gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+						type: "button",
+						variant: "outline",
+						onClick: handleNavigateToList,
+						children: t("cancel")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+						type: "submit",
+						disabled: mutation.isPending,
+						children: mutation.isPending ? t("adding") : t("add_contact")
+					})]
+				})]
+			})
+		})
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactCreateScreen, {
-		onNavigateToList: (0, react.useCallback)(() => {
-			onNavigate({
-				view: "browse",
-				selectedContactId: null
-			});
-		}, [onNavigate]),
+		onNavigateToList: handleNavigateToList,
 		onSubmit: () => formRef.current?.requestSubmit(),
 		isPending: mutation.isPending,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_hook_form.FormProvider, {
@@ -4927,6 +4976,7 @@ function ContactCreateView({ onNavigate, onCreateContact }) {
 function ContactsScreen({ onContactSelect, onCreateContact, background, textColor, accentColor, padding, borderRadius, defaultViewMode, ...divProps }) {
 	const { currentSlug, navigate } = require_AppNavigationContext.useAppNavigation();
 	const subPage = currentSlug.split("/")[1];
+	const isMobile = useIsMobile$1();
 	const [nav, setNav] = (0, react.useState)({
 		view: "browse",
 		selectedContactId: null
@@ -4950,6 +5000,10 @@ function ContactsScreen({ onContactSelect, onCreateContact, background, textColo
 	const handleManageGroups = (0, react.useCallback)(() => {
 		navigate("contacts/manage-groups");
 	}, [navigate]);
+	const handleCreateNavigate = (0, react.useCallback)((state) => {
+		setNav(state);
+		if (state.view === "browse" && state.selectedContactId) setHighlightContactId(state.selectedContactId);
+	}, []);
 	const [createGroupOpen, setCreateGroupOpen] = (0, react.useState)(false);
 	const [highlightGroupName, setHighlightGroupName] = (0, react.useState)(null);
 	(0, react.useEffect)(() => {
@@ -4972,21 +5026,22 @@ function ContactsScreen({ onContactSelect, onCreateContact, background, textColo
 				});
 				navigate("contacts");
 			}
-		}) : nav.view === "new" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactCreateView, {
-			onNavigate: (state) => {
-				setNav(state);
-				if (state.view === "browse" && state.selectedContactId) setHighlightContactId(state.selectedContactId);
-			},
+		}) : nav.view === "new" && !isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactCreateView, {
+			onNavigate: handleCreateNavigate,
 			onCreateContact
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactBrowseView, {
-			selectedContactId: nav.selectedContactId,
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactBrowseView, {
+			selectedContactId: nav.view === "browse" ? nav.selectedContactId : null,
 			highlightContactId,
 			onSelect: handleSelect,
 			onAdd: handleAdd,
 			onManageGroups: handleManageGroups,
 			onCreateGroup: handleCreateGroup,
 			highlightGroupName
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupDialog, {
+		}), nav.view === "new" && isMobile ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactCreateView, {
+			asSheet: true,
+			onNavigate: handleCreateNavigate,
+			onCreateContact
+		}) : null] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupDialog, {
 			mode: "create",
 			open: createGroupOpen,
 			onOpenChange: (open) => setCreateGroupOpen(open),
@@ -5018,5 +5073,11 @@ Object.defineProperty(exports, "contactsScreenPropertySchema", {
 		return contactsScreenPropertySchema;
 	}
 });
+Object.defineProperty(exports, "useIsMobile", {
+	enumerable: true,
+	get: function() {
+		return useIsMobile$1;
+	}
+});
 
-//# sourceMappingURL=ContactsScreen-BMnHQQQj.cjs.map
+//# sourceMappingURL=ContactsScreen-CBXOEkvz.cjs.map