@payloadcms/ui 3.80.0-internal.cdd7ef7 → 3.80.0

package/dist/elements/FolderView/BrowseByFolderButton/index.scss

@@ -0,0 +1,30 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .browse-by-folder-button {
+    border: 1px solid var(--theme-elevation-100);
+    text-decoration: none;
+    padding: calc(var(--base) / 2);
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: calc(var(--base) * 0.33);
+    margin-top: calc(var(--base) * 0.25);
+    margin-bottom: var(--base);
+    border-radius: var(--style-radius-m);
+    color: var(--theme-text);
+
+    &.active {
+      background-color: var(--theme-elevation-50);
+      font-weight: 600;
+
+      .icon {
+        color: var(--theme-elevation-400);
+      }
+    }
+
+    .icon {
+      color: var(--theme-elevation-300);
+    }
+  }
+}

package/dist/elements/FolderView/Cell/index.client.d.ts

@@ -0,0 +1,13 @@
+import type { Data, ViewTypes } from 'payload';
+import React from 'react';
+type Props = {
+    readonly collectionSlug: string;
+    readonly data: Data;
+    readonly docTitle: string;
+    readonly folderCollectionSlug: string;
+    readonly folderFieldName: string;
+    readonly viewType?: ViewTypes;
+};
+export declare const FolderTableCellClient: ({ collectionSlug, data, docTitle, folderCollectionSlug, folderFieldName, viewType, }: Props) => React.JSX.Element;
+export {};
+//# sourceMappingURL=index.client.d.ts.map

package/dist/elements/FolderView/Cell/index.client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../../src/elements/FolderView/Cell/index.client.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAI9C,OAAO,KAAoB,MAAM,OAAO,CAAA;AAKxC,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAA;IACnB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,oBAAoB,EAAE,MAAM,CAAA;IACrC,QAAQ,CAAC,eAAe,EAAE,MAAM,CAAA;IAChC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,qBAAqB,yFAO/B,KAAK,sBA6FP,CAAA"}

package/dist/elements/FolderView/Cell/index.client.js

@@ -0,0 +1,95 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { formatAdminURL } from 'payload/shared';
+import React, { useEffect } from 'react';
+// eslint-disable-next-line payload/no-imports-from-exports-dir
+import { MoveDocToFolderButton, useConfig, useTranslation } from '../../../exports/client/index.js';
+export const FolderTableCellClient = ({
+  collectionSlug,
+  data,
+  docTitle,
+  folderCollectionSlug,
+  folderFieldName,
+  viewType
+}) => {
+  const docID = data.id;
+  const intialFolderID = data?.[folderFieldName];
+  const {
+    config
+  } = useConfig();
+  const {
+    t
+  } = useTranslation();
+  const [fromFolderName, setFromFolderName] = React.useState(() => intialFolderID ? `${t('general:loading')}...` : t('folder:noFolder'));
+  const [fromFolderID, setFromFolderID] = React.useState(intialFolderID);
+  const hasLoadedFolderName = React.useRef(false);
+  const onConfirm = React.useCallback(async ({
+    id,
+    name
+  }) => {
+    try {
+      await fetch(formatAdminURL({
+        apiRoute: config.routes.api,
+        path: `/${collectionSlug}/${docID}`
+      }), {
+        body: JSON.stringify({
+          [folderFieldName]: id
+        }),
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        method: 'PATCH'
+      });
+      setFromFolderID(id);
+      setFromFolderName(name || t('folder:noFolder'));
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Error moving document to folder', error);
+    }
+  }, [config.routes.api, collectionSlug, docID, folderFieldName, t]);
+  useEffect(() => {
+    const loadFolderName = async () => {
+      try {
+        const req = await fetch(formatAdminURL({
+          apiRoute: config.routes.api,
+          path: `/${folderCollectionSlug}${intialFolderID ? `/${intialFolderID}` : ''}`
+        }), {
+          credentials: 'include',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          method: 'GET'
+        });
+        const res = await req.json();
+        setFromFolderName(res?.name || t('folder:noFolder'));
+      } catch (error_0) {
+        // eslint-disable-next-line no-console
+        console.error('Error moving document to folder', error_0);
+      }
+    };
+    if (!hasLoadedFolderName.current) {
+      void loadFolderName();
+      hasLoadedFolderName.current = true;
+    }
+  }, [config.routes.api, folderCollectionSlug, intialFolderID, t]);
+  return /*#__PURE__*/_jsx(MoveDocToFolderButton, {
+    buttonProps: {
+      disabled: viewType === 'trash',
+      size: 'small'
+    },
+    collectionSlug: collectionSlug,
+    docData: data,
+    docID: docID,
+    docTitle: docTitle,
+    folderCollectionSlug: folderCollectionSlug,
+    folderFieldName: folderFieldName,
+    fromFolderID: fromFolderID,
+    fromFolderName: fromFolderName,
+    modalSlug: `move-doc-to-folder-cell--${docID}`,
+    onConfirm: onConfirm,
+    skipConfirmModal: false
+  });
+};
+//# sourceMappingURL=index.client.js.map

package/dist/elements/FolderView/Cell/index.client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.client.js","names":["formatAdminURL","React","useEffect","MoveDocToFolderButton","useConfig","useTranslation","FolderTableCellClient","collectionSlug","data","docTitle","folderCollectionSlug","folderFieldName","viewType","docID","id","intialFolderID","config","t","fromFolderName","setFromFolderName","useState","fromFolderID","setFromFolderID","hasLoadedFolderName","useRef","onConfirm","useCallback","name","fetch","apiRoute","routes","api","path","body","JSON","stringify","credentials","headers","method","error","console","loadFolderName","req","res","json","current","_jsx","buttonProps","disabled","size","docData","modalSlug","skipConfirmModal"],"sources":["../../../../src/elements/FolderView/Cell/index.client.tsx"],"sourcesContent":["'use client'\n\nimport type { Data, ViewTypes } from 'payload'\nimport type { FolderOrDocument } from 'payload/shared'\n\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useEffect } from 'react'\n\n// eslint-disable-next-line payload/no-imports-from-exports-dir\nimport { MoveDocToFolderButton, useConfig, useTranslation } from '../../../exports/client/index.js'\n\ntype Props = {\n  readonly collectionSlug: string\n  readonly data: Data\n  readonly docTitle: string\n  readonly folderCollectionSlug: string\n  readonly folderFieldName: string\n  readonly viewType?: ViewTypes\n}\n\nexport const FolderTableCellClient = ({\n  collectionSlug,\n  data,\n  docTitle,\n  folderCollectionSlug,\n  folderFieldName,\n  viewType,\n}: Props) => {\n  const docID = data.id\n  const intialFolderID = data?.[folderFieldName]\n\n  const { config } = useConfig()\n  const { t } = useTranslation()\n  const [fromFolderName, setFromFolderName] = React.useState(() =>\n    intialFolderID ? `${t('general:loading')}...` : t('folder:noFolder'),\n  )\n  const [fromFolderID, setFromFolderID] = React.useState(intialFolderID)\n\n  const hasLoadedFolderName = React.useRef(false)\n\n  const onConfirm = React.useCallback(\n    async ({ id, name }) => {\n      try {\n        await fetch(\n          formatAdminURL({\n            apiRoute: config.routes.api,\n            path: `/${collectionSlug}/${docID}`,\n          }),\n          {\n            body: JSON.stringify({\n              [folderFieldName]: id,\n            }),\n            credentials: 'include',\n            headers: {\n              'Content-Type': 'application/json',\n            },\n            method: 'PATCH',\n          },\n        )\n\n        setFromFolderID(id)\n        setFromFolderName(name || t('folder:noFolder'))\n      } catch (error) {\n        // eslint-disable-next-line no-console\n        console.error('Error moving document to folder', error)\n      }\n    },\n    [config.routes.api, collectionSlug, docID, folderFieldName, t],\n  )\n\n  useEffect(() => {\n    const loadFolderName = async () => {\n      try {\n        const req = await fetch(\n          formatAdminURL({\n            apiRoute: config.routes.api,\n            path: `/${folderCollectionSlug}${intialFolderID ? `/${intialFolderID}` : ''}`,\n          }),\n          {\n            credentials: 'include',\n            headers: {\n              'Content-Type': 'application/json',\n            },\n            method: 'GET',\n          },\n        )\n\n        const res = await req.json()\n        setFromFolderName(res?.name || t('folder:noFolder'))\n      } catch (error) {\n        // eslint-disable-next-line no-console\n        console.error('Error moving document to folder', error)\n      }\n    }\n\n    if (!hasLoadedFolderName.current) {\n      void loadFolderName()\n      hasLoadedFolderName.current = true\n    }\n  }, [config.routes.api, folderCollectionSlug, intialFolderID, t])\n\n  return (\n    <MoveDocToFolderButton\n      buttonProps={{\n        disabled: viewType === 'trash',\n        size: 'small',\n      }}\n      collectionSlug={collectionSlug}\n      docData={data as FolderOrDocument['value']}\n      docID={docID}\n      docTitle={docTitle}\n      folderCollectionSlug={folderCollectionSlug}\n      folderFieldName={folderFieldName}\n      fromFolderID={fromFolderID}\n      fromFolderName={fromFolderName}\n      modalSlug={`move-doc-to-folder-cell--${docID}`}\n      onConfirm={onConfirm}\n      skipConfirmModal={false}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/FolderView/Cell/index.server.d.ts

@@ -0,0 +1,4 @@
+import type { DefaultServerCellComponentProps } from 'payload';
+import React from 'react';
+export declare const FolderTableCell: (props: DefaultServerCellComponentProps) => React.JSX.Element;
+//# sourceMappingURL=index.server.d.ts.map

package/dist/elements/FolderView/Cell/index.server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.server.d.ts","sourceRoot":"","sources":["../../../../src/elements/FolderView/Cell/index.server.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,SAAS,CAAA;AAE9D,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,eAAe,UAAW,+BAA+B,sBAmBrE,CAAA"}

package/dist/elements/FolderView/Cell/index.server.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { FolderTableCellClient } from './index.client.js';
+export const FolderTableCell = props => {
+  const titleToRender = (props.collectionConfig.upload ? props.rowData?.filename : props.rowData?.title) || props.rowData.id;
+  if (!props.payload.config.folders) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(FolderTableCellClient, {
+    collectionSlug: props.collectionSlug,
+    data: props.rowData,
+    docTitle: titleToRender,
+    folderCollectionSlug: props.payload.config.folders.slug,
+    folderFieldName: props.payload.config.folders.fieldName,
+    viewType: props.viewType
+  });
+};
+//# sourceMappingURL=index.server.js.map

package/dist/elements/FolderView/Cell/index.server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.server.js","names":["React","FolderTableCellClient","FolderTableCell","props","titleToRender","collectionConfig","upload","rowData","filename","title","id","payload","config","folders","_jsx","collectionSlug","data","docTitle","folderCollectionSlug","slug","folderFieldName","fieldName","viewType"],"sources":["../../../../src/elements/FolderView/Cell/index.server.tsx"],"sourcesContent":["import type { DefaultServerCellComponentProps } from 'payload'\n\nimport React from 'react'\n\nimport { FolderTableCellClient } from './index.client.js'\n\nexport const FolderTableCell = (props: DefaultServerCellComponentProps) => {\n  const titleToRender =\n    (props.collectionConfig.upload ? props.rowData?.filename : props.rowData?.title) ||\n    props.rowData.id\n\n  if (!props.payload.config.folders) {\n    return null\n  }\n\n  return (\n    <FolderTableCellClient\n      collectionSlug={props.collectionSlug}\n      data={props.rowData}\n      docTitle={titleToRender}\n      folderCollectionSlug={props.payload.config.folders.slug}\n      folderFieldName={props.payload.config.folders.fieldName}\n      viewType={props.viewType}\n    />\n  )\n}\n"],"mappings":";AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,qBAAqB,QAAQ;AAEtC,OAAO,MAAMC,eAAA,GAAmBC,KAAA;EAC9B,MAAMC,aAAA,GACJ,CAACD,KAAA,CAAME,gBAAgB,CAACC,MAAM,GAAGH,KAAA,CAAMI,OAAO,EAAEC,QAAA,GAAWL,KAAA,CAAMI,OAAO,EAAEE,KAAI,KAC9EN,KAAA,CAAMI,OAAO,CAACG,EAAE;EAElB,IAAI,CAACP,KAAA,CAAMQ,OAAO,CAACC,MAAM,CAACC,OAAO,EAAE;IACjC,OAAO;EACT;EAEA,oBACEC,IAAA,CAACb,qBAAA;IACCc,cAAA,EAAgBZ,KAAA,CAAMY,cAAc;IACpCC,IAAA,EAAMb,KAAA,CAAMI,OAAO;IACnBU,QAAA,EAAUb,aAAA;IACVc,oBAAA,EAAsBf,KAAA,CAAMQ,OAAO,CAACC,MAAM,CAACC,OAAO,CAACM,IAAI;IACvDC,eAAA,EAAiBjB,KAAA,CAAMQ,OAAO,CAACC,MAAM,CAACC,OAAO,CAACQ,SAAS;IACvDC,QAAA,EAAUnB,KAAA,CAAMmB;;AAGtB","ignoreList":[]}

package/dist/elements/FolderView/ColoredFolderIcon/index.d.ts

@@ -0,0 +1,3 @@
+import './index.scss';
+export declare function ColoredFolderIcon(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/FolderView/ColoredFolderIcon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FolderView/ColoredFolderIcon/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAA;AACrB,wBAAgB,iBAAiB,gCAEhC"}

package/dist/elements/FolderView/ColoredFolderIcon/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FolderIcon } from '../../../icons/Folder/index.js';
+import './index.scss';
+export function ColoredFolderIcon() {
+  return /*#__PURE__*/_jsx(FolderIcon, {
+    className: "colored-folder-icon"
+  });
+}
+//# sourceMappingURL=index.js.map

package/dist/elements/FolderView/ColoredFolderIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["FolderIcon","ColoredFolderIcon","_jsx","className"],"sources":["../../../../src/elements/FolderView/ColoredFolderIcon/index.tsx"],"sourcesContent":["import { FolderIcon } from '../../../icons/Folder/index.js'\nimport './index.scss'\nexport function ColoredFolderIcon() {\n  return <FolderIcon className=\"colored-folder-icon\" />\n}\n"],"mappings":";AAAA,SAASA,UAAU,QAAQ;AAC3B,OAAO;AACP,OAAO,SAASC,kBAAA;EACd,oBAAOC,IAAA,CAACF,UAAA;IAAWG,SAAA,EAAU;;AAC/B","ignoreList":[]}

package/dist/elements/FolderView/ColoredFolderIcon/index.scss

@@ -0,0 +1,5 @@
+@layer payload-default {
+  .colored-folder-icon {
+    color: var(--theme-elevation-300);
+  }
+}

package/dist/elements/FolderView/CurrentFolderActions/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    className?: string;
+};
+export declare function CurrentFolderActions({ className }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/FolderView/CurrentFolderActions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FolderView/CurrentFolderActions/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AAoBzB,KAAK,KAAK,GAAG;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AACD,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,EAAE,KAAK,qBAoJxD"}

package/dist/elements/FolderView/CurrentFolderActions/index.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useModal } from '@faceless-ui/modal';
+import { getTranslation } from '@payloadcms/translations';
+import { useRouter } from 'next/navigation.js';
+import { formatAdminURL } from 'payload/shared';
+import React from 'react';
+import { toast } from 'sonner';
+import { Dots } from '../../../icons/Dots/index.js';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useFolder } from '../../../providers/Folders/index.js';
+import { useRouteCache } from '../../../providers/RouteCache/index.js';
+import { useRouteTransition } from '../../../providers/RouteTransition/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { ConfirmationModal } from '../../ConfirmationModal/index.js';
+import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
+import { Popup, PopupList } from '../../Popup/index.js';
+import { Translation } from '../../Translation/index.js';
+import { MoveItemsToFolderDrawer } from '../Drawers/MoveToFolder/index.js';
+const moveToFolderDrawerSlug = 'move-to-folder--current-folder';
+const confirmDeleteDrawerSlug = 'confirm-many-delete';
+const baseClass = 'current-folder-actions';
+export function CurrentFolderActions({
+  className
+}) {
+  const router = useRouter();
+  const {
+    startRouteTransition
+  } = useRouteTransition();
+  const {
+    breadcrumbs,
+    currentFolder,
+    folderCollectionConfig,
+    folderCollectionSlug,
+    folderFieldName,
+    folderID,
+    getFolderRoute,
+    moveToFolder
+  } = useFolder();
+  const [FolderDocumentDrawer,, {
+    closeDrawer: closeFolderDrawer,
+    openDrawer: openFolderDrawer
+  }] = useDocumentDrawer({
+    id: folderID,
+    collectionSlug: folderCollectionSlug
+  });
+  const {
+    clearRouteCache
+  } = useRouteCache();
+  const {
+    config
+  } = useConfig();
+  const {
+    routes
+  } = config;
+  const {
+    closeModal,
+    openModal
+  } = useModal();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const deleteCurrentFolder = React.useCallback(async () => {
+    await fetch(formatAdminURL({
+      apiRoute: routes.api,
+      path: `/${folderCollectionSlug}/${folderID}?depth=0`
+    }), {
+      credentials: 'include',
+      method: 'DELETE'
+    });
+    startRouteTransition(() => {
+      router.push(getFolderRoute(breadcrumbs[breadcrumbs.length - 2]?.id || null));
+    });
+  }, [breadcrumbs, folderCollectionSlug, folderID, getFolderRoute, router, routes.api, startRouteTransition]);
+  if (!folderID) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Popup, {
+      button: /*#__PURE__*/_jsx(Dots, {}),
+      className: [baseClass, className].filter(Boolean).join(' '),
+      render: () => /*#__PURE__*/_jsxs(PopupList.ButtonGroup, {
+        children: [/*#__PURE__*/_jsx(PopupList.Button, {
+          onClick: () => {
+            openFolderDrawer();
+          },
+          children: t('general:editLabel', {
+            label: getTranslation(folderCollectionConfig.labels.singular, i18n)
+          })
+        }), /*#__PURE__*/_jsx(PopupList.Button, {
+          onClick: () => {
+            openModal(moveToFolderDrawerSlug);
+          },
+          children: t('folder:moveFolder')
+        }), /*#__PURE__*/_jsx(PopupList.Button, {
+          onClick: () => {
+            openModal(confirmDeleteDrawerSlug);
+          },
+          children: t('folder:deleteFolder')
+        })]
+      })
+    }), /*#__PURE__*/_jsx(MoveItemsToFolderDrawer, {
+      action: "moveItemToFolder",
+      drawerSlug: moveToFolderDrawerSlug,
+      folderAssignedCollections: currentFolder?.value.folderType,
+      folderCollectionSlug: folderCollectionSlug,
+      folderFieldName: folderFieldName,
+      fromFolderID: currentFolder?.value.id,
+      fromFolderName: currentFolder?.value._folderOrDocumentTitle,
+      itemsToMove: [currentFolder],
+      onConfirm: async ({
+        id,
+        name
+      }) => {
+        await moveToFolder({
+          itemsToMove: [currentFolder],
+          toFolderID: id
+        });
+        if (id) {
+          // moved to folder
+          toast.success(t('folder:itemHasBeenMoved', {
+            folderName: `"${name}"`,
+            title: currentFolder.value._folderOrDocumentTitle
+          }));
+        } else {
+          // moved to root
+          toast.success(t('folder:itemHasBeenMovedToRoot', {
+            title: currentFolder.value._folderOrDocumentTitle
+          }));
+        }
+        closeModal(moveToFolderDrawerSlug);
+      },
+      title: currentFolder.value._folderOrDocumentTitle
+    }), /*#__PURE__*/_jsx(ConfirmationModal, {
+      body: /*#__PURE__*/_jsx(Translation, {
+        elements: {
+          '1': ({
+            children
+          }) => /*#__PURE__*/_jsx("strong", {
+            children: children
+          })
+        },
+        i18nKey: "general:aboutToDelete",
+        t: t,
+        variables: {
+          label: getTranslation(folderCollectionConfig.labels.singular, i18n),
+          title: currentFolder.value._folderOrDocumentTitle
+        }
+      }),
+      confirmingLabel: t('general:deleting'),
+      heading: t('general:confirmDeletion'),
+      modalSlug: confirmDeleteDrawerSlug,
+      onConfirm: deleteCurrentFolder
+    }), /*#__PURE__*/_jsx(FolderDocumentDrawer, {
+      onSave: () => {
+        closeFolderDrawer();
+        clearRouteCache();
+      }
+    })]
+  });
+}
+//# sourceMappingURL=index.js.map

package/dist/elements/FolderView/CurrentFolderActions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["useModal","getTranslation","useRouter","formatAdminURL","React","toast","Dots","useConfig","useFolder","useRouteCache","useRouteTransition","useTranslation","ConfirmationModal","useDocumentDrawer","Popup","PopupList","Translation","MoveItemsToFolderDrawer","moveToFolderDrawerSlug","confirmDeleteDrawerSlug","baseClass","CurrentFolderActions","className","router","startRouteTransition","breadcrumbs","currentFolder","folderCollectionConfig","folderCollectionSlug","folderFieldName","folderID","getFolderRoute","moveToFolder","FolderDocumentDrawer","closeDrawer","closeFolderDrawer","openDrawer","openFolderDrawer","id","collectionSlug","clearRouteCache","config","routes","closeModal","openModal","i18n","t","deleteCurrentFolder","useCallback","fetch","apiRoute","api","path","credentials","method","push","length","_jsxs","_Fragment","_jsx","button","filter","Boolean","join","render","ButtonGroup","Button","onClick","label","labels","singular","action","drawerSlug","folderAssignedCollections","value","folderType","fromFolderID","fromFolderName","_folderOrDocumentTitle","itemsToMove","onConfirm","name","toFolderID","success","folderName","title","body","elements","1","children","i18nKey","variables","confirmingLabel","heading","modalSlug","onSave"],"sources":["../../../../src/elements/FolderView/CurrentFolderActions/index.tsx"],"sourcesContent":["import { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport { formatAdminURL } from 'payload/shared'\nimport React from 'react'\nimport { toast } from 'sonner'\n\nimport { Dots } from '../../../icons/Dots/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useFolder } from '../../../providers/Folders/index.js'\nimport { useRouteCache } from '../../../providers/RouteCache/index.js'\nimport { useRouteTransition } from '../../../providers/RouteTransition/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { ConfirmationModal } from '../../ConfirmationModal/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\nimport { Translation } from '../../Translation/index.js'\nimport { MoveItemsToFolderDrawer } from '../Drawers/MoveToFolder/index.js'\n\nconst moveToFolderDrawerSlug = 'move-to-folder--current-folder'\nconst confirmDeleteDrawerSlug = 'confirm-many-delete'\n\nconst baseClass = 'current-folder-actions'\n\ntype Props = {\n  className?: string\n}\nexport function CurrentFolderActions({ className }: Props) {\n  const router = useRouter()\n  const { startRouteTransition } = useRouteTransition()\n  const {\n    breadcrumbs,\n    currentFolder,\n    folderCollectionConfig,\n    folderCollectionSlug,\n    folderFieldName,\n    folderID,\n    getFolderRoute,\n    moveToFolder,\n  } = useFolder()\n  const [FolderDocumentDrawer, , { closeDrawer: closeFolderDrawer, openDrawer: openFolderDrawer }] =\n    useDocumentDrawer({\n      id: folderID,\n      collectionSlug: folderCollectionSlug,\n    })\n  const { clearRouteCache } = useRouteCache()\n  const { config } = useConfig()\n  const { routes } = config\n  const { closeModal, openModal } = useModal()\n  const { i18n, t } = useTranslation()\n\n  const deleteCurrentFolder = React.useCallback(async () => {\n    await fetch(\n      formatAdminURL({\n        apiRoute: routes.api,\n        path: `/${folderCollectionSlug}/${folderID}?depth=0`,\n      }),\n      {\n        credentials: 'include',\n        method: 'DELETE',\n      },\n    )\n    startRouteTransition(() => {\n      router.push(getFolderRoute(breadcrumbs[breadcrumbs.length - 2]?.id || null))\n    })\n  }, [\n    breadcrumbs,\n    folderCollectionSlug,\n    folderID,\n    getFolderRoute,\n    router,\n    routes.api,\n    startRouteTransition,\n  ])\n\n  if (!folderID) {\n    return null\n  }\n\n  return (\n    <>\n      <Popup\n        button={<Dots />}\n        className={[baseClass, className].filter(Boolean).join(' ')}\n        render={() => (\n          <PopupList.ButtonGroup>\n            <PopupList.Button\n              onClick={() => {\n                openFolderDrawer()\n              }}\n            >\n              {t('general:editLabel', {\n                label: getTranslation(folderCollectionConfig.labels.singular, i18n),\n              })}\n            </PopupList.Button>\n            <PopupList.Button\n              onClick={() => {\n                openModal(moveToFolderDrawerSlug)\n              }}\n            >\n              {t('folder:moveFolder')}\n            </PopupList.Button>\n            <PopupList.Button\n              onClick={() => {\n                openModal(confirmDeleteDrawerSlug)\n              }}\n            >\n              {t('folder:deleteFolder')}\n            </PopupList.Button>\n          </PopupList.ButtonGroup>\n        )}\n      />\n      <MoveItemsToFolderDrawer\n        action=\"moveItemToFolder\"\n        drawerSlug={moveToFolderDrawerSlug}\n        folderAssignedCollections={currentFolder?.value.folderType}\n        folderCollectionSlug={folderCollectionSlug}\n        folderFieldName={folderFieldName}\n        fromFolderID={currentFolder?.value.id}\n        fromFolderName={currentFolder?.value._folderOrDocumentTitle}\n        itemsToMove={[currentFolder]}\n        onConfirm={async ({ id, name }) => {\n          await moveToFolder({\n            itemsToMove: [currentFolder],\n            toFolderID: id,\n          })\n          if (id) {\n            // moved to folder\n            toast.success(\n              t('folder:itemHasBeenMoved', {\n                folderName: `\"${name}\"`,\n                title: currentFolder.value._folderOrDocumentTitle,\n              }),\n            )\n          } else {\n            // moved to root\n            toast.success(\n              t('folder:itemHasBeenMovedToRoot', {\n                title: currentFolder.value._folderOrDocumentTitle,\n              }),\n            )\n          }\n          closeModal(moveToFolderDrawerSlug)\n        }}\n        title={currentFolder.value._folderOrDocumentTitle}\n      />\n\n      <ConfirmationModal\n        body={\n          <Translation\n            elements={{\n              '1': ({ children }) => <strong>{children}</strong>,\n            }}\n            i18nKey=\"general:aboutToDelete\"\n            t={t}\n            variables={{\n              label: getTranslation(folderCollectionConfig.labels.singular, i18n),\n              title: currentFolder.value._folderOrDocumentTitle,\n            }}\n          />\n        }\n        confirmingLabel={t('general:deleting')}\n        heading={t('general:confirmDeletion')}\n        modalSlug={confirmDeleteDrawerSlug}\n        onConfirm={deleteCurrentFolder}\n      />\n\n      <FolderDocumentDrawer\n        onSave={() => {\n          closeFolderDrawer()\n          clearRouteCache()\n        }}\n      />\n    </>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/FolderView/DragOverlaySelection/index.d.ts

@@ -0,0 +1,11 @@
+import type { Modifier } from '@dnd-kit/core';
+import type { FolderOrDocument } from 'payload/shared';
+import './index.scss';
+type DragCardsProps = {
+    readonly item: FolderOrDocument;
+    readonly selectedCount: number;
+};
+export declare function DragOverlaySelection({ item, selectedCount }: DragCardsProps): import("react").JSX.Element;
+export declare const snapTopLeftToCursor: Modifier;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/FolderView/DragOverlaySelection/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FolderView/DragOverlaySelection/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAMtD,OAAO,cAAc,CAAA;AAIrB,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,IAAI,EAAE,gBAAgB,CAAA;IAC/B,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAA;CAC/B,CAAA;AACD,wBAAgB,oBAAoB,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,cAAc,+BAmC3E;AAED,eAAO,MAAM,mBAAmB,EAAE,QAmBjC,CAAA"}

package/dist/elements/FolderView/DragOverlaySelection/index.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DragOverlay } from '@dnd-kit/core';
+import { getEventCoordinates } from '@dnd-kit/utilities';
+import { FolderFileCard } from '../FolderFileCard/index.js';
+import './index.scss';
+const baseClass = 'drag-overlay-selection';
+export function DragOverlaySelection({
+  item,
+  selectedCount
+}) {
+  return /*#__PURE__*/_jsx(DragOverlay, {
+    dropAnimation: null,
+    modifiers: [snapTopLeftToCursor],
+    style: {
+      height: 'unset',
+      maxWidth: '220px'
+    },
+    children: /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__cards`,
+      children: [Array.from({
+        length: selectedCount > 1 ? 2 : 1
+      }).map((_, index) => /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__card`,
+        style: {
+          right: `${index * 3}px`,
+          top: `-${index * 3}px`
+        },
+        children: /*#__PURE__*/_jsx(FolderFileCard, {
+          id: null,
+          isSelected: true,
+          itemKey: "overlay-card",
+          title: item.value._folderOrDocumentTitle,
+          type: "folder"
+        })
+      }, index)), selectedCount > 1 ? /*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__card-count`,
+        children: selectedCount
+      }) : null]
+    })
+  });
+}
+export const snapTopLeftToCursor = ({
+  activatorEvent,
+  draggingNodeRect,
+  transform
+}) => {
+  if (draggingNodeRect && activatorEvent) {
+    const activatorCoordinates = getEventCoordinates(activatorEvent);
+    if (!activatorCoordinates) {
+      return transform;
+    }
+    const offsetX = activatorCoordinates.x - draggingNodeRect.left;
+    const offsetY = activatorCoordinates.y - draggingNodeRect.top;
+    return {
+      ...transform,
+      x: transform.x + offsetX + 5,
+      y: transform.y + offsetY + 5
+    };
+  }
+  return transform;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/FolderView/DragOverlaySelection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["DragOverlay","getEventCoordinates","FolderFileCard","baseClass","DragOverlaySelection","item","selectedCount","_jsx","dropAnimation","modifiers","snapTopLeftToCursor","style","height","maxWidth","_jsxs","className","Array","from","length","map","_","index","right","top","id","isSelected","itemKey","title","value","_folderOrDocumentTitle","type","activatorEvent","draggingNodeRect","transform","activatorCoordinates","offsetX","x","left","offsetY","y"],"sources":["../../../../src/elements/FolderView/DragOverlaySelection/index.tsx"],"sourcesContent":["import type { Modifier } from '@dnd-kit/core'\nimport type { FolderOrDocument } from 'payload/shared'\n\nimport { DragOverlay } from '@dnd-kit/core'\nimport { getEventCoordinates } from '@dnd-kit/utilities'\n\nimport { FolderFileCard } from '../FolderFileCard/index.js'\nimport './index.scss'\n\nconst baseClass = 'drag-overlay-selection'\n\ntype DragCardsProps = {\n  readonly item: FolderOrDocument\n  readonly selectedCount: number\n}\nexport function DragOverlaySelection({ item, selectedCount }: DragCardsProps) {\n  return (\n    <DragOverlay\n      dropAnimation={null}\n      modifiers={[snapTopLeftToCursor]}\n      style={{\n        height: 'unset',\n        maxWidth: '220px',\n      }}\n    >\n      <div className={`${baseClass}__cards`}>\n        {Array.from({ length: selectedCount > 1 ? 2 : 1 }).map((_, index) => (\n          <div\n            className={`${baseClass}__card`}\n            key={index}\n            style={{\n              right: `${index * 3}px`,\n              top: `-${index * 3}px`,\n            }}\n          >\n            <FolderFileCard\n              id={null}\n              isSelected\n              itemKey=\"overlay-card\"\n              title={item.value._folderOrDocumentTitle}\n              type=\"folder\"\n            />\n          </div>\n        ))}\n        {selectedCount > 1 ? (\n          <span className={`${baseClass}__card-count`}>{selectedCount}</span>\n        ) : null}\n      </div>\n    </DragOverlay>\n  )\n}\n\nexport const snapTopLeftToCursor: Modifier = ({ activatorEvent, draggingNodeRect, transform }) => {\n  if (draggingNodeRect && activatorEvent) {\n    const activatorCoordinates = getEventCoordinates(activatorEvent)\n\n    if (!activatorCoordinates) {\n      return transform\n    }\n\n    const offsetX = activatorCoordinates.x - draggingNodeRect.left\n    const offsetY = activatorCoordinates.y - draggingNodeRect.top\n\n    return {\n      ...transform,\n      x: transform.x + offsetX + 5,\n      y: transform.y + offsetY + 5,\n    }\n  }\n\n  return transform\n}\n"],"mappings":";AAGA,SAASA,WAAW,QAAQ;AAC5B,SAASC,mBAAmB,QAAQ;AAEpC,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAMlB,OAAO,SAASC,qBAAqB;EAAEC,IAAI;EAAEC;AAAa,CAAkB;EAC1E,oBACEC,IAAA,CAACP,WAAA;IACCQ,aAAA,EAAe;IACfC,SAAA,EAAW,CAACC,mBAAA,CAAoB;IAChCC,KAAA,EAAO;MACLC,MAAA,EAAQ;MACRC,QAAA,EAAU;IACZ;cAEA,aAAAC,KAAA,CAAC;MAAIC,SAAA,EAAW,GAAGZ,SAAA,SAAkB;iBAClCa,KAAA,CAAMC,IAAI,CAAC;QAAEC,MAAA,EAAQZ,aAAA,GAAgB,IAAI,IAAI;MAAE,GAAGa,GAAG,CAAC,CAACC,CAAA,EAAGC,KAAA,kBACzDd,IAAA,CAAC;QACCQ,SAAA,EAAW,GAAGZ,SAAA,QAAiB;QAE/BQ,KAAA,EAAO;UACLW,KAAA,EAAO,GAAGD,KAAA,GAAQ,KAAK;UACvBE,GAAA,EAAK,IAAIF,KAAA,GAAQ;QACnB;kBAEA,aAAAd,IAAA,CAACL,cAAA;UACCsB,EAAA,EAAI;UACJC,UAAU;UACVC,OAAA,EAAQ;UACRC,KAAA,EAAOtB,IAAA,CAAKuB,KAAK,CAACC,sBAAsB;UACxCC,IAAA,EAAK;;SAXFT,KAAA,IAeRf,aAAA,GAAgB,iBACfC,IAAA,CAAC;QAAKQ,SAAA,EAAW,GAAGZ,SAAA,cAAuB;kBAAGG;WAC5C;;;AAIZ;AAEA,OAAO,MAAMI,mBAAA,GAAgCA,CAAC;EAAEqB,cAAc;EAAEC,gBAAgB;EAAEC;AAAS,CAAE;EAC3F,IAAID,gBAAA,IAAoBD,cAAA,EAAgB;IACtC,MAAMG,oBAAA,GAAuBjC,mBAAA,CAAoB8B,cAAA;IAEjD,IAAI,CAACG,oBAAA,EAAsB;MACzB,OAAOD,SAAA;IACT;IAEA,MAAME,OAAA,GAAUD,oBAAA,CAAqBE,CAAC,GAAGJ,gBAAA,CAAiBK,IAAI;IAC9D,MAAMC,OAAA,GAAUJ,oBAAA,CAAqBK,CAAC,GAAGP,gBAAA,CAAiBT,GAAG;IAE7D,OAAO;MACL,GAAGU,SAAS;MACZG,CAAA,EAAGH,SAAA,CAAUG,CAAC,GAAGD,OAAA,GAAU;MAC3BI,CAAA,EAAGN,SAAA,CAAUM,CAAC,GAAGD,OAAA,GAAU;IAC7B;EACF;EAEA,OAAOL,SAAA;AACT","ignoreList":[]}

package/dist/elements/FolderView/DragOverlaySelection/index.scss

@@ -0,0 +1,35 @@
+@layer payload-default {
+  .drag-overlay-selection {
+    &__cards {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr;
+    }
+
+    &__card {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      grid-column: 1/2;
+      grid-row: 1/2;
+    }
+
+    &__card-count {
+      position: absolute;
+      transform: translate(calc(50% - 3px), calc(-50% - 3px));
+      right: 0;
+      top: 0;
+      border-radius: 50%;
+      line-height: 1;
+      width: 26px;
+      height: 26px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--theme-success-50);
+      background: var(--theme-success-600);
+      font-weight: bold;
+      font-variant-numeric: tabular-nums;
+    }
+  }
+}

package/dist/elements/FolderView/DraggableTableRow/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import './index.scss';
+type Props = {
+    readonly columns: React.ReactNode[];
+    readonly disabled?: boolean;
+    readonly dragData?: Record<string, unknown>;
+    readonly id: number | string;
+    readonly isDroppable?: boolean;
+    readonly isFocused?: boolean;
+    readonly isSelected?: boolean;
+    readonly isSelecting?: boolean;
+    readonly itemKey: string;
+    readonly onClick?: (e: React.MouseEvent) => void;
+    readonly onKeyDown?: (e: React.KeyboardEvent) => void;
+};
+export declare function DraggableTableRow({ id, columns, disabled, dragData, isDroppable: _isDroppable, isFocused, isSelected, isSelecting, itemKey, onClick, onKeyDown, }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/FolderView/DraggableTableRow/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FolderView/DraggableTableRow/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAGrB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC3C,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;IAChD,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAA;CACtD,CAAA;AACD,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,WAAW,EAAE,YAAY,EACzB,SAAS,EACT,UAAU,EACV,WAAW,EACX,OAAO,EACP,OAAO,EACP,SAAS,GACV,EAAE,KAAK,qBAgEP"}

package/dist/elements/FolderView/DraggableTableRow/index.js

@@ -0,0 +1,63 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDroppable } from '@dnd-kit/core';
+import React from 'react';
+import { DraggableWithClick } from '../DraggableWithClick/index.js';
+import { HiddenCell, TableCell } from '../SimpleTable/index.js';
+import './index.scss';
+const baseClass = 'draggable-table-row';
+export function DraggableTableRow({
+  id,
+  columns,
+  disabled = false,
+  dragData,
+  isDroppable: _isDroppable,
+  isFocused,
+  isSelected,
+  isSelecting,
+  itemKey,
+  onClick,
+  onKeyDown
+}) {
+  const isDroppable = !disabled && _isDroppable && !isSelected;
+  const {
+    isOver,
+    setNodeRef
+  } = useDroppable({
+    id,
+    data: dragData,
+    disabled: !isDroppable
+  });
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const copyOfRef = ref.current;
+    if (isFocused && ref.current) {
+      ref.current.focus();
+    } else if (!isFocused && ref.current) {
+      ref.current.blur();
+    }
+    return () => {
+      if (copyOfRef) {
+        copyOfRef.blur();
+      }
+    };
+  }, [isFocused]);
+  return /*#__PURE__*/_jsxs(DraggableWithClick, {
+    as: "tr",
+    className: [baseClass, isSelected && `${baseClass}--selected`, isSelecting && `${baseClass}--selecting`, disabled && `${baseClass}--disabled`, isFocused && `${baseClass}--focused`, isOver && `${baseClass}--over`].filter(Boolean).join(' '),
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    ref: ref,
+    children: [columns.map((col, i) => /*#__PURE__*/_jsx(TableCell, {
+      className: [`${baseClass}__cell-content`, i === 0 && `${baseClass}__first-td`, i === columns.length - 1 && `${baseClass}__last-td`].filter(Boolean).join(' '),
+      children: col
+    }, `${itemKey}-${i}`)), isDroppable ? /*#__PURE__*/_jsx(HiddenCell, {
+      children: /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__drop-area`,
+        ref: setNodeRef
+      })
+    }) : null]
+  }, itemKey);
+}
+//# sourceMappingURL=index.js.map