@payloadcms/ui 3.39.1 → 3.40.0-canary.1

package/dist/elements/FolderView/Drawers/RenameFolder/index.js

@@ -39,7 +39,7 @@ export function RenameFolderDrawer(props) {
   const folderName = folderToRename.value._folderOrDocumentTitle;
   const folderID = folderToRename.value.id;
   const folderUseAsTitle = folderCollectionConfig.admin.useAsTitle;
-  const t0 = `${serverURL}${routes.api}/${folderCollectionSlug}/${folderToRename.value.id}`;
+  const t0 = `${serverURL}${routes.api}/${folderCollectionSlug}/${folderToRename.value.id}?depth=0`;
   let t1;
   if ($[0] !== t) {
     t1 = value => {

package/dist/elements/FolderView/Drawers/RenameFolder/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useModal","React","TextField","Form","useConfig","useFolder","useTranslation","Drawer","DrawerContentContainer","DrawerHeader","RenameFolderDrawer","props","$","drawerSlug","folderToRename","onRenameConfirm","t","folderCollectionConfig","folderCollectionSlug","config","closeModal","routes","serverURL","folderName","value","_folderOrDocumentTitle","folderID","id","folderUseAsTitle","admin","useAsTitle","t0","api","t1","t2","t3","data","updatedName","doc","t4","t5","value_0","_jsx","gutter","Header","slug","children","_jsxs","action","initialState","name","initialValue","valid","validate","method","onSuccess","onCancel","title","field","label","required","path"],"sources":["../../../../../src/elements/FolderView/Drawers/RenameFolder/index.tsx"],"sourcesContent":["'use client'\nimport type { FolderOrDocument } from 'payload/shared'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React from 'react'\n\nimport { TextField } from '../../../../fields/Text/index.js'\nimport { Form } from '../../../../forms/Form/index.js'\nimport { useConfig } from '../../../../providers/Config/index.js'\nimport { useFolder } from '../../../../providers/Folders/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { Drawer } from '../../../Drawer/index.js'\nimport { DrawerContentContainer } from '../../../DrawerContentContainer/index.js'\nimport { DrawerHeader } from '../DrawerHeader/index.js'\n\ntype Props = {\n  readonly drawerSlug: string\n  readonly folderToRename: FolderOrDocument\n  readonly onRenameConfirm: ({\n    folderID,\n    updatedName,\n  }: {\n    folderID: number | string\n    updatedName: string\n  }) => void\n}\nexport function RenameFolderDrawer(props: Props) {\n  const { drawerSlug, folderToRename, onRenameConfirm } = props\n  const { t } = useTranslation()\n  const { folderCollectionConfig, folderCollectionSlug } = useFolder()\n  const { config } = useConfig()\n  const { closeModal } = useModal()\n  const { routes, serverURL } = config\n\n  const folderName = folderToRename.value._folderOrDocumentTitle\n  const folderID = folderToRename.value.id\n  const folderUseAsTitle = folderCollectionConfig.admin.useAsTitle\n\n  return (\n    <Drawer gutter={false} Header={null} slug={drawerSlug}>\n      <Form\n        action={`${serverURL}${routes.api}/${folderCollectionSlug}/${folderToRename.value.id}`}\n        initialState={{\n          name: {\n            initialValue: folderName,\n            valid: true,\n            validate: (value) => {\n              if (!value) {\n                return t('validation:required')\n              }\n              return true\n            },\n            value: folderName,\n          },\n        }}\n        method=\"PATCH\"\n        onSuccess={(data: { doc: FolderOrDocument['value'] }) => {\n          return onRenameConfirm({\n            folderID,\n            updatedName: data?.doc?.[folderUseAsTitle],\n          })\n        }}\n      >\n        <DrawerHeader onCancel={() => closeModal(drawerSlug)} title={t('folder:renameFolder')} />\n\n        <DrawerContentContainer>\n          <TextField\n            field={{\n              name: 'name',\n              label: t('folder:folderName'),\n              required: true,\n            }}\n            path=\"name\"\n            validate={(value) => {\n              if (!value) {\n                return t('validation:required')\n              }\n              return true\n            }}\n          />\n        </DrawerContentContainer>\n      </Form>\n    </Drawer>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useModal","React","TextField","Form","useConfig","useFolder","useTranslation","Drawer","DrawerContentContainer","DrawerHeader","RenameFolderDrawer","props","$","drawerSlug","folderToRename","onRenameConfirm","t","folderCollectionConfig","folderCollectionSlug","config","closeModal","routes","serverURL","folderName","value","_folderOrDocumentTitle","folderID","id","folderUseAsTitle","admin","useAsTitle","t0","api","t1","t2","t3","data","updatedName","doc","t4","t5","value_0","_jsx","gutter","Header","slug","children","_jsxs","action","initialState","name","initialValue","valid","validate","method","onSuccess","onCancel","title","field","label","required","path"],"sources":["../../../../../src/elements/FolderView/Drawers/RenameFolder/index.tsx"],"sourcesContent":["'use client'\nimport type { FolderOrDocument } from 'payload/shared'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React from 'react'\n\nimport { TextField } from '../../../../fields/Text/index.js'\nimport { Form } from '../../../../forms/Form/index.js'\nimport { useConfig } from '../../../../providers/Config/index.js'\nimport { useFolder } from '../../../../providers/Folders/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { Drawer } from '../../../Drawer/index.js'\nimport { DrawerContentContainer } from '../../../DrawerContentContainer/index.js'\nimport { DrawerHeader } from '../DrawerHeader/index.js'\n\ntype Props = {\n  readonly drawerSlug: string\n  readonly folderToRename: FolderOrDocument\n  readonly onRenameConfirm: ({\n    folderID,\n    updatedName,\n  }: {\n    folderID: number | string\n    updatedName: string\n  }) => void\n}\nexport function RenameFolderDrawer(props: Props) {\n  const { drawerSlug, folderToRename, onRenameConfirm } = props\n  const { t } = useTranslation()\n  const { folderCollectionConfig, folderCollectionSlug } = useFolder()\n  const { config } = useConfig()\n  const { closeModal } = useModal()\n  const { routes, serverURL } = config\n\n  const folderName = folderToRename.value._folderOrDocumentTitle\n  const folderID = folderToRename.value.id\n  const folderUseAsTitle = folderCollectionConfig.admin.useAsTitle\n\n  return (\n    <Drawer gutter={false} Header={null} slug={drawerSlug}>\n      <Form\n        action={`${serverURL}${routes.api}/${folderCollectionSlug}/${folderToRename.value.id}?depth=0`}\n        initialState={{\n          name: {\n            initialValue: folderName,\n            valid: true,\n            validate: (value) => {\n              if (!value) {\n                return t('validation:required')\n              }\n              return true\n            },\n            value: folderName,\n          },\n        }}\n        method=\"PATCH\"\n        onSuccess={(data: { doc: FolderOrDocument['value'] }) => {\n          return onRenameConfirm({\n            folderID,\n            updatedName: data?.doc?.[folderUseAsTitle],\n          })\n        }}\n      >\n        <DrawerHeader onCancel={() => closeModal(drawerSlug)} title={t('folder:renameFolder')} />\n\n        <DrawerContentContainer>\n          <TextField\n            field={{\n              name: 'name',\n              label: t('folder:folderName'),\n              required: true,\n            }}\n            path=\"name\"\n            validate={(value) => {\n              if (!value) {\n                return t('validation:required')\n              }\n              return true\n            }}\n          />\n        </DrawerContentContainer>\n      </Form>\n    </Drawer>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -134,13 +134,22 @@
       grid-area: preview;
       aspect-ratio: 1/1;
       background-color: var(--card-preview-bg-color);
-      border-top-left-radius: inherit;
-      border-top-right-radius: inherit;
+      border-top-left-radius: var(--style-radius-s);
+      border-top-right-radius: var(--style-radius-s);
       border-bottom: 1px solid var(--card-border-color);
       display: grid;
       align-items: center;
       justify-content: center;
       pointer-events: none;
+      grid-template-columns: auto 50% auto;
+
+      &:has(.thumbnail) {
+        grid-template-columns: unset;
+      }
+
+      > .icon {
+        grid-column: 2;
+      }
 
       .icon--document {
         pointer-events: none;
@@ -153,6 +162,19 @@
       .thumbnail {
         width: 100%;
         height: 100%;
+        position: relative;
+        border-radius: inherit;
+        > img {
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          border-radius: inherit;
+        }
       }
 
       &:has(.thumbnail) {

package/dist/elements/Table/DefaultCell/fields/File/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/File/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,sBAAsB,EACtB,yBAAyB,EACzB,eAAe,EACf,iBAAiB,EAClB,MAAM,SAAS,CAAA;AAGhB,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAMrB,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,eAAe,GAAG,iBAAiB,CAAC;IACtE,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;CAClD;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA2C5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/File/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,sBAAsB,EACtB,yBAAyB,EACzB,eAAe,EACf,iBAAiB,EAClB,MAAM,SAAS,CAAA;AAGhB,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAKrB,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,eAAe,GAAG,iBAAiB,CAAC;IACtE,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;CAClD;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA2C5C,CAAA"}

package/dist/elements/Table/DefaultCell/fields/File/index.js

@@ -1,10 +1,9 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { isImage } from 'payload/shared';
+import { getBestFitFromSizes, isImage } from 'payload/shared';
 import React from 'react';
 import './index.scss';
-import { getBestFitFromSizes } from '../../../../../utilities/getBestFitFromSizes.js';
 import { Thumbnail } from '../../../../Thumbnail/index.js';
 const baseClass = 'file';
 export const FileCell = ({

package/dist/elements/Table/DefaultCell/fields/File/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["isImage","React","getBestFitFromSizes","Thumbnail","baseClass","FileCell","cellData","filename","collectionConfig","field","rowData","fieldPreviewAllowed","displayPreview","undefined","previewAllowed","upload","isFileImage","mimeType","fileSrc","thumbnailURL","url","sizes","width","_jsxs","className","_jsx","collectionSlug","slug","doc","size","uploadConfig","String","_Fragment"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/File/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  ClientCollectionConfig,\n  DefaultCellComponentProps,\n  TextFieldClient,\n  UploadFieldClient,\n} from 'payload'\n\nimport { isImage } from 'payload/shared'\nimport React from 'react'\n\nimport './index.scss'\nimport { getBestFitFromSizes } from '../../../../../utilities/getBestFitFromSizes.js'\nimport { Thumbnail } from '../../../../Thumbnail/index.js'\n\nconst baseClass = 'file'\n\nexport interface FileCellProps\n  extends DefaultCellComponentProps<TextFieldClient | UploadFieldClient> {\n  readonly collectionConfig: ClientCollectionConfig\n}\n\nexport const FileCell: React.FC<FileCellProps> = ({\n  cellData: filename,\n  collectionConfig,\n  field,\n  rowData,\n}) => {\n  const fieldPreviewAllowed = 'displayPreview' in field ? field.displayPreview : undefined\n  const previewAllowed = fieldPreviewAllowed ?? collectionConfig.upload?.displayPreview ?? true\n\n  if (previewAllowed) {\n    const isFileImage = isImage(rowData?.mimeType)\n    let fileSrc: string | undefined = isFileImage\n      ? rowData?.thumbnailURL || rowData?.url\n      : rowData?.thumbnailURL\n\n    if (isFileImage) {\n      fileSrc = getBestFitFromSizes({\n        sizes: rowData?.sizes,\n        thumbnailURL: rowData?.thumbnailURL,\n        url: rowData?.url,\n        width: rowData?.width,\n      })\n    }\n\n    return (\n      <div className={baseClass}>\n        <Thumbnail\n          className={`${baseClass}__thumbnail`}\n          collectionSlug={collectionConfig?.slug}\n          doc={{\n            ...rowData,\n            filename,\n          }}\n          fileSrc={fileSrc}\n          size=\"small\"\n          uploadConfig={collectionConfig?.upload}\n        />\n        <span className={`${baseClass}__filename`}>{String(filename)}</span>\n      </div>\n    )\n  } else {\n    return <>{String(filename)}</>\n  }\n}\n"],"mappings":"AAAA;;;AAQA,SAASA,OAAO,QAAQ;AACxB,OAAOC,KAAA,MAAW;AAElB,OAAO;AACP,SAASC,mBAAmB,QAAQ;AACpC,SAASC,SAAS,QAAQ;AAE1B,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,QAAA,GAAoCA,CAAC;EAChDC,QAAA,EAAUC,QAAQ;EAClBC,gBAAgB;EAChBC,KAAK;EACLC;AAAO,CACR;EACC,MAAMC,mBAAA,GAAsB,oBAAoBF,KAAA,GAAQA,KAAA,CAAMG,cAAc,GAAGC,SAAA;EAC/E,MAAMC,cAAA,GAAiBH,mBAAA,IAAuBH,gBAAA,CAAiBO,MAAM,EAAEH,cAAA,IAAkB;EAEzF,IAAIE,cAAA,EAAgB;IAClB,MAAME,WAAA,GAAchB,OAAA,CAAQU,OAAA,EAASO,QAAA;IACrC,IAAIC,OAAA,GAA8BF,WAAA,GAC9BN,OAAA,EAASS,YAAA,IAAgBT,OAAA,EAASU,GAAA,GAClCV,OAAA,EAASS,YAAA;IAEb,IAAIH,WAAA,EAAa;MACfE,OAAA,GAAUhB,mBAAA,CAAoB;QAC5BmB,KAAA,EAAOX,OAAA,EAASW,KAAA;QAChBF,YAAA,EAAcT,OAAA,EAASS,YAAA;QACvBC,GAAA,EAAKV,OAAA,EAASU,GAAA;QACdE,KAAA,EAAOZ,OAAA,EAASY;MAClB;IACF;IAEA,oBACEC,KAAA,CAAC;MAAIC,SAAA,EAAWpB,SAAA;8BACdqB,IAAA,CAACtB,SAAA;QACCqB,SAAA,EAAW,GAAGpB,SAAA,aAAsB;QACpCsB,cAAA,EAAgBlB,gBAAA,EAAkBmB,IAAA;QAClCC,GAAA,EAAK;UACH,GAAGlB,OAAO;UACVH;QACF;QACAW,OAAA,EAASA,OAAA;QACTW,IAAA,EAAK;QACLC,YAAA,EAActB,gBAAA,EAAkBO;uBAElCU,IAAA,CAAC;QAAKD,SAAA,EAAW,GAAGpB,SAAA,YAAqB;kBAAG2B,MAAA,CAAOxB,QAAA;;;EAGzD,OAAO;IACL,oBAAOkB,IAAA,CAAAO,SAAA;gBAAGD,MAAA,CAAOxB,QAAA;;EACnB;AACF","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getBestFitFromSizes","isImage","React","Thumbnail","baseClass","FileCell","cellData","filename","collectionConfig","field","rowData","fieldPreviewAllowed","displayPreview","undefined","previewAllowed","upload","isFileImage","mimeType","fileSrc","thumbnailURL","url","sizes","width","_jsxs","className","_jsx","collectionSlug","slug","doc","size","uploadConfig","String","_Fragment"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/File/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  ClientCollectionConfig,\n  DefaultCellComponentProps,\n  TextFieldClient,\n  UploadFieldClient,\n} from 'payload'\n\nimport { getBestFitFromSizes, isImage } from 'payload/shared'\nimport React from 'react'\n\nimport './index.scss'\nimport { Thumbnail } from '../../../../Thumbnail/index.js'\n\nconst baseClass = 'file'\n\nexport interface FileCellProps\n  extends DefaultCellComponentProps<TextFieldClient | UploadFieldClient> {\n  readonly collectionConfig: ClientCollectionConfig\n}\n\nexport const FileCell: React.FC<FileCellProps> = ({\n  cellData: filename,\n  collectionConfig,\n  field,\n  rowData,\n}) => {\n  const fieldPreviewAllowed = 'displayPreview' in field ? field.displayPreview : undefined\n  const previewAllowed = fieldPreviewAllowed ?? collectionConfig.upload?.displayPreview ?? true\n\n  if (previewAllowed) {\n    const isFileImage = isImage(rowData?.mimeType)\n    let fileSrc: string | undefined = isFileImage\n      ? rowData?.thumbnailURL || rowData?.url\n      : rowData?.thumbnailURL\n\n    if (isFileImage) {\n      fileSrc = getBestFitFromSizes({\n        sizes: rowData?.sizes,\n        thumbnailURL: rowData?.thumbnailURL,\n        url: rowData?.url,\n        width: rowData?.width,\n      })\n    }\n\n    return (\n      <div className={baseClass}>\n        <Thumbnail\n          className={`${baseClass}__thumbnail`}\n          collectionSlug={collectionConfig?.slug}\n          doc={{\n            ...rowData,\n            filename,\n          }}\n          fileSrc={fileSrc}\n          size=\"small\"\n          uploadConfig={collectionConfig?.upload}\n        />\n        <span className={`${baseClass}__filename`}>{String(filename)}</span>\n      </div>\n    )\n  } else {\n    return <>{String(filename)}</>\n  }\n}\n"],"mappings":"AAAA;;;AAQA,SAASA,mBAAmB,EAAEC,OAAO,QAAQ;AAC7C,OAAOC,KAAA,MAAW;AAElB,OAAO;AACP,SAASC,SAAS,QAAQ;AAE1B,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,QAAA,GAAoCA,CAAC;EAChDC,QAAA,EAAUC,QAAQ;EAClBC,gBAAgB;EAChBC,KAAK;EACLC;AAAO,CACR;EACC,MAAMC,mBAAA,GAAsB,oBAAoBF,KAAA,GAAQA,KAAA,CAAMG,cAAc,GAAGC,SAAA;EAC/E,MAAMC,cAAA,GAAiBH,mBAAA,IAAuBH,gBAAA,CAAiBO,MAAM,EAAEH,cAAA,IAAkB;EAEzF,IAAIE,cAAA,EAAgB;IAClB,MAAME,WAAA,GAAcf,OAAA,CAAQS,OAAA,EAASO,QAAA;IACrC,IAAIC,OAAA,GAA8BF,WAAA,GAC9BN,OAAA,EAASS,YAAA,IAAgBT,OAAA,EAASU,GAAA,GAClCV,OAAA,EAASS,YAAA;IAEb,IAAIH,WAAA,EAAa;MACfE,OAAA,GAAUlB,mBAAA,CAAoB;QAC5BqB,KAAA,EAAOX,OAAA,EAASW,KAAA;QAChBF,YAAA,EAAcT,OAAA,EAASS,YAAA;QACvBC,GAAA,EAAKV,OAAA,EAASU,GAAA;QACdE,KAAA,EAAOZ,OAAA,EAASY;MAClB;IACF;IAEA,oBACEC,KAAA,CAAC;MAAIC,SAAA,EAAWpB,SAAA;8BACdqB,IAAA,CAACtB,SAAA;QACCqB,SAAA,EAAW,GAAGpB,SAAA,aAAsB;QACpCsB,cAAA,EAAgBlB,gBAAA,EAAkBmB,IAAA;QAClCC,GAAA,EAAK;UACH,GAAGlB,OAAO;UACVH;QACF;QACAW,OAAA,EAASA,OAAA;QACTW,IAAA,EAAK;QACLC,YAAA,EAActB,gBAAA,EAAkBO;uBAElCU,IAAA,CAAC;QAAKD,SAAA,EAAW,GAAGpB,SAAA,YAAqB;kBAAG2B,MAAA,CAAOxB,QAAA;;;EAGzD,OAAO;IACL,oBAAOkB,IAAA,CAAAO,SAAA;gBAAGD,MAAA,CAAOxB,QAAA;;EACnB;AACF","ignoreList":[]}

package/dist/elements/Table/index.scss

@@ -43,15 +43,15 @@
       tr {
         position: relative;
         &:nth-child(odd) {
-          &:after {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            background: var(--theme-elevation-50);
-            height: 100%;
-            border-radius: var(--style-radius-s);
+          background: var(--theme-elevation-50);
+          border-radius: var(--style-radius-s);
+          td:first-child {
+            border-top-left-radius: inherit;
+            border-bottom-left-radius: inherit;
+          }
+          td:last-child {
+            border-top-right-radius: inherit;
+            border-bottom-right-radius: inherit;
           }
         }
       }