@fluid-app/portal-sdk 0.1.509 → 0.1.511

package/dist/{ShareablesScreen-BIxloqUX.cjs → ShareablesScreen-CNQy_Cyh.cjs}

@@ -7,7 +7,7 @@ require("./MobileBottomSheet-HzfAr8dE.cjs");
 require("./static-dict-adapter-BCgoKiVT.cjs");
 require("./SearchSort-9Blo6zOI.cjs");
 require("./use-share-link-CwfwFW1s.cjs");
-const require_ShareablesScreen = require("./ShareablesScreen-BLdfT_j5.cjs");
+const require_ShareablesScreen = require("./ShareablesScreen-BeIlj0JK.cjs");
 require("./translation-api-context-factory-mbsJk2UU.cjs");
 require("./src-DPBCDigp.cjs");
 require("./MobileActionSheet-Diex9dkG.cjs");

package/dist/{ShareablesScreen-5AXAqF4v.mjs → ShareablesScreen-CjbwoZdH.mjs}

@@ -37,6 +37,26 @@ const damQueryKeys = {
 		params
 	]
 };
+/**
+* Methods the picker's switchers offer, derived from
+* {@link PICKER_METHOD_IMPLEMENTED} so the two cannot drift.
+*/
+const IMPLEMENTED_PICKER_METHODS = Object.entries({
+	dam: true,
+	media: true,
+	pages: true,
+	products: true,
+	enrollment_packs: true,
+	upload: true,
+	url: true,
+	unsplash: true,
+	computer: false,
+	"google-drive": false,
+	instagram: false,
+	facebook: false,
+	tiktok: false,
+	dropbox: false
+}).filter(([, implemented]) => implemented).map(([method]) => method);
 const filePickerConfigSchema = z.object({
 	accept: z.array(z.string()).optional(),
 	maxFiles: z.number().min(1).optional().default(1),
@@ -6550,27 +6570,18 @@ DamLibrary.displayName = "DamLibrary";
 const FilePickerSidebar = ({ currentStep, activeMethod, onMethodChange, methods }) => {
 	if (currentStep !== "select") return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: "flex hidden h-full w-64 flex-col rounded-tl-lg border-r border-gray-200 bg-gray-50 md:flex",
+		className: "hidden h-full w-64 flex-col rounded-tl-lg border-r border-gray-200 bg-gray-50 md:flex",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex min-h-0 flex-1 flex-col gap-2 overflow-auto p-2",
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "flex flex-col gap-2 pt-3",
 				children: /* @__PURE__ */ jsx("h3", {
 					className: "text-sm font-semibold text-gray-900",
-					children: "Select File"
+					children: "Choose source"
 				})
 			}), /* @__PURE__ */ jsx("div", {
 				className: "flex w-full min-w-0 flex-col gap-1 p-2",
-				children: methods.filter((method) => [
-					"dam",
-					"media",
-					"pages",
-					"products",
-					"enrollment_packs",
-					"upload",
-					"url",
-					"unsplash"
-				].includes(method.id)).map((method) => /* @__PURE__ */ jsxs(Button, {
+				children: methods.filter((method) => IMPLEMENTED_PICKER_METHODS.includes(method.id)).map((method) => /* @__PURE__ */ jsxs(Button, {
 					variant: "ghost",
 					onClick: () => onMethodChange(method.id),
 					className: `flex h-8 w-full cursor-pointer items-center justify-start gap-2 rounded-md p-2 text-left text-sm transition-colors hover:bg-gray-100 ${activeMethod === method.id ? "bg-gray-100 font-medium text-gray-900" : "text-gray-700"}`,
@@ -6653,22 +6664,44 @@ const FilePickerFiltersPanel = ({ filters, onFiltersChange, onClear, onDone }) =
 FilePickerFiltersPanel.displayName = "FilePickerFiltersPanel";
 //#endregion
 //#region ../../file-picker/ui/src/components/FilePickerHeader.tsx
-const FilePickerHeader = ({ currentStep, activeMethod, methods, onClose, damSearchQuery = "", onDamSearchChange, damSearching = false, thumbnailSize = 100, onThumbnailSizeChange, viewMode = "grid", onViewModeChange, showNamesOnMedia = true, onShowNamesOnMediaChange, hasSelectedFiles = false, damFolders = [], onAddToNewFolder, onAddToExistingFolder, filters, onFiltersChange, onFiltersClear, sortOption, onSortChange, unsplashSearchQuery = "", onUnsplashSearchChange, unsplashSearching = false, isUnsplashUploading = false }) => {
+const FilePickerHeader = ({ currentStep, activeMethod, methods, onClose, onMethodChange, damSearchQuery = "", onDamSearchChange, damSearching = false, thumbnailSize = 100, onThumbnailSizeChange, viewMode = "grid", onViewModeChange, showNamesOnMedia = true, onShowNamesOnMediaChange, hasSelectedFiles = false, damFolders = [], onAddToNewFolder, onAddToExistingFolder, filters, onFiltersChange, onFiltersClear, sortOption, onSortChange, unsplashSearchQuery = "", onUnsplashSearchChange, unsplashSearching = false, isUnsplashUploading = false }) => {
 	const [filtersOpen, setFiltersOpen] = useState(false);
 	const [folderActionsOpen, setFolderActionsOpen] = useState(false);
 	const [sortOpen, setSortOpen] = useState(false);
+	const [methodsOpen, setMethodsOpen] = useState(false);
 	const isMobile = useIsMobile();
 	const showMediaToolbar = currentStep === "select" && (activeMethod === "dam" || activeMethod === "media");
 	const showUnsplashToolbar = currentStep === "select" && activeMethod === "unsplash";
+	const title = currentStep === "select" ? methods.find((method) => method.id === activeMethod)?.label || "Select Files" : "Media Details";
+	const switchableMethods = methods.filter((method) => IMPLEMENTED_PICKER_METHODS.includes(method.id));
 	return /* @__PURE__ */ jsxs("div", {
 		className: "sticky top-0 z-20 flex w-full flex-wrap items-center justify-between gap-3 border-b border-gray-100 bg-white px-6 py-3",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex min-w-0 flex-1 items-center gap-4",
 				children: [
-					/* @__PURE__ */ jsx("span", {
+					isMobile && currentStep === "select" && onMethodChange !== void 0 && switchableMethods.length > 1 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						type: "button",
+						"data-testid": "file-picker-method-switcher",
+						"aria-haspopup": "dialog",
+						"aria-expanded": methodsOpen,
+						onClick: () => setMethodsOpen(true),
+						className: "h-8 shrink-0 gap-1 px-2 text-lg font-semibold text-gray-900 hover:bg-gray-100",
+						children: [title, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4 text-gray-500" })]
+					}), /* @__PURE__ */ jsx(MobileActionSheet, {
+						open: methodsOpen,
+						onOpenChange: setMethodsOpen,
+						title: "Choose source",
+						actions: switchableMethods.map((method) => ({
+							id: method.id,
+							label: method.label,
+							selected: method.id === activeMethod,
+							onSelect: () => onMethodChange?.(method.id)
+						}))
+					})] }) : /* @__PURE__ */ jsx("span", {
 						className: "shrink-0 text-lg font-semibold text-gray-900",
-						children: currentStep === "select" ? methods.find((method) => method.id === activeMethod)?.label || "Select Files" : "Media Details"
+						children: title
 					}),
 					showMediaToolbar && /* @__PURE__ */ jsxs("div", {
 						className: "relative max-w-md min-w-0 flex-1",
@@ -8235,7 +8268,7 @@ const UrlUpload = ({ config, onFileSelected, enableShareableOption = false, shar
 		}
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: "mx-auto max-w-5xl space-y-6 overflow-y-auto md:px-10 md:py-8",
+		className: "mx-auto max-w-5xl space-y-6 overflow-y-auto px-4 py-6 md:px-10 md:py-8",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "text-center",
@@ -8249,7 +8282,7 @@ const UrlUpload = ({ config, onFileSelected, enableShareableOption = false, shar
 			}),
 			/* @__PURE__ */ jsxs("form", {
 				onSubmit: handleSubmit,
-				className: "mx-auto w-1/2 space-y-5",
+				className: "mx-auto w-full space-y-5 md:w-1/2",
 				children: [
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex gap-2",
@@ -8327,7 +8360,7 @@ const UrlUpload = ({ config, onFileSelected, enableShareableOption = false, shar
 			config.showProgress && uploadProgress.length > 0 && (selectedFilesCount === void 0 || selectedFilesCount > 0 || isUploading) && /* @__PURE__ */ jsx("div", {
 				className: "space-y-4",
 				children: uploadProgress.map((progress, index) => /* @__PURE__ */ jsx("div", {
-					className: "mx-auto w-1/2 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",
+					className: "mx-auto w-full overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm md:w-1/2",
 					children: /* @__PURE__ */ jsxs("div", {
 						className: "p-4",
 						children: [
@@ -8375,7 +8408,7 @@ const UrlUpload = ({ config, onFileSelected, enableShareableOption = false, shar
 				}, index))
 			}),
 			enableShareableOption && /* @__PURE__ */ jsx("div", {
-				className: "mx-auto flex w-1/2 items-center justify-between",
+				className: "mx-auto flex w-full items-center justify-between md:w-1/2",
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ jsx(Switch, {
@@ -8923,10 +8956,10 @@ const ComputerUpload = ({ config, onFilesSelected, enableShareableOption = false
 		onDragLeave: () => setDragActive(false)
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: "mx-auto max-w-7xl space-y-6 overflow-y-auto md:px-10 md:py-8",
+		className: "mx-auto max-w-7xl space-y-6 overflow-y-auto px-4 py-6 md:px-10 md:py-8",
 		children: [
 			/* @__PURE__ */ jsx(Card, {
-				className: "mx-auto w-1/2 border-none shadow-none",
+				className: "mx-auto w-full border-none shadow-none md:w-1/2",
 				children: /* @__PURE__ */ jsx(CardContent, {
 					className: "p-6",
 					children: /* @__PURE__ */ jsxs("div", {
@@ -8960,7 +8993,7 @@ const ComputerUpload = ({ config, onFilesSelected, enableShareableOption = false
 			config.showProgress && uploadProgress.length > 0 && (selectedFilesCount === void 0 || selectedFilesCount > 0 || isUploading) && /* @__PURE__ */ jsx("div", {
 				className: "space-y-4",
 				children: uploadProgress.map((progress) => /* @__PURE__ */ jsx("div", {
-					className: "mx-auto w-1/2 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",
+					className: "mx-auto w-full overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm md:w-1/2",
 					children: /* @__PURE__ */ jsxs("div", {
 						className: "p-4",
 						children: [
@@ -9008,7 +9041,7 @@ const ComputerUpload = ({ config, onFilesSelected, enableShareableOption = false
 				}, `${progress.file_name}-${progress.status}`))
 			}),
 			enableShareableOption && /* @__PURE__ */ jsx("div", {
-				className: "mx-auto flex w-1/2 items-center justify-between px-4",
+				className: "mx-auto flex w-full items-center justify-between px-4 md:w-1/2",
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ jsx(Switch, {
@@ -9344,7 +9377,7 @@ const SelectionPanel = ({ selectedFiles, onRemoveFile, onClear, onConfirm, share
 	}, []);
 	if (!isVisible || selectedFiles.length === 0) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex h-full w-72 shrink-0 flex-col border-l border-gray-200 bg-white",
+		className: "flex max-h-[45%] w-full shrink-0 flex-col border-t border-gray-200 bg-white md:h-full md:max-h-none md:w-72 md:border-t-0 md:border-l",
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: "border-b border-gray-200 px-4 py-3",
@@ -9895,6 +9928,7 @@ const FilePicker = ({ config: configInput = {}, onFilesSelected, onClose, open,
 				currentStep: "select",
 				activeMethod,
 				methods,
+				onMethodChange: handleMethodChange,
 				onClose: () => {
 					resetPicker();
 					onClose?.();
@@ -9922,7 +9956,7 @@ const FilePicker = ({ config: configInput = {}, onFilesSelected, onClose, open,
 				unsplashSearching,
 				isUnsplashUploading
 			}), /* @__PURE__ */ jsxs("div", {
-				className: "flex min-h-0 min-w-0 flex-1 overflow-hidden",
+				className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden md:flex-row",
 				children: [
 					/* @__PURE__ */ jsx("div", {
 						className: "min-h-0 min-w-0 flex-1 overflow-y-auto",
@@ -10129,7 +10163,8 @@ const FilePicker = ({ config: configInput = {}, onFilesSelected, onClose, open,
 			}
 		},
 		children: /* @__PURE__ */ jsxs(DialogContent, {
-			className: `data-[state=closed]:animate-out! data-[state=closed]:fade-out-0! data-[state=closed]:zoom-out-95! data-[state=open]:animate-in! data-[state=open]:fade-in-0! data-[state=open]:zoom-in-95! z-300! flex! h-[90vh]! max-h-[1000px]! w-[95vw]! max-w-[1600px]! flex-col! gap-0! overflow-y-auto! rounded-lg! border-0! bg-white p-0! data-[state=closed]:duration-150! data-[state=open]:duration-200! ${className || ""}`,
+			showCloseButton: false,
+			className: `data-[state=closed]:animate-out! data-[state=closed]:fade-out-0! data-[state=closed]:zoom-out-95! data-[state=open]:animate-in! data-[state=open]:fade-in-0! data-[state=open]:zoom-in-95! z-300! flex! h-dvh! max-h-none! w-full! max-w-none! flex-col! gap-0! overflow-y-auto! rounded-none! border-0! bg-white p-0! data-[state=closed]:duration-150! data-[state=open]:duration-200! md:h-[90vh]! md:max-h-[1000px]! md:w-[95vw]! md:max-w-[1600px]! md:rounded-lg! ${className || ""}`,
 			children: [/* @__PURE__ */ jsx(DialogTitle, {
 				className: "sr-only",
 				children: "File Picker"
@@ -14991,4 +15026,4 @@ const shareablesScreenPropertySchema = {
 //#endregion
 export { shareablesScreenPropertySchema as n, ShareablesScreen as t };
 
-//# sourceMappingURL=ShareablesScreen-5AXAqF4v.mjs.map
+//# sourceMappingURL=ShareablesScreen-CjbwoZdH.mjs.map