@payloadcms/ui 3.0.0-canary.a5aaf21 → 3.0.0-canary.a6e7305

package/dist/elements/Table/index.scss

@@ -1,104 +1,106 @@
 @import '../../scss/styles.scss';
 
-.table {
-  margin-bottom: $baseline;
-  overflow: auto;
-  max-width: 100%;
-
-  table {
-    min-width: 100%;
-  }
-
-  thead {
-    color: var(--theme-elevation-400);
-
-    th {
-      font-weight: normal;
-      text-align: left;
-      [dir='rtl'] & {
-        text-align: right;
-      }
-    }
-  }
-
-  th,
-  td {
-    vertical-align: top;
-    padding: base(0.8) base(0.6);
-    min-width: 150px;
-
-    &:first-child {
-      padding-inline-start: base(0.8);
+@layer payload-default {
+  .table {
+    margin-bottom: $baseline;
+    overflow: auto;
+    max-width: 100%;
+
+    table {
+      min-width: 100%;
     }
 
-    &:last-child {
-      padding-inline-end: base(0.8);
-    }
-  }
+    thead {
+      color: var(--theme-elevation-400);
 
-  tbody {
-    tr {
-      &:nth-child(odd) {
-        background: var(--theme-elevation-50);
-        border-radius: $style-radius-s;
+      th {
+        font-weight: normal;
+        text-align: left;
+        [dir='rtl'] & {
+          text-align: right;
+        }
       }
     }
-  }
 
-  a:focus-visible {
-    outline: var(--accessibility-outline);
-    outline-offset: var(--accessibility-outline-offset);
-  }
+    th,
+    td {
+      vertical-align: top;
+      padding: base(0.8) base(0.6);
+      min-width: 150px;
 
-  &--appearance-condensed {
-    thead {
-      th:first-child {
-        border-top-left-radius: $style-radius-s;
+      &:first-child {
+        padding-inline-start: base(0.8);
       }
 
-      th:last-child {
-        border-top-right-radius: $style-radius-s;
+      &:last-child {
+        padding-inline-end: base(0.8);
       }
-
-      background: var(--theme-elevation-50);
     }
 
     tbody {
       tr {
         &:nth-child(odd) {
-          background: transparent;
-          border-radius: 0;
+          background: var(--theme-elevation-50);
+          border-radius: $style-radius-s;
         }
       }
     }
 
-    th,
-    td {
-      padding: base(0.3) base(0.3);
+    a:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
+    }
 
-      &:first-child {
-        padding-inline-start: base(0.6);
+    &--appearance-condensed {
+      thead {
+        th:first-child {
+          border-top-left-radius: $style-radius-s;
+        }
+
+        th:last-child {
+          border-top-right-radius: $style-radius-s;
+        }
+
+        background: var(--theme-elevation-50);
       }
 
-      &:last-child {
-        padding-inline-end: base(0.6);
+      tbody {
+        tr {
+          &:nth-child(odd) {
+            background: transparent;
+            border-radius: 0;
+          }
+        }
       }
-    }
 
-    th {
-      padding: base(0.3);
-    }
+      th,
+      td {
+        padding: base(0.3) base(0.3);
 
-    tr td,
-    th {
-      border: 0.5px solid var(--theme-elevation-100);
+        &:first-child {
+          padding-inline-start: base(0.6);
+        }
+
+        &:last-child {
+          padding-inline-end: base(0.6);
+        }
+      }
+
+      th {
+        padding: base(0.3);
+      }
+
+      tr td,
+      th {
+        border: 0.5px solid var(--theme-elevation-100);
+      }
     }
-  }
 
-  @include mid-break {
-    th,
-    td {
-      max-width: 70vw;
+    @include mid-break {
+      th,
+      td {
+        max-width: 70vw;
+      }
     }
   }
 }

package/dist/elements/TableColumns/buildColumnState.js

@@ -68,6 +68,7 @@ export const buildColumnState = args => {
     ? field.admin.components.Label : undefined;
     const Label = /*#__PURE__*/_jsx(FieldLabel, {
       field: field,
+      hideLocale: true,
       Label: CustomLabelToRender,
       unstyled: true
     });

package/dist/elements/TableColumns/buildColumnState.js.map

@@ -1 +1 @@
-{"version":3,"file":"buildColumnState.js","names":["React","FieldLabel","flattenFieldMap","SelectAll","SelectRow","SortColumn","DefaultCell","buildColumnState","args","beforeRows","columnPreferences","columns","enableRowSelections","fields","sortColumnProps","useAsTitle","sortedFieldMap","idFieldIndex","findIndex","field","name","idField","splice","unshift","useAsTitleFieldIndex","useAsTitleField","sortTo","sort","a","b","aIndex","column","accessor","bIndex","activeColumnsIndices","sorted","reduce","acc","index","columnPreference","find","preference","active","Array","isArray","length","includes","push","CustomLabelToRender","admin","components","Label","undefined","_jsx","unstyled","fieldAffectsDataSubFields","type","Heading","disable","_isPresentational","label","cellProps","Cell","Component","RenderedComponent"],"sources":["../../../src/elements/TableColumns/buildColumnState.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, SanitizedCollectionConfig, StaticLabel } from 'payload'\n\nimport React from 'react'\n\nimport type { ColumnPreferences } from '../../providers/ListInfo/index.js'\nimport type { SortColumnProps } from '../SortColumn/index.js'\nimport type { Column } from '../Table/index.js'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { flattenFieldMap } from '../../utilities/flattenFieldMap.js'\nimport { SelectAll } from '../SelectAll/index.js'\nimport { SelectRow } from '../SelectRow/index.js'\nimport { SortColumn } from '../SortColumn/index.js'\nimport { DefaultCell } from '../Table/DefaultCell/index.js'\n\ntype Args = {\n  beforeRows?: Column[]\n  columnPreferences: ColumnPreferences\n  columns?: ColumnPreferences\n  enableRowSelections: boolean\n  enableRowTypes?: boolean\n  fields: ClientField[]\n  sortColumnProps?: Partial<SortColumnProps>\n  useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle']\n}\n\nexport const buildColumnState = (args: Args): Column[] => {\n  const {\n    beforeRows,\n    columnPreferences,\n    columns,\n    enableRowSelections,\n    fields,\n    sortColumnProps,\n    useAsTitle,\n  } = args\n\n  let sortedFieldMap = flattenFieldMap(fields)\n\n  // place the `ID` field first, if it exists\n  // do the same for the `useAsTitle` field with precedence over the `ID` field\n  // then sort the rest of the fields based on the `defaultColumns` or `columnPreferences`\n  const idFieldIndex = sortedFieldMap.findIndex((field) => 'name' in field && field.name === 'id')\n\n  if (idFieldIndex > -1) {\n    const idField = sortedFieldMap.splice(idFieldIndex, 1)[0]\n    sortedFieldMap.unshift(idField)\n  }\n\n  const useAsTitleFieldIndex = useAsTitle\n    ? sortedFieldMap.findIndex((field) => 'name' in field && field.name === useAsTitle)\n    : -1\n\n  if (useAsTitleFieldIndex > -1) {\n    const useAsTitleField = sortedFieldMap.splice(useAsTitleFieldIndex, 1)[0]\n    sortedFieldMap.unshift(useAsTitleField)\n  }\n\n  const sortTo = columnPreferences || columns\n\n  if (sortTo) {\n    // sort the fields to the order of `defaultColumns` or `columnPreferences`\n    sortedFieldMap = sortedFieldMap.sort((a, b) => {\n      const aIndex = sortTo.findIndex((column) => 'name' in a && column.accessor === a.name)\n      const bIndex = sortTo.findIndex((column) => 'name' in b && column.accessor === b.name)\n      if (aIndex === -1 && bIndex === -1) {\n        return 0\n      }\n      if (aIndex === -1) {\n        return 1\n      }\n      if (bIndex === -1) {\n        return -1\n      }\n      return aIndex - bIndex\n    })\n  }\n\n  const activeColumnsIndices = []\n\n  const sorted: Column[] = sortedFieldMap.reduce((acc, field, index) => {\n    const columnPreference = columnPreferences?.find(\n      (preference) => 'name' in field && preference.accessor === field.name,\n    )\n\n    let active = false\n\n    if (columnPreference) {\n      active = columnPreference.active\n    } else if (columns && Array.isArray(columns) && columns.length > 0) {\n      active = columns.find((column) => 'name' in field && column.accessor === field.name)?.active\n    } else if (activeColumnsIndices.length < 4) {\n      active = true\n    }\n\n    if (active && !activeColumnsIndices.includes(index)) {\n      activeColumnsIndices.push(index)\n    }\n\n    const CustomLabelToRender =\n      field &&\n      'admin' in field &&\n      'components' in field.admin &&\n      'Label' in field.admin.components &&\n      field.admin.components.Label !== undefined // let it return `null`\n        ? field.admin.components.Label\n        : undefined\n\n    const Label = <FieldLabel field={field} Label={CustomLabelToRender} unstyled />\n\n    const fieldAffectsDataSubFields =\n      field &&\n      field.type &&\n      (field.type === 'array' || field.type === 'group' || field.type === 'blocks')\n\n    const Heading = (\n      <SortColumn\n        disable={fieldAffectsDataSubFields || field?._isPresentational || undefined}\n        Label={Label}\n        label={'label' in field ? (field.label as StaticLabel) : undefined}\n        name={'name' in field ? field.name : undefined}\n        {...(sortColumnProps || {})}\n      />\n    )\n\n    if (field) {\n      const column: Column = {\n        accessor: 'name' in field ? field.name : undefined,\n        active,\n        cellProps: {\n          field: {\n            ...(field || ({} as ClientField)),\n            admin: {\n              ...(field.admin || {}),\n              components: {\n                ...(field.admin?.components || {}),\n                Cell: field.admin?.components?.Cell || {\n                  type: 'client',\n                  Component: DefaultCell,\n                  RenderedComponent: null,\n                },\n                Label,\n              },\n            },\n          } as ClientField,\n        },\n        Heading,\n      }\n\n      acc.push(column)\n    }\n\n    return acc\n  }, [])\n\n  if (enableRowSelections) {\n    sorted.unshift({\n      accessor: '_select',\n      active: true,\n      cellProps: {\n        field: {\n          admin: {\n            components: {\n              Cell: {\n                type: 'client',\n                Component: null,\n                RenderedComponent: <SelectRow />,\n              },\n              Label: null,\n            },\n          },\n        } as ClientField,\n      },\n      Heading: <SelectAll />,\n    })\n  }\n\n  if (beforeRows) {\n    sorted.unshift(...beforeRows)\n  }\n\n  return sorted\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"buildColumnState.js","names":["React","FieldLabel","flattenFieldMap","SelectAll","SelectRow","SortColumn","DefaultCell","buildColumnState","args","beforeRows","columnPreferences","columns","enableRowSelections","fields","sortColumnProps","useAsTitle","sortedFieldMap","idFieldIndex","findIndex","field","name","idField","splice","unshift","useAsTitleFieldIndex","useAsTitleField","sortTo","sort","a","b","aIndex","column","accessor","bIndex","activeColumnsIndices","sorted","reduce","acc","index","columnPreference","find","preference","active","Array","isArray","length","includes","push","CustomLabelToRender","admin","components","Label","undefined","_jsx","hideLocale","unstyled","fieldAffectsDataSubFields","type","Heading","disable","_isPresentational","label","cellProps","Cell","Component","RenderedComponent"],"sources":["../../../src/elements/TableColumns/buildColumnState.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, SanitizedCollectionConfig, StaticLabel } from 'payload'\n\nimport React from 'react'\n\nimport type { ColumnPreferences } from '../../providers/ListInfo/index.js'\nimport type { SortColumnProps } from '../SortColumn/index.js'\nimport type { Column } from '../Table/index.js'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { flattenFieldMap } from '../../utilities/flattenFieldMap.js'\nimport { SelectAll } from '../SelectAll/index.js'\nimport { SelectRow } from '../SelectRow/index.js'\nimport { SortColumn } from '../SortColumn/index.js'\nimport { DefaultCell } from '../Table/DefaultCell/index.js'\n\ntype Args = {\n  beforeRows?: Column[]\n  columnPreferences: ColumnPreferences\n  columns?: ColumnPreferences\n  enableRowSelections: boolean\n  enableRowTypes?: boolean\n  fields: ClientField[]\n  sortColumnProps?: Partial<SortColumnProps>\n  useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle']\n}\n\nexport const buildColumnState = (args: Args): Column[] => {\n  const {\n    beforeRows,\n    columnPreferences,\n    columns,\n    enableRowSelections,\n    fields,\n    sortColumnProps,\n    useAsTitle,\n  } = args\n\n  let sortedFieldMap = flattenFieldMap(fields)\n\n  // place the `ID` field first, if it exists\n  // do the same for the `useAsTitle` field with precedence over the `ID` field\n  // then sort the rest of the fields based on the `defaultColumns` or `columnPreferences`\n  const idFieldIndex = sortedFieldMap.findIndex((field) => 'name' in field && field.name === 'id')\n\n  if (idFieldIndex > -1) {\n    const idField = sortedFieldMap.splice(idFieldIndex, 1)[0]\n    sortedFieldMap.unshift(idField)\n  }\n\n  const useAsTitleFieldIndex = useAsTitle\n    ? sortedFieldMap.findIndex((field) => 'name' in field && field.name === useAsTitle)\n    : -1\n\n  if (useAsTitleFieldIndex > -1) {\n    const useAsTitleField = sortedFieldMap.splice(useAsTitleFieldIndex, 1)[0]\n    sortedFieldMap.unshift(useAsTitleField)\n  }\n\n  const sortTo = columnPreferences || columns\n\n  if (sortTo) {\n    // sort the fields to the order of `defaultColumns` or `columnPreferences`\n    sortedFieldMap = sortedFieldMap.sort((a, b) => {\n      const aIndex = sortTo.findIndex((column) => 'name' in a && column.accessor === a.name)\n      const bIndex = sortTo.findIndex((column) => 'name' in b && column.accessor === b.name)\n      if (aIndex === -1 && bIndex === -1) {\n        return 0\n      }\n      if (aIndex === -1) {\n        return 1\n      }\n      if (bIndex === -1) {\n        return -1\n      }\n      return aIndex - bIndex\n    })\n  }\n\n  const activeColumnsIndices = []\n\n  const sorted: Column[] = sortedFieldMap.reduce((acc, field, index) => {\n    const columnPreference = columnPreferences?.find(\n      (preference) => 'name' in field && preference.accessor === field.name,\n    )\n\n    let active = false\n\n    if (columnPreference) {\n      active = columnPreference.active\n    } else if (columns && Array.isArray(columns) && columns.length > 0) {\n      active = columns.find((column) => 'name' in field && column.accessor === field.name)?.active\n    } else if (activeColumnsIndices.length < 4) {\n      active = true\n    }\n\n    if (active && !activeColumnsIndices.includes(index)) {\n      activeColumnsIndices.push(index)\n    }\n\n    const CustomLabelToRender =\n      field &&\n      'admin' in field &&\n      'components' in field.admin &&\n      'Label' in field.admin.components &&\n      field.admin.components.Label !== undefined // let it return `null`\n        ? field.admin.components.Label\n        : undefined\n\n    const Label = <FieldLabel field={field} hideLocale Label={CustomLabelToRender} unstyled />\n\n    const fieldAffectsDataSubFields =\n      field &&\n      field.type &&\n      (field.type === 'array' || field.type === 'group' || field.type === 'blocks')\n\n    const Heading = (\n      <SortColumn\n        disable={fieldAffectsDataSubFields || field?._isPresentational || undefined}\n        Label={Label}\n        label={'label' in field ? (field.label as StaticLabel) : undefined}\n        name={'name' in field ? field.name : undefined}\n        {...(sortColumnProps || {})}\n      />\n    )\n\n    if (field) {\n      const column: Column = {\n        accessor: 'name' in field ? field.name : undefined,\n        active,\n        cellProps: {\n          field: {\n            ...(field || ({} as ClientField)),\n            admin: {\n              ...(field.admin || {}),\n              components: {\n                ...(field.admin?.components || {}),\n                Cell: field.admin?.components?.Cell || {\n                  type: 'client',\n                  Component: DefaultCell,\n                  RenderedComponent: null,\n                },\n                Label,\n              },\n            },\n          } as ClientField,\n        },\n        Heading,\n      }\n\n      acc.push(column)\n    }\n\n    return acc\n  }, [])\n\n  if (enableRowSelections) {\n    sorted.unshift({\n      accessor: '_select',\n      active: true,\n      cellProps: {\n        field: {\n          admin: {\n            components: {\n              Cell: {\n                type: 'client',\n                Component: null,\n                RenderedComponent: <SelectRow />,\n              },\n              Label: null,\n            },\n          },\n        } as ClientField,\n      },\n      Heading: <SelectAll />,\n    })\n  }\n\n  if (beforeRows) {\n    sorted.unshift(...beforeRows)\n  }\n\n  return sorted\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Thumbnail/createThumbnail.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Create a thumbnail from a File object by drawing it onto an OffscreenCanvas
+ */
+export declare const createThumbnail: (file: File) => Promise<string>;
+//# sourceMappingURL=createThumbnail.d.ts.map

package/dist/elements/Thumbnail/createThumbnail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createThumbnail.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/createThumbnail.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,eAAe,SAAU,IAAI,KAAG,OAAO,CAAC,MAAM,CAgD1D,CAAA"}

package/dist/elements/Thumbnail/createThumbnail.js

@@ -0,0 +1,50 @@
+/**
+ * Create a thumbnail from a File object by drawing it onto an OffscreenCanvas
+ */export const createThumbnail = file => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = URL.createObjectURL(file) // Use Object URL directly
+    ;
+    img.onload = () => {
+      const maxDimension = 280;
+      let drawHeight, drawWidth;
+      // Calculate aspect ratio
+      const aspectRatio = img.width / img.height;
+      // Determine dimensions to fit within maxDimension while maintaining aspect ratio
+      if (aspectRatio > 1) {
+        // Image is wider than tall
+        drawWidth = maxDimension;
+        drawHeight = maxDimension / aspectRatio;
+      } else {
+        // Image is taller than wide, or square
+        drawWidth = maxDimension * aspectRatio;
+        drawHeight = maxDimension;
+      }
+      const canvas = new OffscreenCanvas(drawWidth, drawHeight) // Create an OffscreenCanvas
+      ;
+      const ctx = canvas.getContext('2d');
+      // Draw the image onto the OffscreenCanvas with calculated dimensions
+      ctx.drawImage(img, 0, 0, drawWidth, drawHeight);
+      // Convert the OffscreenCanvas to a Blob and free up memory
+      canvas.convertToBlob({
+        type: 'image/jpeg',
+        quality: 0.25
+      }).then(blob => {
+        URL.revokeObjectURL(img.src) // Release the Object URL
+        ;
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result) // Resolve as data URL
+        ;
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+      }).catch(reject);
+    };
+    img.onerror = error => {
+      URL.revokeObjectURL(img.src) // Release Object URL on error
+      ;
+      // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
+      reject(error);
+    };
+  });
+};
+//# sourceMappingURL=createThumbnail.js.map

package/dist/elements/Thumbnail/createThumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createThumbnail.js","names":["createThumbnail","file","Promise","resolve","reject","img","Image","src","URL","createObjectURL","onload","maxDimension","drawHeight","drawWidth","aspectRatio","width","height","canvas","OffscreenCanvas","ctx","getContext","drawImage","convertToBlob","type","quality","then","blob","revokeObjectURL","reader","FileReader","result","onerror","readAsDataURL","catch","error"],"sources":["../../../src/elements/Thumbnail/createThumbnail.ts"],"sourcesContent":["/**\n * Create a thumbnail from a File object by drawing it onto an OffscreenCanvas\n */\nexport const createThumbnail = (file: File): Promise<string> => {\n  return new Promise((resolve, reject) => {\n    const img = new Image()\n    img.src = URL.createObjectURL(file) // Use Object URL directly\n\n    img.onload = () => {\n      const maxDimension = 280\n      let drawHeight: number, drawWidth: number\n\n      // Calculate aspect ratio\n      const aspectRatio = img.width / img.height\n\n      // Determine dimensions to fit within maxDimension while maintaining aspect ratio\n      if (aspectRatio > 1) {\n        // Image is wider than tall\n        drawWidth = maxDimension\n        drawHeight = maxDimension / aspectRatio\n      } else {\n        // Image is taller than wide, or square\n        drawWidth = maxDimension * aspectRatio\n        drawHeight = maxDimension\n      }\n\n      const canvas = new OffscreenCanvas(drawWidth, drawHeight) // Create an OffscreenCanvas\n      const ctx = canvas.getContext('2d')\n\n      // Draw the image onto the OffscreenCanvas with calculated dimensions\n      ctx.drawImage(img, 0, 0, drawWidth, drawHeight)\n\n      // Convert the OffscreenCanvas to a Blob and free up memory\n      canvas\n        .convertToBlob({ type: 'image/jpeg', quality: 0.25 })\n        .then((blob) => {\n          URL.revokeObjectURL(img.src) // Release the Object URL\n          const reader = new FileReader()\n          reader.onload = () => resolve(reader.result as string) // Resolve as data URL\n          reader.onerror = reject\n          reader.readAsDataURL(blob)\n        })\n        .catch(reject)\n    }\n\n    img.onerror = (error) => {\n      URL.revokeObjectURL(img.src) // Release Object URL on error\n      // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors\n      reject(error)\n    }\n  })\n}\n"],"mappings":"AAAA;;GAGA,OAAO,MAAMA,eAAA,GAAmBC,IAAA;EAC9B,OAAO,IAAIC,OAAA,CAAQ,CAACC,OAAA,EAASC,MAAA;IAC3B,MAAMC,GAAA,GAAM,IAAIC,KAAA;IAChBD,GAAA,CAAIE,GAAG,GAAGC,GAAA,CAAIC,eAAe,CAACR,IAAA,EAAM;IAAA;IAEpCI,GAAA,CAAIK,MAAM,GAAG;MACX,MAAMC,YAAA,GAAe;MACrB,IAAIC,UAAA,EAAoBC,SAAA;MAExB;MACA,MAAMC,WAAA,GAAcT,GAAA,CAAIU,KAAK,GAAGV,GAAA,CAAIW,MAAM;MAE1C;MACA,IAAIF,WAAA,GAAc,GAAG;QACnB;QACAD,SAAA,GAAYF,YAAA;QACZC,UAAA,GAAaD,YAAA,GAAeG,WAAA;MAC9B,OAAO;QACL;QACAD,SAAA,GAAYF,YAAA,GAAeG,WAAA;QAC3BF,UAAA,GAAaD,YAAA;MACf;MAEA,MAAMM,MAAA,GAAS,IAAIC,eAAA,CAAgBL,SAAA,EAAWD,UAAA,EAAY;MAAA;MAC1D,MAAMO,GAAA,GAAMF,MAAA,CAAOG,UAAU,CAAC;MAE9B;MACAD,GAAA,CAAIE,SAAS,CAAChB,GAAA,EAAK,GAAG,GAAGQ,SAAA,EAAWD,UAAA;MAEpC;MACAK,MAAA,CACGK,aAAa,CAAC;QAAEC,IAAA,EAAM;QAAcC,OAAA,EAAS;MAAK,GAClDC,IAAI,CAAEC,IAAA;QACLlB,GAAA,CAAImB,eAAe,CAACtB,GAAA,CAAIE,GAAG,EAAE;QAAA;QAC7B,MAAMqB,MAAA,GAAS,IAAIC,UAAA;QACnBD,MAAA,CAAOlB,MAAM,GAAG,MAAMP,OAAA,CAAQyB,MAAA,CAAOE,MAAM,EAAY;QAAA;QACvDF,MAAA,CAAOG,OAAO,GAAG3B,MAAA;QACjBwB,MAAA,CAAOI,aAAa,CAACN,IAAA;MACvB,GACCO,KAAK,CAAC7B,MAAA;IACX;IAEAC,GAAA,CAAI0B,OAAO,GAAIG,KAAA;MACb1B,GAAA,CAAImB,eAAe,CAACtB,GAAA,CAAIE,GAAG,EAAE;MAAA;MAC7B;MACAH,MAAA,CAAO8B,KAAA;IACT;EACF;AACF","ignoreList":[]}

package/dist/elements/Thumbnail/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAKxD,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC9C,YAAY,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CACnD,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAkC9C,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACxD,CAAA;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBA+BhE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAMxD,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC9C,YAAY,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CACnD,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAmC9C,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACxD,CAAA;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAgChE"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","baseClass","File","ShimmerEffect","Thumbnail","props","$","className","t0","doc","t1","fileSrc","imageCacheTag","size","undefined","t2","filename","fileExists","setFileExists","useState","t3","t4","classNames","join","t5","t6","img","Image","src","onload","onerror","useEffect","t7","t8","_jsx","alt","_jsxs","children","height","ThumbnailComponent"],"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { File } from '../../graphics/File/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nexport type ThumbnailProps = {\n  className?: string\n  collectionSlug?: string\n  doc?: Record<string, unknown>\n  fileSrc?: string\n  imageCacheTag?: string\n  size?: 'expand' | 'large' | 'medium' | 'small'\n  uploadConfig?: SanitizedCollectionConfig['upload']\n}\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const { className = '', doc: { filename } = {}, fileSrc, imageCacheTag, size } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  React.useEffect(() => {\n    if (!fileSrc) {\n      setFileExists(false)\n      return\n    }\n\n    const img = new Image()\n    img.src = fileSrc\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [fileSrc])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && (\n        <img\n          alt={filename as string}\n          src={`${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`}\n        />\n      )}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n\ntype ThumbnailComponentProps = {\n  readonly alt?: string\n  readonly className?: string\n  readonly filename: string\n  readonly fileSrc: string\n  readonly imageCacheTag?: string\n  readonly size?: 'expand' | 'large' | 'medium' | 'small'\n}\nexport function ThumbnailComponent(props: ThumbnailComponentProps) {\n  const { alt, className = '', filename, fileSrc, imageCacheTag, size } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  React.useEffect(() => {\n    if (!fileSrc) {\n      setFileExists(false)\n      return\n    }\n\n    const img = new Image()\n    img.src = fileSrc\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [fileSrc])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && (\n        <img alt={alt || filename} src={`${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`} />\n      )}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","baseClass","File","ShimmerEffect","Thumbnail","props","$","className","t0","doc","t1","fileSrc","imageCacheTag","size","undefined","t2","filename","fileExists","setFileExists","useState","t3","t4","classNames","join","t5","t6","img","Image","src","onload","onerror","useEffect","t7","t8","_jsx","alt","_jsxs","children","height","ThumbnailComponent"],"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { File } from '../../graphics/File/index.js'\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nexport type ThumbnailProps = {\n  className?: string\n  collectionSlug?: string\n  doc?: Record<string, unknown>\n  fileSrc?: string\n  imageCacheTag?: string\n  size?: 'expand' | 'large' | 'medium' | 'small'\n  uploadConfig?: SanitizedCollectionConfig['upload']\n}\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const { className = '', doc: { filename } = {}, fileSrc, imageCacheTag, size } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  React.useEffect(() => {\n    if (!fileSrc) {\n      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect\n      setFileExists(false)\n      return\n    }\n\n    const img = new Image()\n    img.src = fileSrc\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [fileSrc])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && (\n        <img\n          alt={filename as string}\n          src={`${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`}\n        />\n      )}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n\ntype ThumbnailComponentProps = {\n  readonly alt?: string\n  readonly className?: string\n  readonly filename: string\n  readonly fileSrc: string\n  readonly imageCacheTag?: string\n  readonly size?: 'expand' | 'large' | 'medium' | 'small'\n}\nexport function ThumbnailComponent(props: ThumbnailComponentProps) {\n  const { alt, className = '', filename, fileSrc, imageCacheTag, size } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  React.useEffect(() => {\n    if (!fileSrc) {\n      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect\n      setFileExists(false)\n      return\n    }\n\n    const img = new Image()\n    img.src = fileSrc\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [fileSrc])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && (\n        <img alt={alt || filename} src={`${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`} />\n      )}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Thumbnail/index.scss

@@ -1,49 +1,51 @@
 @import '../../scss/styles.scss';
 
-.thumbnail {
-  min-height: 100%;
-  flex-shrink: 0;
-  align-self: stretch;
-  overflow: hidden;
-
-  img,
-  svg {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  &--size-expand {
-    max-height: 100%;
-    width: 100%;
-    padding-top: 100%;
-    position: relative;
+@layer payload-default {
+  .thumbnail {
+    min-height: 100%;
+    flex-shrink: 0;
+    align-self: stretch;
+    overflow: hidden;
 
     img,
     svg {
-      position: absolute;
-      top: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
     }
-  }
 
-  &--size-large {
-    max-height: base(9);
-    width: base(9);
-  }
+    &--size-expand {
+      max-height: 100%;
+      width: 100%;
+      padding-top: 100%;
+      position: relative;
+
+      img,
+      svg {
+        position: absolute;
+        top: 0;
+      }
+    }
 
-  &--size-medium {
-    max-height: base(7);
-    width: base(7);
-  }
+    &--size-large {
+      max-height: base(9);
+      width: base(9);
+    }
 
-  &--size-small {
-    max-height: base(5);
-    width: base(5);
-  }
+    &--size-medium {
+      max-height: base(7);
+      width: base(7);
+    }
 
-  @include large-break {
-    .thumbnail {
+    &--size-small {
+      max-height: base(5);
       width: base(5);
     }
+
+    @include large-break {
+      .thumbnail {
+        width: base(5);
+      }
+    }
   }
 }

package/dist/elements/ThumbnailCard/index.scss

@@ -1,39 +1,41 @@
 @import '../../scss/styles.scss';
 
-.thumbnail-card {
-  @include btn-reset;
-  @include shadow-m;
-  width: 100%;
-  background: var(--theme-input-bg);
-  border: 1px solid var(--theme-border-color);
-  border-radius: var(--style-radius-m);
-  transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
+@layer payload-default {
+  .thumbnail-card {
+    @include btn-reset;
+    @include shadow-m;
+    width: 100%;
+    background: var(--theme-input-bg);
+    border: 1px solid var(--theme-border-color);
+    border-radius: var(--style-radius-m);
+    transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
 
-  &__label {
-    padding: base(0.5);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-weight: 600;
-  }
+    &__label {
+      padding: base(0.5);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: 600;
+    }
 
-  &--has-on-click {
-    cursor: pointer;
+    &--has-on-click {
+      cursor: pointer;
 
-    &:hover,
-    &:focus,
-    &:active {
-      border: 1px solid var(--theme-elevation-350);
+      &:hover,
+      &:focus,
+      &:active {
+        border: 1px solid var(--theme-elevation-350);
+      }
     }
-  }
 
-  &--align-label-center {
-    text-align: center;
-  }
+    &--align-label-center {
+      text-align: center;
+    }
 
-  &__thumbnail {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    &__thumbnail {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }