@payloadcms/ui 3.56.0-internal.299316b → 3.56.0-internal.72f4fd2

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

@@ -7,7 +7,7 @@ import { optionsAreObjects } from 'payload/shared';
 import React from 'react';
 import { useTranslation } from '../../../../../providers/Translation/index.js';
 export const SelectCell = t0 => {
-  const $ = _c(10);
+  const $ = _c(7);
   const {
     cellData,
     field: t1
@@ -31,38 +31,23 @@ export const SelectCell = t0 => {
     t2 = $[2];
   }
   const findLabel = t2;
-  let content;
-  if (optionsAreObjects(options)) {
-    let t3;
-    if ($[3] !== cellData || $[4] !== findLabel) {
-      t3 = Array.isArray(cellData) ? findLabel(cellData) : findLabel([cellData]);
-      $[3] = cellData;
-      $[4] = findLabel;
-      $[5] = t3;
-    } else {
-      t3 = $[5];
-    }
-    content = t3;
-  } else {
-    let t3;
-    if ($[6] !== cellData) {
-      t3 = Array.isArray(cellData) ? cellData.join(", ") : cellData;
-      $[6] = cellData;
-      $[7] = t3;
+  let t3;
+  if ($[3] !== cellData || $[4] !== findLabel || $[5] !== options) {
+    let content;
+    if (optionsAreObjects(options)) {
+      content = Array.isArray(cellData) ? findLabel(cellData) : findLabel([cellData]);
     } else {
-      t3 = $[7];
+      content = Array.isArray(cellData) ? cellData.join(", ") : cellData;
     }
-    content = t3;
-  }
-  let t3;
-  if ($[8] !== content) {
     t3 = _jsx("span", {
       children: content
     });
-    $[8] = content;
-    $[9] = t3;
+    $[3] = cellData;
+    $[4] = findLabel;
+    $[5] = options;
+    $[6] = t3;
   } else {
-    t3 = $[9];
+    t3 = $[6];
   }
   return t3;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","optionsAreObjects","React","useTranslation","SelectCell","t0","$","cellData","field","t1","options","i18n","t2","items","map","i","found","filter","f","value","label","join","findLabel","content","t3","Array","isArray","_jsx","children"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Select/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps, OptionObject, SelectFieldClient } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { optionsAreObjects } from 'payload/shared'\nimport React from 'react'\n\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\n\nexport interface SelectCellProps extends DefaultCellComponentProps<SelectFieldClient> {}\n\nexport const SelectCell: React.FC<SelectCellProps> = ({ cellData, field: { options } }) => {\n  const { i18n } = useTranslation()\n\n  const findLabel = (items: string[]) =>\n    items\n      .map((i) => {\n        const found = (options as OptionObject[]).filter((f: OptionObject) => f.value === i)?.[0]\n          ?.label\n        return getTranslation(found, i18n)\n      })\n      .join(', ')\n\n  let content = ''\n  if (optionsAreObjects(options)) {\n    content = Array.isArray(cellData)\n      ? findLabel(cellData) // hasMany\n      : findLabel([cellData])\n  } else {\n    content = Array.isArray(cellData)\n      ? cellData.join(', ') // hasMany\n      : cellData\n  }\n\n  return <span>{content}</span>\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ;AAClC,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAI/B,OAAO,MAAMC,UAAA,GAAwCC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,QAAA;IAAAC,KAAA,EAAAC;EAAA,IAAAJ,EAAgC;EAAb;IAAAK;EAAA,IAAAD,EAAW;EAClF;IAAAE;EAAA,IAAiBR,cAAA;EAAA,IAAAS,EAAA;EAAA,IAAAN,CAAA,QAAAK,IAAA,IAAAL,CAAA,QAAAI,OAAA;IAECE,EAAA,GAAAC,KAAA,IAChBA,KAAA,CAAAC,GAAA,CAAAC,CAAA;MAEI,MAAAC,KAAA,GAAcN,OAAC,CAAAO,MAAA,CAAAC,CAAA,IAAuDA,CAAA,CAAAC,KAAA,KAAYJ,CAAA,QAAAK,KAAA;MAC9E,OACGpB,cAAA,CAAegB,KAAA,EAAOL,IAAA;IAAA,CAC/B,EAAAU,IAAA,CACM;IAAAf,CAAA,MAAAK,IAAA;IAAAL,CAAA,MAAAI,OAAA;IAAAJ,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAPV,MAAAgB,SAAA,GAAkBV,EAOR;EAEV,IAAAW,OAAA;EAAc,IACVtB,iBAAA,CAAkBS,OAAA;IAAA,IAAAc,EAAA;IAAA,IAAAlB,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAgB,SAAA;MACVE,EAAA,GAAAC,KAAA,CAAAC,OAAA,CAAcnB,QAAA,IACpBe,SAAA,CAAUf,QAAA,IACVe,SAAA,EAAWf,QAAA,CAAS;MAAAD,CAAA,MAAAC,QAAA;MAAAD,CAAA,MAAAgB,SAAA;MAAAhB,CAAA,MAAAkB,EAAA;IAAA;MAAAA,EAAA,GAAAlB,CAAA;IAAA;IAFxBiB,OAAA,CAAAA,CAAA,CAAUA,EAEc;EAFxB;IAAA,IAAAC,EAAA;IAAA,IAAAlB,CAAA,QAAAC,QAAA;MAIUiB,EAAA,GAAAC,KAAA,CAAAC,OAAA,CAAcnB,QAAA,IACpBA,QAAA,CAAAc,IAAA,CAAc,QACdd,QAAA;MAAAD,CAAA,MAAAC,QAAA;MAAAD,CAAA,MAAAkB,EAAA;IAAA;MAAAA,EAAA,GAAAlB,CAAA;IAAA;IAFJiB,OAAA,CAAAA,CAAA,CAAUA,EAEN;EAFJ;EAAA,IAAAC,EAAA;EAAA,IAAAlB,CAAA,QAAAiB,OAAA;IAKKC,EAAA,GAAAG,IAAA,CAAC;MAAAC,QAAA,EAAML;IAAA,C;;;;;;SAAPC,E;CACT","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","optionsAreObjects","React","useTranslation","SelectCell","t0","$","cellData","field","t1","options","i18n","t2","items","map","i","found","filter","f","value","label","join","findLabel","t3","content","_jsx","children"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Select/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps, OptionObject, SelectFieldClient } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { optionsAreObjects } from 'payload/shared'\nimport React from 'react'\n\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\n\nexport interface SelectCellProps extends DefaultCellComponentProps<SelectFieldClient> {}\n\nexport const SelectCell: React.FC<SelectCellProps> = ({ cellData, field: { options } }) => {\n  const { i18n } = useTranslation()\n\n  const findLabel = (items: string[]) =>\n    items\n      .map((i) => {\n        const found = (options as OptionObject[]).filter((f: OptionObject) => f.value === i)?.[0]\n          ?.label\n        return getTranslation(found, i18n)\n      })\n      .join(', ')\n\n  let content = ''\n  if (optionsAreObjects(options)) {\n    content = Array.isArray(cellData)\n      ? findLabel(cellData) // hasMany\n      : findLabel([cellData])\n  } else {\n    content = Array.isArray(cellData)\n      ? cellData.join(', ') // hasMany\n      : cellData\n  }\n\n  return <span>{content}</span>\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ;AAClC,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAI/B,OAAO,MAAMC,UAAA,GAAwCC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,QAAA;IAAAC,KAAA,EAAAC;EAAA,IAAAJ,EAAgC;EAAb;IAAAK;EAAA,IAAAD,EAAW;EAClF;IAAAE;EAAA,IAAiBR,cAAA;EAAA,IAAAS,EAAA;EAAA,IAAAN,CAAA,QAAAK,IAAA,IAAAL,CAAA,QAAAI,OAAA;IAECE,EAAA,GAAAC,KAAA,IAChBA,KAAA,CAAAC,GAAA,CAAAC,CAAA;MAEI,MAAAC,KAAA,GAAcN,OAAC,CAAAO,MAAA,CAAAC,CAAA,IAAuDA,CAAA,CAAAC,KAAA,KAAYJ,CAAA,QAAAK,KAAA;MAC9E,OACGpB,cAAA,CAAegB,KAAA,EAAOL,IAAA;IAAA,CAC/B,EAAAU,IAAA,CACM;IAAAf,CAAA,MAAAK,IAAA;IAAAL,CAAA,MAAAI,OAAA;IAAAJ,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAPV,MAAAgB,SAAA,GAAkBV,EAOR;EAAA,IAAAW,EAAA;EAAA,IAAAjB,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAgB,SAAA,IAAAhB,CAAA,QAAAI,OAAA;IAEV,IAAAc,OAAA;IAAc,IACVvB,iBAAA,CAAkBS,OAAA;MACpBc,OAAA,CAAAA,CAAA,CAAUA,cAAcjB,QAAA,IACpBe,SAAA,CAAUf,QAAA,IACVe,SAAA,EAAWf,QAAA,CAAS;IAFxB;MAIAiB,OAAA,CAAAA,CAAA,CAAUA,cAAcjB,QAAA,IACpBA,QAAA,CAAAc,IAAA,CAAc,QACdd,QAAA;IAFJ;IAKKgB,EAAA,GAAAE,IAAA,CAAC;MAAAC,QAAA,EAAMF;IAAA,C;;;;;;;;SAAPD,E;CACT","ignoreList":[]}

package/dist/elements/Thumbnail/index.js

@@ -8,7 +8,7 @@ const baseClass = 'thumbnail';
 import { File } from '../../graphics/File/index.js';
 import { ShimmerEffect } from '../ShimmerEffect/index.js';
 export const Thumbnail = props => {
-  const $ = _c(17);
+  const $ = _c(6);
   const {
     className: t0,
     doc: t1,
@@ -17,33 +17,25 @@ export const Thumbnail = props => {
     size
   } = props;
   const className = t0 === undefined ? "" : t0;
-  let t2;
-  if ($[0] !== t1) {
-    t2 = t1 === undefined ? {} : t1;
-    $[0] = t1;
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
   const {
     filename
-  } = t2;
+  } = t1 === undefined ? {} : t1;
   const [fileExists, setFileExists] = React.useState(undefined);
-  const t3 = `${baseClass}--size-${size || "medium"}`;
-  let t4;
-  if ($[2] !== className || $[3] !== t3) {
-    t4 = [baseClass, t3, className];
-    $[2] = className;
-    $[3] = t3;
-    $[4] = t4;
+  const t2 = `${baseClass}--size-${size || "medium"}`;
+  let t3;
+  if ($[0] !== className || $[1] !== t2) {
+    t3 = [baseClass, t2, className];
+    $[0] = className;
+    $[1] = t2;
+    $[2] = t3;
   } else {
-    t4 = $[4];
+    t3 = $[2];
   }
-  const classNames = t4.join(" ");
+  const classNames = t3.join(" ");
+  let t4;
   let t5;
-  let t6;
-  if ($[5] !== fileSrc) {
-    t5 = () => {
+  if ($[3] !== fileSrc) {
+    t4 = () => {
       if (!fileSrc) {
         setFileExists(false);
         return;
@@ -58,53 +50,32 @@ export const Thumbnail = props => {
         setFileExists(false);
       };
     };
-    t6 = [fileSrc];
-    $[5] = fileSrc;
-    $[6] = t5;
-    $[7] = t6;
+    t5 = [fileSrc];
+    $[3] = fileSrc;
+    $[4] = t4;
+    $[5] = t5;
   } else {
-    t5 = $[6];
-    t6 = $[7];
+    t4 = $[4];
+    t5 = $[5];
   }
-  React.useEffect(t5, t6);
+  React.useEffect(t4, t5);
   let src = null;
   if (fileSrc) {
     const queryChar = fileSrc?.includes("?") ? "&" : "?";
     src = imageCacheTag ? `${fileSrc}${queryChar}${encodeURIComponent(imageCacheTag)}` : fileSrc;
   }
-  let t7;
-  if ($[8] !== classNames || $[9] !== fileExists || $[10] !== filename || $[11] !== src) {
-    let t8;
-    if ($[13] !== fileExists || $[14] !== filename || $[15] !== src) {
-      t8 = fileExists && _jsx("img", {
-        alt: filename,
-        src
-      });
-      $[13] = fileExists;
-      $[14] = filename;
-      $[15] = src;
-      $[16] = t8;
-    } else {
-      t8 = $[16];
-    }
-    t7 = _jsxs("div", {
-      className: classNames,
-      children: [fileExists === undefined && _jsx(ShimmerEffect, {
-        height: "100%"
-      }), t8, fileExists === false && _jsx(File, {})]
-    });
-    $[8] = classNames;
-    $[9] = fileExists;
-    $[10] = filename;
-    $[11] = src;
-    $[12] = t7;
-  } else {
-    t7 = $[12];
-  }
-  return t7;
+  return _jsxs("div", {
+    className: classNames,
+    children: [fileExists === undefined && _jsx(ShimmerEffect, {
+      height: "100%"
+    }), fileExists && _jsx("img", {
+      alt: filename,
+      src
+    }), fileExists === false && _jsx(File, {})]
+  });
 };
 export function ThumbnailComponent(props) {
-  const $ = _c(17);
+  const $ = _c(12);
   const {
     alt,
     className: t0,
@@ -160,25 +131,14 @@ export function ThumbnailComponent(props) {
   }
   let t5;
   if ($[6] !== alt || $[7] !== classNames || $[8] !== fileExists || $[9] !== filename || $[10] !== src) {
-    let t6;
-    if ($[12] !== alt || $[13] !== fileExists || $[14] !== filename || $[15] !== src) {
-      t6 = fileExists && _jsx("img", {
-        alt: alt || filename,
-        src
-      });
-      $[12] = alt;
-      $[13] = fileExists;
-      $[14] = filename;
-      $[15] = src;
-      $[16] = t6;
-    } else {
-      t6 = $[16];
-    }
     t5 = _jsxs("div", {
       className: classNames,
       children: [fileExists === undefined && _jsx(ShimmerEffect, {
         height: "100%"
-      }), t6, fileExists === false && _jsx(File, {})]
+      }), fileExists && _jsx("img", {
+        alt: alt || filename,
+        src
+      }), fileExists === false && _jsx(File, {})]
     });
     $[6] = alt;
     $[7] = classNames;

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","queryChar","includes","encodeURIComponent","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    setFileExists(undefined)\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  let src: null | string = null\n\n  /**\n   * If an imageCacheTag is provided, append it to the fileSrc\n   * Check if the fileSrc already has a query string, if it does, append the imageCacheTag with an ampersand\n   */\n  if (fileSrc) {\n    const queryChar = fileSrc?.includes('?') ? '&' : '?'\n    src = imageCacheTag ? `${fileSrc}${queryChar}${encodeURIComponent(imageCacheTag)}` : fileSrc\n  }\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={filename as string} src={src} />}\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    setFileExists(undefined)\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  let src: string = ''\n\n  /**\n   * If an imageCacheTag is provided, append it to the fileSrc\n   * Check if the fileSrc already has a query string, if it does, append the imageCacheTag with an ampersand\n   */\n  if (fileSrc) {\n    const queryChar = fileSrc?.includes('?') ? '&' : '?'\n    src = imageCacheTag ? `${fileSrc}${queryChar}${encodeURIComponent(imageCacheTag)}` : fileSrc\n  }\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","ShimmerEffect","Thumbnail","props","$","className","t0","doc","t1","fileSrc","imageCacheTag","size","undefined","filename","fileExists","setFileExists","useState","t2","t3","classNames","join","t4","t5","img","Image","src","onload","onerror","useEffect","queryChar","includes","encodeURIComponent","_jsxs","children","_jsx","height","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 { 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    setFileExists(undefined)\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  let src: null | string = null\n\n  /**\n   * If an imageCacheTag is provided, append it to the fileSrc\n   * Check if the fileSrc already has a query string, if it does, append the imageCacheTag with an ampersand\n   */\n  if (fileSrc) {\n    const queryChar = fileSrc?.includes('?') ? '&' : '?'\n    src = imageCacheTag ? `${fileSrc}${queryChar}${encodeURIComponent(imageCacheTag)}` : fileSrc\n  }\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={filename as string} src={src} />}\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    setFileExists(undefined)\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  let src: string = ''\n\n  /**\n   * If an imageCacheTag is provided, append it to the fileSrc\n   * Check if the fileSrc already has a query string, if it does, append the imageCacheTag with an ampersand\n   */\n  if (fileSrc) {\n    const queryChar = fileSrc?.includes('?') ? '&' : '?'\n    src = imageCacheTag ? `${fileSrc}${queryChar}${encodeURIComponent(imageCacheTag)}` : fileSrc\n  }\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.js

@@ -9,7 +9,7 @@ import { formatDocTitle } from '../../utilities/formatDocTitle/index.js';
 import './index.scss';
 const baseClass = 'thumbnail-card';
 export const ThumbnailCard = props => {
-  const $ = _c(15);
+  const $ = _c(13);
   const {
     alignLabel,
     className,
@@ -38,31 +38,18 @@ export const ThumbnailCard = props => {
     t2 = $[3];
   }
   const classes = t2.join(" ");
-  let title = labelFromProps;
-  if (!title) {
-    const t3 = doc?.filename;
-    let t4;
-    if ($[4] !== collection || $[5] !== config.admin.dateFormat || $[6] !== doc || $[7] !== i18n || $[8] !== t3) {
-      t4 = formatDocTitle({
+  let t3;
+  if ($[4] !== classes || $[5] !== collection || $[6] !== config || $[7] !== doc || $[8] !== i18n || $[9] !== labelFromProps || $[10] !== onClick || $[11] !== thumbnail) {
+    let title = labelFromProps;
+    if (!title) {
+      title = formatDocTitle({
         collectionConfig: collection,
         data: doc,
         dateFormat: config.admin.dateFormat,
-        fallback: t3,
+        fallback: doc?.filename,
         i18n
       });
-      $[4] = collection;
-      $[5] = config.admin.dateFormat;
-      $[6] = doc;
-      $[7] = i18n;
-      $[8] = t3;
-      $[9] = t4;
-    } else {
-      t4 = $[9];
     }
-    title = t4;
-  }
-  let t3;
-  if ($[10] !== classes || $[11] !== onClick || $[12] !== thumbnail || $[13] !== title) {
     t3 = _jsxs("button", {
       className: classes,
       onClick,
@@ -76,13 +63,17 @@ export const ThumbnailCard = props => {
         children: title
       })]
     });
-    $[10] = classes;
-    $[11] = onClick;
-    $[12] = thumbnail;
-    $[13] = title;
-    $[14] = t3;
+    $[4] = classes;
+    $[5] = collection;
+    $[6] = config;
+    $[7] = doc;
+    $[8] = i18n;
+    $[9] = labelFromProps;
+    $[10] = onClick;
+    $[11] = thumbnail;
+    $[12] = t3;
   } else {
-    t3 = $[14];
+    t3 = $[12];
   }
   return t3;
 };

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","label","labelFromProps","onClick","thumbnail","config","i18n","t0","t1","t2","filter","Boolean","classes","join","title","t3","filename","t4","admin","dateFormat","collectionConfig","data","fallback","_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.scss'\n\nexport type ThumbnailCardProps = {\n  alignLabel?: 'center' | 'left'\n  className?: string\n  collection?: ClientCollectionConfig\n  doc?: { filename?: string } & TypeWithID\n  label?: string\n  onClick?: () => 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    label: labelFromProps,\n    onClick,\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    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 className={classes} onClick={onClick} title={title} type=\"button\">\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;AAaP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAA8CC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACzD;IAAAS,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,GAAA;IAAAC,KAAA,EAAAC,cAAA;IAAAC,OAAA;IAAAC;EAAA,IAQIT,KAAA;EAEJ;IAAAU;EAAA,IAAmBf,SAAA;EAEnB;IAAAgB;EAAA,IAAiBf,cAAA;EAKf,MAAAgB,EAAA,UAAOJ,OAAA,KAAY,cAAc,GAAAV,SAAA,gBAA4B;EAC7D,MAAAe,EAAA,GAAAX,UAAA,IAAc,GAAAJ,SAAA,iBAA6BI,UAAA,EAAY;EAAA,IAAAY,EAAA;EAAA,IAAAb,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAW,EAAA,IAAAX,CAAA,QAAAY,EAAA;IAJzCC,EAAA,IAAAhB,SAAA,EAEdK,SAAA,EACAS,EAA6D,EAC7DC,EAAuD,EAAAE,MAAA,CAAAC,OAE/C;IAAAf,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAW,EAAA;IAAAX,CAAA,MAAAY,EAAA;IAAAZ,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EANV,MAAAgB,OAAA,GAAgBH,EAMN,CAAAI,IAAA,CACF;EAER,IAAAC,KAAA,GAAYZ,cAAA;EAAA,KAEPY,KAAA;IAKS,MAAAC,EAAA,GAAAf,GAAA,EAAAgB,QAAA;IAAK,IAAAC,EAAA;IAAA,IAAArB,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAS,MAAA,CAAAa,KAAA,CAAAC,UAAA,IAAAvB,CAAA,QAAAI,GAAA,IAAAJ,CAAA,QAAAU,IAAA,IAAAV,CAAA,QAAAmB,EAAA;MAJTE,EAAA,GAAAzB,cAAA;QAAA4B,gBAAA,EACYrB,UAAA;QAAAsB,IAAA,EACZrB,GAAA;QAAAmB,UAAA,EACMd,MAAA,CAAAa,KAAA,CAAAC,UAAA;QAAAG,QAAA,EACFP,EAAK;QAAAT;MAAA,CAEjB;MAAAV,CAAA,MAAAG,UAAA;MAAAH,CAAA,MAAAS,MAAA,CAAAa,KAAA,CAAAC,UAAA;MAAAvB,CAAA,MAAAI,GAAA;MAAAJ,CAAA,MAAAU,IAAA;MAAAV,CAAA,MAAAmB,EAAA;MAAAnB,CAAA,MAAAqB,EAAA;IAAA;MAAAA,EAAA,GAAArB,CAAA;IAAA;IANAkB,KAAA,CAAAA,CAAA,CAAQA,EAMR;EANA;EAAA,IAAAC,EAAA;EAAA,IAAAnB,CAAA,SAAAgB,OAAA,IAAAhB,CAAA,SAAAO,OAAA,IAAAP,CAAA,SAAAQ,SAAA,IAAAR,CAAA,SAAAkB,KAAA;IAUAC,EAAA,GAAAQ,KAAA,CAAC;MAAAzB,SAAA,EAAkBc,OAAA;MAAAT,OAAA;MAAAW,KAAA;MAAAU,IAAA,EAA8C;MAAAC,QAAA,GAC/DC,IAAA,CAAC;QAAA5B,SAAA,EAAe,GAAAL,SAAA,aAAyB;QAAAgC,QAAA,EAAGrB;MAAA,C,GAC5CsB,IAAA,CAAC;QAAA5B,SAAA,EAAe,GAAAL,SAAA,SAAqB;QAAAgC,QAAA,EAAGX;MAAA,C;;;;;;;;;;SAF1CC,E;CAKJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useConfig","useTranslation","formatDocTitle","baseClass","ThumbnailCard","props","$","alignLabel","className","collection","doc","label","labelFromProps","onClick","thumbnail","config","i18n","t0","t1","t2","filter","Boolean","classes","join","t3","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.scss'\n\nexport type ThumbnailCardProps = {\n  alignLabel?: 'center' | 'left'\n  className?: string\n  collection?: ClientCollectionConfig\n  doc?: { filename?: string } & TypeWithID\n  label?: string\n  onClick?: () => 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    label: labelFromProps,\n    onClick,\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    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 className={classes} onClick={onClick} title={title} type=\"button\">\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;AAaP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAA8CC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACzD;IAAAS,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,GAAA;IAAAC,KAAA,EAAAC,cAAA;IAAAC,OAAA;IAAAC;EAAA,IAQIT,KAAA;EAEJ;IAAAU;EAAA,IAAmBf,SAAA;EAEnB;IAAAgB;EAAA,IAAiBf,cAAA;EAKf,MAAAgB,EAAA,UAAOJ,OAAA,KAAY,cAAc,GAAAV,SAAA,gBAA4B;EAC7D,MAAAe,EAAA,GAAAX,UAAA,IAAc,GAAAJ,SAAA,iBAA6BI,UAAA,EAAY;EAAA,IAAAY,EAAA;EAAA,IAAAb,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAW,EAAA,IAAAX,CAAA,QAAAY,EAAA;IAJzCC,EAAA,IAAAhB,SAAA,EAEdK,SAAA,EACAS,EAA6D,EAC7DC,EAAuD,EAAAE,MAAA,CAAAC,OAE/C;IAAAf,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAW,EAAA;IAAAX,CAAA,MAAAY,EAAA;IAAAZ,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EANV,MAAAgB,OAAA,GAAgBH,EAMN,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAAlB,CAAA,QAAAgB,OAAA,IAAAhB,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAS,MAAA,IAAAT,CAAA,QAAAI,GAAA,IAAAJ,CAAA,QAAAU,IAAA,IAAAV,CAAA,QAAAM,cAAA,IAAAN,CAAA,SAAAO,OAAA,IAAAP,CAAA,SAAAQ,SAAA;IAER,IAAAW,KAAA,GAAYb,cAAA;IAAA,KAEPa,KAAA;MACHA,KAAA,CAAAA,CAAA,CAAQA;QAAAA,iBAAA,CACYhB,UAAA;QAAAiB,IAAA,EACZhB,GAAA;QAAAiB,UAAA,EACMZ,MAAA,CAAAa,KAAA,CAAAD,UAAA;QAAAE,QAAA,EACFnB,GAAA,EAAAoB,QAAA;QAAAd;MAAA,CAEZ;IANA;IAUAQ,EAAA,GAAAO,KAAA,CAAC;MAAAvB,SAAA,EAAkBc,OAAA;MAAAT,OAAA;MAAAY,KAAA;MAAAO,IAAA,EAA8C;MAAAC,QAAA,GAC/DC,IAAA,CAAC;QAAA1B,SAAA,EAAe,GAAAL,SAAA,aAAyB;QAAA8B,QAAA,EAAGnB;MAAA,C,GAC5CoB,IAAA,CAAC;QAAA1B,SAAA,EAAe,GAAAL,SAAA,SAAqB;QAAA8B,QAAA,EAAGR;MAAA,C;;;;;;;;;;;;;;SAF1CD,E;CAKJ","ignoreList":[]}

package/dist/elements/Tooltip/index.js

@@ -1,147 +1,71 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { useIntersect } from '../../hooks/useIntersect.js';
 import './index.scss';
 export const Tooltip = props => {
-  const $ = _c(26);
   const {
-    alignCaret: t0,
+    alignCaret = 'center',
     boundingRef,
     children,
     className,
-    delay: t1,
+    delay = 350,
     position: positionFromProps,
-    show: t2,
-    staticPositioning: t3
+    show: showFromProps = true,
+    staticPositioning = false
   } = props;
-  const alignCaret = t0 === undefined ? "center" : t0;
-  const delay = t1 === undefined ? 350 : t1;
-  const showFromProps = t2 === undefined ? true : t2;
-  const staticPositioning = t3 === undefined ? false : t3;
   const [show, setShow] = React.useState(showFromProps);
-  const [position, setPosition] = React.useState("top");
-  const getTitleAttribute = _temp;
-  const t4 = boundingRef?.current || null;
-  let t5;
-  if ($[0] !== t4) {
-    t5 = {
-      root: t4,
-      rootMargin: "-145px 0px 0px 100px",
-      threshold: 0
-    };
-    $[0] = t4;
-    $[1] = t5;
-  } else {
-    t5 = $[1];
-  }
-  const [ref, intersectionEntry] = useIntersect(t5, staticPositioning);
-  let t6;
-  let t7;
-  if ($[2] !== delay || $[3] !== showFromProps) {
-    t6 = () => {
-      let timerID;
-      if (delay && showFromProps) {
-        timerID = setTimeout(() => {
-          setShow(showFromProps);
-        }, delay);
-      } else {
+  const [position, setPosition] = React.useState('top');
+  const getTitleAttribute = content => typeof content === 'string' ? content : '';
+  const [ref, intersectionEntry] = useIntersect({
+    root: boundingRef?.current || null,
+    rootMargin: '-145px 0px 0px 100px',
+    threshold: 0
+  }, staticPositioning);
+  useEffect(() => {
+    let timerID;
+    // do not use the delay on transition-out
+    if (delay && showFromProps) {
+      timerID = setTimeout(() => {
         setShow(showFromProps);
+      }, delay);
+    } else {
+      setShow(showFromProps);
+    }
+    return () => {
+      if (timerID) {
+        clearTimeout(timerID);
       }
-      return () => {
-        if (timerID) {
-          clearTimeout(timerID);
-        }
-      };
-    };
-    t7 = [showFromProps, delay];
-    $[2] = delay;
-    $[3] = showFromProps;
-    $[4] = t6;
-    $[5] = t7;
-  } else {
-    t6 = $[4];
-    t7 = $[5];
-  }
-  useEffect(t6, t7);
-  let t8;
-  if ($[6] !== intersectionEntry?.isIntersecting || $[7] !== staticPositioning) {
-    t8 = () => {
-      if (staticPositioning) {
-        return;
-      }
-      setPosition(intersectionEntry?.isIntersecting ? "top" : "bottom");
     };
-    $[6] = intersectionEntry?.isIntersecting;
-    $[7] = staticPositioning;
-    $[8] = t8;
-  } else {
-    t8 = $[8];
-  }
-  let t9;
-  if ($[9] !== intersectionEntry || $[10] !== staticPositioning) {
-    t9 = [intersectionEntry, staticPositioning];
-    $[9] = intersectionEntry;
-    $[10] = staticPositioning;
-    $[11] = t9;
-  } else {
-    t9 = $[11];
-  }
-  useEffect(t8, t9);
-  let t10;
-  if ($[12] !== alignCaret || $[13] !== children || $[14] !== className || $[15] !== position || $[16] !== positionFromProps || $[17] !== ref || $[18] !== show || $[19] !== staticPositioning) {
-    const t11 = show && "tooltip--show";
-    const t12 = `tooltip--caret-${alignCaret}`;
-    const t13 = `tooltip--position-${positionFromProps || position}`;
-    let t14;
-    if ($[21] !== className || $[22] !== t11 || $[23] !== t12 || $[24] !== t13) {
-      t14 = ["tooltip", className, t11, t12, t13].filter(Boolean);
-      $[21] = className;
-      $[22] = t11;
-      $[23] = t12;
-      $[24] = t13;
-      $[25] = t14;
-    } else {
-      t14 = $[25];
+  }, [showFromProps, delay]);
+  useEffect(() => {
+    if (staticPositioning) {
+      return;
     }
-    t10 = _jsxs(React.Fragment, {
-      children: [!staticPositioning && _jsx("aside", {
-        "aria-hidden": "true",
-        className: ["tooltip", className, `tooltip--caret-${alignCaret}`, "tooltip--position-top"].filter(Boolean).join(" "),
-        ref,
-        style: {
-          opacity: "0"
-        },
-        children: _jsx("div", {
-          className: "tooltip-content",
-          children
-        })
-      }), _jsx("aside", {
-        className: t14.join(" "),
-        title: getTitleAttribute(children),
-        children: _jsx("div", {
-          className: "tooltip-content",
-          children
-        })
-      })]
-    });
-    $[12] = alignCaret;
-    $[13] = children;
-    $[14] = className;
-    $[15] = position;
-    $[16] = positionFromProps;
-    $[17] = ref;
-    $[18] = show;
-    $[19] = staticPositioning;
-    $[20] = t10;
-  } else {
-    t10 = $[20];
-  }
-  return t10;
+    setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom');
+  }, [intersectionEntry, staticPositioning]);
+  // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [!staticPositioning && /*#__PURE__*/_jsx("aside", {
+      "aria-hidden": "true",
+      className: ['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top'].filter(Boolean).join(' '),
+      ref: ref,
+      style: {
+        opacity: '0'
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        className: "tooltip-content",
+        children: children
+      })
+    }), /*#__PURE__*/_jsx("aside", {
+      className: ['tooltip', className, show && 'tooltip--show', `tooltip--caret-${alignCaret}`, `tooltip--position-${positionFromProps || position}`].filter(Boolean).join(' '),
+      title: getTitleAttribute(children),
+      children: /*#__PURE__*/_jsx("div", {
+        className: "tooltip-content",
+        children: children
+      })
+    })]
+  });
 };
-function _temp(content) {
-  return typeof content === "string" ? content : "";
-}
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useIntersect","Tooltip","props","$","alignCaret","t0","boundingRef","children","className","delay","t1","position","positionFromProps","show","t2","staticPositioning","t3","undefined","showFromProps","setShow","useState","setPosition","getTitleAttribute","_temp","t4","current","t5","root","rootMargin","threshold","ref","intersectionEntry","t6","t7","timerID","clearTimeout","t8","isIntersecting","t9","t10","t11","t12","t13","t14","filter","Boolean","_jsxs","Fragment","_jsx","join","style","opacity","title","content"],"sources":["../../../src/elements/Tooltip/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.scss'\n\nexport type Props = {\n  alignCaret?: 'center' | 'left' | 'right'\n  boundingRef?: React.RefObject<HTMLElement | null>\n  children: React.ReactNode\n  className?: string\n  delay?: number\n  position?: 'bottom' | 'top'\n  show?: boolean\n  /**\n   * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false\n   */\n  staticPositioning?: boolean\n}\n\nexport const Tooltip: React.FC<Props> = (props) => {\n  const {\n    alignCaret = 'center',\n    boundingRef,\n    children,\n    className,\n    delay = 350,\n    position: positionFromProps,\n    show: showFromProps = true,\n    staticPositioning = false,\n  } = props\n\n  const [show, setShow] = React.useState(showFromProps)\n  const [position, setPosition] = React.useState<'bottom' | 'top'>('top')\n\n  const getTitleAttribute = (content) => (typeof content === 'string' ? content : '')\n\n  const [ref, intersectionEntry] = useIntersect(\n    {\n      root: boundingRef?.current || null,\n      rootMargin: '-145px 0px 0px 100px',\n      threshold: 0,\n    },\n    staticPositioning,\n  )\n\n  useEffect(() => {\n    let timerID: NodeJS.Timeout\n\n    // do not use the delay on transition-out\n    if (delay && showFromProps) {\n      timerID = setTimeout(() => {\n        setShow(showFromProps)\n      }, delay)\n    } else {\n      setShow(showFromProps)\n    }\n\n    return () => {\n      if (timerID) {\n        clearTimeout(timerID)\n      }\n    }\n  }, [showFromProps, delay])\n\n  useEffect(() => {\n    if (staticPositioning) {\n      return\n    }\n    setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom')\n  }, [intersectionEntry, staticPositioning])\n\n  // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.\n  return (\n    <React.Fragment>\n      {!staticPositioning && (\n        <aside\n          aria-hidden=\"true\"\n          className={['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top']\n            .filter(Boolean)\n            .join(' ')}\n          ref={ref}\n          style={{ opacity: '0' }}\n        >\n          <div className=\"tooltip-content\">{children}</div>\n        </aside>\n      )}\n      <aside\n        className={[\n          'tooltip',\n          className,\n          show && 'tooltip--show',\n          `tooltip--caret-${alignCaret}`,\n          `tooltip--position-${positionFromProps || position}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        title={getTitleAttribute(children)}\n      >\n        <div className=\"tooltip-content\">{children}</div>\n      </aside>\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useEffect","useIntersect","Tooltip","props","alignCaret","boundingRef","children","className","delay","position","positionFromProps","show","showFromProps","staticPositioning","setShow","useState","setPosition","getTitleAttribute","content","ref","intersectionEntry","root","current","rootMargin","threshold","timerID","setTimeout","clearTimeout","isIntersecting","_jsxs","Fragment","_jsx","filter","Boolean","join","style","opacity","title"],"sources":["../../../src/elements/Tooltip/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.scss'\n\nexport type Props = {\n  alignCaret?: 'center' | 'left' | 'right'\n  boundingRef?: React.RefObject<HTMLElement | null>\n  children: React.ReactNode\n  className?: string\n  delay?: number\n  position?: 'bottom' | 'top'\n  show?: boolean\n  /**\n   * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false\n   */\n  staticPositioning?: boolean\n}\n\nexport const Tooltip: React.FC<Props> = (props) => {\n  const {\n    alignCaret = 'center',\n    boundingRef,\n    children,\n    className,\n    delay = 350,\n    position: positionFromProps,\n    show: showFromProps = true,\n    staticPositioning = false,\n  } = props\n\n  const [show, setShow] = React.useState(showFromProps)\n  const [position, setPosition] = React.useState<'bottom' | 'top'>('top')\n\n  const getTitleAttribute = (content) => (typeof content === 'string' ? content : '')\n\n  const [ref, intersectionEntry] = useIntersect(\n    {\n      root: boundingRef?.current || null,\n      rootMargin: '-145px 0px 0px 100px',\n      threshold: 0,\n    },\n    staticPositioning,\n  )\n\n  useEffect(() => {\n    let timerID: NodeJS.Timeout\n\n    // do not use the delay on transition-out\n    if (delay && showFromProps) {\n      timerID = setTimeout(() => {\n        setShow(showFromProps)\n      }, delay)\n    } else {\n      setShow(showFromProps)\n    }\n\n    return () => {\n      if (timerID) {\n        clearTimeout(timerID)\n      }\n    }\n  }, [showFromProps, delay])\n\n  useEffect(() => {\n    if (staticPositioning) {\n      return\n    }\n    setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom')\n  }, [intersectionEntry, staticPositioning])\n\n  // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.\n  return (\n    <React.Fragment>\n      {!staticPositioning && (\n        <aside\n          aria-hidden=\"true\"\n          className={['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top']\n            .filter(Boolean)\n            .join(' ')}\n          ref={ref}\n          style={{ opacity: '0' }}\n        >\n          <div className=\"tooltip-content\">{children}</div>\n        </aside>\n      )}\n      <aside\n        className={[\n          'tooltip',\n          className,\n          show && 'tooltip--show',\n          `tooltip--caret-${alignCaret}`,\n          `tooltip--position-${positionFromProps || position}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        title={getTitleAttribute(children)}\n      >\n        <div className=\"tooltip-content\">{children}</div>\n      </aside>\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,SAAS,QAAQ;AAEjC,SAASC,YAAY,QAAQ;AAC7B,OAAO;AAgBP,OAAO,MAAMC,OAAA,GAA4BC,KAAA;EACvC,MAAM;IACJC,UAAA,GAAa,QAAQ;IACrBC,WAAW;IACXC,QAAQ;IACRC,SAAS;IACTC,KAAA,GAAQ,GAAG;IACXC,QAAA,EAAUC,iBAAiB;IAC3BC,IAAA,EAAMC,aAAA,GAAgB,IAAI;IAC1BC,iBAAA,GAAoB;EAAK,CAC1B,GAAGV,KAAA;EAEJ,MAAM,CAACQ,IAAA,EAAMG,OAAA,CAAQ,GAAGf,KAAA,CAAMgB,QAAQ,CAACH,aAAA;EACvC,MAAM,CAACH,QAAA,EAAUO,WAAA,CAAY,GAAGjB,KAAA,CAAMgB,QAAQ,CAAmB;EAEjE,MAAME,iBAAA,GAAqBC,OAAA,IAAa,OAAOA,OAAA,KAAY,WAAWA,OAAA,GAAU;EAEhF,MAAM,CAACC,GAAA,EAAKC,iBAAA,CAAkB,GAAGnB,YAAA,CAC/B;IACEoB,IAAA,EAAMhB,WAAA,EAAaiB,OAAA,IAAW;IAC9BC,UAAA,EAAY;IACZC,SAAA,EAAW;EACb,GACAX,iBAAA;EAGFb,SAAA,CAAU;IACR,IAAIyB,OAAA;IAEJ;IACA,IAAIjB,KAAA,IAASI,aAAA,EAAe;MAC1Ba,OAAA,GAAUC,UAAA,CAAW;QACnBZ,OAAA,CAAQF,aAAA;MACV,GAAGJ,KAAA;IACL,OAAO;MACLM,OAAA,CAAQF,aAAA;IACV;IAEA,OAAO;MACL,IAAIa,OAAA,EAAS;QACXE,YAAA,CAAaF,OAAA;MACf;IACF;EACF,GAAG,CAACb,aAAA,EAAeJ,KAAA,CAAM;EAEzBR,SAAA,CAAU;IACR,IAAIa,iBAAA,EAAmB;MACrB;IACF;IACAG,WAAA,CAAYI,iBAAA,EAAmBQ,cAAA,GAAiB,QAAQ;EAC1D,GAAG,CAACR,iBAAA,EAAmBP,iBAAA,CAAkB;EAEzC;EACA,oBACEgB,KAAA,CAAC9B,KAAA,CAAM+B,QAAQ;eACZ,CAACjB,iBAAA,iBACAkB,IAAA,CAAC;MACC,eAAY;MACZxB,SAAA,EAAW,CAAC,WAAWA,SAAA,EAAW,kBAAkBH,UAAA,EAAY,EAAE,wBAAwB,CACvF4B,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;MACRf,GAAA,EAAKA,GAAA;MACLgB,KAAA,EAAO;QAAEC,OAAA,EAAS;MAAI;gBAEtB,aAAAL,IAAA,CAAC;QAAIxB,SAAA,EAAU;kBAAmBD;;qBAGtCyB,IAAA,CAAC;MACCxB,SAAA,EAAW,CACT,WACAA,SAAA,EACAI,IAAA,IAAQ,iBACR,kBAAkBP,UAAA,EAAY,EAC9B,qBAAqBM,iBAAA,IAAqBD,QAAA,EAAU,CACrD,CACEuB,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;MACRG,KAAA,EAAOpB,iBAAA,CAAkBX,QAAA;gBAEzB,aAAAyB,IAAA,CAAC;QAAIxB,SAAA,EAAU;kBAAmBD;;;;AAI1C","ignoreList":[]}