@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.40de3ec

package/dist/elements/IDLabel/index.js

@@ -4,21 +4,21 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { formatAdminURL } from 'payload/shared';
 import React from 'react';
-import './index.scss';
 import { Link } from '../../elements/Link/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { sanitizeID } from '../../utilities/sanitizeID.js';
 import { useDrawerDepth } from '../Drawer/index.js';
+import './index.css';
 const baseClass = 'id-label';
 export const IDLabel = t0 => {
-  const $ = _c(9);
+  const $ = _c(13);
   const {
     id,
     className,
     prefix: t1
   } = t0;
-  const prefix = t1 === undefined ? "ID:" : t1;
+  const prefix = t1 === undefined ? "ID" : t1;
   const {
     config: t2
   } = useConfig();
@@ -33,39 +33,76 @@ export const IDLabel = t0 => {
     globalSlug
   } = useDocumentInfo();
   const drawerDepth = useDrawerDepth();
-  const t4 = `/${collectionSlug ? `collections/${collectionSlug}` : `globals/${globalSlug}`}/${id}`;
+  let t4;
   let t5;
-  if ($[0] !== adminRoute || $[1] !== className || $[2] !== drawerDepth || $[3] !== id || $[4] !== prefix || $[5] !== t4) {
-    const docPath = formatAdminURL({
-      adminRoute,
-      path: t4
-    });
-    let t6;
-    if ($[7] !== className) {
-      t6 = [baseClass, className].filter(Boolean);
-      $[7] = className;
-      $[8] = t6;
-    } else {
-      t6 = $[8];
+  if ($[0] !== adminRoute || $[1] !== className || $[2] !== collectionSlug || $[3] !== drawerDepth || $[4] !== globalSlug || $[5] !== id || $[6] !== prefix) {
+    t5 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const sanitizedID = sanitizeID(id);
+      const shouldRenderLink = drawerDepth > 0 && (collectionSlug || globalSlug);
+      if (shouldRenderLink) {
+        const docPath = formatAdminURL({
+          adminRoute,
+          path: `/${collectionSlug ? `collections/${collectionSlug}` : `globals/${globalSlug}`}/${id}`
+        });
+        let t6;
+        if ($[9] !== className) {
+          t6 = [baseClass, className].filter(Boolean);
+          $[9] = className;
+          $[10] = t6;
+        } else {
+          t6 = $[10];
+        }
+        t5 = _jsxs("div", {
+          className: t6.join(" "),
+          title: id,
+          children: [_jsx("span", {
+            className: `${baseClass}__prefix`,
+            children: prefix
+          }), _jsx(Link, {
+            className: `${baseClass}__link`,
+            href: docPath,
+            children: sanitizedID
+          })]
+        });
+        break bb0;
+      }
+      let t6;
+      if ($[11] !== className) {
+        t6 = [baseClass, className].filter(Boolean);
+        $[11] = className;
+        $[12] = t6;
+      } else {
+        t6 = $[12];
+      }
+      t4 = _jsxs("div", {
+        className: t6.join(" "),
+        title: id,
+        children: [_jsx("span", {
+          className: `${baseClass}__prefix`,
+          children: prefix
+        }), _jsx("span", {
+          className: `${baseClass}__value`,
+          children: sanitizedID
+        })]
+      });
     }
-    t5 = _jsxs("div", {
-      className: t6.join(" "),
-      title: id,
-      children: [prefix, "\xA0", drawerDepth > 1 ? _jsx(Link, {
-        href: docPath,
-        children: sanitizeID(id)
-      }) : sanitizeID(id)]
-    });
     $[0] = adminRoute;
     $[1] = className;
-    $[2] = drawerDepth;
-    $[3] = id;
-    $[4] = prefix;
-    $[5] = t4;
-    $[6] = t5;
+    $[2] = collectionSlug;
+    $[3] = drawerDepth;
+    $[4] = globalSlug;
+    $[5] = id;
+    $[6] = prefix;
+    $[7] = t4;
+    $[8] = t5;
   } else {
-    t5 = $[6];
+    t4 = $[7];
+    t5 = $[8];
   }
-  return t5;
+  if (t5 !== Symbol.for("react.early_return_sentinel")) {
+    return t5;
+  }
+  return t4;
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","formatAdminURL","React","Link","useConfig","useDocumentInfo","sanitizeID","useDrawerDepth","baseClass","IDLabel","t0","$","id","className","prefix","t1","undefined","config","t2","routes","t3","admin","adminRoute","collectionSlug","globalSlug","drawerDepth","t4","t5","docPath","path","t6","filter","Boolean","_jsxs","join","title","children","_jsx","href"],"sources":["../../../src/elements/IDLabel/index.tsx"],"sourcesContent":["'use client'\nimport { formatAdminURL } from 'payload/shared'\nimport React from 'react'\n\nimport './index.scss'\nimport { Link } from '../../elements/Link/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { sanitizeID } from '../../utilities/sanitizeID.js'\nimport { useDrawerDepth } from '../Drawer/index.js'\n\nconst baseClass = 'id-label'\n\nexport const IDLabel: React.FC<{ className?: string; id: string; prefix?: string }> = ({\n  id,\n  className,\n  prefix = 'ID:',\n}) => {\n  const {\n    config: {\n      routes: { admin: adminRoute },\n    },\n  } = useConfig()\n\n  const { collectionSlug, globalSlug } = useDocumentInfo()\n  const drawerDepth = useDrawerDepth()\n\n  const docPath = formatAdminURL({\n    adminRoute,\n    path: `/${collectionSlug ? `collections/${collectionSlug}` : `globals/${globalSlug}`}/${id}`,\n  })\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')} title={id}>\n      {prefix}\n      &nbsp;\n      {drawerDepth > 1 ? <Link href={docPath}>{sanitizeID(id)}</Link> : sanitizeID(id)}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,OAAO;AACP,SAASC,IAAI,QAAQ;AACrB,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,UAAU,QAAQ;AAC3B,SAASC,cAAc,QAAQ;AAE/B,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,OAAA,GAAyEC,EAAA;EAAA,MAAAC,CAAA,GAAAX,EAAA;EAAC;IAAAY,EAAA;IAAAC,SAAA;IAAAC,MAAA,EAAAC;EAAA,IAAAL,EAItF;EADC,MAAAI,MAAA,GAAAC,EAAc,KAAAC,SAAA,GAAL,KAAK,GAAdD,EAAc;EAEd;IAAAE,MAAA,EAAAC;EAAA,IAIId,SAAA;EAHM;IAAAe,MAAA,EAAAC;EAAA,IAAAF,EAEP;EADS;IAAAG,KAAA,EAAAC;EAAA,IAAAF,EAAqB;EAIjC;IAAAG,cAAA;IAAAC;EAAA,IAAuCnB,eAAA;EACvC,MAAAoB,WAAA,GAAoBlB,cAAA;EAIZ,MAAAmB,EAAA,OAAIH,cAAA,GAAiB,eAAeA,cAAA,EAAgB,GAAG,WAAWC,UAAA,EAAY,IAAIZ,EAAA,EAAI;EAAA,IAAAe,EAAA;EAAA,IAAAhB,CAAA,QAAAW,UAAA,IAAAX,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAc,WAAA,IAAAd,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAG,MAAA,IAAAH,CAAA,QAAAe,EAAA;IAF9F,MAAAE,OAAA,GAAgB3B,cAAA;MAAAqB,UAAA;MAAAO,IAAA,EAERH;IAAsF,CAC9F;IAAA,IAAAI,EAAA;IAAA,IAAAnB,CAAA,QAAAE,SAAA;MAGkBiB,EAAA,IAAAtB,SAAA,EAAYK,SAAA,EAAAkB,MAAA,CAAAC,OAAkB;MAAArB,CAAA,MAAAE,SAAA;MAAAF,CAAA,MAAAmB,EAAA;IAAA;MAAAA,EAAA,GAAAnB,CAAA;IAAA;IAA9CgB,EAAA,GAAAM,KAAA,CAAC;MAAApB,SAAA,EAAeiB,EAA8B,CAAAI,IAAA,CAAc;MAAAC,KAAA,EAAavB,EAAA;MAAAwB,QAAA,GACtEtB,MAAA,EAAO,QAEPW,WAAA,IAAc,GAAIY,IAAA,CAAAlC,IAAA;QAAAmC,IAAA,EAAYV,OAAA;QAAAQ,QAAA,EAAU9B,UAAA,CAAWM,EAAA;MAAA,C,IAAcN,UAAA,CAAWM,EAAA;IAAA,C;;;;;;;;;;;SAH/Ee,E;CAMJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","formatAdminURL","React","Link","useConfig","useDocumentInfo","sanitizeID","useDrawerDepth","baseClass","IDLabel","t0","$","id","className","prefix","t1","undefined","config","t2","routes","t3","admin","adminRoute","collectionSlug","globalSlug","drawerDepth","t4","t5","Symbol","for","sanitizedID","shouldRenderLink","docPath","path","t6","filter","Boolean","_jsxs","join","title","children","_jsx","href"],"sources":["../../../src/elements/IDLabel/index.tsx"],"sourcesContent":["'use client'\nimport { formatAdminURL } from 'payload/shared'\nimport React from 'react'\n\nimport { Link } from '../../elements/Link/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { sanitizeID } from '../../utilities/sanitizeID.js'\nimport { useDrawerDepth } from '../Drawer/index.js'\nimport './index.css'\n\nconst baseClass = 'id-label'\n\nexport const IDLabel: React.FC<{ className?: string; id: string; prefix?: string }> = ({\n  id,\n  className,\n  prefix = 'ID',\n}) => {\n  const {\n    config: {\n      routes: { admin: adminRoute },\n    },\n  } = useConfig()\n\n  const { collectionSlug, globalSlug } = useDocumentInfo()\n  const drawerDepth = useDrawerDepth()\n\n  const sanitizedID = sanitizeID(id)\n\n  // Only render as link if we're inside a drawer and have document context\n  const shouldRenderLink = drawerDepth > 0 && (collectionSlug || globalSlug)\n\n  if (shouldRenderLink) {\n    const docPath = formatAdminURL({\n      adminRoute,\n      path: `/${collectionSlug ? `collections/${collectionSlug}` : `globals/${globalSlug}`}/${id}`,\n    })\n\n    return (\n      <div className={[baseClass, className].filter(Boolean).join(' ')} title={id}>\n        <span className={`${baseClass}__prefix`}>{prefix}</span>\n        <Link className={`${baseClass}__link`} href={docPath}>\n          {sanitizedID}\n        </Link>\n      </div>\n    )\n  }\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')} title={id}>\n      <span className={`${baseClass}__prefix`}>{prefix}</span>\n      <span className={`${baseClass}__value`}>{sanitizedID}</span>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,IAAI,QAAQ;AACrB,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,UAAU,QAAQ;AAC3B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,OAAA,GAAyEC,EAAA;EAAA,MAAAC,CAAA,GAAAX,EAAA;EAAC;IAAAY,EAAA;IAAAC,SAAA;IAAAC,MAAA,EAAAC;EAAA,IAAAL,EAItF;EADC,MAAAI,MAAA,GAAAC,EAAa,KAAAC,SAAA,GAAJ,IAAI,GAAbD,EAAa;EAEb;IAAAE,MAAA,EAAAC;EAAA,IAIId,SAAA;EAHM;IAAAe,MAAA,EAAAC;EAAA,IAAAF,EAEP;EADS;IAAAG,KAAA,EAAAC;EAAA,IAAAF,EAAqB;EAIjC;IAAAG,cAAA;IAAAC;EAAA,IAAuCnB,eAAA;EACvC,MAAAoB,WAAA,GAAoBlB,cAAA;EAAA,IAAAmB,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAhB,CAAA,QAAAW,UAAA,IAAAX,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAY,cAAA,IAAAZ,CAAA,QAAAc,WAAA,IAAAd,CAAA,QAAAa,UAAA,IAAAb,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAG,MAAA;IAchBa,EAAA,GAAAC,MAAA,CAAAC,GAAA,8B;;MAZJ,MAAAC,WAAA,GAAoBxB,UAAA,CAAWM,EAAA;MAG/B,MAAAmB,gBAAA,GAAyBN,WAAA,IAAc,KAAMF,cAAA,IAAkBC,UAAS;MAAA,IAEpEO,gBAAA;QACF,MAAAC,OAAA,GAAgB/B,cAAA;UAAAqB,UAAA;UAAAW,IAAA,EAER,IAAIV,cAAA,GAAiB,eAAeA,cAAA,EAAgB,GAAG,WAAWC,UAAA,EAAY,IAAIZ,EAAA;QAAI,CAC9F;QAAA,IAAAsB,EAAA;QAAA,IAAAvB,CAAA,QAAAE,SAAA;UAGkBqB,EAAA,IAAA1B,SAAA,EAAYK,SAAA,EAAAsB,MAAA,CAAAC,OAAkB;UAAAzB,CAAA,MAAAE,SAAA;UAAAF,CAAA,OAAAuB,EAAA;QAAA;UAAAA,EAAA,GAAAvB,CAAA;QAAA;QAA9CgB,EAAA,GAAAU,KAAA,CAAC;UAAAxB,SAAA,EAAeqB,EAA8B,CAAAI,IAAA,CAAc;UAAAC,KAAA,EAAa3B,EAAA;UAAA4B,QAAA,GACvEC,IAAA,CAAC;YAAA5B,SAAA,EAAgB,GAAAL,SAAA,UAAsB;YAAAgC,QAAA,EAAG1B;UAAA,C,GAC1C2B,IAAA,CAAAtC,IAAA;YAAAU,SAAA,EAAiB,GAAAL,SAAA,QAAoB;YAAAkC,IAAA,EAAQV,OAAA;YAAAQ,QAAA,EAC1CV;UAAA,C;;;;;;QAOSI,EAAA,IAAA1B,SAAA,EAAYK,SAAA,EAAAsB,MAAA,CAAAC,OAAkB;QAAAzB,CAAA,OAAAE,SAAA;QAAAF,CAAA,OAAAuB,EAAA;MAAA;QAAAA,EAAA,GAAAvB,CAAA;MAAA;MAA9Ce,EAAA,GAAAW,KAAA,CAAC;QAAAxB,SAAA,EAAeqB,EAA8B,CAAAI,IAAA,CAAc;QAAAC,KAAA,EAAa3B,EAAA;QAAA4B,QAAA,GACvEC,IAAA,CAAC;UAAA5B,SAAA,EAAgB,GAAAL,SAAA,UAAsB;UAAAgC,QAAA,EAAG1B;QAAA,C,GAC1C2B,IAAA,CAAC;UAAA5B,SAAA,EAAgB,GAAAL,SAAA,SAAqB;UAAAgC,QAAA,EAAGV;QAAA,C;;;;;;;;;;;;;;;;;;;SAF3CJ,E;CAKJ","ignoreList":[]}

package/dist/elements/IframeLoader/index.css

@@ -0,0 +1,31 @@
+@layer payload-default {
+  .iframe-loader__container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .iframe-loader__loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    background-color: var(--color-bg);
+  }
+
+  .iframe-loader__iframe {
+    background-color: var(--color-bg);
+    border: 0;
+    width: 100%;
+    height: 100%;
+    transform-origin: top left;
+  }
+
+  .iframe-loader__iframe--is-loading {
+    opacity: 0;
+  }
+}

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

@@ -1,12 +1,9 @@
-import './index.scss';
+import './index.css';
 export type IframeLoaderProps = {
     ref?: React.Ref<HTMLIFrameElement>;
 } & React.IframeHTMLAttributes<HTMLIFrameElement>;
 /**
  * Loads an `iframe` element with the given source behind a loading indicator.
- * Notable behaviors:
- * 1. Only show if the load takes longer than x ms.
- * 2. Once shown, force it to be visible for at least x ms to avoid flickering, even if the iframe loads before then.
  */
 export declare const IframeLoader: React.FC<IframeLoaderProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/IframeLoader/index.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CACnC,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAA;AASjD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyGpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/IframeLoader/index.tsx"],"names":[],"mappings":"AAGA,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CACnC,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAA;AAIjD;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsCpD,CAAA"}

