@payloadcms/ui 3.0.0-beta.84 → 3.0.0-beta.86

package/dist/elements/ThumbnailCard/index.js

@@ -1,4 +1,6 @@
 '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 { useConfig } from '../../providers/Config/index.js';
@@ -6,42 +8,82 @@ import { useTranslation } from '../../providers/Translation/index.js';
 import { formatDocTitle } from '../../utilities/formatDocTitle.js';
 import './index.scss';
 const baseClass = 'thumbnail-card';
-export const ThumbnailCard = (props)=>{
-    const { alignLabel, className, collection, doc, label: labelFromProps, onClick, thumbnail } = props;
-    const { config } = useConfig();
-    const { i18n } = useTranslation();
-    const classes = [
-        baseClass,
-        className,
-        typeof onClick === 'function' && `${baseClass}--has-on-click`,
-        alignLabel && `${baseClass}--align-label-${alignLabel}`
-    ].filter(Boolean).join(' ');
-    let title = labelFromProps;
-    if (!title) {
-        title = formatDocTitle({
-            collectionConfig: collection,
-            data: doc,
-            dateFormat: config.admin.dateFormat,
-            fallback: doc?.filename,
-            i18n
-        });
+export const ThumbnailCard = props => {
+  const $ = _c(15);
+  const {
+    alignLabel,
+    className,
+    collection,
+    doc,
+    label: labelFromProps,
+    onClick,
+    thumbnail
+  } = props;
+  const {
+    config
+  } = useConfig();
+  const {
+    i18n
+  } = useTranslation();
+  const t0 = typeof onClick === "function" && `${baseClass}--has-on-click`;
+  const t1 = alignLabel && `${baseClass}--align-label-${alignLabel}`;
+  let t2;
+  if ($[0] !== className || $[1] !== t0 || $[2] !== t1) {
+    t2 = [baseClass, className, t0, t1].filter(Boolean);
+    $[0] = className;
+    $[1] = t0;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const classes = t2.join(" ");
+  let title = labelFromProps;
+  if (!title) {
+    const t3 = doc?.filename;
+    let t4;
+    if ($[4] !== collection || $[5] !== doc || $[6] !== config.admin.dateFormat || $[7] !== t3 || $[8] !== i18n) {
+      t4 = formatDocTitle({
+        collectionConfig: collection,
+        data: doc,
+        dateFormat: config.admin.dateFormat,
+        fallback: t3,
+        i18n
+      });
+      $[4] = collection;
+      $[5] = doc;
+      $[6] = config.admin.dateFormat;
+      $[7] = t3;
+      $[8] = i18n;
+      $[9] = t4;
+    } else {
+      t4 = $[9];
     }
-    return /*#__PURE__*/ _jsxs("button", {
-        className: classes,
-        onClick: onClick,
-        title: title,
-        type: "button",
-        children: [
-            /*#__PURE__*/ _jsx("div", {
-                className: `${baseClass}__thumbnail`,
-                children: thumbnail
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: `${baseClass}__label`,
-                children: title
-            })
-        ]
+    title = t4;
+  }
+  let t3;
+  if ($[10] !== thumbnail || $[11] !== title || $[12] !== classes || $[13] !== onClick) {
+    t3 = _jsxs("button", {
+      className: classes,
+      onClick,
+      title,
+      type: "button",
+      children: [_jsx("div", {
+        className: `${baseClass}__thumbnail`,
+        children: thumbnail
+      }), _jsx("div", {
+        className: `${baseClass}__label`,
+        children: title
+      })]
     });
+    $[10] = thumbnail;
+    $[11] = title;
+    $[12] = classes;
+    $[13] = onClick;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  return t3;
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"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.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"],"names":["React","useConfig","useTranslation","formatDocTitle","baseClass","ThumbnailCard","props","alignLabel","className","collection","doc","label","labelFromProps","onClick","thumbnail","config","i18n","classes","filter","Boolean","join","title","collectionConfig","data","dateFormat","admin","fallback","filename","button","type","div"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,oCAAmC;AAClE,OAAO,eAAc;AAarB,MAAMC,YAAY;AAElB,OAAO,MAAMC,gBAA8C,CAACC;IAC1D,MAAM,EACJC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,GAAG,EACHC,OAAOC,cAAc,EACrBC,OAAO,EACPC,SAAS,EACV,GAAGR;IAEJ,MAAM,EAAES,MAAM,EAAE,GAAGd;IAEnB,MAAM,EAAEe,IAAI,EAAE,GAAGd;IAEjB,MAAMe,UAAU;QACdb;QACAI;QACA,OAAOK,YAAY,cAAc,CAAC,EAAET,UAAU,cAAc,CAAC;QAC7DG,cAAc,CAAC,EAAEH,UAAU,cAAc,EAAEG,WAAW,CAAC;KACxD,CACEW,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIC,QAAQT;IAEZ,IAAI,CAACS,OAAO;QACVA,QAAQlB,eAAe;YACrBmB,kBAAkBb;YAClBc,MAAMb;YACNc,YAAYT,OAAOU,KAAK,CAACD,UAAU;YACnCE,UAAUhB,KAAKiB;YACfX;QACF;IACF;IAEA,qBACE,MAACY;QAAOpB,WAAWS;QAASJ,SAASA;QAASQ,OAAOA;QAAOQ,MAAK;;0BAC/D,KAACC;gBAAItB,WAAW,CAAC,EAAEJ,UAAU,WAAW,CAAC;0BAAGU;;0BAC5C,KAACgB;gBAAItB,WAAW,CAAC,EAAEJ,UAAU,OAAO,CAAC;0BAAGiB;;;;AAG9C,EAAC"}
+{"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.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,QAAAI,GAAA,IAAAJ,CAAA,QAAAS,MAAA,CAAAa,KAAA,CAAAC,UAAA,IAAAvB,CAAA,QAAAmB,EAAA,IAAAnB,CAAA,QAAAU,IAAA;MAJTW,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,MAAAI,GAAA;MAAAJ,CAAA,MAAAS,MAAA,CAAAa,KAAA,CAAAC,UAAA;MAAAvB,CAAA,MAAAmB,EAAA;MAAAnB,CAAA,MAAAU,IAAA;MAAAV,CAAA,MAAAqB,EAAA;IAAA;MAAAA,EAAA,GAAArB,CAAA;IAAA;IANAkB,KAAA,CAAAA,CAAA,CAAQA,EAMR;EANA;EAAA,IAAAC,EAAA;EAAA,IAAAnB,CAAA,SAAAQ,SAAA,IAAAR,CAAA,SAAAkB,KAAA,IAAAlB,CAAA,SAAAgB,OAAA,IAAAhB,CAAA,SAAAO,OAAA;IAUAY,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":[]}

package/dist/elements/Tooltip/index.js

@@ -1,78 +1,140 @@
 '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 { alignCaret = 'center', boundingRef, children, className, delay = 350, show: showFromProps = true, staticPositioning = false } = props;
-    const [show, setShow] = React.useState(showFromProps);
-    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);
+export const Tooltip = props => {
+  const $ = _c(23);
+  const {
+    alignCaret: t0,
+    boundingRef,
+    children,
+    className,
+    delay: t1,
+    show: t2,
+    staticPositioning: t3
+  } = 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 {
+        setShow(showFromProps);
+      }
+      return () => {
+        if (timerId) {
+          clearTimeout(timerId);
         }
-        return ()=>{
-            if (timerId) clearTimeout(timerId);
-        };
-    }, [
-        showFromProps,
-        delay
-    ]);
-    useEffect(()=>{
-        if (staticPositioning) return;
-        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-${position}`
-                ].filter(Boolean).join(' '),
-                title: getTitleAttribute(children),
-                children: /*#__PURE__*/ _jsx("div", {
-                    className: "tooltip-content",
-                    children: children
-                })
-            })
-        ]
+      };
+    };
+    t7 = [showFromProps, delay];
+    $[2] = delay;
+    $[3] = showFromProps;
+    $[4] = t6;
+    $[5] = t7;
+  } else {
+    t6 = $[4];
+    t7 = $[5];
+  }
+  useEffect(t6, t7);
+  let t8;
+  let t9;
+  if ($[6] !== staticPositioning || $[7] !== intersectionEntry) {
+    t8 = () => {
+      if (staticPositioning) {
+        return;
+      }
+      setPosition(intersectionEntry?.isIntersecting ? "top" : "bottom");
+    };
+    t9 = [intersectionEntry, staticPositioning];
+    $[6] = staticPositioning;
+    $[7] = intersectionEntry;
+    $[8] = t8;
+    $[9] = t9;
+  } else {
+    t8 = $[8];
+    t9 = $[9];
+  }
+  useEffect(t8, t9);
+  let t10;
+  if ($[10] !== staticPositioning || $[11] !== alignCaret || $[12] !== className || $[13] !== children || $[14] !== ref || $[15] !== show || $[16] !== position) {
+    const t11 = show && "tooltip--show";
+    const t12 = `tooltip--caret-${alignCaret}`;
+    const t13 = `tooltip--position-${position}`;
+    let t14;
+    if ($[18] !== className || $[19] !== t11 || $[20] !== t12 || $[21] !== t13) {
+      t14 = ["tooltip", className, t11, t12, t13].filter(Boolean);
+      $[18] = className;
+      $[19] = t11;
+      $[20] = t12;
+      $[21] = t13;
+      $[22] = t14;
+    } else {
+      t14 = $[22];
+    }
+    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
+        })
+      })]
     });
+    $[10] = staticPositioning;
+    $[11] = alignCaret;
+    $[12] = className;
+    $[13] = children;
+    $[14] = ref;
+    $[15] = show;
+    $[16] = position;
+    $[17] = t10;
+  } else {
+    t10 = $[17];
+  }
+  return t10;
 };
-
+function _temp(content) {
+  return typeof content === "string" ? content : "";
+}
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"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  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    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) clearTimeout(timerId)\n    }\n  }, [showFromProps, delay])\n\n  useEffect(() => {\n    if (staticPositioning) return\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-${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"],"names":["React","useEffect","useIntersect","Tooltip","props","alignCaret","boundingRef","children","className","delay","show","showFromProps","staticPositioning","setShow","useState","position","setPosition","getTitleAttribute","content","ref","intersectionEntry","root","current","rootMargin","threshold","timerId","setTimeout","clearTimeout","isIntersecting","Fragment","aside","aria-hidden","filter","Boolean","join","style","opacity","div","title"],"mappings":"AAAA;;AACA,OAAOA,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,YAAY,QAAQ,8BAA6B;AAC1D,OAAO,eAAc;AAerB,OAAO,MAAMC,UAA2B,CAACC;IACvC,MAAM,EACJC,aAAa,QAAQ,EACrBC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACTC,QAAQ,GAAG,EACXC,MAAMC,gBAAgB,IAAI,EAC1BC,oBAAoB,KAAK,EAC1B,GAAGR;IAEJ,MAAM,CAACM,MAAMG,QAAQ,GAAGb,MAAMc,QAAQ,CAACH;IACvC,MAAM,CAACI,UAAUC,YAAY,GAAGhB,MAAMc,QAAQ,CAAmB;IAEjE,MAAMG,oBAAoB,CAACC,UAAa,OAAOA,YAAY,WAAWA,UAAU;IAEhF,MAAM,CAACC,KAAKC,kBAAkB,GAAGlB,aAC/B;QACEmB,MAAMf,aAAagB,WAAW;QAC9BC,YAAY;QACZC,WAAW;IACb,GACAZ;IAGFX,UAAU;QACR,IAAIwB;QAEJ,yCAAyC;QACzC,IAAIhB,SAASE,eAAe;YAC1Bc,UAAUC,WAAW;gBACnBb,QAAQF;YACV,GAAGF;QACL,OAAO;YACLI,QAAQF;QACV;QAEA,OAAO;YACL,IAAIc,SAASE,aAAaF;QAC5B;IACF,GAAG;QAACd;QAAeF;KAAM;IAEzBR,UAAU;QACR,IAAIW,mBAAmB;QACvBI,YAAYI,mBAAmBQ,iBAAiB,QAAQ;IAC1D,GAAG;QAACR;QAAmBR;KAAkB;IAEzC,mMAAmM;IACnM,qBACE,MAACZ,MAAM6B,QAAQ;;YACZ,CAACjB,mCACA,KAACkB;gBACCC,eAAY;gBACZvB,WAAW;oBAAC;oBAAWA;oBAAW,CAAC,eAAe,EAAEH,WAAW,CAAC;oBAAE;iBAAwB,CACvF2B,MAAM,CAACC,SACPC,IAAI,CAAC;gBACRf,KAAKA;gBACLgB,OAAO;oBAAEC,SAAS;gBAAI;0BAEtB,cAAA,KAACC;oBAAI7B,WAAU;8BAAmBD;;;0BAGtC,KAACuB;gBACCtB,WAAW;oBACT;oBACAA;oBACAE,QAAQ;oBACR,CAAC,eAAe,EAAEL,WAAW,CAAC;oBAC9B,CAAC,kBAAkB,EAAEU,SAAS,CAAC;iBAChC,CACEiB,MAAM,CAACC,SACPC,IAAI,CAAC;gBACRI,OAAOrB,kBAAkBV;0BAEzB,cAAA,KAAC8B;oBAAI7B,WAAU;8BAAmBD;;;;;AAI1C,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useIntersect","Tooltip","props","$","alignCaret","t0","boundingRef","children","className","delay","t1","show","t2","staticPositioning","t3","undefined","showFromProps","setShow","useState","position","setPosition","getTitleAttribute","_temp","t4","current","t5","root","rootMargin","threshold","ref","intersectionEntry","t6","t7","timerId","clearTimeout","t8","t9","isIntersecting","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  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    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) clearTimeout(timerId)\n    }\n  }, [showFromProps, delay])\n\n  useEffect(() => {\n    if (staticPositioning) return\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-${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":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Translation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAEhF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkC9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC,CAAA;IAClE,OAAO,EAAE,qBAAqB,CAAA;IAC9B,CAAC,EAAE,SAAS,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACpC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAQlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Translation/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAEhF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkC9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC,CAAA;IAClE,OAAO,EAAE,qBAAqB,CAAA;IAC9B,CAAC,EAAE,SAAS,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACpC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAQlD,CAAA"}

package/dist/elements/Translation/index.js

@@ -1,36 +1,45 @@
+'use client';
+
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-const RecursiveTranslation = ({ elements, translationString })=>{
-    const regex = /(<[^>]+>.*?<\/[^>]+>)/g;
-    const sections = translationString.split(regex);
-    return /*#__PURE__*/ _jsx("span", {
-        children: sections.map((section, index)=>{
-            if (elements && section.startsWith('<') && section.endsWith('>')) {
-                const elementKey = section[1];
-                const Element = elements[elementKey];
-                if (Element) {
-                    const regex = new RegExp(`<${elementKey}>(.*?)<\/${elementKey}>`, 'g');
-                    const children = section.replace(regex, (_, group)=>group);
-                    return /*#__PURE__*/ _jsx(Element, {
-                        children: /*#__PURE__*/ _jsx(RecursiveTranslation, {
-                            translationString: children
-                        })
-                    }, index);
-                }
-            }
-            return section;
-        })
-    });
+const RecursiveTranslation = ({
+  elements,
+  translationString
+}) => {
+  const regex = /(<[^>]+>.*?<\/[^>]+>)/g;
+  const sections = translationString.split(regex);
+  return /*#__PURE__*/_jsx("span", {
+    children: sections.map((section, index) => {
+      if (elements && section.startsWith('<') && section.endsWith('>')) {
+        const elementKey = section[1];
+        const Element = elements[elementKey];
+        if (Element) {
+          const regex = new RegExp(`<${elementKey}>(.*?)<\/${elementKey}>`, 'g');
+          const children = section.replace(regex, (_, group) => group);
+          return /*#__PURE__*/_jsx(Element, {
+            children: /*#__PURE__*/_jsx(RecursiveTranslation, {
+              translationString: children
+            })
+          }, index);
+        }
+      }
+      return section;
+    })
+  });
 };
-export const Translation = ({ elements, i18nKey, t, variables })=>{
-    const stringWithVariables = t(i18nKey, variables || {});
-    if (!elements) {
-        return stringWithVariables;
-    }
-    return /*#__PURE__*/ _jsx(RecursiveTranslation, {
-        elements: elements,
-        translationString: stringWithVariables
-    });
+export const Translation = ({
+  elements,
+  i18nKey,
+  t,
+  variables
+}) => {
+  const stringWithVariables = t(i18nKey, variables || {});
+  if (!elements) {
+    return stringWithVariables;
+  }
+  return /*#__PURE__*/_jsx(RecursiveTranslation, {
+    elements: elements,
+    translationString: stringWithVariables
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Translation/index.tsx"],"sourcesContent":["import type { ClientTranslationKeys, TFunction } from '@payloadcms/translations'\n\nimport * as React from 'react'\n\nconst RecursiveTranslation: React.FC<{\n  elements?: Record<string, React.FC<{ children: React.ReactNode }>>\n  translationString: string\n}> = ({ elements, translationString }) => {\n  const regex = /(<[^>]+>.*?<\\/[^>]+>)/g\n  const sections = translationString.split(regex)\n\n  return (\n    <span>\n      {sections.map((section, index) => {\n        if (elements && section.startsWith('<') && section.endsWith('>')) {\n          const elementKey = section[1]\n          const Element = elements[elementKey]\n\n          if (Element) {\n            const regex = new RegExp(`<${elementKey}>(.*?)<\\/${elementKey}>`, 'g')\n            const children = section.replace(regex, (_, group) => group)\n\n            return (\n              <Element key={index}>\n                <RecursiveTranslation translationString={children} />\n              </Element>\n            )\n          }\n        }\n\n        return section\n      })}\n    </span>\n  )\n}\n\nexport type TranslationProps = {\n  elements?: Record<string, React.FC<{ children: React.ReactNode }>>\n  i18nKey: ClientTranslationKeys\n  t: TFunction\n  variables?: Record<string, unknown>\n}\n\nexport const Translation: React.FC<TranslationProps> = ({ elements, i18nKey, t, variables }) => {\n  const stringWithVariables = t(i18nKey, variables || {})\n\n  if (!elements) {\n    return stringWithVariables\n  }\n\n  return <RecursiveTranslation elements={elements} translationString={stringWithVariables} />\n}\n"],"names":["React","RecursiveTranslation","elements","translationString","regex","sections","split","span","map","section","index","startsWith","endsWith","elementKey","Element","RegExp","children","replace","_","group","Translation","i18nKey","t","variables","stringWithVariables"],"mappings":";AAEA,YAAYA,WAAW,QAAO;AAE9B,MAAMC,uBAGD,CAAC,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE;IACnC,MAAMC,QAAQ;IACd,MAAMC,WAAWF,kBAAkBG,KAAK,CAACF;IAEzC,qBACE,KAACG;kBACEF,SAASG,GAAG,CAAC,CAACC,SAASC;YACtB,IAAIR,YAAYO,QAAQE,UAAU,CAAC,QAAQF,QAAQG,QAAQ,CAAC,MAAM;gBAChE,MAAMC,aAAaJ,OAAO,CAAC,EAAE;gBAC7B,MAAMK,UAAUZ,QAAQ,CAACW,WAAW;gBAEpC,IAAIC,SAAS;oBACX,MAAMV,QAAQ,IAAIW,OAAO,CAAC,CAAC,EAAEF,WAAW,SAAS,EAAEA,WAAW,CAAC,CAAC,EAAE;oBAClE,MAAMG,WAAWP,QAAQQ,OAAO,CAACb,OAAO,CAACc,GAAGC,QAAUA;oBAEtD,qBACE,KAACL;kCACC,cAAA,KAACb;4BAAqBE,mBAAmBa;;uBAD7BN;gBAIlB;YACF;YAEA,OAAOD;QACT;;AAGN;AASA,OAAO,MAAMW,cAA0C,CAAC,EAAElB,QAAQ,EAAEmB,OAAO,EAAEC,CAAC,EAAEC,SAAS,EAAE;IACzF,MAAMC,sBAAsBF,EAAED,SAASE,aAAa,CAAC;IAErD,IAAI,CAACrB,UAAU;QACb,OAAOsB;IACT;IAEA,qBAAO,KAACvB;QAAqBC,UAAUA;QAAUC,mBAAmBqB;;AACtE,EAAC"}
+{"version":3,"file":"index.js","names":["React","RecursiveTranslation","elements","translationString","regex","sections","split","_jsx","map","section","index","startsWith","endsWith","elementKey","Element","RegExp","children","replace","_","group","Translation","i18nKey","t","variables","stringWithVariables"],"sources":["../../../src/elements/Translation/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientTranslationKeys, TFunction } from '@payloadcms/translations'\n\nimport * as React from 'react'\n\nconst RecursiveTranslation: React.FC<{\n  elements?: Record<string, React.FC<{ children: React.ReactNode }>>\n  translationString: string\n}> = ({ elements, translationString }) => {\n  const regex = /(<[^>]+>.*?<\\/[^>]+>)/g\n  const sections = translationString.split(regex)\n\n  return (\n    <span>\n      {sections.map((section, index) => {\n        if (elements && section.startsWith('<') && section.endsWith('>')) {\n          const elementKey = section[1]\n          const Element = elements[elementKey]\n\n          if (Element) {\n            const regex = new RegExp(`<${elementKey}>(.*?)<\\/${elementKey}>`, 'g')\n            const children = section.replace(regex, (_, group) => group)\n\n            return (\n              <Element key={index}>\n                <RecursiveTranslation translationString={children} />\n              </Element>\n            )\n          }\n        }\n\n        return section\n      })}\n    </span>\n  )\n}\n\nexport type TranslationProps = {\n  elements?: Record<string, React.FC<{ children: React.ReactNode }>>\n  i18nKey: ClientTranslationKeys\n  t: TFunction\n  variables?: Record<string, unknown>\n}\n\nexport const Translation: React.FC<TranslationProps> = ({ elements, i18nKey, t, variables }) => {\n  const stringWithVariables = t(i18nKey, variables || {})\n\n  if (!elements) {\n    return stringWithVariables\n  }\n\n  return <RecursiveTranslation elements={elements} translationString={stringWithVariables} />\n}\n"],"mappings":"AAAA;;;AAGA,YAAYA,KAAA,MAAW;AAEvB,MAAMC,oBAAA,GAGDA,CAAC;EAAEC,QAAQ;EAAEC;AAAiB,CAAE;EACnC,MAAMC,KAAA,GAAQ;EACd,MAAMC,QAAA,GAAWF,iBAAA,CAAkBG,KAAK,CAACF,KAAA;EAEzC,oBACEG,IAAA,CAAC;cACEF,QAAA,CAASG,GAAG,CAAC,CAACC,OAAA,EAASC,KAAA;MACtB,IAAIR,QAAA,IAAYO,OAAA,CAAQE,UAAU,CAAC,QAAQF,OAAA,CAAQG,QAAQ,CAAC,MAAM;QAChE,MAAMC,UAAA,GAAaJ,OAAO,CAAC,EAAE;QAC7B,MAAMK,OAAA,GAAUZ,QAAQ,CAACW,UAAA,CAAW;QAEpC,IAAIC,OAAA,EAAS;UACX,MAAMV,KAAA,GAAQ,IAAIW,MAAA,CAAO,IAAIF,UAAA,YAAsBA,UAAA,GAAa,EAAE;UAClE,MAAMG,QAAA,GAAWP,OAAA,CAAQQ,OAAO,CAACb,KAAA,EAAO,CAACc,CAAA,EAAGC,KAAA,KAAUA,KAAA;UAEtD,oBACEZ,IAAA,CAACO,OAAA;sBACC,aAAAP,IAAA,CAACN,oBAAA;cAAqBE,iBAAA,EAAmBa;;aAD7BN,KAAA;QAIlB;MACF;MAEA,OAAOD,OAAA;IACT;;AAGN;AASA,OAAO,MAAMW,WAAA,GAA0CA,CAAC;EAAElB,QAAQ;EAAEmB,OAAO;EAAEC,CAAC;EAAEC;AAAS,CAAE;EACzF,MAAMC,mBAAA,GAAsBF,CAAA,CAAED,OAAA,EAASE,SAAA,IAAa,CAAC;EAErD,IAAI,CAACrB,QAAA,EAAU;IACb,OAAOsB,mBAAA;EACT;EAEA,oBAAOjB,IAAA,CAACN,oBAAA;IAAqBC,QAAA,EAAUA,QAAA;IAAUC,iBAAA,EAAmBqB;;AACtE","ignoreList":[]}