@payloadcms/ui 3.80.0-internal-debug.7019cc9 → 3.80.0-internal.0311fce

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

@@ -1,51 +1,56 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+
+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';
 const baseClass = 'item-search';
-export const ItemSearch = ({ placeholder, setSearchTerm })=>{
-    const inputId = useId();
-    const labelId = `${inputId}-label`;
-    const handleChange = (e)=>{
-        setSearchTerm(e.target.value);
+export const ItemSearch = t0 => {
+  const $ = _c(7);
+  const {
+    placeholder,
+    setSearchTerm
+  } = t0;
+  const inputId = useId();
+  const labelId = `${inputId}-label`;
+  let t1;
+  if ($[0] !== setSearchTerm) {
+    t1 = e => {
+      setSearchTerm(e.target.value);
     };
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: baseClass,
-        children: [
-            /*#__PURE__*/ _jsxDEV("label", {
-                className: "sr-only",
-                htmlFor: inputId,
-                id: labelId,
-                children: placeholder
-            }, void 0, false, {
-                fileName: "src/elements/ItemsDrawer/ItemSearch/index.tsx",
-                lineNumber: 24,
-                columnNumber: 7
-            }, this),
-            /*#__PURE__*/ _jsxDEV("input", {
-                "aria-labelledby": labelId,
-                className: `${baseClass}__input`,
-                id: inputId,
-                onChange: handleChange,
-                placeholder: placeholder,
-                type: "text"
-            }, void 0, false, {
-                fileName: "src/elements/ItemsDrawer/ItemSearch/index.tsx",
-                lineNumber: 27,
-                columnNumber: 7
-            }, this),
-            /*#__PURE__*/ _jsxDEV(SearchIcon, {}, void 0, false, {
-                fileName: "src/elements/ItemsDrawer/ItemSearch/index.tsx",
-                lineNumber: 35,
-                columnNumber: 7
-            }, this)
-        ]
-    }, void 0, true, {
-        fileName: "src/elements/ItemsDrawer/ItemSearch/index.tsx",
-        lineNumber: 23,
-        columnNumber: 5
-    }, this);
+    $[0] = setSearchTerm;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const handleChange = t1;
+  let t2;
+  if ($[2] !== handleChange || $[3] !== inputId || $[4] !== labelId || $[5] !== placeholder) {
+    t2 = _jsxs("div", {
+      className: baseClass,
+      children: [_jsx("label", {
+        className: "sr-only",
+        htmlFor: inputId,
+        id: labelId,
+        children: placeholder
+      }), _jsx("input", {
+        "aria-labelledby": labelId,
+        className: `${baseClass}__input`,
+        id: inputId,
+        onChange: handleChange,
+        placeholder,
+        type: "text"
+      }), _jsx(SearchIcon, {})]
+    });
+    $[2] = handleChange;
+    $[3] = inputId;
+    $[4] = labelId;
+    $[5] = placeholder;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"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"],"names":["React","useId","SearchIcon","baseClass","ItemSearch","placeholder","setSearchTerm","inputId","labelId","handleChange","e","target","value","div","className","label","htmlFor","id","input","aria-labelledby","onChange","type"],"mappings":"AAAA;;AACA,OAAOA,SAASC,KAAK,QAAQ,QAAO;AAEpC,SAASC,UAAU,QAAQ,iCAAgC;AAC3D,OAAO,eAAc;AAErB,MAAMC,YAAY;AAOlB,OAAO,MAAMC,aAA8B,CAAC,EAAEC,WAAW,EAAEC,aAAa,EAAE;IACxE,MAAMC,UAAUN;IAChB,MAAMO,UAAU,GAAGD,QAAQ,MAAM,CAAC;IAElC,MAAME,eAAe,CAACC;QACpBJ,cAAcI,EAAEC,MAAM,CAACC,KAAK;IAC9B;IAEA,qBACE,QAACC;QAAIC,WAAWX;;0BACd,QAACY;gBAAMD,WAAU;gBAAUE,SAAST;gBAASU,IAAIT;0BAC9CH;;;;;;0BAEH,QAACa;gBACCC,mBAAiBX;gBACjBM,WAAW,GAAGX,UAAU,OAAO,CAAC;gBAChCc,IAAIV;gBACJa,UAAUX;gBACVJ,aAAaA;gBACbgB,MAAK;;;;;;0BAEP,QAACnB;;;;;;;;;;;AAGP,EAAC"}
+{"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":[]}

package/dist/elements/ItemsDrawer/index.js

@@ -1,5 +1,6 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
 import { toWords } from 'payload/shared';
@@ -12,242 +13,190 @@ import { ThumbnailCard } from '../ThumbnailCard/index.js';
 import './index.scss';
 import { ItemSearch } from './ItemSearch/index.js';
 const baseClass = 'items-drawer';
-const getItemLabel = (item, i18n)=>{
-    // Handle ClientBlock
-    if ('labels' in item && item.labels?.singular) {
-        if (typeof item.labels.singular === 'string') {
-            return item.labels.singular.toLowerCase();
-        }
-        if (typeof item.labels.singular === 'object') {
-            return getTranslation(item.labels.singular, i18n).toLowerCase();
-        }
+const getItemLabel = (item, i18n) => {
+  // Handle ClientBlock
+  if ('labels' in item && item.labels?.singular) {
+    if (typeof item.labels.singular === 'string') {
+      return item.labels.singular.toLowerCase();
     }
-    // Handle ClientWidget with label (already resolved from function on server)
-    if ('label' in item && item.label) {
-        if (typeof item.label === 'string') {
-            return item.label.toLowerCase();
-        }
-        if (typeof item.label === 'object') {
-            return getTranslation(item.label, i18n).toLowerCase();
-        }
+    if (typeof item.labels.singular === 'object') {
+      return getTranslation(item.labels.singular, i18n).toLowerCase();
+    }
+  }
+  // Handle ClientWidget with label (already resolved from function on server)
+  if ('label' in item && item.label) {
+    if (typeof item.label === 'string') {
+      return item.label.toLowerCase();
     }
-    // Fallback to slug
-    if ('slug' in item) {
-        return toWords(item.slug).toLowerCase();
+    if (typeof item.label === 'object') {
+      return getTranslation(item.label, i18n).toLowerCase();
     }
-    return '';
+  }
+  // Fallback to slug
+  if ('slug' in item) {
+    return toWords(item.slug).toLowerCase();
+  }
+  return '';
 };
-const getItemSlug = (item)=>{
-    return item.slug;
+const getItemSlug = item => {
+  return item.slug;
 };
-const getItemImageInfo = (item)=>{
-    if ('admin' in item && item?.admin?.images?.thumbnail) {
-        const thumbnail = item.admin?.images.thumbnail;
-        return {
-            imageAltText: typeof thumbnail === 'string' ? undefined : thumbnail.alt,
-            imageURL: typeof thumbnail === 'string' ? thumbnail : thumbnail.url
-        };
-    }
-    if ('imageURL' in item) {
-        return {
-            imageAltText: item.imageAltText,
-            imageURL: item.imageURL
-        };
-    }
+const getItemImageInfo = item => {
+  if ('admin' in item && item?.admin?.images?.thumbnail) {
+    const thumbnail = item.admin?.images.thumbnail;
     return {
-        imageAltText: undefined,
-        imageURL: undefined
+      imageAltText: typeof thumbnail === 'string' ? undefined : thumbnail.alt,
+      imageURL: typeof thumbnail === 'string' ? thumbnail : thumbnail.url
     };
+  }
+  if ('imageURL' in item) {
+    return {
+      imageAltText: item.imageAltText,
+      imageURL: item.imageURL
+    };
+  }
+  return {
+    imageAltText: undefined,
+    imageURL: undefined
+  };
 };
-const getItemDisplayLabel = (item, i18n)=>{
-    // Handle ClientBlock
-    if ('labels' in item && item.labels?.singular) {
-        return getTranslation(item.labels.singular, i18n);
+const getItemDisplayLabel = (item, i18n) => {
+  // Handle ClientBlock
+  if ('labels' in item && item.labels?.singular) {
+    return getTranslation(item.labels.singular, i18n);
+  }
+  // Handle ClientWidget with label (already resolved from function on server)
+  if ('label' in item && item.label) {
+    if (typeof item.label === 'string') {
+      return item.label;
     }
-    // Handle ClientWidget with label (already resolved from function on server)
-    if ('label' in item && item.label) {
-        if (typeof item.label === 'string') {
-            return item.label;
-        }
-        if (typeof item.label === 'object') {
-            return getTranslation(item.label, i18n);
-        }
+    if (typeof item.label === 'object') {
+      return getTranslation(item.label, i18n);
     }
-    // Fallback to slug - convert to human-readable label
-    return toWords(item.slug);
+  }
+  // Fallback to slug - convert to human-readable label
+  return toWords(item.slug);
 };
-export const ItemsDrawer = (props)=>{
-    const { addRowIndex, drawerSlug, items, labels, onItemClick, searchPlaceholder, title } = props;
-    const [searchTerm, setSearchTerm] = useState('');
-    const [filteredItems, setFilteredItems] = useState(items);
-    const { closeModal, isModalOpen } = useModal();
-    const { i18n, t } = useTranslation();
-    const { config } = useConfig();
-    const itemGroups = useMemo(()=>{
-        const groups = {
-            _none: []
-        };
-        filteredItems.forEach((item)=>{
-            if (typeof item === 'object' && 'admin' in item && item.admin?.group) {
-                const group = item.admin.group;
-                const label = typeof group === 'string' ? group : getTranslation(group, i18n);
-                if (Object.hasOwn(groups, label)) {
-                    groups[label].push(item);
-                } else {
-                    groups[label] = [
-                        item
-                    ];
-                }
-            } else {
-                groups._none.push(item);
-            }
-        });
-        return groups;
-    }, [
-        filteredItems,
-        i18n
-    ]);
-    useEffect(()=>{
-        if (!isModalOpen(drawerSlug)) {
-            setSearchTerm('');
+export const ItemsDrawer = props => {
+  const {
+    addRowIndex,
+    drawerSlug,
+    items,
+    labels,
+    onItemClick,
+    searchPlaceholder,
+    title
+  } = props;
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filteredItems, setFilteredItems] = useState(items);
+  const {
+    closeModal,
+    isModalOpen
+  } = useModal();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    config
+  } = useConfig();
+  const itemGroups = useMemo(() => {
+    const groups = {
+      _none: []
+    };
+    filteredItems.forEach(item => {
+      if (typeof item === 'object' && 'admin' in item && item.admin?.group) {
+        const group = item.admin.group;
+        const label = typeof group === 'string' ? group : getTranslation(group, i18n);
+        if (Object.hasOwn(groups, label)) {
+          groups[label].push(item);
+        } else {
+          groups[label] = [item];
+        }
+      } else {
+        groups._none.push(item);
+      }
+    });
+    return groups;
+  }, [filteredItems, i18n]);
+  useEffect(() => {
+    if (!isModalOpen(drawerSlug)) {
+      setSearchTerm('');
+    }
+  }, [isModalOpen, drawerSlug]);
+  useEffect(() => {
+    const searchTermToUse = searchTerm.toLowerCase();
+    const matchingItems = items?.reduce((matchedItems, _item) => {
+      let item_0;
+      if (typeof _item === 'string') {
+        // Handle string references (for blocks)
+        item_0 = config.blocksMap?.[_item];
+      } else {
+        item_0 = _item;
+      }
+      if (item_0) {
+        const itemLabel = getItemLabel(item_0, i18n);
+        if (itemLabel.includes(searchTermToUse)) {
+          matchedItems.push(item_0);
         }
-    }, [
-        isModalOpen,
-        drawerSlug
-    ]);
-    useEffect(()=>{
-        const searchTermToUse = searchTerm.toLowerCase();
-        const matchingItems = items?.reduce((matchedItems, _item)=>{
-            let item;
-            if (typeof _item === 'string') {
-                // Handle string references (for blocks)
-                item = config.blocksMap?.[_item];
-            } else {
-                item = _item;
-            }
-            if (item) {
-                const itemLabel = getItemLabel(item, i18n);
-                if (itemLabel.includes(searchTermToUse)) {
-                    matchedItems.push(item);
-                }
-            }
-            return matchedItems;
-        }, []);
-        setFilteredItems(matchingItems || []);
-    }, [
-        searchTerm,
-        items,
-        i18n,
-        config.blocksMap
-    ]);
-    const finalTitle = title || (labels ? t('fields:addLabel', {
-        label: getTranslation(labels.singular, i18n)
-    }) : t('fields:addNew'));
-    return /*#__PURE__*/ _jsxDEV(Drawer, {
-        slug: drawerSlug,
-        title: finalTitle,
-        children: [
-            /*#__PURE__*/ _jsxDEV(ItemSearch, {
-                placeholder: searchPlaceholder || t('fields:searchForBlock'),
-                setSearchTerm: setSearchTerm
-            }, void 0, false, {
-                fileName: "src/elements/ItemsDrawer/index.tsx",
-                lineNumber: 171,
-                columnNumber: 7
-            }, this),
-            /*#__PURE__*/ _jsxDEV("div", {
-                className: `${baseClass}__items-wrapper`,
-                children: /*#__PURE__*/ _jsxDEV("ul", {
-                    className: `${baseClass}__item-groups`,
-                    children: Object.entries(itemGroups).map(([groupLabel, groupItems])=>!groupItems.length ? null : /*#__PURE__*/ _jsxDEV("li", {
-                            className: [
-                                `${baseClass}__item-group`,
-                                groupLabel === '_none' && `${baseClass}__item-group-none`
-                            ].filter(Boolean).join(' '),
-                            children: [
-                                groupLabel !== '_none' && /*#__PURE__*/ _jsxDEV("h3", {
-                                    className: `${baseClass}__item-group-label`,
-                                    children: groupLabel
-                                }, void 0, false, {
-                                    fileName: "src/elements/ItemsDrawer/index.tsx",
-                                    lineNumber: 189,
-                                    columnNumber: 19
-                                }, this),
-                                /*#__PURE__*/ _jsxDEV("ul", {
-                                    className: `${baseClass}__items`,
-                                    children: groupItems.map((_item, index)=>{
-                                        const item = typeof _item === 'string' ? config.blocksMap?.[_item] : _item;
-                                        if (!item) {
-                                            return null;
-                                        }
-                                        const { imageAltText, imageURL } = getItemImageInfo(item);
-                                        const displayLabel = getItemDisplayLabel(item, i18n);
-                                        return /*#__PURE__*/ _jsxDEV("li", {
-                                            className: `${baseClass}__item`,
-                                            children: /*#__PURE__*/ _jsxDEV(ThumbnailCard, {
-                                                alignLabel: "center",
-                                                label: displayLabel,
-                                                onClick: ()=>{
-                                                    void onItemClick(item, addRowIndex);
-                                                    closeModal(drawerSlug);
-                                                },
-                                                thumbnail: /*#__PURE__*/ _jsxDEV("div", {
-                                                    className: `${baseClass}__default-image`,
-                                                    children: imageURL ? /*#__PURE__*/ _jsxDEV("img", {
-                                                        alt: imageAltText,
-                                                        src: imageURL
-                                                    }, void 0, false, {
-                                                        fileName: "src/elements/ItemsDrawer/index.tsx",
-                                                        lineNumber: 215,
-                                                        columnNumber: 33
-                                                    }, void 0) : /*#__PURE__*/ _jsxDEV(DefaultBlockImage, {}, void 0, false, {
-                                                        fileName: "src/elements/ItemsDrawer/index.tsx",
-                                                        lineNumber: 217,
-                                                        columnNumber: 33
-                                                    }, void 0)
-                                                }, void 0, false, {
-                                                    fileName: "src/elements/ItemsDrawer/index.tsx",
-                                                    lineNumber: 213,
-                                                    columnNumber: 29
-                                                }, void 0)
-                                            }, void 0, false, {
-                                                fileName: "src/elements/ItemsDrawer/index.tsx",
-                                                lineNumber: 205,
-                                                columnNumber: 25
-                                            }, this)
-                                        }, index, false, {
-                                            fileName: "src/elements/ItemsDrawer/index.tsx",
-                                            lineNumber: 204,
-                                            columnNumber: 23
-                                        }, this);
-                                    })
-                                }, void 0, false, {
-                                    fileName: "src/elements/ItemsDrawer/index.tsx",
-                                    lineNumber: 191,
-                                    columnNumber: 17
-                                }, this)
-                            ]
-                        }, groupLabel, true, {
-                            fileName: "src/elements/ItemsDrawer/index.tsx",
-                            lineNumber: 179,
-                            columnNumber: 15
-                        }, this))
-                }, void 0, false, {
-                    fileName: "src/elements/ItemsDrawer/index.tsx",
-                    lineNumber: 176,
-                    columnNumber: 9
-                }, this)
-            }, void 0, false, {
-                fileName: "src/elements/ItemsDrawer/index.tsx",
-                lineNumber: 175,
-                columnNumber: 7
-            }, this)
-        ]
-    }, void 0, true, {
-        fileName: "src/elements/ItemsDrawer/index.tsx",
-        lineNumber: 170,
-        columnNumber: 5
-    }, this);
+      }
+      return matchedItems;
+    }, []);
+    setFilteredItems(matchingItems || []);
+  }, [searchTerm, items, i18n, config.blocksMap]);
+  const finalTitle = title || (labels ? t('fields:addLabel', {
+    label: getTranslation(labels.singular, i18n)
+  }) : t('fields:addNew'));
+  return /*#__PURE__*/_jsxs(Drawer, {
+    slug: drawerSlug,
+    title: finalTitle,
+    children: [/*#__PURE__*/_jsx(ItemSearch, {
+      placeholder: searchPlaceholder || t('fields:searchForBlock'),
+      setSearchTerm: setSearchTerm
+    }), /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__items-wrapper`,
+      children: /*#__PURE__*/_jsx("ul", {
+        className: `${baseClass}__item-groups`,
+        children: Object.entries(itemGroups).map(([groupLabel, groupItems]) => !groupItems.length ? null : /*#__PURE__*/_jsxs("li", {
+          className: [`${baseClass}__item-group`, groupLabel === '_none' && `${baseClass}__item-group-none`].filter(Boolean).join(' '),
+          children: [groupLabel !== '_none' && /*#__PURE__*/_jsx("h3", {
+            className: `${baseClass}__item-group-label`,
+            children: groupLabel
+          }), /*#__PURE__*/_jsx("ul", {
+            className: `${baseClass}__items`,
+            children: groupItems.map((_item_0, index) => {
+              const item_1 = typeof _item_0 === 'string' ? config.blocksMap?.[_item_0] : _item_0;
+              if (!item_1) {
+                return null;
+              }
+              const {
+                imageAltText,
+                imageURL
+              } = getItemImageInfo(item_1);
+              const displayLabel = getItemDisplayLabel(item_1, i18n);
+              return /*#__PURE__*/_jsx("li", {
+                className: `${baseClass}__item`,
+                children: /*#__PURE__*/_jsx(ThumbnailCard, {
+                  alignLabel: "center",
+                  label: displayLabel,
+                  onClick: () => {
+                    void onItemClick(item_1, addRowIndex);
+                    closeModal(drawerSlug);
+                  },
+                  thumbnail: /*#__PURE__*/_jsx("div", {
+                    className: `${baseClass}__default-image`,
+                    children: imageURL ? /*#__PURE__*/_jsx("img", {
+                      alt: imageAltText,
+                      src: imageURL
+                    }) : /*#__PURE__*/_jsx(DefaultBlockImage, {})
+                  })
+                })
+              }, index);
+            })
+          })]
+        }, groupLabel))
+      })
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"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"],"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","placeholder","div","className","ul","entries","map","groupLabel","groupItems","length","li","filter","Boolean","join","h3","index","displayLabel","alignLabel","onClick","img","src"],"mappings":"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"}
+{"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":[]}