package/dist/elements/IframeLoader/index.js

@@ -1,17 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { ShimmerEffect } from '../ShimmerEffect/index.js';
-import './index.scss';
-const shimmerDelays = {
-  minVisible: 300,
-  show: 1000
-};
+import { useCallback, useEffect, useState } from 'react';
+import { DelayedSpinner } from '../DelayedSpinner/index.js';
+import './index.css';
 const baseClass = 'iframe-loader';
 /**
  * Loads an `iframe` element with the given source behind a loading indicator.
- * Notable behaviors:
- * 1. Only show if the load takes longer than x ms.
- * 2. Once shown, force it to be visible for at least x ms to avoid flickering, even if the iframe loads before then.
  */
 export const IframeLoader = ({
   onLoad: onLoadFromProps,
@@ -20,75 +13,20 @@ export const IframeLoader = ({
   ...rest
 }) => {
   const [isLoading, setIsLoading] = useState(Boolean(src));
-  const [showShimmer, setShowShimmer] = useState(false);
-  const shimmerShownAtRef = useRef(0);
-  const showTimerRef = useRef(null);
-  const hideTimerRef = useRef(null);
-  const clearTimers = useCallback(() => {
-    if (showTimerRef.current) {
-      clearTimeout(showTimerRef.current);
-      showTimerRef.current = null;
-    }
-    if (hideTimerRef.current) {
-      clearTimeout(hideTimerRef.current);
-      hideTimerRef.current = null;
-    }
-  }, []);
   useEffect(() => {
-    clearTimers();
     setIsLoading(Boolean(src));
-    setShowShimmer(false);
-    shimmerShownAtRef.current = 0;
-    if (!src) {
-      return;
-    }
-    showTimerRef.current = setTimeout(() => {
-      setShowShimmer(true);
-      shimmerShownAtRef.current = Date.now();
-      showTimerRef.current = null;
-    }, shimmerDelays.show);
-    return () => {
-      if (showTimerRef.current) {
-        clearTimeout(showTimerRef.current);
-        showTimerRef.current = null;
-      }
-    };
-  }, [clearTimers, src]);
-  useEffect(() => {
-    return () => {
-      clearTimers();
-    };
-  }, [clearTimers]);
+  }, [src]);
   const onLoad = useCallback(e => {
     if (typeof onLoadFromProps === 'function') {
       onLoadFromProps(e);
     }
     setIsLoading(false);
-    if (showTimerRef.current) {
-      clearTimeout(showTimerRef.current);
-      showTimerRef.current = null;
-    }
-    if (!showShimmer) {
-      return;
-    }
-    const elapsed = Date.now() - shimmerShownAtRef.current;
-    const remainingVisible = Math.max(0, shimmerDelays.minVisible - elapsed);
-    if (remainingVisible === 0) {
-      setShowShimmer(false);
-      return;
-    }
-    hideTimerRef.current = setTimeout(() => {
-      setShowShimmer(false);
-      hideTimerRef.current = null;
-    }, remainingVisible);
-  }, [showShimmer, onLoadFromProps]);
+  }, [onLoadFromProps]);
   return /*#__PURE__*/_jsxs("div", {
     className: `${baseClass}__container`,
-    children: [showShimmer && /*#__PURE__*/_jsx(ShimmerEffect, {
-      "aria-live": "polite",
-      height: "100%",
-      role: "status",
-      transparent: true
+    children: [/*#__PURE__*/_jsx(DelayedSpinner, {
+      baseClass: baseClass,
+      isLoading: isLoading
     }), /*#__PURE__*/_jsx("iframe", {
       ...rest,
       className: [`${baseClass}__iframe`, isLoading && `${baseClass}__iframe--is-loading`].filter(Boolean).join(' '),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useCallback","useEffect","useRef","useState","ShimmerEffect","shimmerDelays","minVisible","show","baseClass","IframeLoader","onLoad","onLoadFromProps","src","title","rest","isLoading","setIsLoading","Boolean","showShimmer","setShowShimmer","shimmerShownAtRef","showTimerRef","hideTimerRef","clearTimers","current","clearTimeout","setTimeout","Date","now","e","elapsed","remainingVisible","Math","max","_jsxs","className","_jsx","height","role","transparent","filter","join","sandbox"],"sources":["../../../src/elements/IframeLoader/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport './index.scss'\n\nexport type IframeLoaderProps = {\n  ref?: React.Ref<HTMLIFrameElement>\n} & React.IframeHTMLAttributes<HTMLIFrameElement>\n\nconst shimmerDelays = {\n  minVisible: 300,\n  show: 1000,\n}\n\nconst baseClass = 'iframe-loader'\n\n/**\n * Loads an `iframe` element with the given source behind a loading indicator.\n * Notable behaviors:\n * 1. Only show if the load takes longer than x ms.\n * 2. Once shown, force it to be visible for at least x ms to avoid flickering, even if the iframe loads before then.\n */\nexport const IframeLoader: React.FC<IframeLoaderProps> = ({\n  onLoad: onLoadFromProps,\n  src,\n  title,\n  ...rest\n}) => {\n  const [isLoading, setIsLoading] = useState(Boolean(src))\n  const [showShimmer, setShowShimmer] = useState(false)\n  const shimmerShownAtRef = useRef(0)\n\n  const showTimerRef = useRef<null | ReturnType<typeof setTimeout>>(null)\n\n  const hideTimerRef = useRef<null | ReturnType<typeof setTimeout>>(null)\n\n  const clearTimers = useCallback(() => {\n    if (showTimerRef.current) {\n      clearTimeout(showTimerRef.current)\n      showTimerRef.current = null\n    }\n\n    if (hideTimerRef.current) {\n      clearTimeout(hideTimerRef.current)\n      hideTimerRef.current = null\n    }\n  }, [])\n\n  useEffect(() => {\n    clearTimers()\n    setIsLoading(Boolean(src))\n    setShowShimmer(false)\n    shimmerShownAtRef.current = 0\n\n    if (!src) {\n      return\n    }\n\n    showTimerRef.current = setTimeout(() => {\n      setShowShimmer(true)\n      shimmerShownAtRef.current = Date.now()\n      showTimerRef.current = null\n    }, shimmerDelays.show)\n\n    return () => {\n      if (showTimerRef.current) {\n        clearTimeout(showTimerRef.current)\n        showTimerRef.current = null\n      }\n    }\n  }, [clearTimers, src])\n\n  useEffect(() => {\n    return () => {\n      clearTimers()\n    }\n  }, [clearTimers])\n\n  const onLoad = useCallback<React.IframeHTMLAttributes<HTMLIFrameElement>['onLoad']>(\n    (e) => {\n      if (typeof onLoadFromProps === 'function') {\n        onLoadFromProps(e)\n      }\n\n      setIsLoading(false)\n\n      if (showTimerRef.current) {\n        clearTimeout(showTimerRef.current)\n        showTimerRef.current = null\n      }\n\n      if (!showShimmer) {\n        return\n      }\n\n      const elapsed = Date.now() - shimmerShownAtRef.current\n      const remainingVisible = Math.max(0, shimmerDelays.minVisible - elapsed)\n\n      if (remainingVisible === 0) {\n        setShowShimmer(false)\n        return\n      }\n\n      hideTimerRef.current = setTimeout(() => {\n        setShowShimmer(false)\n        hideTimerRef.current = null\n      }, remainingVisible)\n    },\n    [showShimmer, onLoadFromProps],\n  )\n\n  return (\n    <div className={`${baseClass}__container`}>\n      {showShimmer && <ShimmerEffect aria-live=\"polite\" height=\"100%\" role=\"status\" transparent />}\n      <iframe\n        {...rest}\n        className={[`${baseClass}__iframe`, isLoading && `${baseClass}__iframe--is-loading`]\n          .filter(Boolean)\n          .join(' ')}\n        onLoad={onLoad}\n        // eslint-disable-next-line\n        sandbox=\"allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-downloads\"\n        src={src}\n        title={title}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useCallback","useEffect","useState","DelayedSpinner","baseClass","IframeLoader","onLoad","onLoadFromProps","src","title","rest","isLoading","setIsLoading","Boolean","e","_jsxs","className","_jsx","filter","join","sandbox"],"sources":["../../../src/elements/IframeLoader/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\n\nimport { DelayedSpinner } from '../DelayedSpinner/index.js'\nimport './index.css'\n\nexport type IframeLoaderProps = {\n  ref?: React.Ref<HTMLIFrameElement>\n} & React.IframeHTMLAttributes<HTMLIFrameElement>\n\nconst baseClass = 'iframe-loader'\n\n/**\n * Loads an `iframe` element with the given source behind a loading indicator.\n */\nexport const IframeLoader: React.FC<IframeLoaderProps> = ({\n  onLoad: onLoadFromProps,\n  src,\n  title,\n  ...rest\n}) => {\n  const [isLoading, setIsLoading] = useState(Boolean(src))\n\n  useEffect(() => {\n    setIsLoading(Boolean(src))\n  }, [src])\n\n  const onLoad = useCallback<React.IframeHTMLAttributes<HTMLIFrameElement>['onLoad']>(\n    (e) => {\n      if (typeof onLoadFromProps === 'function') {\n        onLoadFromProps(e)\n      }\n      setIsLoading(false)\n    },\n    [onLoadFromProps],\n  )\n\n  return (\n    <div className={`${baseClass}__container`}>\n      <DelayedSpinner baseClass={baseClass} isLoading={isLoading} />\n      <iframe\n        {...rest}\n        className={[`${baseClass}__iframe`, isLoading && `${baseClass}__iframe--is-loading`]\n          .filter(Boolean)\n          .join(' ')}\n        onLoad={onLoad}\n        // eslint-disable-next-line\n        sandbox=\"allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-downloads\"\n        src={src}\n        title={title}\n      />\n    </div>\n  )\n}\n"],"mappings":";AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ;AAEjD,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAMP,MAAMC,SAAA,GAAY;AAElB;;;AAGA,OAAO,MAAMC,YAAA,GAA4CA,CAAC;EACxDC,MAAA,EAAQC,eAAe;EACvBC,GAAG;EACHC,KAAK;EACL,GAAGC;AAAA,CACJ;EACC,MAAM,CAACC,SAAA,EAAWC,YAAA,CAAa,GAAGV,QAAA,CAASW,OAAA,CAAQL,GAAA;EAEnDP,SAAA,CAAU;IACRW,YAAA,CAAaC,OAAA,CAAQL,GAAA;EACvB,GAAG,CAACA,GAAA,CAAI;EAER,MAAMF,MAAA,GAASN,WAAA,CACZc,CAAA;IACC,IAAI,OAAOP,eAAA,KAAoB,YAAY;MACzCA,eAAA,CAAgBO,CAAA;IAClB;IACAF,YAAA,CAAa;EACf,GACA,CAACL,eAAA,CAAgB;EAGnB,oBACEQ,KAAA,CAAC;IAAIC,SAAA,EAAW,GAAGZ,SAAA,aAAsB;4BACvCa,IAAA,CAACd,cAAA;MAAeC,SAAA,EAAWA,SAAA;MAAWO,SAAA,EAAWA;qBACjDM,IAAA,CAAC;MACE,GAAGP,IAAI;MACRM,SAAA,EAAW,CAAC,GAAGZ,SAAA,UAAmB,EAAEO,SAAA,IAAa,GAAGP,SAAA,sBAA+B,CAAC,CACjFc,MAAM,CAACL,OAAA,EACPM,IAAI,CAAC;MACRb,MAAA,EAAQA,MAAA;MACR;MACAc,OAAA,EAAQ;MACRZ,GAAA,EAAKA,GAAA;MACLC,KAAA,EAAOA;;;AAIf","ignoreList":[]}

package/dist/elements/ItemsDrawer/ItemSearch/index.css

@@ -0,0 +1,56 @@
+@layer payload-default {
+  .item-search {
+    position: sticky;
+    top: 0;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    z-index: 1;
+    padding: var(--spacer-2-5);
+    gap: var(--spacer-2);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+
+    .icon--search {
+      flex-shrink: 0;
+      width: var(--spacer-3);
+      height: var(--spacer-3);
+      color: var(--color-icon-secondary);
+    }
+  }
+
+  .item-search__input {
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    width: 100%;
+    border: var(--stroke-width-small) solid transparent;
+    border-radius: var(--field-border-radius);
+    background: var(--color-bg-secondary);
+    color: var(--color-text);
+    height: var(--spacer-4);
+    padding: 0 var(--spacer-2-5);
+    -webkit-appearance: none;
+
+    &::placeholder {
+      color: var(--color-text-tertiary);
+    }
+
+    &:hover {
+      border-color: var(--color-border);
+    }
+
+    &:focus,
+    &:focus-within {
+      border-color: var(--accessibility-focus-color);
+      outline: 0;
+    }
+
+    &:disabled {
+      background: transparent;
+      border-color: var(--color-border);
+      color: var(--color-text-tertiary);
+    }
+  }
+}

package/dist/elements/ItemsDrawer/ItemSearch/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type Props = {
     readonly placeholder?: string;
     readonly setSearchTerm: (term: string) => void;

package/dist/elements/ItemsDrawer/ItemSearch/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ItemsDrawer/ItemSearch/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgB,MAAM,OAAO,CAAA;AAGpC,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwBtC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ItemsDrawer/ItemSearch/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgB,MAAM,OAAO,CAAA;AAGpC,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwBtC,CAAA"}

package/dist/elements/ItemsDrawer/ItemSearch/index.js

@@ -4,7 +4,7 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useId } from 'react';
 import { SearchIcon } from '../../../icons/Search/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'item-search';
 export const ItemSearch = t0 => {
   const $ = _c(7);
@@ -34,14 +34,14 @@ export const ItemSearch = t0 => {
         htmlFor: inputId,
         id: labelId,
         children: placeholder
-      }), _jsx("input", {
+      }), _jsx(SearchIcon, {}), _jsx("input", {
         "aria-labelledby": labelId,
         className: `${baseClass}__input`,
         id: inputId,
         onChange: handleChange,
         placeholder,
         type: "text"
-      }), _jsx(SearchIcon, {})]
+      })]
     });
     $[2] = handleChange;
     $[3] = inputId;

package/dist/elements/ItemsDrawer/ItemSearch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useId","SearchIcon","baseClass","ItemSearch","t0","$","placeholder","setSearchTerm","inputId","labelId","t1","e","target","value","handleChange","t2","_jsxs","className","children","_jsx","htmlFor","id","onChange","type"],"sources":["../../../../src/elements/ItemsDrawer/ItemSearch/index.tsx"],"sourcesContent":["'use client'\nimport React, { useId } from 'react'\n\nimport { SearchIcon } from '../../../icons/Search/index.js'\nimport './index.scss'\n\nconst baseClass = 'item-search'\n\nexport type Props = {\n  readonly placeholder?: string\n  readonly setSearchTerm: (term: string) => void\n}\n\nexport const ItemSearch: React.FC<Props> = ({ placeholder, setSearchTerm }) => {\n  const inputId = useId()\n  const labelId = `${inputId}-label`\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setSearchTerm(e.target.value)\n  }\n\n  return (\n    <div className={baseClass}>\n      <label className=\"sr-only\" htmlFor={inputId} id={labelId}>\n        {placeholder}\n      </label>\n      <input\n        aria-labelledby={labelId}\n        className={`${baseClass}__input`}\n        id={inputId}\n        onChange={handleChange}\n        placeholder={placeholder}\n        type=\"text\"\n      />\n      <SearchIcon />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,KAAK,QAAQ;AAE7B,SAASC,UAAU,QAAQ;AAC3B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,UAAA,GAA8BC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,WAAA;IAAAC;EAAA,IAAAH,EAA8B;EACxE,MAAAI,OAAA,GAAgBR,KAAA;EAChB,MAAAS,OAAA,GAAgB,GAAGD,OAAA,QAAe;EAAA,IAAAE,EAAA;EAAA,IAAAL,CAAA,QAAAE,aAAA;IAEbG,EAAA,GAAAC,CAAA;MACnBJ,aAAA,CAAcI,CAAA,CAAAC,MAAA,CAAAC,KAAc;IAAA;IAC9BR,CAAA,MAAAE,aAAA;IAAAF,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAFA,MAAAS,YAAA,GAAqBJ,EAErB;EAAA,IAAAK,EAAA;EAAA,IAAAV,CAAA,QAAAS,YAAA,IAAAT,CAAA,QAAAG,OAAA,IAAAH,CAAA,QAAAI,OAAA,IAAAJ,CAAA,QAAAC,WAAA;IAGES,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAf,SAAA;MAAAgB,QAAA,GACCC,IAAA,CAAC;QAAAF,SAAA,EAAgB;QAAAG,OAAA,EAAmBZ,OAAA;QAAAa,EAAA,EAAaZ,OAAA;QAAAS,QAAA,EAC9CZ;MAAA,C,GAEHa,IAAA,CAAC;QAAA,mBACkBV,OAAA;QAAAQ,SAAA,EACN,GAAAf,SAAA,SAAqB;QAAAmB,EAAA,EAC5Bb,OAAA;QAAAc,QAAA,EACMR,YAAA;QAAAR,WAAA;QAAAiB,IAAA,EAEL;MAAA,C,GAEPJ,IAAA,CAAAlB,UAAA,IAAC;IAAA,C;;;;;;;;;SAZHc,E;CAeJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useId","SearchIcon","baseClass","ItemSearch","t0","$","placeholder","setSearchTerm","inputId","labelId","t1","e","target","value","handleChange","t2","_jsxs","className","children","_jsx","htmlFor","id","onChange","type"],"sources":["../../../../src/elements/ItemsDrawer/ItemSearch/index.tsx"],"sourcesContent":["'use client'\nimport React, { useId } from 'react'\n\nimport { SearchIcon } from '../../../icons/Search/index.js'\nimport './index.css'\n\nconst baseClass = 'item-search'\n\nexport type Props = {\n  readonly placeholder?: string\n  readonly setSearchTerm: (term: string) => void\n}\n\nexport const ItemSearch: React.FC<Props> = ({ placeholder, setSearchTerm }) => {\n  const inputId = useId()\n  const labelId = `${inputId}-label`\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setSearchTerm(e.target.value)\n  }\n\n  return (\n    <div className={baseClass}>\n      <label className=\"sr-only\" htmlFor={inputId} id={labelId}>\n        {placeholder}\n      </label>\n      <SearchIcon />\n      <input\n        aria-labelledby={labelId}\n        className={`${baseClass}__input`}\n        id={inputId}\n        onChange={handleChange}\n        placeholder={placeholder}\n        type=\"text\"\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,KAAK,QAAQ;AAE7B,SAASC,UAAU,QAAQ;AAC3B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,UAAA,GAA8BC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,WAAA;IAAAC;EAAA,IAAAH,EAA8B;EACxE,MAAAI,OAAA,GAAgBR,KAAA;EAChB,MAAAS,OAAA,GAAgB,GAAGD,OAAA,QAAe;EAAA,IAAAE,EAAA;EAAA,IAAAL,CAAA,QAAAE,aAAA;IAEbG,EAAA,GAAAC,CAAA;MACnBJ,aAAA,CAAcI,CAAA,CAAAC,MAAA,CAAAC,KAAc;IAAA;IAC9BR,CAAA,MAAAE,aAAA;IAAAF,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAFA,MAAAS,YAAA,GAAqBJ,EAErB;EAAA,IAAAK,EAAA;EAAA,IAAAV,CAAA,QAAAS,YAAA,IAAAT,CAAA,QAAAG,OAAA,IAAAH,CAAA,QAAAI,OAAA,IAAAJ,CAAA,QAAAC,WAAA;IAGES,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAf,SAAA;MAAAgB,QAAA,GACCC,IAAA,CAAC;QAAAF,SAAA,EAAgB;QAAAG,OAAA,EAAmBZ,OAAA;QAAAa,EAAA,EAAaZ,OAAA;QAAAS,QAAA,EAC9CZ;MAAA,C,GAEHa,IAAA,CAAAlB,UAAA,IAAC,GACDkB,IAAA,CAAC;QAAA,mBACkBV,OAAA;QAAAQ,SAAA,EACN,GAAAf,SAAA,SAAqB;QAAAmB,EAAA,EAC5Bb,OAAA;QAAAc,QAAA,EACMR,YAAA;QAAAR,WAAA;QAAAiB,IAAA,EAEL;MAAA,C;;;;;;;;;;SAXTR,E;CAeJ","ignoreList":[]}

package/dist/elements/ItemsDrawer/index.css

@@ -0,0 +1,98 @@
+@layer payload-default {
+  .items-drawer__items-wrapper {
+    padding: var(--spacer-2-5);
+  }
+
+  .items-drawer__items {
+    position: relative;
+    padding: 0;
+    list-style: none;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: var(--spacer-2-5);
+  }
+
+  .items-drawer__default-image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    overflow: hidden;
+
+    img,
+    svg {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .items-drawer__item-groups {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2-5);
+  }
+
+  .items-drawer__item-group {
+    list-style: none;
+  }
+
+  .items-drawer__item-group-label {
+    padding-bottom: var(--spacer-2);
+  }
+
+  .items-drawer__item-group-none {
+    order: 1;
+    padding-top: var(--spacer-2-5);
+    border-top: var(--stroke-width-small) solid var(--color-border);
+
+    &:only-child {
+      padding-top: 0;
+      border-top: 0;
+    }
+  }
+
+  @media (max-width: 1440px) {
+    .items-drawer__items {
+      grid-template-columns: repeat(5, 1fr);
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .items-drawer__items-wrapper {
+      padding-top: var(--spacer-2-5);
+    }
+
+    .items-drawer__items {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    .items-drawer__item-groups {
+      gap: var(--spacer-2-5);
+    }
+
+    .items-drawer__item-group-none {
+      padding-top: var(--spacer-2-5);
+    }
+  }
+
+  @media (max-width: 768px) {
+    .items-drawer__items-wrapper {
+      padding-top: var(--spacer-2-5);
+    }
+
+    .items-drawer__items {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .items-drawer__item-groups {
+      gap: var(--spacer-2-5);
+    }
+
+    .items-drawer__item-group-none {
+      padding-top: var(--spacer-2-5);
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 import type { ClientBlock, ClientWidget, Labels } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type DrawerItem = ClientBlock | ClientWidget;
 export type ItemsDrawerProps = {
     readonly addRowIndex?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ItemsDrawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAKhE,OAAO,KAAuC,MAAM,OAAO,CAAA;AAO3D,OAAO,cAAc,CAAA;AAGrB,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,YAAY,CAAA;AAEnD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,CAAC,UAAU,GAAG,MAAM,CAAC,EAAE,CAAA;IACvC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAChF,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IACnC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AA0ED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmIlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ItemsDrawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAKhE,OAAO,KAAuC,MAAM,OAAO,CAAA;AAO3D,OAAO,aAAa,CAAA;AAGpB,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,YAAY,CAAA;AAEnD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,CAAC,UAAU,GAAG,MAAM,CAAC,EAAE,CAAA;IACvC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAChF,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IACnC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AA0ED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmIlD,CAAA"}

package/dist/elements/ItemsDrawer/index.js

@@ -10,7 +10,7 @@ import { useConfig } from '../../providers/Config/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Drawer } from '../Drawer/index.js';
 import { ThumbnailCard } from '../ThumbnailCard/index.js';
-import './index.scss';
+import './index.css';
 import { ItemSearch } from './ItemSearch/index.js';
 const baseClass = 'items-drawer';
 const getItemLabel = (item, i18n) => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useModal","getTranslation","toWords","React","useEffect","useMemo","useState","DefaultBlockImage","useConfig","useTranslation","Drawer","ThumbnailCard","ItemSearch","baseClass","getItemLabel","item","i18n","labels","singular","toLowerCase","label","slug","getItemSlug","getItemImageInfo","admin","images","thumbnail","imageAltText","undefined","alt","imageURL","url","getItemDisplayLabel","ItemsDrawer","props","addRowIndex","drawerSlug","items","onItemClick","searchPlaceholder","title","searchTerm","setSearchTerm","filteredItems","setFilteredItems","closeModal","isModalOpen","t","config","itemGroups","groups","_none","forEach","group","Object","hasOwn","push","searchTermToUse","matchingItems","reduce","matchedItems","_item","blocksMap","itemLabel","includes","finalTitle","_jsxs","_jsx","placeholder","className","entries","map","groupLabel","groupItems","length","filter","Boolean","join","index","displayLabel","alignLabel","onClick","src"],"sources":["../../../src/elements/ItemsDrawer/index.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\nimport type { ClientBlock, ClientWidget, Labels } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { toWords } from 'payload/shared'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport { DefaultBlockImage } from '../../graphics/DefaultBlockImage/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Drawer } from '../Drawer/index.js'\nimport { ThumbnailCard } from '../ThumbnailCard/index.js'\nimport './index.scss'\nimport { ItemSearch } from './ItemSearch/index.js'\n\nexport type DrawerItem = ClientBlock | ClientWidget\n\nexport type ItemsDrawerProps = {\n  readonly addRowIndex?: number\n  readonly drawerSlug: string\n  readonly items: (DrawerItem | string)[]\n  readonly labels?: Labels\n  readonly onItemClick: (item: DrawerItem, index?: number) => Promise<void> | void\n  readonly searchPlaceholder?: string\n  readonly title?: string\n}\n\nconst baseClass = 'items-drawer'\n\nconst getItemLabel = (item: DrawerItem, i18n: I18nClient): string => {\n  // Handle ClientBlock\n  if ('labels' in item && item.labels?.singular) {\n    if (typeof item.labels.singular === 'string') {\n      return item.labels.singular.toLowerCase()\n    }\n    if (typeof item.labels.singular === 'object') {\n      return getTranslation(item.labels.singular, i18n).toLowerCase()\n    }\n  }\n\n  // Handle ClientWidget with label (already resolved from function on server)\n  if ('label' in item && item.label) {\n    if (typeof item.label === 'string') {\n      return item.label.toLowerCase()\n    }\n    if (typeof item.label === 'object') {\n      return getTranslation(item.label, i18n).toLowerCase()\n    }\n  }\n\n  // Fallback to slug\n  if ('slug' in item) {\n    return toWords(item.slug).toLowerCase()\n  }\n\n  return ''\n}\n\nconst getItemSlug = (item: DrawerItem): string => {\n  return item.slug\n}\n\nconst getItemImageInfo = (item: DrawerItem) => {\n  if ('admin' in item && item?.admin?.images?.thumbnail) {\n    const thumbnail = item.admin?.images.thumbnail\n    return {\n      imageAltText: typeof thumbnail === 'string' ? undefined : thumbnail.alt,\n      imageURL: typeof thumbnail === 'string' ? thumbnail : thumbnail.url,\n    }\n  }\n  if ('imageURL' in item) {\n    return {\n      imageAltText: item.imageAltText,\n      imageURL: item.imageURL,\n    }\n  }\n  return { imageAltText: undefined, imageURL: undefined }\n}\n\nconst getItemDisplayLabel = (item: DrawerItem, i18n: I18nClient): string => {\n  // Handle ClientBlock\n  if ('labels' in item && item.labels?.singular) {\n    return getTranslation(item.labels.singular, i18n)\n  }\n\n  // Handle ClientWidget with label (already resolved from function on server)\n  if ('label' in item && item.label) {\n    if (typeof item.label === 'string') {\n      return item.label\n    }\n    if (typeof item.label === 'object') {\n      return getTranslation(item.label, i18n)\n    }\n  }\n\n  // Fallback to slug - convert to human-readable label\n  return toWords(item.slug)\n}\n\nexport const ItemsDrawer: React.FC<ItemsDrawerProps> = (props) => {\n  const { addRowIndex, drawerSlug, items, labels, onItemClick, searchPlaceholder, title } = props\n\n  const [searchTerm, setSearchTerm] = useState('')\n  const [filteredItems, setFilteredItems] = useState(items)\n  const { closeModal, isModalOpen } = useModal()\n  const { i18n, t } = useTranslation()\n  const { config } = useConfig()\n\n  const itemGroups = useMemo(() => {\n    const groups: Record<string, (DrawerItem | string)[]> = {\n      _none: [],\n    }\n    filteredItems.forEach((item) => {\n      if (typeof item === 'object' && 'admin' in item && item.admin?.group) {\n        const group = item.admin.group\n        const label = typeof group === 'string' ? group : getTranslation(group, i18n)\n\n        if (Object.hasOwn(groups, label)) {\n          groups[label].push(item)\n        } else {\n          groups[label] = [item]\n        }\n      } else {\n        groups._none.push(item)\n      }\n    })\n    return groups\n  }, [filteredItems, i18n])\n\n  useEffect(() => {\n    if (!isModalOpen(drawerSlug)) {\n      setSearchTerm('')\n    }\n  }, [isModalOpen, drawerSlug])\n\n  useEffect(() => {\n    const searchTermToUse = searchTerm.toLowerCase()\n\n    const matchingItems = items?.reduce((matchedItems, _item) => {\n      let item: DrawerItem\n\n      if (typeof _item === 'string') {\n        // Handle string references (for blocks)\n        item = config.blocksMap?.[_item] as DrawerItem\n      } else {\n        item = _item\n      }\n\n      if (item) {\n        const itemLabel = getItemLabel(item, i18n)\n        if (itemLabel.includes(searchTermToUse)) {\n          matchedItems.push(item)\n        }\n      }\n      return matchedItems\n    }, [] as DrawerItem[])\n\n    setFilteredItems(matchingItems || [])\n  }, [searchTerm, items, i18n, config.blocksMap])\n\n  const finalTitle =\n    title ||\n    (labels\n      ? t('fields:addLabel', { label: getTranslation(labels.singular, i18n) })\n      : t('fields:addNew'))\n\n  return (\n    <Drawer slug={drawerSlug} title={finalTitle}>\n      <ItemSearch\n        placeholder={searchPlaceholder || t('fields:searchForBlock')}\n        setSearchTerm={setSearchTerm}\n      />\n      <div className={`${baseClass}__items-wrapper`}>\n        <ul className={`${baseClass}__item-groups`}>\n          {Object.entries(itemGroups).map(([groupLabel, groupItems]) =>\n            !groupItems.length ? null : (\n              <li\n                className={[\n                  `${baseClass}__item-group`,\n                  groupLabel === '_none' && `${baseClass}__item-group-none`,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                key={groupLabel}\n              >\n                {groupLabel !== '_none' && (\n                  <h3 className={`${baseClass}__item-group-label`}>{groupLabel}</h3>\n                )}\n                <ul className={`${baseClass}__items`}>\n                  {groupItems.map((_item, index) => {\n                    const item =\n                      typeof _item === 'string' ? (config.blocksMap?.[_item] as DrawerItem) : _item\n\n                    if (!item) {\n                      return null\n                    }\n\n                    const { imageAltText, imageURL } = getItemImageInfo(item)\n                    const displayLabel = getItemDisplayLabel(item, i18n)\n\n                    return (\n                      <li className={`${baseClass}__item`} key={index}>\n                        <ThumbnailCard\n                          alignLabel=\"center\"\n                          label={displayLabel}\n                          onClick={() => {\n                            void onItemClick(item, addRowIndex)\n                            closeModal(drawerSlug)\n                          }}\n                          thumbnail={\n                            <div className={`${baseClass}__default-image`}>\n                              {imageURL ? (\n                                <img alt={imageAltText} src={imageURL} />\n                              ) : (\n                                <DefaultBlockImage />\n                              )}\n                            </div>\n                          }\n                        />\n                      </li>\n                    )\n                  })}\n                </ul>\n              </li>\n            ),\n          )}\n        </ul>\n      </div>\n    </Drawer>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useModal","getTranslation","toWords","React","useEffect","useMemo","useState","DefaultBlockImage","useConfig","useTranslation","Drawer","ThumbnailCard","ItemSearch","baseClass","getItemLabel","item","i18n","labels","singular","toLowerCase","label","slug","getItemSlug","getItemImageInfo","admin","images","thumbnail","imageAltText","undefined","alt","imageURL","url","getItemDisplayLabel","ItemsDrawer","props","addRowIndex","drawerSlug","items","onItemClick","searchPlaceholder","title","searchTerm","setSearchTerm","filteredItems","setFilteredItems","closeModal","isModalOpen","t","config","itemGroups","groups","_none","forEach","group","Object","hasOwn","push","searchTermToUse","matchingItems","reduce","matchedItems","_item","blocksMap","itemLabel","includes","finalTitle","_jsxs","_jsx","placeholder","className","entries","map","groupLabel","groupItems","length","filter","Boolean","join","index","displayLabel","alignLabel","onClick","src"],"sources":["../../../src/elements/ItemsDrawer/index.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\nimport type { ClientBlock, ClientWidget, Labels } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { toWords } from 'payload/shared'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport { DefaultBlockImage } from '../../graphics/DefaultBlockImage/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Drawer } from '../Drawer/index.js'\nimport { ThumbnailCard } from '../ThumbnailCard/index.js'\nimport './index.css'\nimport { ItemSearch } from './ItemSearch/index.js'\n\nexport type DrawerItem = ClientBlock | ClientWidget\n\nexport type ItemsDrawerProps = {\n  readonly addRowIndex?: number\n  readonly drawerSlug: string\n  readonly items: (DrawerItem | string)[]\n  readonly labels?: Labels\n  readonly onItemClick: (item: DrawerItem, index?: number) => Promise<void> | void\n  readonly searchPlaceholder?: string\n  readonly title?: string\n}\n\nconst baseClass = 'items-drawer'\n\nconst getItemLabel = (item: DrawerItem, i18n: I18nClient): string => {\n  // Handle ClientBlock\n  if ('labels' in item && item.labels?.singular) {\n    if (typeof item.labels.singular === 'string') {\n      return item.labels.singular.toLowerCase()\n    }\n    if (typeof item.labels.singular === 'object') {\n      return getTranslation(item.labels.singular, i18n).toLowerCase()\n    }\n  }\n\n  // Handle ClientWidget with label (already resolved from function on server)\n  if ('label' in item && item.label) {\n    if (typeof item.label === 'string') {\n      return item.label.toLowerCase()\n    }\n    if (typeof item.label === 'object') {\n      return getTranslation(item.label, i18n).toLowerCase()\n    }\n  }\n\n  // Fallback to slug\n  if ('slug' in item) {\n    return toWords(item.slug).toLowerCase()\n  }\n\n  return ''\n}\n\nconst getItemSlug = (item: DrawerItem): string => {\n  return item.slug\n}\n\nconst getItemImageInfo = (item: DrawerItem) => {\n  if ('admin' in item && item?.admin?.images?.thumbnail) {\n    const thumbnail = item.admin?.images.thumbnail\n    return {\n      imageAltText: typeof thumbnail === 'string' ? undefined : thumbnail.alt,\n      imageURL: typeof thumbnail === 'string' ? thumbnail : thumbnail.url,\n    }\n  }\n  if ('imageURL' in item) {\n    return {\n      imageAltText: item.imageAltText,\n      imageURL: item.imageURL,\n    }\n  }\n  return { imageAltText: undefined, imageURL: undefined }\n}\n\nconst getItemDisplayLabel = (item: DrawerItem, i18n: I18nClient): string => {\n  // Handle ClientBlock\n  if ('labels' in item && item.labels?.singular) {\n    return getTranslation(item.labels.singular, i18n)\n  }\n\n  // Handle ClientWidget with label (already resolved from function on server)\n  if ('label' in item && item.label) {\n    if (typeof item.label === 'string') {\n      return item.label\n    }\n    if (typeof item.label === 'object') {\n      return getTranslation(item.label, i18n)\n    }\n  }\n\n  // Fallback to slug - convert to human-readable label\n  return toWords(item.slug)\n}\n\nexport const ItemsDrawer: React.FC<ItemsDrawerProps> = (props) => {\n  const { addRowIndex, drawerSlug, items, labels, onItemClick, searchPlaceholder, title } = props\n\n  const [searchTerm, setSearchTerm] = useState('')\n  const [filteredItems, setFilteredItems] = useState(items)\n  const { closeModal, isModalOpen } = useModal()\n  const { i18n, t } = useTranslation()\n  const { config } = useConfig()\n\n  const itemGroups = useMemo(() => {\n    const groups: Record<string, (DrawerItem | string)[]> = {\n      _none: [],\n    }\n    filteredItems.forEach((item) => {\n      if (typeof item === 'object' && 'admin' in item && item.admin?.group) {\n        const group = item.admin.group\n        const label = typeof group === 'string' ? group : getTranslation(group, i18n)\n\n        if (Object.hasOwn(groups, label)) {\n          groups[label].push(item)\n        } else {\n          groups[label] = [item]\n        }\n      } else {\n        groups._none.push(item)\n      }\n    })\n    return groups\n  }, [filteredItems, i18n])\n\n  useEffect(() => {\n    if (!isModalOpen(drawerSlug)) {\n      setSearchTerm('')\n    }\n  }, [isModalOpen, drawerSlug])\n\n  useEffect(() => {\n    const searchTermToUse = searchTerm.toLowerCase()\n\n    const matchingItems = items?.reduce((matchedItems, _item) => {\n      let item: DrawerItem\n\n      if (typeof _item === 'string') {\n        // Handle string references (for blocks)\n        item = config.blocksMap?.[_item] as DrawerItem\n      } else {\n        item = _item\n      }\n\n      if (item) {\n        const itemLabel = getItemLabel(item, i18n)\n        if (itemLabel.includes(searchTermToUse)) {\n          matchedItems.push(item)\n        }\n      }\n      return matchedItems\n    }, [] as DrawerItem[])\n\n    setFilteredItems(matchingItems || [])\n  }, [searchTerm, items, i18n, config.blocksMap])\n\n  const finalTitle =\n    title ||\n    (labels\n      ? t('fields:addLabel', { label: getTranslation(labels.singular, i18n) })\n      : t('fields:addNew'))\n\n  return (\n    <Drawer slug={drawerSlug} title={finalTitle}>\n      <ItemSearch\n        placeholder={searchPlaceholder || t('fields:searchForBlock')}\n        setSearchTerm={setSearchTerm}\n      />\n      <div className={`${baseClass}__items-wrapper`}>\n        <ul className={`${baseClass}__item-groups`}>\n          {Object.entries(itemGroups).map(([groupLabel, groupItems]) =>\n            !groupItems.length ? null : (\n              <li\n                className={[\n                  `${baseClass}__item-group`,\n                  groupLabel === '_none' && `${baseClass}__item-group-none`,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                key={groupLabel}\n              >\n                {groupLabel !== '_none' && (\n                  <h3 className={`${baseClass}__item-group-label`}>{groupLabel}</h3>\n                )}\n                <ul className={`${baseClass}__items`}>\n                  {groupItems.map((_item, index) => {\n                    const item =\n                      typeof _item === 'string' ? (config.blocksMap?.[_item] as DrawerItem) : _item\n\n                    if (!item) {\n                      return null\n                    }\n\n                    const { imageAltText, imageURL } = getItemImageInfo(item)\n                    const displayLabel = getItemDisplayLabel(item, i18n)\n\n                    return (\n                      <li className={`${baseClass}__item`} key={index}>\n                        <ThumbnailCard\n                          alignLabel=\"center\"\n                          label={displayLabel}\n                          onClick={() => {\n                            void onItemClick(item, addRowIndex)\n                            closeModal(drawerSlug)\n                          }}\n                          thumbnail={\n                            <div className={`${baseClass}__default-image`}>\n                              {imageURL ? (\n                                <img alt={imageAltText} src={imageURL} />\n                              ) : (\n                                <DefaultBlockImage />\n                              )}\n                            </div>\n                          }\n                        />\n                      </li>\n                    )\n                  })}\n                </ul>\n              </li>\n            ),\n          )}\n        </ul>\n      </div>\n    </Drawer>\n  )\n}\n"],"mappings":"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","ignoreList":[]}