@payloadcms/ui 4.0.0-internal.e55ccef → 4.0.0-internal.ea6e8f8

package/dist/elements/BranchSelector/index.js

@@ -0,0 +1,255 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { branchesCollectionSlug, formatAdminURL, MAIN_BRANCH } from 'payload/shared';
+import React, { Fragment, useMemo } from 'react';
+import { BranchIcon } from '../../icons/Branch/index.js';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { NewTabIcon } from '../../icons/NewTab/index.js';
+import { PlusIcon } from '../../icons/Plus/index.js';
+import { useBranch, useShowBranchSelector } from '../../providers/Branch/index.js';
+import { useConfig } from '../../providers/Config/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { Button } from '../Button/index.js';
+import { Combobox } from '../Combobox/index.js';
+import { Link } from '../Link/index.js';
+import { useMergeBranch } from '../MergeBranch/context.js';
+import { useModal } from '../Modal/index.js';
+import { NewBranchModal, newBranchModalSlug } from './NewBranchModal/index.js';
+import './index.css';
+const baseClass = 'branch-selector';
+/**
+ * Switcher for the active content branch, sitting to the left of the breadcrumb
+ * trail — everything after it is scoped to the branch it names.
+ *
+ * Renders nothing when branching is off, and nothing while `main` is the only
+ * branch there is — until a branch exists there is nothing to switch to.
+ */
+export const BranchSelector = ({
+  className
+}) => {
+  const {
+    activeBranch,
+    branches,
+    setBranch
+  } = useBranch();
+  const showSelector = useShowBranchSelector();
+  const {
+    t
+  } = useTranslation();
+  const {
+    openModal
+  } = useModal();
+  const {
+    openMerge
+  } = useMergeBranch();
+  const {
+    config: {
+      routes: {
+        admin: adminRoute
+      }
+    }
+  } = useConfig();
+  const manageBranchesURL = formatAdminURL({
+    adminRoute,
+    path: `/collections/${branchesCollectionSlug}`
+  });
+  // A branch that was merged, closed or made unreadable while it was still
+  // selected is no longer in the list. It is still what the request resolved to,
+  // so the switcher names it — and pinning it at the top is also the way out.
+  const activeOption = activeBranch === MAIN_BRANCH ? {
+    name: MAIN_BRANCH,
+    slug: MAIN_BRANCH
+  } : branches.find(({
+    slug
+  }) => slug === activeBranch) ?? {
+    name: activeBranch,
+    slug: activeBranch
+  };
+  const {
+    entries: entries_0,
+    slugByEntry: slugByEntry_0
+  } = useMemo(() => {
+    // Everything except where you already are: the active branch is pinned above
+    // the search, so listing it again would offer switching to it.
+    const options = [{
+      name: MAIN_BRANCH,
+      slug: MAIN_BRANCH
+    }, ...branches].filter(({
+      slug: slug_0
+    }) => slug_0 !== activeBranch);
+    const slugByEntry = new Map();
+    const entries = options.map(option => {
+      const hasDistinctName = option.name !== option.slug;
+      const entry = {
+        Component: /*#__PURE__*/_jsx("span", {
+          className: `${baseClass}__option`,
+          children: /*#__PURE__*/_jsxs("span", {
+            className: `${baseClass}__option-labels`,
+            children: [/*#__PURE__*/_jsx("span", {
+              className: `${baseClass}__option-name`,
+              children: option.name
+            }), option.isScheduled ? /*#__PURE__*/_jsx("span", {
+              className: `${baseClass}__option-scheduled`,
+              children: t('branching:scheduledToMerge')
+            }) : option.isMerged && /*#__PURE__*/_jsx("span", {
+              className: `${baseClass}__option-merged`,
+              children: t('branching:merged')
+            })]
+          })
+        }),
+        // The slug is not rendered — editors name branches, the slug is derived —
+        // but it stays searchable, since it is what URLs and the API expose.
+        name: hasDistinctName ? `${option.name} ${option.slug}` : option.name
+      };
+      slugByEntry.set(entry, option.slug);
+      return entry;
+    });
+    return {
+      entries,
+      slugByEntry
+    };
+  }, [activeBranch, branches, t]);
+  if (!showSelector) {
+    return null;
+  }
+  const activeLabel = branches.find(({
+    slug: slug_1
+  }) => slug_1 === activeBranch)?.name ?? activeBranch ?? MAIN_BRANCH;
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(Combobox, {
+      "aria-label": t('branching:branches'),
+      className: [baseClass, className].filter(Boolean).join(' '),
+      entries: entries_0,
+      // Pinned rather than listed, so both stay reachable no matter what the
+      // search has filtered the list down to.
+      footer: ({
+        close
+      }) => /*#__PURE__*/_jsxs(Fragment, {
+        children: [/*#__PURE__*/_jsx(Link, {
+          className: `${baseClass}__option ${baseClass}__action ${baseClass}__manage`,
+          href: manageBranchesURL,
+          onClick: close,
+          children: /*#__PURE__*/_jsx("span", {
+            className: `${baseClass}__option-labels`,
+            children: t('branching:manageBranches')
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__footer-divider`
+        }), /*#__PURE__*/_jsx("button", {
+          className: `${baseClass}__option ${baseClass}__action ${baseClass}__create`,
+          onClick: () => {
+            close();
+            openModal(newBranchModalSlug);
+          },
+          type: "button",
+          children: /*#__PURE__*/_jsxs("span", {
+            className: `${baseClass}__option-labels`,
+            children: [/*#__PURE__*/_jsx(PlusIcon, {
+              size: 16
+            }), t('branching:createNewBranch')]
+          })
+        })]
+      }),
+      // Where you are, before what you could switch to. On a branch the name
+      // itself is the way to manage it, so the row carries only the name and the
+      // one action that is not reachable from anywhere else.
+      header: ({
+        close: close_0
+      }) => /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__current`,
+        children: [activeOption.id === undefined ? /*#__PURE__*/_jsx("span", {
+          className: `${baseClass}__current-name`,
+          children: activeOption.name
+        }) :
+        // Opens in a new tab, which is what the icon promises. Reviewing a
+        // branch is a detour from whatever you were editing when you opened
+        // the switcher, so it should not cost you that place.
+        /*#__PURE__*/
+        _jsxs(Link, {
+          className: `${baseClass}__current-name ${baseClass}__current-link`,
+          href: formatAdminURL({
+            adminRoute,
+            path: `/collections/${branchesCollectionSlug}/${activeOption.id}`
+          }),
+          onClick: close_0,
+          rel: "noopener noreferrer",
+          target: "_blank",
+          children: [/*#__PURE__*/_jsx("span", {
+            className: `${baseClass}__current-text`,
+            children: activeOption.name
+          }), /*#__PURE__*/_jsx(NewTabIcon, {
+            className: `${baseClass}__current-icon`,
+            size: 16
+          })]
+        }), activeOption.id !== undefined && /*#__PURE__*/_jsx(Button, {
+          buttonStyle: "primary",
+          onClick: () => {
+            close_0();
+            // No selection to pass: from the switcher, merging means the whole
+            // branch — so it hands over the way to narrow that instead, and
+            // lets the modal count what is pending.
+            openMerge({
+              branchID: activeOption.id,
+              branchName: activeOption.name,
+              branchSlug: activeOption.slug,
+              reviewURL: formatAdminURL({
+                adminRoute,
+                path: `/collections/${branchesCollectionSlug}/${activeOption.id}`
+              })
+            });
+          },
+          size: "medium",
+          children: t('branching:merge')
+        })]
+      }),
+      horizontalAlign: "left",
+      // Searchable as soon as there is anything to search. With nothing to switch
+      // to, a search box and a "no matches" message describe a search nobody ran —
+      // the popup is then only its two actions.
+      minEntriesForSearch: entries_0.length ? 0 : 1,
+      onSelect: entry_0 => {
+        const slug_2 = slugByEntry_0.get(entry_0);
+        if (slug_2) {
+          setBranch(slug_2);
+        }
+      },
+      portalClassName: `${baseClass}__popup`,
+      renderButton: ({
+        active,
+        onClick,
+        onKeyDown,
+        ...ariaProps
+      }) => /*#__PURE__*/_jsx(Button, {
+        "aria-label": `${t('branching:selectBranch')}: ${activeLabel}`,
+        buttonStyle: "secondary",
+        className: `${baseClass}__trigger`,
+        extraButtonProps: {
+          onKeyDown
+        },
+        icon: /*#__PURE__*/_jsx(BranchIcon, {}),
+        iconPosition: "left",
+        onClick: onClick,
+        selected: active,
+        size: "medium",
+        ...ariaProps,
+        children: /*#__PURE__*/_jsxs("span", {
+          className: `${baseClass}__trigger-label`,
+          children: [/*#__PURE__*/_jsx("span", {
+            className: `${baseClass}__trigger-name`,
+            children: activeLabel
+          }), /*#__PURE__*/_jsx(ChevronIcon, {
+            direction: active ? 'up' : 'down',
+            size: 16
+          })]
+        })
+      }),
+      searchPlaceholder: t('branching:searchBranches'),
+      // Suppressed only when there is nothing to match against in the first place;
+      // a search that filters everything out still says so.
+      showEmptyMessage: entries_0.length > 0,
+      size: "fit-content"
+    }), /*#__PURE__*/_jsx(NewBranchModal, {})]
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/BranchSelector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["branchesCollectionSlug","formatAdminURL","MAIN_BRANCH","React","Fragment","useMemo","BranchIcon","ChevronIcon","NewTabIcon","PlusIcon","useBranch","useShowBranchSelector","useConfig","useTranslation","Button","Combobox","Link","useMergeBranch","useModal","NewBranchModal","newBranchModalSlug","baseClass","BranchSelector","className","activeBranch","branches","setBranch","showSelector","t","openModal","openMerge","config","routes","admin","adminRoute","manageBranchesURL","path","activeOption","name","slug","find","entries","slugByEntry","options","filter","Map","map","option","hasDistinctName","entry","Component","_jsx","_jsxs","isScheduled","isMerged","set","activeLabel","Boolean","join","footer","close","href","onClick","type","size","header","id","undefined","rel","target","buttonStyle","branchID","branchName","branchSlug","reviewURL","horizontalAlign","minEntriesForSearch","length","onSelect","get","portalClassName","renderButton","active","onKeyDown","ariaProps","extraButtonProps","icon","iconPosition","selected","direction","searchPlaceholder","showEmptyMessage"],"sources":["../../../src/elements/BranchSelector/index.tsx"],"sourcesContent":["'use client'\n\nimport { branchesCollectionSlug, formatAdminURL, MAIN_BRANCH } from 'payload/shared'\nimport React, { Fragment, useMemo } from 'react'\n\nimport type { BranchOption } from '../../providers/Branch/index.js'\nimport type { ComboboxEntry } from '../Combobox/index.js'\n\nimport { BranchIcon } from '../../icons/Branch/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { NewTabIcon } from '../../icons/NewTab/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { useBranch, useShowBranchSelector } from '../../providers/Branch/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Combobox } from '../Combobox/index.js'\nimport { Link } from '../Link/index.js'\nimport { useMergeBranch } from '../MergeBranch/context.js'\nimport { useModal } from '../Modal/index.js'\nimport { NewBranchModal, newBranchModalSlug } from './NewBranchModal/index.js'\nimport './index.css'\n\nconst baseClass = 'branch-selector'\n\n/**\n * Switcher for the active content branch, sitting to the left of the breadcrumb\n * trail — everything after it is scoped to the branch it names.\n *\n * Renders nothing when branching is off, and nothing while `main` is the only\n * branch there is — until a branch exists there is nothing to switch to.\n */\nexport const BranchSelector: React.FC<{ className?: string }> = ({ className }) => {\n  const { activeBranch, branches, setBranch } = useBranch()\n  const showSelector = useShowBranchSelector()\n  const { t } = useTranslation()\n  const { openModal } = useModal()\n  const { openMerge } = useMergeBranch()\n\n  const {\n    config: {\n      routes: { admin: adminRoute },\n    },\n  } = useConfig()\n\n  const manageBranchesURL = formatAdminURL({\n    adminRoute,\n    path: `/collections/${branchesCollectionSlug}`,\n  })\n\n  // A branch that was merged, closed or made unreadable while it was still\n  // selected is no longer in the list. It is still what the request resolved to,\n  // so the switcher names it — and pinning it at the top is also the way out.\n  const activeOption: BranchOption =\n    activeBranch === MAIN_BRANCH\n      ? { name: MAIN_BRANCH, slug: MAIN_BRANCH }\n      : (branches.find(({ slug }) => slug === activeBranch) ?? {\n          name: activeBranch,\n          slug: activeBranch,\n        })\n\n  const { entries, slugByEntry } = useMemo(() => {\n    // Everything except where you already are: the active branch is pinned above\n    // the search, so listing it again would offer switching to it.\n    const options: BranchOption[] = [{ name: MAIN_BRANCH, slug: MAIN_BRANCH }, ...branches].filter(\n      ({ slug }) => slug !== activeBranch,\n    )\n\n    const slugByEntry = new Map<ComboboxEntry, string>()\n\n    const entries = options.map((option) => {\n      const hasDistinctName = option.name !== option.slug\n\n      const entry: ComboboxEntry = {\n        Component: (\n          <span className={`${baseClass}__option`}>\n            <span className={`${baseClass}__option-labels`}>\n              <span className={`${baseClass}__option-name`}>{option.name}</span>\n              {/* A merged branch is still switchable, so it stays in the list — but\n                  \"nothing pending\" is worth saying, or it looks identical to a\n                  branch with work on it. */}\n              {option.isScheduled ? (\n                <span className={`${baseClass}__option-scheduled`}>\n                  {t('branching:scheduledToMerge')}\n                </span>\n              ) : (\n                option.isMerged && (\n                  <span className={`${baseClass}__option-merged`}>{t('branching:merged')}</span>\n                )\n              )}\n            </span>\n          </span>\n        ),\n        // The slug is not rendered — editors name branches, the slug is derived —\n        // but it stays searchable, since it is what URLs and the API expose.\n        name: hasDistinctName ? `${option.name} ${option.slug}` : option.name,\n      }\n\n      slugByEntry.set(entry, option.slug)\n\n      return entry\n    })\n\n    return { entries, slugByEntry }\n  }, [activeBranch, branches, t])\n\n  if (!showSelector) {\n    return null\n  }\n\n  const activeLabel =\n    branches.find(({ slug }) => slug === activeBranch)?.name ?? activeBranch ?? MAIN_BRANCH\n\n  return (\n    <Fragment>\n      <Combobox\n        aria-label={t('branching:branches')}\n        className={[baseClass, className].filter(Boolean).join(' ')}\n        entries={entries}\n        // Pinned rather than listed, so both stay reachable no matter what the\n        // search has filtered the list down to.\n        footer={({ close }) => (\n          <Fragment>\n            <Link\n              className={`${baseClass}__option ${baseClass}__action ${baseClass}__manage`}\n              href={manageBranchesURL}\n              onClick={close}\n            >\n              <span className={`${baseClass}__option-labels`}>{t('branching:manageBranches')}</span>\n            </Link>\n            <div className={`${baseClass}__footer-divider`} />\n            <button\n              className={`${baseClass}__option ${baseClass}__action ${baseClass}__create`}\n              onClick={() => {\n                close()\n                openModal(newBranchModalSlug)\n              }}\n              type=\"button\"\n            >\n              <span className={`${baseClass}__option-labels`}>\n                <PlusIcon size={16} />\n                {t('branching:createNewBranch')}\n              </span>\n            </button>\n          </Fragment>\n        )}\n        // Where you are, before what you could switch to. On a branch the name\n        // itself is the way to manage it, so the row carries only the name and the\n        // one action that is not reachable from anywhere else.\n        header={({ close }) => (\n          <div className={`${baseClass}__current`}>\n            {activeOption.id === undefined ? (\n              <span className={`${baseClass}__current-name`}>{activeOption.name}</span>\n            ) : (\n              // Opens in a new tab, which is what the icon promises. Reviewing a\n              // branch is a detour from whatever you were editing when you opened\n              // the switcher, so it should not cost you that place.\n              <Link\n                className={`${baseClass}__current-name ${baseClass}__current-link`}\n                href={formatAdminURL({\n                  adminRoute,\n                  path: `/collections/${branchesCollectionSlug}/${activeOption.id}`,\n                })}\n                onClick={close}\n                rel=\"noopener noreferrer\"\n                target=\"_blank\"\n              >\n                <span className={`${baseClass}__current-text`}>{activeOption.name}</span>\n                <NewTabIcon className={`${baseClass}__current-icon`} size={16} />\n              </Link>\n            )}\n            {activeOption.id !== undefined && (\n              <Button\n                buttonStyle=\"primary\"\n                onClick={() => {\n                  close()\n                  // No selection to pass: from the switcher, merging means the whole\n                  // branch — so it hands over the way to narrow that instead, and\n                  // lets the modal count what is pending.\n                  openMerge({\n                    branchID: activeOption.id,\n                    branchName: activeOption.name,\n                    branchSlug: activeOption.slug,\n                    reviewURL: formatAdminURL({\n                      adminRoute,\n                      path: `/collections/${branchesCollectionSlug}/${activeOption.id}`,\n                    }),\n                  })\n                }}\n                size=\"medium\"\n              >\n                {t('branching:merge')}\n              </Button>\n            )}\n          </div>\n        )}\n        horizontalAlign=\"left\"\n        // Searchable as soon as there is anything to search. With nothing to switch\n        // to, a search box and a \"no matches\" message describe a search nobody ran —\n        // the popup is then only its two actions.\n        minEntriesForSearch={entries.length ? 0 : 1}\n        onSelect={(entry) => {\n          const slug = slugByEntry.get(entry)\n\n          if (slug) {\n            setBranch(slug)\n          }\n        }}\n        portalClassName={`${baseClass}__popup`}\n        renderButton={({ active, onClick, onKeyDown, ...ariaProps }) => (\n          <Button\n            aria-label={`${t('branching:selectBranch')}: ${activeLabel}`}\n            buttonStyle=\"secondary\"\n            className={`${baseClass}__trigger`}\n            extraButtonProps={{ onKeyDown }}\n            icon={<BranchIcon />}\n            iconPosition=\"left\"\n            onClick={onClick}\n            selected={active}\n            size=\"medium\"\n            {...ariaProps}\n          >\n            <span className={`${baseClass}__trigger-label`}>\n              <span className={`${baseClass}__trigger-name`}>{activeLabel}</span>\n              <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n            </span>\n          </Button>\n        )}\n        searchPlaceholder={t('branching:searchBranches')}\n        // Suppressed only when there is nothing to match against in the first place;\n        // a search that filters everything out still says so.\n        showEmptyMessage={entries.length > 0}\n        size=\"fit-content\"\n      />\n      <NewBranchModal />\n    </Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/BulkUpload/ActionsBar/index.css

@@ -45,6 +45,7 @@
     white-space: nowrap;
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 1024px) {
     .bulk-upload--actions-bar__navigation {
       justify-content: space-between;

package/dist/elements/BulkUpload/ActionsBar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/ActionsBar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,aAAa,CAAA;AAIpB,wBAAgB,UAAU,sBAoDzB;AAED,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AACD,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,EAAE,YAAY,qBA4BlD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/ActionsBar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,aAAa,CAAA;AAIpB,wBAAgB,UAAU,sBAoDzB;AAED,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AACD,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,EAAE,YAAY,qBA6BlD"}

package/dist/elements/BulkUpload/ActionsBar/index.js

@@ -85,7 +85,7 @@ export function ActionsBar() {
   return t0;
 }
 export function Actions(t0) {
-  const $ = _c(12);
+  const $ = _c(13);
   const {
     className
   } = t0;
@@ -99,6 +99,7 @@ export function Actions(t0) {
     collectionSlug,
     hasPublishPermission,
     hasSavePermission,
+    isInitializing,
     saveAllDocs
   } = useFormsManager();
   let t1;
@@ -123,10 +124,10 @@ export function Actions(t0) {
   }
   const t3 = t2.join(" ");
   let t4;
-  if ($[5] !== collectionConfig?.versions?.drafts || $[6] !== hasPublishPermission || $[7] !== hasSavePermission || $[8] !== saveAllDocs || $[9] !== t || $[10] !== t3) {
+  if ($[5] !== collectionConfig?.versions?.drafts || $[6] !== hasPublishPermission || $[7] !== hasSavePermission || $[8] !== isInitializing || $[9] !== saveAllDocs || $[10] !== t || $[11] !== t3) {
     t4 = _jsxs("div", {
       className: t3,
-      children: [collectionConfig?.versions?.drafts && hasSavePermission ? _jsx(Button, {
+      children: [collectionConfig?.versions?.drafts && hasSavePermission && !isInitializing ? _jsx(Button, {
         buttonStyle: "secondary",
         onClick: () => void saveAllDocs({
           overrides: {
@@ -134,14 +135,14 @@ export function Actions(t0) {
           }
         }),
         children: t("version:saveDraft")
-      }) : null, collectionConfig?.versions?.drafts && hasPublishPermission ? _jsx(Button, {
+      }) : null, collectionConfig?.versions?.drafts && hasPublishPermission && !isInitializing ? _jsx(Button, {
         onClick: () => void saveAllDocs({
           overrides: {
             _status: "published"
           }
         }),
         children: t("version:publish")
-      }) : null, !collectionConfig?.versions?.drafts && hasSavePermission ? _jsx(Button, {
+      }) : null, !collectionConfig?.versions?.drafts && hasSavePermission && !isInitializing ? _jsx(Button, {
         onClick: () => void saveAllDocs(),
         children: t("general:save")
       }) : null]
@@ -149,12 +150,13 @@ export function Actions(t0) {
     $[5] = collectionConfig?.versions?.drafts;
     $[6] = hasPublishPermission;
     $[7] = hasSavePermission;
-    $[8] = saveAllDocs;
-    $[9] = t;
-    $[10] = t3;
-    $[11] = t4;
+    $[8] = isInitializing;
+    $[9] = saveAllDocs;
+    $[10] = t;
+    $[11] = t3;
+    $[12] = t4;
   } else {
-    t4 = $[11];
+    t4 = $[12];
   }
   return t4;
 }

package/dist/elements/BulkUpload/ActionsBar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","useConfig","useTranslation","Button","DialogFooter","useFormsManager","baseClass","ActionsBar","$","activeIndex","forms","setActiveIndex","t","t0","length","_jsxs","children","_jsx","className","buttonStyle","icon","direction","nextIndex","type","nextIndex_0","Actions","getEntityConfig","collectionSlug","hasPublishPermission","hasSavePermission","saveAllDocs","t1","collectionConfig","t2","filter","Boolean","t3","join","t4","versions","drafts","onClick","overrides","_status"],"sources":["../../../../src/elements/BulkUpload/ActionsBar/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { DialogFooter } from '../../Dialog/DialogFooter/index.js'\nimport { useFormsManager } from '../FormsManager/index.js'\nimport './index.css'\n\nconst baseClass = 'bulk-upload--actions-bar'\n\nexport function ActionsBar() {\n  const { activeIndex, forms, setActiveIndex } = useFormsManager()\n  const { t } = useTranslation()\n\n  return (\n    <DialogFooter>\n      {forms.length > 1 && (\n        <div className={`${baseClass}__multipleFiles`}>\n          <div className={`${baseClass}__navigation`}>\n            <p className={`${baseClass}__locationText`}>\n              <strong>{activeIndex + 1}</strong>\n              {` ${t('general:of')} `}\n              <strong>{forms.length}</strong>\n            </p>\n\n            <div className={`${baseClass}__controls`}>\n              <Button\n                aria-label={t('general:previous')}\n                buttonStyle=\"secondary\"\n                icon={<ChevronIcon direction=\"left\" />}\n                onClick={() => {\n                  const nextIndex = activeIndex - 1\n                  if (nextIndex < 0) {\n                    setActiveIndex(forms.length - 1)\n                  } else {\n                    setActiveIndex(nextIndex)\n                  }\n                }}\n                type=\"button\"\n              />\n              <Button\n                aria-label={t('general:next')}\n                buttonStyle=\"secondary\"\n                icon={<ChevronIcon direction=\"right\" />}\n                onClick={() => {\n                  const nextIndex = activeIndex + 1\n                  if (nextIndex === forms.length) {\n                    setActiveIndex(0)\n                  } else {\n                    setActiveIndex(nextIndex)\n                  }\n                }}\n                type=\"button\"\n              />\n            </div>\n          </div>\n        </div>\n      )}\n\n      <Actions className={`${baseClass}__saveButtons`} />\n    </DialogFooter>\n  )\n}\n\ntype ActionsProps = {\n  readonly className?: string\n}\nexport function Actions({ className }: ActionsProps) {\n  const { getEntityConfig } = useConfig()\n  const { t } = useTranslation()\n  const { collectionSlug, hasPublishPermission, hasSavePermission, saveAllDocs } = useFormsManager()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n\n  return (\n    <div className={[`${baseClass}__buttons`, className].filter(Boolean).join(' ')}>\n      {collectionConfig?.versions?.drafts && hasSavePermission ? (\n        <Button\n          buttonStyle=\"secondary\"\n          onClick={() => void saveAllDocs({ overrides: { _status: 'draft' } })}\n        >\n          {t('version:saveDraft')}\n        </Button>\n      ) : null}\n      {collectionConfig?.versions?.drafts && hasPublishPermission ? (\n        <Button onClick={() => void saveAllDocs({ overrides: { _status: 'published' } })}>\n          {t('version:publish')}\n        </Button>\n      ) : null}\n\n      {!collectionConfig?.versions?.drafts && hasSavePermission ? (\n        <Button onClick={() => void saveAllDocs()}>{t('general:save')}</Button>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","useConfig","useTranslation","Button","DialogFooter","useFormsManager","baseClass","ActionsBar","$","activeIndex","forms","setActiveIndex","t","t0","length","_jsxs","children","_jsx","className","buttonStyle","icon","direction","nextIndex","type","nextIndex_0","Actions","getEntityConfig","collectionSlug","hasPublishPermission","hasSavePermission","isInitializing","saveAllDocs","t1","collectionConfig","t2","filter","Boolean","t3","join","t4","versions","drafts","onClick","overrides","_status"],"sources":["../../../../src/elements/BulkUpload/ActionsBar/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { DialogFooter } from '../../Dialog/DialogFooter/index.js'\nimport { useFormsManager } from '../FormsManager/index.js'\nimport './index.css'\n\nconst baseClass = 'bulk-upload--actions-bar'\n\nexport function ActionsBar() {\n  const { activeIndex, forms, setActiveIndex } = useFormsManager()\n  const { t } = useTranslation()\n\n  return (\n    <DialogFooter>\n      {forms.length > 1 && (\n        <div className={`${baseClass}__multipleFiles`}>\n          <div className={`${baseClass}__navigation`}>\n            <p className={`${baseClass}__locationText`}>\n              <strong>{activeIndex + 1}</strong>\n              {` ${t('general:of')} `}\n              <strong>{forms.length}</strong>\n            </p>\n\n            <div className={`${baseClass}__controls`}>\n              <Button\n                aria-label={t('general:previous')}\n                buttonStyle=\"secondary\"\n                icon={<ChevronIcon direction=\"left\" />}\n                onClick={() => {\n                  const nextIndex = activeIndex - 1\n                  if (nextIndex < 0) {\n                    setActiveIndex(forms.length - 1)\n                  } else {\n                    setActiveIndex(nextIndex)\n                  }\n                }}\n                type=\"button\"\n              />\n              <Button\n                aria-label={t('general:next')}\n                buttonStyle=\"secondary\"\n                icon={<ChevronIcon direction=\"right\" />}\n                onClick={() => {\n                  const nextIndex = activeIndex + 1\n                  if (nextIndex === forms.length) {\n                    setActiveIndex(0)\n                  } else {\n                    setActiveIndex(nextIndex)\n                  }\n                }}\n                type=\"button\"\n              />\n            </div>\n          </div>\n        </div>\n      )}\n\n      <Actions className={`${baseClass}__saveButtons`} />\n    </DialogFooter>\n  )\n}\n\ntype ActionsProps = {\n  readonly className?: string\n}\nexport function Actions({ className }: ActionsProps) {\n  const { getEntityConfig } = useConfig()\n  const { t } = useTranslation()\n  const { collectionSlug, hasPublishPermission, hasSavePermission, isInitializing, saveAllDocs } =\n    useFormsManager()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n\n  return (\n    <div className={[`${baseClass}__buttons`, className].filter(Boolean).join(' ')}>\n      {collectionConfig?.versions?.drafts && hasSavePermission && !isInitializing ? (\n        <Button\n          buttonStyle=\"secondary\"\n          onClick={() => void saveAllDocs({ overrides: { _status: 'draft' } })}\n        >\n          {t('version:saveDraft')}\n        </Button>\n      ) : null}\n      {collectionConfig?.versions?.drafts && hasPublishPermission && !isInitializing ? (\n        <Button onClick={() => void saveAllDocs({ overrides: { _status: 'published' } })}>\n          {t('version:publish')}\n        </Button>\n      ) : null}\n\n      {!collectionConfig?.versions?.drafts && hasSavePermission && !isInitializing ? (\n        <Button onClick={() => void saveAllDocs()}>{t('general:save')}</Button>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/BulkUpload/AddFilesView/index.css

@@ -1,4 +1,9 @@
 @layer payload-default {
+  .bulk-upload--add-files__collectionSelect {
+    margin-inline: var(--spacer-2-5);
+    margin-block-start: var(--spacer-2-5);
+  }
+
   .bulk-upload--add-files__body {
     display: flex;
     flex: 1 1 auto;
@@ -30,9 +35,15 @@
     }
   }
 
-  .bulk-upload--add-files__dragAndDropText {
-    margin: 0;
-    text-transform: lowercase;
-    align-self: center;
+  /* The modal is narrow enough that the drag-and-drop hint only earns its space once the
+     dialog has room to grow past its mobile width. */
+  .bulk-upload--add-files__dropzoneContent .upload-dropzone-content__drag-text {
+    display: none;
+  }
+
+  @media (min-width: 768px) {
+    .bulk-upload--add-files__dropzoneContent .upload-dropzone-content__drag-text {
+      display: block;
+    }
   }
 }

package/dist/elements/BulkUpload/AddFilesView/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/AddFilesView/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;IACjC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,MAAM,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAA;CACnD,CAAA;AACD,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,KAAK,qBA8CpF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/AddFilesView/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;IACjC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,MAAM,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAA;CACnD,CAAA;AACD,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,KAAK,qBA+DpF"}

package/dist/elements/BulkUpload/AddFilesView/index.js

@@ -1,66 +1,127 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { toast } from 'sonner';
+import { SelectInput } from '../../../fields/Select/Input.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
-import { Button } from '../../Button/index.js';
+import { getFilesFromClipboard } from '../../../utilities/getFilesFromClipboard.js';
 import { DialogHeader, DialogModal } from '../../Dialog/index.js';
 import { Dropzone } from '../../Dropzone/index.js';
+import { UploadDropzoneContent } from '../../UploadDropzoneContent/index.js';
+import { useFormsManager } from '../FormsManager/index.js';
+import { useBulkUpload } from '../index.js';
+import { useUploadCollectionOptions } from '../useUploadCollectionOptions.js';
 import './index.css';
 const baseClass = 'bulk-upload--add-files';
-export function AddFilesView({
-  acceptMimeTypes,
-  modalSlug: modalSlug,
-  onDrop
-}) {
+export function AddFilesView(t0) {
+  const $ = _c(15);
+  const {
+    acceptMimeTypes,
+    modalSlug,
+    onDrop
+  } = t0;
   const {
     t
   } = useTranslation();
-  const inputRef = React.useRef(null);
-  return /*#__PURE__*/_jsxs(DialogModal, {
-    className: baseClass,
-    size: "large",
-    slug: modalSlug,
-    children: [/*#__PURE__*/_jsx(DialogHeader, {
-      showClose: true,
-      title: t('upload:addFiles')
-    }), /*#__PURE__*/_jsx("div", {
-      className: `${baseClass}__body`,
-      children: /*#__PURE__*/_jsx("div", {
-        className: `${baseClass}__dropArea`,
-        children: /*#__PURE__*/_jsxs(Dropzone, {
-          multipleFiles: true,
-          onChange: onDrop,
-          children: [/*#__PURE__*/_jsx(Button, {
-            buttonStyle: "primary",
-            iconPosition: "left",
-            onClick: () => {
-              if (inputRef.current) {
-                inputRef.current.click();
-              }
-            },
-            size: "medium",
-            children: t('upload:selectFile')
-          }), /*#__PURE__*/_jsx("input", {
-            accept: acceptMimeTypes,
-            "aria-hidden": "true",
-            className: `${baseClass}__hidden-input`,
-            hidden: true,
-            multiple: true,
-            onChange: e => {
-              if (e.target.files && e.target.files.length > 0) {
-                onDrop(e.target.files);
+  const {
+    collectionSlug,
+    setCollectionSlug
+  } = useBulkUpload();
+  const {
+    changeCollectionSlug,
+    forms,
+    isInitializing
+  } = useFormsManager();
+  const collectionOptions = useUploadCollectionOptions();
+  let t1;
+  if ($[0] !== onDrop || $[1] !== t) {
+    t1 = async () => {
+      ;
+      try {
+        const files = await getFilesFromClipboard();
+        if (!files) {
+          toast.error(t("error:noFileFoundInClipboard"));
+          return;
+        }
+        onDrop(files);
+      } catch (t2) {
+        toast.error(t("error:unableToReadClipboard"));
+      }
+    };
+    $[0] = onDrop;
+    $[1] = t;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const handlePasteFromClipboard = t1;
+  let t2;
+  if ($[3] !== acceptMimeTypes || $[4] !== changeCollectionSlug || $[5] !== collectionOptions || $[6] !== collectionSlug || $[7] !== forms || $[8] !== handlePasteFromClipboard || $[9] !== isInitializing || $[10] !== modalSlug || $[11] !== onDrop || $[12] !== setCollectionSlug || $[13] !== t) {
+    t2 = _jsxs(DialogModal, {
+      className: baseClass,
+      size: "large",
+      slug: modalSlug,
+      children: [_jsx(DialogHeader, {
+        showClose: true,
+        title: t("upload:addFiles")
+      }), collectionOptions.length > 1 && _jsx(SelectInput, {
+        className: `${baseClass}__collectionSelect`,
+        isClearable: false,
+        label: t("general:collection"),
+        name: "collection",
+        onChange: option => {
+          if (option && typeof option === "object" && "value" in option) {
+            if (typeof option.value === "string") {
+              if (forms.length) {
+                changeCollectionSlug(option.value);
+              } else {
+                setCollectionSlug(option.value);
               }
-            },
-            ref: inputRef,
-            type: "file"
-          }), /*#__PURE__*/_jsxs("p", {
-            className: `${baseClass}__dragAndDropText`,
-            children: [t('general:or'), " ", t('upload:dragAndDrop')]
-          })]
+            }
+          }
+        },
+        options: collectionOptions,
+        path: "uploadCollection",
+        readOnly: isInitializing,
+        required: true,
+        value: collectionSlug
+      }), _jsx("div", {
+        className: `${baseClass}__body`,
+        children: _jsx("div", {
+          className: `${baseClass}__dropArea`,
+          children: _jsx(Dropzone, {
+            multipleFiles: true,
+            onChange: onDrop,
+            children: _jsx(UploadDropzoneContent, {
+              acceptMimeTypes,
+              className: `${baseClass}__dropzoneContent`,
+              multiple: true,
+              onFilesSelected: onDrop,
+              onPasteFromClipboard: handlePasteFromClipboard,
+              pasteButtonClassName: `${baseClass}__pasteFromClipboard`,
+              pasteTooltip: t("upload:pasteFromClipboard")
+            })
+          })
         })
-      })
-    })]
-  });
+      })]
+    });
+    $[3] = acceptMimeTypes;
+    $[4] = changeCollectionSlug;
+    $[5] = collectionOptions;
+    $[6] = collectionSlug;
+    $[7] = forms;
+    $[8] = handlePasteFromClipboard;
+    $[9] = isInitializing;
+    $[10] = modalSlug;
+    $[11] = onDrop;
+    $[12] = setCollectionSlug;
+    $[13] = t;
+    $[14] = t2;
+  } else {
+    t2 = $[14];
+  }
+  return t2;
 }
 //# sourceMappingURL=index.js.map