@10x-media/folder-picker 0.1.0-beta.0

package/dist/folder/index.js

@@ -0,0 +1,65 @@
+"use client";
+import { BulkUploadButton } from "./BulkUploadButton.js";
+import { FolderBrowser } from "./FolderBrowser.js";
+import { getTranslation } from "@payloadcms/translations";
+import { Button, DefaultListView, Gutter, useConfig, useListDrawerContext, useTranslation } from "@payloadcms/ui";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./folder.css";
+//#region src/folder/index.tsx
+const tabsClass = "default-list-view-tabs";
+/**
+* List view for folder-enabled collections. On a real list route it renders Payload's own view
+* untouched, since the route already carries the List/Folders tabs. Inside a list drawer (the
+* upload field's "choose from existing") those tabs are replaced by the drawer header, so this
+* adds them back and swaps in a folder picker that does not navigate.
+*/
+const FolderListView = (props) => {
+	const { collectionSlug } = props;
+	const { isInDrawer } = useListDrawerContext();
+	const { getEntityConfig } = useConfig();
+	const { i18n, t } = useTranslation();
+	const [viewType, setViewType] = React.useState("list");
+	if (!isInDrawer) return /* @__PURE__ */ jsx(DefaultListView, { ...props });
+	const collectionConfig = getEntityConfig({ collectionSlug });
+	const tabs = /* @__PURE__ */ jsxs("div", {
+		className: tabsClass,
+		children: [/* @__PURE__ */ jsxs(Button, {
+			buttonStyle: "tab",
+			className: [`${tabsClass}__button`, viewType === "list" && `${tabsClass}__button--active`].filter(Boolean).join(" "),
+			disabled: viewType === "list",
+			el: "button",
+			onClick: () => setViewType("list"),
+			children: [
+				t("general:all"),
+				" ",
+				getTranslation(collectionConfig?.labels?.plural ?? "", i18n)
+			]
+		}), /* @__PURE__ */ jsx(Button, {
+			buttonStyle: "tab",
+			className: [`${tabsClass}__button`, viewType === "folders" && `${tabsClass}__button--active`].filter(Boolean).join(" "),
+			disabled: viewType === "folders",
+			el: "button",
+			onClick: () => setViewType("folders"),
+			children: t("folder:byFolder")
+		})]
+	}, "tabs");
+	return /* @__PURE__ */ jsx(React.Fragment, { children: viewType === "folders" ? /* @__PURE__ */ jsx(FolderBrowser, {
+		collectionSlug,
+		enableRowSelections: props.enableRowSelections,
+		Tabs: tabs
+	}) : /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(Gutter, {
+		className: `${tabsClass}__drawer-gutter`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: `${tabsClass}__drawer-row`,
+			children: [tabs, /* @__PURE__ */ jsx(BulkUploadButton, {
+				collectionSlug,
+				enableRowSelections: props.enableRowSelections
+			})]
+		})
+	}), /* @__PURE__ */ jsx(DefaultListView, { ...props })] }) });
+};
+//#endregion
+export { FolderListView as default };
+
+//# sourceMappingURL=index.js.map

package/dist/folder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/folder/index.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n\tButton,\n\tDefaultListView,\n\tGutter,\n\tuseConfig,\n\tuseListDrawerContext,\n\tuseTranslation,\n} from '@payloadcms/ui'\nimport type { ListViewClientProps } from 'payload'\nimport React from 'react'\nimport { BulkUploadButton } from './BulkUploadButton'\nimport { FolderBrowser } from './FolderBrowser'\nimport './folder.css'\nconst tabsClass = 'default-list-view-tabs'\n\n/**\n * List view for folder-enabled collections. On a real list route it renders Payload's own view\n * untouched, since the route already carries the List/Folders tabs. Inside a list drawer (the\n * upload field's \"choose from existing\") those tabs are replaced by the drawer header, so this\n * adds them back and swaps in a folder picker that does not navigate.\n */\nexport const FolderListView: React.FC<ListViewClientProps> = (props) => {\n\tconst { collectionSlug } = props\n\tconst { isInDrawer } = useListDrawerContext()\n\tconst { getEntityConfig } = useConfig()\n\tconst { i18n, t } = useTranslation()\n\tconst [viewType, setViewType] = React.useState<'folders' | 'list'>('list')\n\n\tif (!isInDrawer) {\n\t\treturn <DefaultListView {...props} />\n\t}\n\n\tconst collectionConfig = getEntityConfig({ collectionSlug })\n\n\t// Same markup as Payload's DefaultListViewTabs, which is internal and always pushes a route.\n\tconst tabs = (\n\t\t<div className={tabsClass} key=\"tabs\">\n\t\t\t<Button\n\t\t\t\tbuttonStyle=\"tab\"\n\t\t\t\tclassName={[`${tabsClass}__button`, viewType === 'list' && `${tabsClass}__button--active`]\n\t\t\t\t\t.filter(Boolean)\n\t\t\t\t\t.join(' ')}\n\t\t\t\tdisabled={viewType === 'list'}\n\t\t\t\tel=\"button\"\n\t\t\t\tonClick={() => setViewType('list')}\n\t\t\t>\n\t\t\t\t{t('general:all')} {getTranslation(collectionConfig?.labels?.plural ?? '', i18n)}\n\t\t\t</Button>\n\t\t\t<Button\n\t\t\t\tbuttonStyle=\"tab\"\n\t\t\t\tclassName={[\n\t\t\t\t\t`${tabsClass}__button`,\n\t\t\t\t\tviewType === 'folders' && `${tabsClass}__button--active`,\n\t\t\t\t]\n\t\t\t\t\t.filter(Boolean)\n\t\t\t\t\t.join(' ')}\n\t\t\t\tdisabled={viewType === 'folders'}\n\t\t\t\tel=\"button\"\n\t\t\t\tonClick={() => setViewType('folders')}\n\t\t\t>\n\t\t\t\t{t('folder:byFolder')}\n\t\t\t</Button>\n\t\t</div>\n\t)\n\n\t// Both modes render their own header and gutter below this, so the tabs sit above in their own\n\t// gutter. Rendering them identically in both is what keeps placement and spacing the same.\n\treturn (\n\t\t<React.Fragment>\n\t\t\t{viewType === 'folders' ? (\n\t\t\t\t// The folder view renders the tabs row itself so the breadcrumb can sit beside them.\n\t\t\t\t<FolderBrowser\n\t\t\t\t\tcollectionSlug={collectionSlug}\n\t\t\t\t\tenableRowSelections={props.enableRowSelections}\n\t\t\t\t\tTabs={tabs}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<React.Fragment>\n\t\t\t\t\t{/* DefaultListView owns the drawer header, so bulk upload cannot go beside its Create\n\t\t\t\t\t\tNew pill without forking it. It rides with the tabs instead, which is the nearest\n\t\t\t\t\t\tslot this view actually controls. */}\n\t\t\t\t\t<Gutter className={`${tabsClass}__drawer-gutter`}>\n\t\t\t\t\t\t<div className={`${tabsClass}__drawer-row`}>\n\t\t\t\t\t\t\t{tabs}\n\t\t\t\t\t\t\t<BulkUploadButton\n\t\t\t\t\t\t\t\tcollectionSlug={collectionSlug}\n\t\t\t\t\t\t\t\tenableRowSelections={props.enableRowSelections}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Gutter>\n\t\t\t\t\t<DefaultListView {...props} />\n\t\t\t\t</React.Fragment>\n\t\t\t)}\n\t\t</React.Fragment>\n\t)\n}\n\nexport default FolderListView\n"],"mappings":";;;;;;;;;AAgBA,MAAM,YAAY;;;;;;;AAQlB,MAAa,kBAAiD,UAAU;CACvE,MAAM,EAAE,mBAAmB;CAC3B,MAAM,EAAE,eAAe,qBAAqB;CAC5C,MAAM,EAAE,oBAAoB,UAAU;CACtC,MAAM,EAAE,MAAM,MAAM,eAAe;CACnC,MAAM,CAAC,UAAU,eAAe,MAAM,SAA6B,MAAM;CAEzE,IAAI,CAAC,YACJ,OAAO,oBAAC,iBAAD,EAAiB,GAAI,MAAQ,CAAA;CAGrC,MAAM,mBAAmB,gBAAgB,EAAE,eAAe,CAAC;CAG3D,MAAM,OACL,qBAAC,OAAD;EAAK,WAAW;YAAhB,CACC,qBAAC,QAAD;GACC,aAAY;GACZ,WAAW,CAAC,GAAG,UAAU,WAAW,aAAa,UAAU,GAAG,UAAU,iBAAiB,EACvF,OAAO,OAAO,EACd,KAAK,GAAG;GACV,UAAU,aAAa;GACvB,IAAG;GACH,eAAe,YAAY,MAAM;aAPlC;IASE,EAAE,aAAa;IAAE;IAAE,eAAe,kBAAkB,QAAQ,UAAU,IAAI,IAAI;GACxE;MACR,oBAAC,QAAD;GACC,aAAY;GACZ,WAAW,CACV,GAAG,UAAU,WACb,aAAa,aAAa,GAAG,UAAU,iBACxC,EACE,OAAO,OAAO,EACd,KAAK,GAAG;GACV,UAAU,aAAa;GACvB,IAAG;GACH,eAAe,YAAY,SAAS;aAEnC,EAAE,iBAAiB;EACb,CAAA,CACJ;IA1B0B,MA0B1B;CAKN,OACC,oBAAC,MAAM,UAAP,EAAA,UACE,aAAa,YAEb,oBAAC,eAAD;EACiB;EAChB,qBAAqB,MAAM;EAC3B,MAAM;CACN,CAAA,IAED,qBAAC,MAAM,UAAP,EAAA,UAAA,CAIC,oBAAC,QAAD;EAAQ,WAAW,GAAG,UAAU;YAC/B,qBAAC,OAAD;GAAK,WAAW,GAAG,UAAU;aAA7B,CACE,MACD,oBAAC,kBAAD;IACiB;IAChB,qBAAqB,MAAM;GAC3B,CAAA,CACG;;CACE,CAAA,GACR,oBAAC,iBAAD,EAAiB,GAAI,MAAQ,CAAA,CACd,EAAA,CAAA,EAEF,CAAA;AAElB"}

package/dist/folder/isMacPlatform.js

@@ -0,0 +1,21 @@
+//#region src/folder/isMacPlatform.ts
+/**
+* Whether the shortcut labels shown to the reader should use Apple's modifier keys.
+*
+* Read from the user agent rather than from the keyboard event, because the hint is drawn
+* before anything is pressed. iPhones and iPads report a Mac-like agent and have no
+* modifier keys to speak of, so they are excluded.
+*/
+const isMacPlatform = (userAgent) => {
+	if (!userAgent) return false;
+	return /mac/i.test(userAgent) && !/iphone|ipad|ipod/i.test(userAgent);
+};
+/** Labels for the two modifiers the folder view's selection responds to. */
+const modifierLabels = (isMac) => ({
+	modifier: isMac ? "⌘" : "Ctrl",
+	range: isMac ? "⇧" : "Shift"
+});
+//#endregion
+export { isMacPlatform, modifierLabels };
+
+//# sourceMappingURL=isMacPlatform.js.map

package/dist/folder/isMacPlatform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isMacPlatform.js","names":[],"sources":["../../src/folder/isMacPlatform.ts"],"sourcesContent":["/**\n * Whether the shortcut labels shown to the reader should use Apple's modifier keys.\n *\n * Read from the user agent rather than from the keyboard event, because the hint is drawn\n * before anything is pressed. iPhones and iPads report a Mac-like agent and have no\n * modifier keys to speak of, so they are excluded.\n */\nexport const isMacPlatform = (userAgent: string | undefined): boolean => {\n\tif (!userAgent) {\n\t\treturn false\n\t}\n\treturn /mac/i.test(userAgent) && !/iphone|ipad|ipod/i.test(userAgent)\n}\n\n/** Labels for the two modifiers the folder view's selection responds to. */\nexport const modifierLabels = (isMac: boolean): { modifier: string; range: string } => ({\n\tmodifier: isMac ? '⌘' : 'Ctrl',\n\trange: isMac ? '⇧' : 'Shift',\n})\n"],"mappings":";;;;;;;;AAOA,MAAa,iBAAiB,cAA2C;CACxE,IAAI,CAAC,WACJ,OAAO;CAER,OAAO,OAAO,KAAK,SAAS,KAAK,CAAC,oBAAoB,KAAK,SAAS;AACrE;;AAGA,MAAa,kBAAkB,WAAyD;CACvF,UAAU,QAAQ,MAAM;CACxB,OAAO,QAAQ,MAAM;AACtB"}

package/dist/folder/native.js

@@ -0,0 +1,391 @@
+"use client";
+import { keys } from "../translations/keys.js";
+import { useTranslation as useTranslation$1 } from "../translations/useTranslation.js";
+import { getTranslation } from "@payloadcms/translations";
+import { Button, ChevronIcon, FieldLabel, FolderIcon, GridViewIcon, ListViewIcon, Pill, Popup, PopupList, ReactSelect, SearchIcon, XIcon, useConfig, useListDrawerContext, useModal } from "@payloadcms/ui";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DragOverlay, useDndMonitor } from "@dnd-kit/core";
+//#region src/folder/native.tsx
+/**
+* Faithful copies of the folder view's header pieces. `ListHeader`, `SearchBar`, `SearchFilter`,
+* `SortByPill`, `ToggleViewButtons` and `NoListResults` are all internal to @payloadcms/ui, but the
+* admin loads that package's whole stylesheet through `@payloadcms/next/css`, so reproducing their
+* markup and class names reproduces their appearance exactly. Only the behaviour differs: these
+* take callbacks instead of pushing an admin route, which a drawer cannot survive.
+*/
+const listHeaderClass = "list-header";
+const ListHeader = ({ Actions = [], AfterListHeaderContent, className, title, TitleActions = [] }) => /* @__PURE__ */ jsxs("header", {
+	className: [listHeaderClass, className].filter(Boolean).join(" "),
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: `${listHeaderClass}__content`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: `${listHeaderClass}__title-and-actions`,
+			children: [/* @__PURE__ */ jsx("h1", {
+				className: `${listHeaderClass}__title`,
+				children: title
+			}), TitleActions.length ? /* @__PURE__ */ jsx("div", {
+				className: `${listHeaderClass}__title-actions`,
+				children: TitleActions
+			}) : null]
+		}), Actions.length ? /* @__PURE__ */ jsx("div", {
+			className: `${listHeaderClass}__actions`,
+			children: Actions
+		}) : null]
+	}), AfterListHeaderContent ? /* @__PURE__ */ jsx("div", {
+		className: `${listHeaderClass}__after-header-content`,
+		children: AfterListHeaderContent
+	}) : null]
+});
+/**
+* Copy of the internal `DrawerRelationshipSelect`, which the drawer's list header renders for a
+* polymorphic upload field and hides when only one collection is allowed. Picking an option calls
+* the drawer's own `setSelectedOption`, which re-renders the list server side for that collection,
+* so switching needs nothing from the folder view itself.
+*/
+const DrawerRelationshipSelect = () => {
+	const { config } = useConfig();
+	const { enabledCollections, selectedOption, setSelectedOption } = useListDrawerContext();
+	const { i18n, t } = useTranslation$1();
+	const enabled = config.collections.filter(({ slug }) => enabledCollections?.includes(slug));
+	if (enabled.length < 2) return null;
+	const active = enabled.find(({ slug }) => slug === selectedOption?.value);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "list-drawer__select-collection-wrap",
+		children: [/* @__PURE__ */ jsx(FieldLabel, { label: t("upload:selectCollectionToBrowse") }), /* @__PURE__ */ jsx(ReactSelect, {
+			className: `${listHeaderClass}__select-collection`,
+			isClearable: false,
+			onChange: (option) => {
+				const picked = Array.isArray(option) ? option[0] : option;
+				const target = enabled.find(({ slug }) => slug === picked?.value);
+				if (target) setSelectedOption?.({
+					label: getTranslation(target.labels.singular, i18n),
+					value: target.slug
+				});
+			},
+			options: enabled.map((collection) => ({
+				label: getTranslation(collection.labels.singular, i18n),
+				value: collection.slug
+			})),
+			value: {
+				label: active ? getTranslation(active.labels.singular, i18n) : "",
+				value: active?.slug
+			}
+		})]
+	});
+};
+/** Copy of the internal CloseModalButton the drawer's list header renders. */
+const CloseModalButton = ({ className, slug }) => {
+	const { closeModal } = useModal();
+	const { t } = useTranslation$1();
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": t("general:close"),
+		className: ["close-modal-button", className].filter(Boolean).join(" "),
+		onClick: () => closeModal(slug),
+		type: "button",
+		children: /* @__PURE__ */ jsx(XIcon, {})
+	});
+};
+/** Copy of the internal Dots icon the folder actions menu uses as its trigger. */
+const Dots = ({ ariaLabel }) => /* @__PURE__ */ jsxs("div", {
+	"aria-label": ariaLabel,
+	className: "dots dots--vertical",
+	role: "img",
+	children: [
+		/* @__PURE__ */ jsx("div", {}),
+		/* @__PURE__ */ jsx("div", {}),
+		/* @__PURE__ */ jsx("div", {})
+	]
+});
+const searchFilterClass = "search-filter";
+/**
+* Controlled from above rather than holding the typed text itself. This sits inside the folder
+* provider, which is rebuilt whenever the view or the folder changes, and local state would be
+* wiped by that while the search it had already reported went on filtering the results.
+*/
+const SearchFilter = ({ label, onChange, value }) => /* @__PURE__ */ jsx("div", {
+	className: searchFilterClass,
+	children: /* @__PURE__ */ jsx("input", {
+		"aria-label": label,
+		className: `${searchFilterClass}__input`,
+		onChange: (event) => onChange(event.target.value),
+		placeholder: label,
+		type: "text",
+		value
+	})
+});
+const searchBarClass = "search-bar";
+const SearchBar = ({ Actions = [], label, onSearchChange, search }) => /* @__PURE__ */ jsxs("div", {
+	className: searchBarClass,
+	children: [
+		/* @__PURE__ */ jsx(SearchIcon, {}),
+		/* @__PURE__ */ jsx(SearchFilter, {
+			label,
+			onChange: onSearchChange,
+			value: search
+		}),
+		Actions.length ? /* @__PURE__ */ jsx("div", {
+			className: `${searchBarClass}__actions`,
+			children: Actions
+		}) : null
+	]
+});
+const toggleClass = "folder-view-toggle-button";
+/**
+* Both buttons are icon only, so without a name a screen reader announces two unlabelled buttons
+* and neither can be told from the other. `aria-pressed` carries the active state that the class
+* shows sighted users.
+*/
+const ToggleViewButtons = ({ activeView, setActiveView }) => {
+	const { t } = useTranslation$1();
+	return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		"aria-label": t(keys.gridView),
+		"aria-pressed": activeView === "grid",
+		buttonStyle: "pill",
+		className: [toggleClass, activeView === "grid" && `${toggleClass}--active`].filter(Boolean).join(" "),
+		icon: /* @__PURE__ */ jsx(GridViewIcon, {}),
+		margin: false,
+		onClick: () => setActiveView("grid")
+	}), /* @__PURE__ */ jsx(Button, {
+		"aria-label": t(keys.listView),
+		"aria-pressed": activeView === "list",
+		buttonStyle: "pill",
+		className: [toggleClass, activeView === "list" && `${toggleClass}--active`].filter(Boolean).join(" "),
+		icon: /* @__PURE__ */ jsx(ListViewIcon, {}),
+		margin: false,
+		onClick: () => setActiveView("list")
+	})] });
+};
+const SortDownIcon = ({ className }) => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	className: ["icon icon--sort", className].filter(Boolean).join(" "),
+	fill: "none",
+	height: "20",
+	viewBox: "0 0 20 20",
+	width: "20",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: /* @__PURE__ */ jsx("path", {
+		className: "fill",
+		d: "M2.5 13.3333L5.83333 16.6667M5.83333 16.6667L9.16667 13.3333M5.83333 16.6667V3.33333M9.16667 7.08333H17.5M9.16667 10.4167H15M11.6667 13.75H12.5",
+		stroke: "#2F2F2F",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	})
+});
+const SortUpIcon = ({ className }) => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	className: ["icon icon--sort", className].filter(Boolean).join(" "),
+	fill: "none",
+	height: "20",
+	viewBox: "0 0 20 20",
+	width: "20",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: /* @__PURE__ */ jsx("path", {
+		className: "fill",
+		d: "M2.5 6.66668L5.83333 3.33334M5.83333 3.33334L9.16667 6.66668M5.83333 3.33334V16.6667M11.6667 7.08354H17.5M9.16667 10.4169H15M9.16667 13.7502H12.5",
+		stroke: "#2F2F2F",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	})
+});
+const sortClass = "sort-by-pill";
+const SORT_FIELDS = [
+	{
+		key: "name",
+		label: "general:name"
+	},
+	{
+		key: "createdAt",
+		label: "general:createdAt"
+	},
+	{
+		key: "updatedAt",
+		label: "general:updatedAt"
+	}
+];
+const SortByPill = ({ onChange, sort, t }) => {
+	const descending = sort.startsWith("-");
+	const field = sort.replace("-", "");
+	const activeLabel = SORT_FIELDS.find((option) => option.key === field)?.label ?? "general:name";
+	return /* @__PURE__ */ jsx(Popup, {
+		button: /* @__PURE__ */ jsxs(Pill, {
+			className: `${sortClass}__trigger`,
+			icon: /* @__PURE__ */ jsx(ChevronIcon, {}),
+			size: "small",
+			children: [descending ? /* @__PURE__ */ jsx(SortDownIcon, { className: `${sortClass}__sort-icon` }) : /* @__PURE__ */ jsx(SortUpIcon, { className: `${sortClass}__sort-icon` }), t(activeLabel)]
+		}),
+		className: sortClass,
+		horizontalAlign: "right",
+		render: ({ close }) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+			/* @__PURE__ */ jsx(PopupList.GroupLabel, { label: t(keys.sortByLabel) }),
+			/* @__PURE__ */ jsx(PopupList.ButtonGroup, { children: SORT_FIELDS.map((option) => /* @__PURE__ */ jsx(PopupList.Button, {
+				active: field === option.key,
+				onClick: () => {
+					onChange(descending ? `-${option.key}` : option.key);
+					close();
+				},
+				children: t(option.label)
+			}, option.key)) }),
+			/* @__PURE__ */ jsx(PopupList.Divider, {}),
+			/* @__PURE__ */ jsx(PopupList.GroupLabel, { label: t(keys.orderLabel) }),
+			/* @__PURE__ */ jsxs(PopupList.ButtonGroup, { children: [/* @__PURE__ */ jsxs(PopupList.Button, {
+				active: !descending,
+				className: `${sortClass}__order-option`,
+				onClick: () => {
+					onChange(field);
+					close();
+				},
+				children: [/* @__PURE__ */ jsx(SortUpIcon, {}), t("general:ascending")]
+			}), /* @__PURE__ */ jsxs(PopupList.Button, {
+				active: descending,
+				className: `${sortClass}__order-option`,
+				onClick: () => {
+					onChange(`-${field}`);
+					close();
+				},
+				children: [/* @__PURE__ */ jsx(SortDownIcon, {}), t("general:descending")]
+			})] })
+		] }),
+		size: "medium"
+	});
+};
+const noResultsClass = "no-results";
+const NoListResults = ({ Actions = [], Message }) => /* @__PURE__ */ jsxs("div", {
+	className: noResultsClass,
+	children: [Message, Actions.length > 0 && /* @__PURE__ */ jsx("div", {
+		className: `${noResultsClass}__actions`,
+		children: Actions.map((action, index) => /* @__PURE__ */ jsx(React.Fragment, { children: action }, index))
+	})]
+});
+const listSelectionClass = "list-selection";
+/** Copy of ListSelection_v4, the bar the route view puts in its header when items are selected. */
+const ListSelectionBar = ({ count, ListActions = [], SelectionActions = [] }) => {
+	const { t } = useTranslation$1();
+	return /* @__PURE__ */ jsxs("div", {
+		className: listSelectionClass,
+		children: [
+			/* @__PURE__ */ jsx("span", { children: t("general:selectedCount", {
+				count,
+				label: ""
+			}) }),
+			ListActions.length > 0 && /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("span", { children: "—" }), /* @__PURE__ */ jsx("div", {
+				className: `${listSelectionClass}__actions`,
+				children: ListActions
+			})] }),
+			SelectionActions.length > 0 && /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("span", { children: "—" }), /* @__PURE__ */ jsx("div", {
+				className: `${listSelectionClass}__actions`,
+				children: SelectionActions
+			})] })
+		]
+	});
+};
+const ListSelectionButton = ({ children, onClick }) => /* @__PURE__ */ jsx(Button, {
+	buttonStyle: "none",
+	className: `${listSelectionClass}__button`,
+	el: "button",
+	onClick,
+	children
+});
+const dragOverlayClass = "drag-overlay-selection";
+/** Distance the card is held away from the cursor, matching Payload's own overlay. */
+const cursorGap = 5;
+/**
+* `getEventCoordinates` from `@dnd-kit/utilities`, which reaches this package only through
+* `@dnd-kit/core` and would have to be declared a second peer dependency to import. Reading two
+* numbers off an event does not justify that.
+*/
+const eventCoordinates = (event) => {
+	if (typeof TouchEvent !== "undefined" && event instanceof TouchEvent) {
+		const touch = event.touches[0] ?? event.changedTouches[0];
+		return touch ? {
+			x: touch.clientX,
+			y: touch.clientY
+		} : null;
+	}
+	return event instanceof MouseEvent ? {
+		x: event.clientX,
+		y: event.clientY
+	} : null;
+};
+/**
+* Pins the card's top left corner just below and to the right of the cursor, whatever part of it
+* was grabbed. dnd-kit otherwise preserves the grab point, so a card taken by its bottom edge
+* trails from that edge and covers what is being dragged over.
+*
+* Payload applies the same modifier to its own folder overlay but does not export it.
+*/
+const snapTopLeftToCursor = ({ activatorEvent, draggingNodeRect, transform }) => {
+	if (!draggingNodeRect || !activatorEvent) return transform;
+	const coordinates = eventCoordinates(activatorEvent);
+	if (!coordinates) return transform;
+	return {
+		...transform,
+		x: transform.x + coordinates.x - draggingNodeRect.left + cursorGap,
+		y: transform.y + coordinates.y - draggingNodeRect.top + cursorGap
+	};
+};
+/** Hoisted so the overlay is not handed a new array on every render. */
+const dragOverlayModifiers = [snapTopLeftToCursor];
+/**
+* The card that follows the cursor while dragging. `DragOverlaySelection` and the `FolderFileCard`
+* it renders are both internal, so this reproduces the folder variant of that card: an icon and a
+* title, which is all the original draws once its drop area and popup are left out.
+*/
+const DragOverlaySelection = ({ selectedCount, title }) => /* @__PURE__ */ jsx(DragOverlay, {
+	dropAnimation: null,
+	modifiers: dragOverlayModifiers,
+	style: {
+		height: "unset",
+		maxWidth: "220px"
+	},
+	children: /* @__PURE__ */ jsxs("div", {
+		className: `${dragOverlayClass}__cards`,
+		children: [Array.from({ length: selectedCount > 1 ? 2 : 1 }).map((_, index) => /* @__PURE__ */ jsx("div", {
+			className: `${dragOverlayClass}__card`,
+			style: {
+				right: `${index * 3}px`,
+				top: `-${index * 3}px`
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				className: "folder-file-card folder-file-card--folder folder-file-card--selected",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "folder-file-card__titlebar-area",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "folder-file-card__icon-wrap",
+						children: /* @__PURE__ */ jsx(FolderIcon, { className: "colored-folder-icon" })
+					}), /* @__PURE__ */ jsx("div", {
+						className: "folder-file-card__titlebar-labels",
+						children: /* @__PURE__ */ jsx("p", {
+							className: "folder-file-card__name",
+							title,
+							children: /* @__PURE__ */ jsx("span", { children: title })
+						})
+					})]
+				})
+			})
+		}, index)), selectedCount > 1 ? /* @__PURE__ */ jsx("span", {
+			className: `${dragOverlayClass}__card-count`,
+			children: selectedCount
+		}) : null]
+	})
+});
+/**
+* Copy of the listener `DefaultCollectionFolderView` declares inline, which is why it is not
+* importable. Without it a drop never reaches `moveToFolder` and the provider's drag flag is
+* never cleared.
+*/
+const DndEventListener = ({ onDragEnd, setIsDragging }) => {
+	useDndMonitor({
+		onDragCancel: () => setIsDragging(false),
+		onDragEnd: (event) => {
+			setIsDragging(false);
+			onDragEnd(event);
+		},
+		onDragStart: () => setIsDragging(true)
+	});
+	return null;
+};
+//#endregion
+export { CloseModalButton, DndEventListener, Dots, DragOverlaySelection, DrawerRelationshipSelect, ListHeader, ListSelectionBar, ListSelectionButton, NoListResults, SearchBar, SortByPill, ToggleViewButtons };
+
+//# sourceMappingURL=native.js.map

