@fluid-app/portal-sdk 0.1.510 → 0.1.511

package/dist/{ShareablesScreen-D_Gsc07k.mjs → ShareablesScreen-0cse1_-D.mjs}

@@ -7,7 +7,7 @@ import "./MobileBottomSheet-BKm3ysnd.mjs";
 import "./static-dict-adapter-DUyazFbx.mjs";
 import "./SearchSort-BYxlLq4D.mjs";
 import "./use-share-link-mOe2vbOG.mjs";
-import { n as shareablesScreenPropertySchema, t as ShareablesScreen } from "./ShareablesScreen-5AXAqF4v.mjs";
+import { n as shareablesScreenPropertySchema, t as ShareablesScreen } from "./ShareablesScreen-CjbwoZdH.mjs";
 import "./translation-api-context-factory-BTpIuUF0.mjs";
 import "./MobileActionSheet-DBKhO5th.mjs";
 import "./ResponsiveDialog-DOIzvjZV.mjs";

package/dist/{ShareablesScreen-BLdfT_j5.cjs → ShareablesScreen-BeIlj0JK.cjs}

@@ -41,6 +41,38 @@ const damQueryKeys = {
 	]
 };
 //#endregion
+//#region ../../file-picker/core/src/types.ts
+/**
+* Whether each method is worth offering in a switcher. Keyed on
+* {@link PickerMethod} rather than listed, so adding a variant to the union is
+* a compile error here until someone decides which way it goes.
+*
+* `computer` is false because it renders the same tab as `upload` and nothing
+* builds a `computer` entry to switch to. The cloud-storage and social sources
+* are false because their tab bodies are still placeholders.
+*/
+const PICKER_METHOD_IMPLEMENTED = {
+	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
+};
+/**
+* Methods the picker's switchers offer, derived from
+* {@link PICKER_METHOD_IMPLEMENTED} so the two cannot drift.
+*/
+const IMPLEMENTED_PICKER_METHODS = Object.entries(PICKER_METHOD_IMPLEMENTED).filter(([, implemented]) => implemented).map(([method]) => method);
+//#endregion
 //#region ../../file-picker/core/src/schemas/file-picker-config.ts
 const pickerMethodLiterals = [
 	"upload",
@@ -252794,27 +252826,18 @@ DamLibrary.displayName = "DamLibrary";
 const FilePickerSidebar = ({ currentStep, activeMethod, onMethodChange, methods }) => {
 	if (currentStep !== "select") return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex min-h-0 flex-1 flex-col gap-2 overflow-auto p-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "flex flex-col gap-2 pt-3",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
 					className: "text-sm font-semibold text-gray-900",
-					children: "Select File"
+					children: "Choose source"
 				})
 			}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+				children: methods.filter((method) => IMPLEMENTED_PICKER_METHODS.includes(method.id)).map((method) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.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"}`,
@@ -252897,22 +252920,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] = (0, react.useState)(false);
 	const [folderActionsOpen, setFolderActionsOpen] = (0, react.useState)(false);
 	const [sortOpen, setSortOpen] = (0, react.useState)(false);
+	const [methodsOpen, setMethodsOpen] = (0, react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex min-w-0 flex-1 items-center gap-4",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					isMobile && currentStep === "select" && onMethodChange !== void 0 && switchableMethods.length > 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, { className: "h-4 w-4 text-gray-500" })]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MobileActionSheet.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "relative max-w-md min-w-0 flex-1",
@@ -254479,7 +254524,7 @@ const UrlUpload = ({ config, onFileSelected, enableShareableOption = false, shar
 		}
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "text-center",
@@ -254493,7 +254538,7 @@ const UrlUpload = ({ config, onFileSelected, enableShareableOption = false, shar
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex gap-2",
@@ -254571,7 +254616,7 @@ const UrlUpload = ({ config, onFileSelected, enableShareableOption = false, shar
 			config.showProgress && uploadProgress.length > 0 && (selectedFilesCount === void 0 || selectedFilesCount > 0 || isUploading) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "space-y-4",
 				children: uploadProgress.map((progress, index) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "p-4",
 						children: [
@@ -254619,7 +254664,7 @@ const UrlUpload = ({ config, onFileSelected, enableShareableOption = false, shar
 				}, index))
 			}),
 			enableShareableOption && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Switch, {
@@ -255167,10 +255212,10 @@ const ComputerUpload = ({ config, onFilesSelected, enableShareableOption = false
 		onDragLeave: () => setDragActive(false)
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_src.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__ */ (0, react_jsx_runtime.jsx)(require_src.CardContent, {
 					className: "p-6",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -255204,7 +255249,7 @@ const ComputerUpload = ({ config, onFilesSelected, enableShareableOption = false
 			config.showProgress && uploadProgress.length > 0 && (selectedFilesCount === void 0 || selectedFilesCount > 0 || isUploading) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "space-y-4",
 				children: uploadProgress.map((progress) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "p-4",
 						children: [
@@ -255252,7 +255297,7 @@ const ComputerUpload = ({ config, onFilesSelected, enableShareableOption = false
 				}, `${progress.file_name}-${progress.status}`))
 			}),
 			enableShareableOption && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Switch, {
@@ -255588,7 +255633,7 @@ const SelectionPanel = ({ selectedFiles, onRemoveFile, onClear, onConfirm, share
 	}, []);
 	if (!isVisible || selectedFiles.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "border-b border-gray-200 px-4 py-3",
@@ -256139,6 +256184,7 @@ const FilePicker = ({ config: configInput = {}, onFilesSelected, onClose, open,
 				currentStep: "select",
 				activeMethod,
 				methods,
+				onMethodChange: handleMethodChange,
 				onClose: () => {
 					resetPicker();
 					onClose?.();
@@ -256166,7 +256212,7 @@ const FilePicker = ({ config: configInput = {}, onFilesSelected, onClose, open,
 				unsplashSearching,
 				isUnsplashUploading
 			}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "min-h-0 min-w-0 flex-1 overflow-y-auto",
@@ -256373,7 +256419,8 @@ const FilePicker = ({ config: configInput = {}, onFilesSelected, onClose, open,
 			}
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.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__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, {
 				className: "sr-only",
 				children: "File Picker"
@@ -261249,4 +261296,4 @@ Object.defineProperty(exports, "shareablesScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=ShareablesScreen-BLdfT_j5.cjs.map
+//# sourceMappingURL=ShareablesScreen-BeIlj0JK.cjs.map