@payloadcms/ui 4.0.0-internal.d28e9fb → 4.0.0-internal.d7d662c

package/dist/elements/Thumbnail/index.css

@@ -0,0 +1,42 @@
+@layer payload-default {
+  .thumbnail:not(.thumbnail--size-none) {
+    min-height: 100%;
+    flex-shrink: 0;
+    align-self: stretch;
+    overflow: hidden;
+  }
+
+  .thumbnail:not(.thumbnail--size-none) img,
+  .thumbnail:not(.thumbnail--size-none) svg {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .thumbnail--size-expand {
+    max-height: 100%;
+    width: 100%;
+  }
+
+  .thumbnail--size-large {
+    max-height: calc(var(--spacer-6) * 4.5);
+    width: calc(var(--spacer-6) * 4.5);
+  }
+
+  .thumbnail--size-medium {
+    max-height: calc(var(--spacer-6) * 3.5);
+    width: calc(var(--spacer-6) * 3.5);
+  }
+
+  .thumbnail--size-small {
+    max-height: calc(var(--spacer-6) * 2.5);
+    width: calc(var(--spacer-6) * 2.5);
+  }
+
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
+  @media (max-width: 1440px) {
+    .thumbnail .thumbnail {
+      width: calc(var(--spacer-6) * 2.5);
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 import type { SanitizedCollectionConfig } from 'payload';
 export type ThumbnailProps = {
     className?: string;
@@ -7,9 +7,9 @@ export type ThumbnailProps = {
     doc?: Record<string, unknown>;
     fileSrc?: string;
     height?: number;
-    imageCacheTag?: string;
+    imageCacheTag?: false | string;
     size?: 'expand' | 'large' | 'medium' | 'none' | 'small';
-    uploadConfig?: SanitizedCollectionConfig['upload'];
+    uploadConfig?: Omit<SanitizedCollectionConfig['upload'], 'uploadInstructions'>;
     width?: number;
 };
 export declare const Thumbnail: React.FC<ThumbnailProps>;
@@ -18,7 +18,7 @@ type ThumbnailComponentProps = {
     readonly className?: string;
     readonly filename: string;
     readonly fileSrc: string;
-    readonly imageCacheTag?: string;
+    readonly imageCacheTag?: false | string;
     readonly size?: 'expand' | 'large' | 'medium' | 'none' | 'small';
 };
 export declare function ThumbnailComponent(props: ThumbnailComponentProps): React.JSX.Element;

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;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,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACvD,YAAY,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2C9C,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,MAAM,GAAG,OAAO,CAAA;CACjE,CAAA;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAmChE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,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,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IAC9B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACvD,YAAY,CAAC,EAAE,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAA;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2C9C,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,KAAK,GAAG,MAAM,CAAA;IACvC,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;CACjE,CAAA;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAmChE"}

package/dist/elements/Thumbnail/index.js

@@ -1,89 +1,169 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import './index.scss';
+import './index.css';
 const baseClass = 'thumbnail';
 import { File } from '../../graphics/File/index.js';
 import { appendCacheTag } from '../../utilities/appendCacheTag.js';
 import { ShimmerEffect } from '../ShimmerEffect/index.js';
 export const Thumbnail = props => {
+  const $ = _c(9);
   const {
-    className = '',
-    doc: {
-      filename
-    } = {},
+    className: t0,
+    doc: t1,
     fileSrc,
     height,
     imageCacheTag,
     size,
     width
   } = props;
+  const className = t0 === undefined ? "" : t0;
+  const {
+    filename
+  } = t1 === undefined ? {} : t1;
   const [fileExists, setFileExists] = React.useState(undefined);
-  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ');
-  const src = React.useMemo(() => fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null, [fileSrc, imageCacheTag]);
-  React.useEffect(() => {
-    if (!src) {
-      setFileExists(false);
-      return;
-    }
-    setFileExists(undefined);
-    const img = new Image();
-    img.src = src;
-    img.onload = () => {
-      setFileExists(true);
-    };
-    img.onerror = () => {
-      setFileExists(false);
+  const t2 = `${baseClass}--size-${size || "medium"}`;
+  let t3;
+  if ($[0] !== className || $[1] !== t2) {
+    t3 = [baseClass, t2, className];
+    $[0] = className;
+    $[1] = t2;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const classNames = t3.join(" ");
+  let t4;
+  if ($[3] !== fileSrc || $[4] !== imageCacheTag) {
+    t4 = fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null;
+    $[3] = fileSrc;
+    $[4] = imageCacheTag;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const src = t4;
+  let t5;
+  let t6;
+  if ($[6] !== src) {
+    t5 = () => {
+      if (!src) {
+        setFileExists(false);
+        return;
+      }
+      setFileExists(undefined);
+      const img = new Image();
+      img.src = src;
+      img.onload = () => {
+        setFileExists(true);
+      };
+      img.onerror = () => {
+        setFileExists(false);
+      };
     };
-  }, [src]);
-  return /*#__PURE__*/_jsxs("div", {
+    t6 = [src];
+    $[6] = src;
+    $[7] = t5;
+    $[8] = t6;
+  } else {
+    t5 = $[7];
+    t6 = $[8];
+  }
+  React.useEffect(t5, t6);
+  return _jsxs("div", {
     className: classNames,
-    children: [fileExists === undefined && /*#__PURE__*/_jsx(ShimmerEffect, {
+    children: [fileExists === undefined && _jsx(ShimmerEffect, {
       height: "100%"
-    }), fileExists && /*#__PURE__*/_jsx("img", {
+    }), fileExists && _jsx("img", {
       alt: filename,
-      height: height,
-      src: src,
-      width: width
-    }), fileExists === false && /*#__PURE__*/_jsx(File, {})]
+      height,
+      src,
+      width
+    }), fileExists === false && _jsx(File, {})]
   });
 };
 export function ThumbnailComponent(props) {
+  const $ = _c(15);
   const {
     alt,
-    className = '',
+    className: t0,
     filename,
     fileSrc,
     imageCacheTag,
     size
   } = props;
+  const className = t0 === undefined ? "" : t0;
   const [fileExists, setFileExists] = React.useState(undefined);
-  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ');
-  const src = React.useMemo(() => fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null, [fileSrc, imageCacheTag]);
-  React.useEffect(() => {
-    if (!src) {
-      setFileExists(false);
-      return;
-    }
-    setFileExists(undefined);
-    const img = new Image();
-    img.src = src;
-    img.onload = () => {
-      setFileExists(true);
-    };
-    img.onerror = () => {
-      setFileExists(false);
+  const t1 = `${baseClass}--size-${size || "medium"}`;
+  let t2;
+  if ($[0] !== className || $[1] !== t1) {
+    t2 = [baseClass, t1, className];
+    $[0] = className;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const classNames = t2.join(" ");
+  let t3;
+  if ($[3] !== fileSrc || $[4] !== imageCacheTag) {
+    t3 = fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null;
+    $[3] = fileSrc;
+    $[4] = imageCacheTag;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const src = t3;
+  let t4;
+  let t5;
+  if ($[6] !== src) {
+    t4 = () => {
+      if (!src) {
+        setFileExists(false);
+        return;
+      }
+      setFileExists(undefined);
+      const img = new Image();
+      img.src = src;
+      img.onload = () => {
+        setFileExists(true);
+      };
+      img.onerror = () => {
+        setFileExists(false);
+      };
     };
-  }, [src]);
-  return /*#__PURE__*/_jsxs("div", {
-    className: classNames,
-    children: [fileExists === undefined && /*#__PURE__*/_jsx(ShimmerEffect, {
-      height: "100%"
-    }), fileExists && /*#__PURE__*/_jsx("img", {
-      alt: alt || filename,
-      src: src
-    }), fileExists === false && /*#__PURE__*/_jsx(File, {})]
-  });
+    t5 = [src];
+    $[6] = src;
+    $[7] = t4;
+    $[8] = t5;
+  } else {
+    t4 = $[7];
+    t5 = $[8];
+  }
+  React.useEffect(t4, t5);
+  let t6;
+  if ($[9] !== alt || $[10] !== classNames || $[11] !== fileExists || $[12] !== filename || $[13] !== src) {
+    t6 = _jsxs("div", {
+      className: classNames,
+      children: [fileExists === undefined && _jsx(ShimmerEffect, {
+        height: "100%"
+      }), fileExists && _jsx("img", {
+        alt: alt || filename,
+        src
+      }), fileExists === false && _jsx(File, {})]
+    });
+    $[9] = alt;
+    $[10] = classNames;
+    $[11] = fileExists;
+    $[12] = filename;
+    $[13] = src;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  return t6;
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","File","appendCacheTag","ShimmerEffect","Thumbnail","props","className","doc","filename","fileSrc","height","imageCacheTag","size","width","fileExists","setFileExists","useState","undefined","classNames","join","src","useMemo","useEffect","img","Image","onload","onerror","_jsxs","_jsx","alt","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 { appendCacheTag } from '../../utilities/appendCacheTag.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  height?: number\n  imageCacheTag?: string\n  size?: 'expand' | 'large' | 'medium' | 'none' | 'small'\n  uploadConfig?: SanitizedCollectionConfig['upload']\n  width?: number\n}\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const {\n    className = '',\n    doc: { filename } = {},\n    fileSrc,\n    height,\n    imageCacheTag,\n    size,\n    width,\n  } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  const src = React.useMemo(\n    () => (fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null),\n    [fileSrc, imageCacheTag],\n  )\n\n  React.useEffect(() => {\n    if (!src) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = src\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [src])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={filename as string} height={height} src={src} width={width} />}\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' | 'none' | '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  const src = React.useMemo(\n    () => (fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null),\n    [fileSrc, imageCacheTag],\n  )\n\n  React.useEffect(() => {\n    if (!src) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = src\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [src])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={alt || filename} src={src} />}\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","appendCacheTag","ShimmerEffect","Thumbnail","props","$","className","t0","doc","t1","fileSrc","height","imageCacheTag","size","width","undefined","filename","fileExists","setFileExists","useState","t2","t3","classNames","join","t4","src","t5","t6","img","Image","onload","onerror","useEffect","_jsxs","children","_jsx","alt","ThumbnailComponent"],"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { File } from '../../graphics/File/index.js'\nimport { appendCacheTag } from '../../utilities/appendCacheTag.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  height?: number\n  imageCacheTag?: false | string\n  size?: 'expand' | 'large' | 'medium' | 'none' | 'small'\n  uploadConfig?: Omit<SanitizedCollectionConfig['upload'], 'uploadInstructions'>\n  width?: number\n}\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const {\n    className = '',\n    doc: { filename } = {},\n    fileSrc,\n    height,\n    imageCacheTag,\n    size,\n    width,\n  } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  const src = React.useMemo(\n    () => (fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null),\n    [fileSrc, imageCacheTag],\n  )\n\n  React.useEffect(() => {\n    if (!src) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = src\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [src])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={filename as string} height={height} src={src} width={width} />}\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?: false | string\n  readonly size?: 'expand' | 'large' | 'medium' | 'none' | '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  const src = React.useMemo(\n    () => (fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : null),\n    [fileSrc, imageCacheTag],\n  )\n\n  React.useEffect(() => {\n    if (!src) {\n      setFileExists(false)\n      return\n    }\n    setFileExists(undefined)\n\n    const img = new Image()\n    img.src = src\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [src])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={alt || filename} src={src} />}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ThumbnailCard/index.css

@@ -1,10 +1,12 @@
 @layer payload-default {
   .thumbnail-card {
+    --thumbnail-card-size: 106px;
+
     display: flex;
     flex-direction: column;
     gap: var(--spacer-2);
     align-items: flex-start;
-    width: 100%;
+    max-width: var(--thumbnail-card-size);
     background: transparent;
     border: 0;
     padding: 0;
@@ -13,6 +15,10 @@
 
   .thumbnail-card--has-on-click {
     cursor: pointer;
+
+    &:focus-visible {
+      outline: none;
+    }
   }
 
   .thumbnail-card--align-label-center {
@@ -23,36 +29,56 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    min-width: var(--thumbnail-card-size);
     width: 100%;
     aspect-ratio: 1 / 1;
-    background: var(--bg-default-secondary);
+    background: var(--color-bg-secondary);
     border-radius: var(--radius-medium);
     overflow: hidden;
-    border: 2px solid transparent;
-    transition: border-color 100ms ease;
+    outline: var(--stroke-width-small) solid transparent;
+    outline-offset: calc(var(--stroke-width-small) * -1);
+  }
+
+  .thumbnail-card--has-on-click:hover .thumbnail-card__thumbnail {
+    outline-color: var(--color-border);
   }
 
-  .thumbnail-card--has-on-click:hover .thumbnail-card__thumbnail,
   .thumbnail-card--has-on-click:focus-visible .thumbnail-card__thumbnail {
-    border-color: var(--border-default);
+    outline-width: var(--stroke-width-medium);
+    outline-offset: calc(var(--stroke-width-medium) * -1);
+    outline-color: var(--color-border-selected);
+  }
+
+  .thumbnail-card--has-on-click:active .thumbnail-card__thumbnail {
+    outline-color: var(--color-bg-secondary-pressed);
   }
 
   .thumbnail-card--selected .thumbnail-card__thumbnail {
-    border-color: var(--border-selected);
+    outline-width: var(--stroke-width-medium);
+    outline-offset: calc(var(--stroke-width-medium) * -1);
+    outline-color: var(--color-border-selected);
+  }
+
+  .thumbnail-card--selected.thumbnail-card--has-on-click:hover .thumbnail-card__thumbnail,
+  .thumbnail-card--selected.thumbnail-card--has-on-click:focus-visible .thumbnail-card__thumbnail {
+    outline-color: var(--accessibility-focus-color);
+  }
+
+  .thumbnail-card--selected.thumbnail-card--has-on-click:active .thumbnail-card__thumbnail {
+    outline-color: var(--accessibility-focus-color);
   }
 
   .thumbnail-card__label {
     min-width: 100%;
+    max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     text-align: left;
     color: var(--color-text);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-style: normal;
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
-    letter-spacing: 0.055px;
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ThumbnailCard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEjE,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,GAAG,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,UAAU,CAAA;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAID,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmDtD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ThumbnailCard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEjE,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,GAAG,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,UAAU,CAAA;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAID,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoDtD,CAAA"}

package/dist/elements/ThumbnailCard/index.js

@@ -9,7 +9,7 @@ import { formatDocTitle } from '../../utilities/formatDocTitle/index.js';
 import './index.css';
 const baseClass = 'thumbnail-card';
 export const ThumbnailCard = props => {
-  const $ = _c(15);
+  const $ = _c(16);
   const {
     alignLabel,
     className,
@@ -43,7 +43,7 @@ export const ThumbnailCard = props => {
   }
   const classes = t3.join(" ");
   let t4;
-  if ($[5] !== classes || $[6] !== collection || $[7] !== config || $[8] !== doc || $[9] !== i18n || $[10] !== labelFromProps || $[11] !== onClick || $[12] !== onDoubleClick || $[13] !== thumbnail) {
+  if ($[5] !== classes || $[6] !== collection || $[7] !== config || $[8] !== doc || $[9] !== i18n || $[10] !== isSelected || $[11] !== labelFromProps || $[12] !== onClick || $[13] !== onDoubleClick || $[14] !== thumbnail) {
     let title = labelFromProps;
     if (!title) {
       title = formatDocTitle({
@@ -55,6 +55,7 @@ export const ThumbnailCard = props => {
       });
     }
     t4 = _jsxs("button", {
+      "aria-pressed": typeof isSelected === "boolean" ? isSelected : undefined,
       className: classes,
       onClick,
       onDoubleClick,
@@ -73,13 +74,14 @@ export const ThumbnailCard = props => {
     $[7] = config;
     $[8] = doc;
     $[9] = i18n;
-    $[10] = labelFromProps;
-    $[11] = onClick;
-    $[12] = onDoubleClick;
-    $[13] = thumbnail;
-    $[14] = t4;
+    $[10] = isSelected;
+    $[11] = labelFromProps;
+    $[12] = onClick;
+    $[13] = onDoubleClick;
+    $[14] = thumbnail;
+    $[15] = t4;
   } else {
-    t4 = $[14];
+    t4 = $[15];
   }
   return t4;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useConfig","useTranslation","formatDocTitle","baseClass","ThumbnailCard","props","$","alignLabel","className","collection","doc","isSelected","label","labelFromProps","onClick","onDoubleClick","thumbnail","config","i18n","t0","t1","t2","t3","filter","Boolean","classes","join","t4","title","data","dateFormat","admin","fallback","filename","_jsxs","type","children","_jsx"],"sources":["../../../src/elements/ThumbnailCard/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, TypeWithID } from 'payload'\n\nimport React from 'react'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatDocTitle } from '../../utilities/formatDocTitle/index.js'\nimport './index.css'\n\nexport type ThumbnailCardProps = {\n  alignLabel?: 'center' | 'left'\n  className?: string\n  collection?: ClientCollectionConfig\n  doc?: { filename?: string } & TypeWithID\n  isSelected?: boolean\n  label?: string\n  onClick?: () => void\n  onDoubleClick?: () => void\n  onKeyDown?: () => void\n  thumbnail: React.ReactNode\n}\n\nconst baseClass = 'thumbnail-card'\n\nexport const ThumbnailCard: React.FC<ThumbnailCardProps> = (props) => {\n  const {\n    alignLabel,\n    className,\n    collection,\n    doc,\n    isSelected,\n    label: labelFromProps,\n    onClick,\n    onDoubleClick,\n    thumbnail,\n  } = props\n\n  const { config } = useConfig()\n\n  const { i18n } = useTranslation()\n\n  const classes = [\n    baseClass,\n    className,\n    typeof onClick === 'function' && `${baseClass}--has-on-click`,\n    isSelected && `${baseClass}--selected`,\n    alignLabel && `${baseClass}--align-label-${alignLabel}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let title = labelFromProps\n\n  if (!title) {\n    title = formatDocTitle({\n      collectionConfig: collection,\n      data: doc,\n      dateFormat: config.admin.dateFormat,\n      fallback: doc?.filename,\n      i18n,\n    })\n  }\n\n  return (\n    <button\n      className={classes}\n      onClick={onClick}\n      onDoubleClick={onDoubleClick}\n      title={title}\n      type=\"button\"\n    >\n      <div className={`${baseClass}__thumbnail`}>{thumbnail}</div>\n      <div className={`${baseClass}__label`}>{title}</div>\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAeP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAA8CC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACzD;IAAAS,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,GAAA;IAAAC,UAAA;IAAAC,KAAA,EAAAC,cAAA;IAAAC,OAAA;IAAAC,aAAA;IAAAC;EAAA,IAUIX,KAAA;EAEJ;IAAAY;EAAA,IAAmBjB,SAAA;EAEnB;IAAAkB;EAAA,IAAiBjB,cAAA;EAKf,MAAAkB,EAAA,UAAOL,OAAA,KAAY,cAAc,GAAAX,SAAA,gBAA4B;EAC7D,MAAAiB,EAAA,GAAAT,UAAA,IAAc,GAAAR,SAAA,YAAwB;EACtC,MAAAkB,EAAA,GAAAd,UAAA,IAAc,GAAAJ,SAAA,iBAA6BI,UAAA,EAAY;EAAA,IAAAe,EAAA;EAAA,IAAAhB,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAc,EAAA,IAAAd,CAAA,QAAAe,EAAA;IALzCC,EAAA,IAAAnB,SAAA,EAEdK,SAAA,EACAW,EAA6D,EAC7DC,EAAsC,EACtCC,EAAuD,EAAAE,MAAA,CAAAC,OAE/C;IAAAlB,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAa,EAAA;IAAAb,CAAA,MAAAc,EAAA;IAAAd,CAAA,MAAAe,EAAA;IAAAf,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAPV,MAAAmB,OAAA,GAAgBH,EAON,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAArB,CAAA,QAAAmB,OAAA,IAAAnB,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAW,MAAA,IAAAX,CAAA,QAAAI,GAAA,IAAAJ,CAAA,QAAAY,IAAA,IAAAZ,CAAA,SAAAO,cAAA,IAAAP,CAAA,SAAAQ,OAAA,IAAAR,CAAA,SAAAS,aAAA,IAAAT,CAAA,SAAAU,SAAA;IAER,IAAAY,KAAA,GAAYf,cAAA;IAAA,KAEPe,KAAA;MACHA,KAAA,CAAAA,CAAA,CAAQA;QAAAA,iBAAA,CACYnB,UAAA;QAAAoB,IAAA,EACZnB,GAAA;QAAAoB,UAAA,EACMb,MAAA,CAAAc,KAAA,CAAAD,UAAA;QAAAE,QAAA,EACFtB,GAAA,EAAAuB,QAAA;QAAAf;MAAA,CAEZ;IANA;IAUAS,EAAA,GAAAO,KAAA,CAAC;MAAA1B,SAAA,EACYiB,OAAA;MAAAX,OAAA;MAAAC,aAAA;MAAAa,KAAA;MAAAO,IAAA,EAIN;MAAAC,QAAA,GAELC,IAAA,CAAC;QAAA7B,SAAA,EAAe,GAAAL,SAAA,aAAyB;QAAAiC,QAAA,EAAGpB;MAAA,C,GAC5CqB,IAAA,CAAC;QAAA7B,SAAA,EAAe,GAAAL,SAAA,SAAqB;QAAAiC,QAAA,EAAGR;MAAA,C;;;;;;;;;;;;;;;SAR1CD,E;CAWJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useConfig","useTranslation","formatDocTitle","baseClass","ThumbnailCard","props","$","alignLabel","className","collection","doc","isSelected","label","labelFromProps","onClick","onDoubleClick","thumbnail","config","i18n","t0","t1","t2","t3","filter","Boolean","classes","join","t4","title","collectionConfig","data","dateFormat","admin","fallback","filename","_jsxs","undefined","type","children","_jsx"],"sources":["../../../src/elements/ThumbnailCard/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, TypeWithID } from 'payload'\n\nimport React from 'react'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatDocTitle } from '../../utilities/formatDocTitle/index.js'\nimport './index.css'\n\nexport type ThumbnailCardProps = {\n  alignLabel?: 'center' | 'left'\n  className?: string\n  collection?: ClientCollectionConfig\n  doc?: { filename?: string } & TypeWithID\n  isSelected?: boolean\n  label?: string\n  onClick?: () => void\n  onDoubleClick?: () => void\n  onKeyDown?: () => void\n  thumbnail: React.ReactNode\n}\n\nconst baseClass = 'thumbnail-card'\n\nexport const ThumbnailCard: React.FC<ThumbnailCardProps> = (props) => {\n  const {\n    alignLabel,\n    className,\n    collection,\n    doc,\n    isSelected,\n    label: labelFromProps,\n    onClick,\n    onDoubleClick,\n    thumbnail,\n  } = props\n\n  const { config } = useConfig()\n\n  const { i18n } = useTranslation()\n\n  const classes = [\n    baseClass,\n    className,\n    typeof onClick === 'function' && `${baseClass}--has-on-click`,\n    isSelected && `${baseClass}--selected`,\n    alignLabel && `${baseClass}--align-label-${alignLabel}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let title = labelFromProps\n\n  if (!title) {\n    title = formatDocTitle({\n      collectionConfig: collection,\n      data: doc,\n      dateFormat: config.admin.dateFormat,\n      fallback: doc?.filename,\n      i18n,\n    })\n  }\n\n  return (\n    <button\n      aria-pressed={typeof isSelected === 'boolean' ? isSelected : undefined}\n      className={classes}\n      onClick={onClick}\n      onDoubleClick={onDoubleClick}\n      title={title}\n      type=\"button\"\n    >\n      <div className={`${baseClass}__thumbnail`}>{thumbnail}</div>\n      <div className={`${baseClass}__label`}>{title}</div>\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAeP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAA8CC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACzD;IAAAS,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,GAAA;IAAAC,UAAA;IAAAC,KAAA,EAAAC,cAAA;IAAAC,OAAA;IAAAC,aAAA;IAAAC;EAAA,IAUIX,KAAA;EAEJ;IAAAY;EAAA,IAAmBjB,SAAA;EAEnB;IAAAkB;EAAA,IAAiBjB,cAAA;EAKf,MAAAkB,EAAA,UAAOL,OAAA,KAAY,UAA0C,IAA7D,GAAoCX,SAAA,gBAAyB;EAC7D,MAAAiB,EAAA,GAAAT,UAAsC,IAAtC,GAAiBR,SAAA,YAAqB;EACtC,MAAAkB,EAAA,GAAAd,UAAuD,IAAvD,GAAiBJ,SAAA,iBAA0BI,UAAA,EAAY;EAAA,IAAAe,EAAA;EAAA,IAAAhB,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAc,EAAA,IAAAd,CAAA,QAAAe,EAAA;IALzCC,EAAA,IACdnB,SAAA,EACAK,SAAA,EACAW,EAA6D,EAC7DC,EAAsC,EACtCC,EAAuD,CACxD,CAAAE,MACQ,CAACC,OAAA;IAAAlB,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAa,EAAA;IAAAb,CAAA,MAAAc,EAAA;IAAAd,CAAA,MAAAe,EAAA;IAAAf,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAPV,MAAAmB,OAAA,GAAgBH,EAON,CAAAI,IACH,CAAC;EAAA,IAAAC,EAAA;EAAA,IAAArB,CAAA,QAAAmB,OAAA,IAAAnB,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAW,MAAA,IAAAX,CAAA,QAAAI,GAAA,IAAAJ,CAAA,QAAAY,IAAA,IAAAZ,CAAA,SAAAK,UAAA,IAAAL,CAAA,SAAAO,cAAA,IAAAP,CAAA,SAAAQ,OAAA,IAAAR,CAAA,SAAAS,aAAA,IAAAT,CAAA,SAAAU,SAAA;IAER,IAAAY,KAAA,GAAYf,cAAA;IAEZ,IAAI,CAACe,KAAA;MACHA,KAAA,CAAAA,CAAA,CAAQ1B,cAAA,CAAe;QAAA2B,gBAAA,EACHpB,UAAA;QAAAqB,IAAA,EACZpB,GAAA;QAAAqB,UAAA,EACMd,MAAA,CAAAe,KAAY,CAAAD,UAAW;QAAAE,QAAA,EACzBvB,GAAA,EAAAwB,QAAK;QAAAhB;MAEjB;IANA;IAUAS,EAAA,GAAAQ,KAAA,CAAC;MAAA,gBACe,OAAOxB,UAAA,KAAe,SAAyB,GAA/CA,UAA+C,GAA/CyB,SAA+C;MAAA5B,SAAA,EAClDiB,OAAA;MAAAX,OAAA;MAAAC,aAAA;MAAAa,KAAA;MAAAS,IAAA,EAIN;MAAAC,QAAA,E,CAELC,IAAA,CAAC;QAAA/B,SAAA,EAAe,GAAGL,SAAA,aAAsB;QAAAmC,QAAA,EAAGtB;UAC5CuB,IAAA,CAAC;QAAA/B,SAAA,EAAe,GAAGL,SAAA,SAAkB;QAAAmC,QAAA,EAAGV;;;;;;;;;;;;;;;;;SAT1CD,E;CAYJ","ignoreList":[]}