package/dist/folder/native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native.js","names":["useTranslation"],"sources":["../../src/folder/native.tsx"],"sourcesContent":["'use client'\n\nimport { type DragEndEvent, DragOverlay, type Modifier, useDndMonitor } from '@dnd-kit/core'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n\tButton,\n\tChevronIcon,\n\tFieldLabel,\n\tFolderIcon,\n\tGridViewIcon,\n\tListViewIcon,\n\tPill,\n\tPopup,\n\tPopupList,\n\tReactSelect,\n\tSearchIcon,\n\tuseConfig,\n\tuseListDrawerContext,\n\tuseModal,\n\tXIcon,\n} from '@payloadcms/ui'\nimport type { FolderSortKeys } from 'payload'\nimport React from 'react'\n\nimport { keys } from '../translations/keys'\nimport { useTranslation } from '../translations/useTranslation'\n\n/**\n * Faithful copies of the folder view's header pieces. `ListHeader`, `SearchBar`, `SearchFilter`,\n * `SortByPill`, `ToggleViewButtons` and `NoListResults` are all internal to @payloadcms/ui, but the\n * admin loads that package's whole stylesheet through `@payloadcms/next/css`, so reproducing their\n * markup and class names reproduces their appearance exactly. Only the behaviour differs: these\n * take callbacks instead of pushing an admin route, which a drawer cannot survive.\n */\n\nexport const listHeaderClass = 'list-header'\n\nexport const ListHeader: React.FC<{\n\treadonly Actions?: React.ReactNode[]\n\treadonly AfterListHeaderContent?: React.ReactNode\n\treadonly className?: string\n\treadonly title: string\n\treadonly TitleActions?: React.ReactNode[]\n}> = ({ Actions = [], AfterListHeaderContent, className, title, TitleActions = [] }) => (\n\t<header className={[listHeaderClass, className].filter(Boolean).join(' ')}>\n\t\t<div className={`${listHeaderClass}__content`}>\n\t\t\t<div className={`${listHeaderClass}__title-and-actions`}>\n\t\t\t\t<h1 className={`${listHeaderClass}__title`}>{title}</h1>\n\t\t\t\t{TitleActions.length ? (\n\t\t\t\t\t<div className={`${listHeaderClass}__title-actions`}>{TitleActions}</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{Actions.length ? <div className={`${listHeaderClass}__actions`}>{Actions}</div> : null}\n\t\t</div>\n\t\t{AfterListHeaderContent ? (\n\t\t\t<div className={`${listHeaderClass}__after-header-content`}>{AfterListHeaderContent}</div>\n\t\t) : null}\n\t</header>\n)\n\n/**\n * Copy of the internal `DrawerRelationshipSelect`, which the drawer's list header renders for a\n * polymorphic upload field and hides when only one collection is allowed. Picking an option calls\n * the drawer's own `setSelectedOption`, which re-renders the list server side for that collection,\n * so switching needs nothing from the folder view itself.\n */\nexport const DrawerRelationshipSelect: React.FC = () => {\n\tconst { config } = useConfig()\n\tconst { enabledCollections, selectedOption, setSelectedOption } = useListDrawerContext()\n\tconst { i18n, t } = useTranslation()\n\n\tconst enabled = config.collections.filter(({ slug }) => enabledCollections?.includes(slug))\n\n\tif (enabled.length < 2) {\n\t\treturn null\n\t}\n\n\tconst active = enabled.find(({ slug }) => slug === selectedOption?.value)\n\n\treturn (\n\t\t<div className=\"list-drawer__select-collection-wrap\">\n\t\t\t<FieldLabel label={t('upload:selectCollectionToBrowse')} />\n\t\t\t<ReactSelect\n\t\t\t\tclassName={`${listHeaderClass}__select-collection`}\n\t\t\t\tisClearable={false}\n\t\t\t\tonChange={(option) => {\n\t\t\t\t\tconst picked = Array.isArray(option) ? option[0] : option\n\t\t\t\t\tconst target = enabled.find(({ slug }) => slug === picked?.value)\n\n\t\t\t\t\tif (target) {\n\t\t\t\t\t\tsetSelectedOption?.({\n\t\t\t\t\t\t\tlabel: getTranslation(target.labels.singular, i18n),\n\t\t\t\t\t\t\tvalue: target.slug,\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\toptions={enabled.map((collection) => ({\n\t\t\t\t\tlabel: getTranslation(collection.labels.singular, i18n),\n\t\t\t\t\tvalue: collection.slug,\n\t\t\t\t}))}\n\t\t\t\tvalue={{\n\t\t\t\t\tlabel: active ? getTranslation(active.labels.singular, i18n) : '',\n\t\t\t\t\tvalue: active?.slug,\n\t\t\t\t}}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n\n/** Copy of the internal CloseModalButton the drawer's list header renders. */\nexport const CloseModalButton: React.FC<{ readonly className?: string; readonly slug: string }> = ({\n\tclassName,\n\tslug,\n}) => {\n\tconst { closeModal } = useModal()\n\tconst { t } = useTranslation()\n\n\treturn (\n\t\t<button\n\t\t\taria-label={t('general:close')}\n\t\t\tclassName={['close-modal-button', className].filter(Boolean).join(' ')}\n\t\t\tonClick={() => closeModal(slug)}\n\t\t\ttype=\"button\"\n\t\t>\n\t\t\t<XIcon />\n\t\t</button>\n\t)\n}\n\n/** Copy of the internal Dots icon the folder actions menu uses as its trigger. */\nexport const Dots: React.FC<{ readonly ariaLabel?: string }> = ({ ariaLabel }) => (\n\t<div aria-label={ariaLabel} className=\"dots dots--vertical\" role=\"img\">\n\t\t<div />\n\t\t<div />\n\t\t<div />\n\t</div>\n)\n\nconst searchFilterClass = 'search-filter'\n\n/**\n * Controlled from above rather than holding the typed text itself. This sits inside the folder\n * provider, which is rebuilt whenever the view or the folder changes, and local state would be\n * wiped by that while the search it had already reported went on filtering the results.\n */\nconst SearchFilter: React.FC<{\n\treadonly label: string\n\treadonly onChange: (search: string) => void\n\treadonly value: string\n}> = ({ label, onChange, value }) => (\n\t<div className={searchFilterClass}>\n\t\t{/* No id: Payload's own search filter hard-codes `search-filter-input`, and two of those in\n\t\t    one document break every label and aria association pointing at it. `aria-label` names\n\t\t    this input without one. */}\n\t\t<input\n\t\t\taria-label={label}\n\t\t\tclassName={`${searchFilterClass}__input`}\n\t\t\tonChange={(event) => onChange(event.target.value)}\n\t\t\tplaceholder={label}\n\t\t\ttype=\"text\"\n\t\t\tvalue={value}\n\t\t/>\n\t</div>\n)\n\nconst searchBarClass = 'search-bar'\n\nexport const SearchBar: React.FC<{\n\treadonly Actions?: React.ReactNode[]\n\treadonly label: string\n\treadonly onSearchChange: (search: string) => void\n\treadonly search: string\n}> = ({ Actions = [], label, onSearchChange, search }) => (\n\t<div className={searchBarClass}>\n\t\t<SearchIcon />\n\t\t<SearchFilter label={label} onChange={onSearchChange} value={search} />\n\t\t{Actions.length ? <div className={`${searchBarClass}__actions`}>{Actions}</div> : null}\n\t</div>\n)\n\nconst toggleClass = 'folder-view-toggle-button'\n\n/**\n * Both buttons are icon only, so without a name a screen reader announces two unlabelled buttons\n * and neither can be told from the other. `aria-pressed` carries the active state that the class\n * shows sighted users.\n */\nexport const ToggleViewButtons: React.FC<{\n\treadonly activeView: 'grid' | 'list'\n\treadonly setActiveView: (view: 'grid' | 'list') => void\n}> = ({ activeView, setActiveView }) => {\n\tconst { t } = useTranslation()\n\n\treturn (\n\t\t<React.Fragment>\n\t\t\t<Button\n\t\t\t\taria-label={t(keys.gridView)}\n\t\t\t\taria-pressed={activeView === 'grid'}\n\t\t\t\tbuttonStyle=\"pill\"\n\t\t\t\tclassName={[toggleClass, activeView === 'grid' && `${toggleClass}--active`]\n\t\t\t\t\t.filter(Boolean)\n\t\t\t\t\t.join(' ')}\n\t\t\t\ticon={<GridViewIcon />}\n\t\t\t\tmargin={false}\n\t\t\t\tonClick={() => setActiveView('grid')}\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\taria-label={t(keys.listView)}\n\t\t\t\taria-pressed={activeView === 'list'}\n\t\t\t\tbuttonStyle=\"pill\"\n\t\t\t\tclassName={[toggleClass, activeView === 'list' && `${toggleClass}--active`]\n\t\t\t\t\t.filter(Boolean)\n\t\t\t\t\t.join(' ')}\n\t\t\t\ticon={<ListViewIcon />}\n\t\t\t\tmargin={false}\n\t\t\t\tonClick={() => setActiveView('list')}\n\t\t\t/>\n\t\t</React.Fragment>\n\t)\n}\n\nconst SortDownIcon: React.FC<{ className?: string }> = ({ className }) => (\n\t<svg\n\t\taria-hidden=\"true\"\n\t\tclassName={['icon icon--sort', className].filter(Boolean).join(' ')}\n\t\tfill=\"none\"\n\t\theight=\"20\"\n\t\tviewBox=\"0 0 20 20\"\n\t\twidth=\"20\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t>\n\t\t<path\n\t\t\tclassName=\"fill\"\n\t\t\td=\"M2.5 13.3333L5.83333 16.6667M5.83333 16.6667L9.16667 13.3333M5.83333 16.6667V3.33333M9.16667 7.08333H17.5M9.16667 10.4167H15M11.6667 13.75H12.5\"\n\t\t\tstroke=\"#2F2F2F\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t/>\n\t</svg>\n)\n\nconst SortUpIcon: React.FC<{ className?: string }> = ({ className }) => (\n\t<svg\n\t\taria-hidden=\"true\"\n\t\tclassName={['icon icon--sort', className].filter(Boolean).join(' ')}\n\t\tfill=\"none\"\n\t\theight=\"20\"\n\t\tviewBox=\"0 0 20 20\"\n\t\twidth=\"20\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t>\n\t\t<path\n\t\t\tclassName=\"fill\"\n\t\t\td=\"M2.5 6.66668L5.83333 3.33334M5.83333 3.33334L9.16667 6.66668M5.83333 3.33334V16.6667M11.6667 7.08354H17.5M9.16667 10.4169H15M9.16667 13.7502H12.5\"\n\t\t\tstroke=\"#2F2F2F\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t/>\n\t</svg>\n)\n\nconst sortClass = 'sort-by-pill'\n\nconst SORT_FIELDS: { key: 'createdAt' | 'name' | 'updatedAt'; label: string }[] = [\n\t{ key: 'name', label: 'general:name' },\n\t{ key: 'createdAt', label: 'general:createdAt' },\n\t{ key: 'updatedAt', label: 'general:updatedAt' },\n]\n\nexport const SortByPill: React.FC<{\n\treadonly onChange: (sort: FolderSortKeys) => void\n\treadonly sort: FolderSortKeys\n\treadonly t: (key: string) => string\n}> = ({ onChange, sort, t }) => {\n\tconst descending = sort.startsWith('-')\n\tconst field = sort.replace('-', '') as 'createdAt' | 'name' | 'updatedAt'\n\tconst activeLabel = SORT_FIELDS.find((option) => option.key === field)?.label ?? 'general:name'\n\n\treturn (\n\t\t<Popup\n\t\t\tbutton={\n\t\t\t\t<Pill className={`${sortClass}__trigger`} icon={<ChevronIcon />} size=\"small\">\n\t\t\t\t\t{descending ? (\n\t\t\t\t\t\t<SortDownIcon className={`${sortClass}__sort-icon`} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<SortUpIcon className={`${sortClass}__sort-icon`} />\n\t\t\t\t\t)}\n\t\t\t\t\t{t(activeLabel)}\n\t\t\t\t</Pill>\n\t\t\t}\n\t\t\tclassName={sortClass}\n\t\t\thorizontalAlign=\"right\"\n\t\t\trender={({ close }) => (\n\t\t\t\t<React.Fragment>\n\t\t\t\t\t<PopupList.GroupLabel label={t(keys.sortByLabel)} />\n\t\t\t\t\t<PopupList.ButtonGroup>\n\t\t\t\t\t\t{SORT_FIELDS.map((option) => (\n\t\t\t\t\t\t\t<PopupList.Button\n\t\t\t\t\t\t\t\tactive={field === option.key}\n\t\t\t\t\t\t\t\tkey={option.key}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tonChange((descending ? `-${option.key}` : option.key) as FolderSortKeys)\n\t\t\t\t\t\t\t\t\tclose()\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{t(option.label)}\n\t\t\t\t\t\t\t</PopupList.Button>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</PopupList.ButtonGroup>\n\t\t\t\t\t<PopupList.Divider />\n\t\t\t\t\t<PopupList.GroupLabel label={t(keys.orderLabel)} />\n\t\t\t\t\t<PopupList.ButtonGroup>\n\t\t\t\t\t\t<PopupList.Button\n\t\t\t\t\t\t\tactive={!descending}\n\t\t\t\t\t\t\tclassName={`${sortClass}__order-option`}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tonChange(field as FolderSortKeys)\n\t\t\t\t\t\t\t\tclose()\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SortUpIcon />\n\t\t\t\t\t\t\t{t('general:ascending')}\n\t\t\t\t\t\t</PopupList.Button>\n\t\t\t\t\t\t<PopupList.Button\n\t\t\t\t\t\t\tactive={descending}\n\t\t\t\t\t\t\tclassName={`${sortClass}__order-option`}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tonChange(`-${field}` as FolderSortKeys)\n\t\t\t\t\t\t\t\tclose()\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SortDownIcon />\n\t\t\t\t\t\t\t{t('general:descending')}\n\t\t\t\t\t\t</PopupList.Button>\n\t\t\t\t\t</PopupList.ButtonGroup>\n\t\t\t\t</React.Fragment>\n\t\t\t)}\n\t\t\tsize=\"medium\"\n\t\t/>\n\t)\n}\n\nconst noResultsClass = 'no-results'\n\nexport const NoListResults: React.FC<{\n\treadonly Actions?: React.ReactNode[]\n\treadonly Message: React.ReactNode\n}> = ({ Actions = [], Message }) => (\n\t<div className={noResultsClass}>\n\t\t{Message}\n\t\t{Actions.length > 0 && (\n\t\t\t<div className={`${noResultsClass}__actions`}>\n\t\t\t\t{Actions.map((action, index) => (\n\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: mirrors Payload's own NoListResults\n\t\t\t\t\t<React.Fragment key={index}>{action}</React.Fragment>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t)}\n\t</div>\n)\n\nconst listSelectionClass = 'list-selection'\n\n/** Copy of ListSelection_v4, the bar the route view puts in its header when items are selected. */\nexport const ListSelectionBar: React.FC<{\n\treadonly count: number\n\treadonly ListActions?: React.ReactNode[]\n\treadonly SelectionActions?: React.ReactNode[]\n}> = ({ count, ListActions = [], SelectionActions = [] }) => {\n\tconst { t } = useTranslation()\n\n\treturn (\n\t\t<div className={listSelectionClass}>\n\t\t\t<span>{t('general:selectedCount', { count, label: '' })}</span>\n\t\t\t{ListActions.length > 0 && (\n\t\t\t\t<React.Fragment>\n\t\t\t\t\t<span>&mdash;</span>\n\t\t\t\t\t<div className={`${listSelectionClass}__actions`}>{ListActions}</div>\n\t\t\t\t</React.Fragment>\n\t\t\t)}\n\t\t\t{SelectionActions.length > 0 && (\n\t\t\t\t<React.Fragment>\n\t\t\t\t\t<span>&mdash;</span>\n\t\t\t\t\t<div className={`${listSelectionClass}__actions`}>{SelectionActions}</div>\n\t\t\t\t</React.Fragment>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nexport const ListSelectionButton: React.FC<{\n\treadonly children: React.ReactNode\n\treadonly onClick: () => void\n}> = ({ children, onClick }) => (\n\t<Button\n\t\tbuttonStyle=\"none\"\n\t\tclassName={`${listSelectionClass}__button`}\n\t\tel=\"button\"\n\t\tonClick={onClick}\n\t>\n\t\t{children}\n\t</Button>\n)\n\nconst dragOverlayClass = 'drag-overlay-selection'\n\n/** Distance the card is held away from the cursor, matching Payload's own overlay. */\nconst cursorGap = 5\n\n/**\n * `getEventCoordinates` from `@dnd-kit/utilities`, which reaches this package only through\n * `@dnd-kit/core` and would have to be declared a second peer dependency to import. Reading two\n * numbers off an event does not justify that.\n */\nconst eventCoordinates = (event: Event): null | { x: number; y: number } => {\n\tif (typeof TouchEvent !== 'undefined' && event instanceof TouchEvent) {\n\t\tconst touch = event.touches[0] ?? event.changedTouches[0]\n\t\treturn touch ? { x: touch.clientX, y: touch.clientY } : null\n\t}\n\n\treturn event instanceof MouseEvent ? { x: event.clientX, y: event.clientY } : null\n}\n\n/**\n * Pins the card's top left corner just below and to the right of the cursor, whatever part of it\n * was grabbed. dnd-kit otherwise preserves the grab point, so a card taken by its bottom edge\n * trails from that edge and covers what is being dragged over.\n *\n * Payload applies the same modifier to its own folder overlay but does not export it.\n */\nexport const snapTopLeftToCursor: Modifier = ({ activatorEvent, draggingNodeRect, transform }) => {\n\tif (!draggingNodeRect || !activatorEvent) {\n\t\treturn transform\n\t}\n\n\tconst coordinates = eventCoordinates(activatorEvent)\n\tif (!coordinates) {\n\t\treturn transform\n\t}\n\n\treturn {\n\t\t...transform,\n\t\tx: transform.x + coordinates.x - draggingNodeRect.left + cursorGap,\n\t\ty: transform.y + coordinates.y - draggingNodeRect.top + cursorGap,\n\t}\n}\n\n/** Hoisted so the overlay is not handed a new array on every render. */\nconst dragOverlayModifiers = [snapTopLeftToCursor]\n\n/**\n * The card that follows the cursor while dragging. `DragOverlaySelection` and the `FolderFileCard`\n * it renders are both internal, so this reproduces the folder variant of that card: an icon and a\n * title, which is all the original draws once its drop area and popup are left out.\n */\nexport const DragOverlaySelection: React.FC<{\n\treadonly selectedCount: number\n\treadonly title: string\n}> = ({ selectedCount, title }) => (\n\t<DragOverlay\n\t\tdropAnimation={null}\n\t\tmodifiers={dragOverlayModifiers}\n\t\tstyle={{ height: 'unset', maxWidth: '220px' }}\n\t>\n\t\t<div className={`${dragOverlayClass}__cards`}>\n\t\t\t{Array.from({ length: selectedCount > 1 ? 2 : 1 }).map((_, index) => (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`${dragOverlayClass}__card`}\n\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: mirrors Payload's own overlay\n\t\t\t\t\tkey={index}\n\t\t\t\t\tstyle={{ right: `${index * 3}px`, top: `-${index * 3}px` }}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"folder-file-card folder-file-card--folder folder-file-card--selected\">\n\t\t\t\t\t\t<div className=\"folder-file-card__titlebar-area\">\n\t\t\t\t\t\t\t<div className=\"folder-file-card__icon-wrap\">\n\t\t\t\t\t\t\t\t<FolderIcon className=\"colored-folder-icon\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"folder-file-card__titlebar-labels\">\n\t\t\t\t\t\t\t\t<p className=\"folder-file-card__name\" title={title}>\n\t\t\t\t\t\t\t\t\t<span>{title}</span>\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t\t{selectedCount > 1 ? (\n\t\t\t\t<span className={`${dragOverlayClass}__card-count`}>{selectedCount}</span>\n\t\t\t) : null}\n\t\t</div>\n\t</DragOverlay>\n)\n\n/**\n * Copy of the listener `DefaultCollectionFolderView` declares inline, which is why it is not\n * importable. Without it a drop never reaches `moveToFolder` and the provider's drag flag is\n * never cleared.\n */\nexport const DndEventListener: React.FC<{\n\treadonly onDragEnd: (event: DragEndEvent) => void\n\treadonly setIsDragging: (isDragging: boolean) => void\n}> = ({ onDragEnd, setIsDragging }) => {\n\tuseDndMonitor({\n\t\tonDragCancel: () => setIsDragging(false),\n\t\tonDragEnd: (event) => {\n\t\t\tsetIsDragging(false)\n\t\t\tonDragEnd(event)\n\t\t},\n\t\tonDragStart: () => setIsDragging(true),\n\t})\n\n\treturn null\n}\n"],"mappings":"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"}

package/dist/folder/useChosenUploads.js

@@ -0,0 +1,27 @@
+"use client";
+import { chosenUploadIds, packChosenIds, unpackChosenIds } from "./chosenUploadIds.js";
+import { useFieldPath, useFormFields } from "@payloadcms/ui";
+import React from "react";
+//#region src/folder/useChosenUploads.ts
+/**
+* The ids the upload field already holds, for one collection.
+*
+* Payload's upload field appends whatever the drawer hands it, in both paths: `onSelect`
+* for a double click and `onBulkSelect` for the selection pill. Neither checks what is
+* already there, so picking a file a second time stores it twice. On the list tab that
+* never comes up, because the field hides what it holds through `filterOptions`. The
+* drawer is rendered inside the field, so the same value is reachable from here and the
+* folder tab can hide the same files.
+*
+* `useFieldPath` is marked experimental upstream. If it ever stops resolving, the set comes
+* back empty and the folder tab lists everything, as it did before.
+*/
+const useChosenUploads = (collectionSlug) => {
+	const path = useFieldPath();
+	const packed = useFormFields(([fields]) => packChosenIds(chosenUploadIds(path ? fields?.[path]?.value : void 0, collectionSlug)));
+	return React.useMemo(() => new Set(packed ? unpackChosenIds(packed) : []), [packed]);
+};
+//#endregion
+export { useChosenUploads };
+
+//# sourceMappingURL=useChosenUploads.js.map

package/dist/folder/useChosenUploads.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChosenUploads.js","names":[],"sources":["../../src/folder/useChosenUploads.ts"],"sourcesContent":["'use client'\n\nimport { useFieldPath, useFormFields } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { chosenUploadIds, packChosenIds, unpackChosenIds } from './chosenUploadIds'\n\n/**\n * The ids the upload field already holds, for one collection.\n *\n * Payload's upload field appends whatever the drawer hands it, in both paths: `onSelect`\n * for a double click and `onBulkSelect` for the selection pill. Neither checks what is\n * already there, so picking a file a second time stores it twice. On the list tab that\n * never comes up, because the field hides what it holds through `filterOptions`. The\n * drawer is rendered inside the field, so the same value is reachable from here and the\n * folder tab can hide the same files.\n *\n * `useFieldPath` is marked experimental upstream. If it ever stops resolving, the set comes\n * back empty and the folder tab lists everything, as it did before.\n */\nexport const useChosenUploads = (collectionSlug: string): Set<string> => {\n\tconst path = useFieldPath()\n\n\tconst packed = useFormFields(([fields]) =>\n\t\tpackChosenIds(chosenUploadIds(path ? fields?.[path]?.value : undefined, collectionSlug))\n\t)\n\n\treturn React.useMemo(() => new Set(packed ? unpackChosenIds(packed) : []), [packed])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAoBA,MAAa,oBAAoB,mBAAwC;CACxE,MAAM,OAAO,aAAa;CAE1B,MAAM,SAAS,eAAe,CAAC,YAC9B,cAAc,gBAAgB,OAAO,SAAS,OAAO,QAAQ,KAAA,GAAW,cAAc,CAAC,CACxF;CAEA,OAAO,MAAM,cAAc,IAAI,IAAI,SAAS,gBAAgB,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC;AACpF"}