@payloadcms/ui 3.0.0-beta.13 → 3.0.0-beta.131

package/dist/fields/Blocks/BlocksDrawer/BlockSearch/index.js

@@ -1,20 +1,47 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Search } from '../../../../graphics/Search/index.js';
+import { SearchIcon } from '../../../../icons/Search/index.js';
 import { useTranslation } from '../../../../providers/Translation/index.js';
+import './index.scss';
 const baseClass = 'block-search';
-export const BlockSearch = (props)=>{
-    const { setSearchTerm } = props;
-    const { t } = useTranslation();
-    const handleChange = (e)=>{
-        setSearchTerm(e.target.value);
+export const BlockSearch = props => {
+  const $ = _c(5);
+  const {
+    setSearchTerm
+  } = props;
+  const {
+    t
+  } = useTranslation();
+  let t0;
+  if ($[0] !== setSearchTerm) {
+    t0 = e => {
+      setSearchTerm(e.target.value);
     };
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, /*#__PURE__*/ React.createElement("input", {
+    $[0] = setSearchTerm;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const handleChange = t0;
+  let t1;
+  if ($[2] !== t || $[3] !== handleChange) {
+    t1 = _jsxs("div", {
+      className: baseClass,
+      children: [_jsx("input", {
         className: `${baseClass}__input`,
         onChange: handleChange,
-        placeholder: t('fields:searchForBlock')
-    }), /*#__PURE__*/ React.createElement(Search, null));
+        placeholder: t("fields:searchForBlock")
+      }), _jsx(SearchIcon, {})]
+    });
+    $[2] = t;
+    $[3] = handleChange;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
 };
-
 //# sourceMappingURL=index.js.map

package/dist/fields/Blocks/BlocksDrawer/BlockSearch/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/fields/Blocks/BlocksDrawer/BlockSearch/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Search } from '../../../../graphics/Search/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'block-search'\n\nexport const BlockSearch: React.FC<{ setSearchTerm: (term: string) => void }> = (props) => {\n  const { setSearchTerm } = props\n  const { t } = useTranslation()\n\n  const handleChange = (e) => {\n    setSearchTerm(e.target.value)\n  }\n\n  return (\n    <div className={baseClass}>\n      <input\n        className={`${baseClass}__input`}\n        onChange={handleChange}\n        placeholder={t('fields:searchForBlock')}\n      />\n      <Search />\n    </div>\n  )\n}\n"],"names":["React","Search","useTranslation","baseClass","BlockSearch","props","setSearchTerm","t","handleChange","e","target","value","div","className","input","onChange","placeholder"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,OAAOA,WAAW,QAAO;AAEzB,SAASC,MAAM,QAAQ,uCAAsC;AAC7D,SAASC,cAAc,QAAQ,6CAA4C;AAG3E,MAAMC,YAAY;AAElB,OAAO,MAAMC,cAAmE,CAACC;IAC/E,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAC1B,MAAM,EAAEE,CAAC,EAAE,GAAGL;IAEd,MAAMM,eAAe,CAACC;QACpBH,cAAcG,EAAEC,MAAM,CAACC,KAAK;IAC9B;IAEA,qBACE,oBAACC;QAAIC,WAAWV;qBACd,oBAACW;QACCD,WAAW,CAAC,EAAEV,UAAU,OAAO,CAAC;QAChCY,UAAUP;QACVQ,aAAaT,EAAE;sBAEjB,oBAACN;AAGP,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","SearchIcon","useTranslation","baseClass","BlockSearch","props","$","setSearchTerm","t","t0","e","target","value","handleChange","t1","_jsxs","className","children","_jsx","onChange","placeholder"],"sources":["../../../../../src/fields/Blocks/BlocksDrawer/BlockSearch/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { SearchIcon } from '../../../../icons/Search/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'block-search'\n\nexport const BlockSearch: React.FC<{ setSearchTerm: (term: string) => void }> = (props) => {\n  const { setSearchTerm } = props\n  const { t } = useTranslation()\n\n  const handleChange = (e) => {\n    setSearchTerm(e.target.value)\n  }\n\n  return (\n    <div className={baseClass}>\n      <input\n        className={`${baseClass}__input`}\n        onChange={handleChange}\n        placeholder={t('fields:searchForBlock')}\n      />\n      <SearchIcon />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,UAAU,QAAQ;AAC3B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAAmEC,KAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAC9E;IAAAQ;EAAA,IAA0BF,KAAA;EAC1B;IAAAG;EAAA,IAAcN,cAAA;EAAA,IAAAO,EAAA;EAAA,IAAAH,CAAA,QAAAC,aAAA;IAEOE,EAAA,GAAAC,CAAA;MACnBH,aAAA,CAAcG,CAAA,CAAAC,MAAA,CAAAC,KAAc;IAAA;IAC9BN,CAAA,MAAAC,aAAA;IAAAD,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAFA,MAAAO,YAAA,GAAqBJ,EAErB;EAAA,IAAAK,EAAA;EAAA,IAAAR,CAAA,QAAAE,CAAA,IAAAF,CAAA,QAAAO,YAAA;IAGEC,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAb,SAAA;MAAAc,QAAA,GACCC,IAAA,CAAC;QAAAF,SAAA,EACY,GAAAb,SAAA,SAAqB;QAAAgB,QAAA,EACtBN,YAAA;QAAAO,WAAA,EACGZ,CAAA,CAAE;MAAA,C,GAEjBU,IAAA,CAAAjB,UAAA,IAAC;IAAA,C;;;;;;;SANHa,E;CASJ","ignoreList":[]}

package/dist/fields/Blocks/BlocksDrawer/BlockSearch/index.scss

@@ -1,37 +1,38 @@
 @import '../../../../scss/styles.scss';
 
-$icon-width: base(1);
+$icon-width: base(2);
 $icon-margin: base(0.25);
 
-.block-search {
-  position: sticky;
-  top: 0;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  z-index: 1;
+@layer payload-default {
+  .block-search {
+    position: sticky;
+    top: 0;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    z-index: 1;
 
-  &__input {
-    @include formInput;
-    padding-right: calc(#{$icon-width} + #{$icon-margin} * 2);
-  }
+    &__input {
+      @include formInput;
+    }
 
-  .search {
-    position: absolute;
-    top: 50%;
-    transform: translate3d(0, -50%, 0);
-    right: base(0.25);
-    width: $icon-width;
-    margin: 0 $icon-margin;
+    .icon--search {
+      position: absolute;
+      top: 50%;
+      transform: translate3d(0, -50%, 0);
+      right: 0;
+      width: $icon-width;
+      margin: 0 $icon-margin;
 
-    .stroke {
-      stroke: var(--theme-elevation-300);
+      .stroke {
+        stroke: var(--theme-elevation-300);
+      }
     }
-  }
 
-  @include mid-break {
-    &__input {
-      margin-bottom: 0;
+    @include mid-break {
+      &__input {
+        margin-bottom: 0;
+      }
     }
   }
 }

package/dist/fields/Blocks/BlocksDrawer/index.d.ts

@@ -1,13 +1,12 @@
-import type { Labels } from 'payload/types';
+import type { ClientBlock, Labels } from 'payload';
 import React from 'react';
-import type { ReducedBlock } from '../../../providers/ComponentMap/buildComponentMap/types.js';
 import './index.scss';
 export type Props = {
-    addRow: (index: number, blockType?: string) => void;
-    addRowIndex: number;
-    blocks: ReducedBlock[];
-    drawerSlug: string;
-    labels: Labels;
+    readonly addRow: (index: number, blockType?: string) => Promise<void> | void;
+    readonly addRowIndex: number;
+    readonly blocks: ClientBlock[];
+    readonly drawerSlug: string;
+    readonly labels: Labels;
 };
 export declare const BlocksDrawer: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/Blocks/BlocksDrawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Blocks/BlocksDrawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAI3C,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4DAA4D,CAAA;AAO9F,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACnD,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,YAAY,EAAE,CAAA;IACtB,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAYD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgExC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Blocks/BlocksDrawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAIlD,OAAO,KAA8B,MAAM,OAAO,CAAA;AAOlD,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAC5E,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CACxB,CAAA;AAcD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiExC,CAAA"}

package/dist/fields/Blocks/BlocksDrawer/index.js

@@ -1,5 +1,8 @@
 'use client';
-import * as facelessUIImport from '@faceless-ui/modal';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useModal } from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
 import React, { useEffect, useState } from 'react';
 import { Drawer } from '../../../elements/Drawer/index.js';
@@ -7,72 +10,132 @@ import { ThumbnailCard } from '../../../elements/ThumbnailCard/index.js';
 import { DefaultBlockImage } from '../../../graphics/DefaultBlockImage/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import { BlockSearch } from './BlockSearch/index.js';
+import './index.scss';
 const baseClass = 'blocks-drawer';
-const getBlockLabel = (block, i18n)=>{
-    if (typeof block.labels.singular === 'string') return block.labels.singular.toLowerCase();
-    if (typeof block.labels.singular === 'object') {
-        return getTranslation(block.labels.singular, i18n).toLowerCase();
-    }
-    return '';
+const getBlockLabel = (block, i18n) => {
+  if (typeof block.labels.singular === 'string') {
+    return block.labels.singular.toLowerCase();
+  }
+  if (typeof block.labels.singular === 'object') {
+    return getTranslation(block.labels.singular, i18n).toLowerCase();
+  }
+  return '';
 };
-export const BlocksDrawer = (props)=>{
-    const { addRow, addRowIndex, blocks, drawerSlug, labels } = props;
-    const { useModal } = facelessUIImport;
-    const [searchTerm, setSearchTerm] = useState('');
-    const [filteredBlocks, setFilteredBlocks] = useState(blocks);
-    const { closeModal, isModalOpen } = useModal();
-    const { i18n, t } = useTranslation();
-    useEffect(()=>{
-        if (!isModalOpen) {
-            setSearchTerm('');
+export const BlocksDrawer = props => {
+  const $ = _c(17);
+  const {
+    addRow,
+    addRowIndex,
+    blocks,
+    drawerSlug,
+    labels
+  } = props;
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredBlocks, setFilteredBlocks] = useState(blocks);
+  const {
+    closeModal,
+    isModalOpen
+  } = useModal();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  let t0;
+  let t1;
+  if ($[0] !== isModalOpen) {
+    t0 = () => {
+      if (!isModalOpen) {
+        setSearchTerm("");
+      }
+    };
+    t1 = [isModalOpen];
+    $[0] = isModalOpen;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  useEffect(t0, t1);
+  let t2;
+  let t3;
+  if ($[3] !== searchTerm || $[4] !== blocks || $[5] !== i18n) {
+    t2 = () => {
+      const searchTermToUse = searchTerm.toLowerCase();
+      const matchingBlocks = blocks?.reduce((matchedBlocks, block) => {
+        const blockLabel = getBlockLabel(block, i18n);
+        if (blockLabel.includes(searchTermToUse)) {
+          matchedBlocks.push(block);
         }
-    }, [
-        isModalOpen
-    ]);
-    useEffect(()=>{
-        const searchTermToUse = searchTerm.toLowerCase();
-        const matchingBlocks = blocks?.reduce((matchedBlocks, block)=>{
-            const blockLabel = getBlockLabel(block, i18n);
-            if (blockLabel.includes(searchTermToUse)) matchedBlocks.push(block);
-            return matchedBlocks;
-        }, []);
-        setFilteredBlocks(matchingBlocks);
-    }, [
-        searchTerm,
-        blocks,
-        i18n
-    ]);
-    return /*#__PURE__*/ React.createElement(Drawer, {
-        slug: drawerSlug,
-        title: t('fields:addLabel', {
-            label: getTranslation(labels.singular, i18n)
+        return matchedBlocks;
+      }, []);
+      setFilteredBlocks(matchingBlocks);
+    };
+    t3 = [searchTerm, blocks, i18n];
+    $[3] = searchTerm;
+    $[4] = blocks;
+    $[5] = i18n;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t2 = $[6];
+    t3 = $[7];
+  }
+  useEffect(t2, t3);
+  let t4;
+  if ($[8] !== labels.singular || $[9] !== i18n || $[10] !== t || $[11] !== filteredBlocks || $[12] !== addRow || $[13] !== addRowIndex || $[14] !== closeModal || $[15] !== drawerSlug) {
+    t4 = _jsxs(Drawer, {
+      slug: drawerSlug,
+      title: t("fields:addLabel", {
+        label: getTranslation(labels.singular, i18n)
+      }),
+      children: [_jsx(BlockSearch, {
+        setSearchTerm
+      }), _jsx("div", {
+        className: `${baseClass}__blocks-wrapper`,
+        children: _jsx("ul", {
+          className: `${baseClass}__blocks`,
+          children: filteredBlocks?.map((block_0, index) => {
+            const {
+              slug,
+              imageAltText,
+              imageURL,
+              labels: blockLabels
+            } = block_0;
+            return _jsx("li", {
+              className: `${baseClass}__block`,
+              children: _jsx(ThumbnailCard, {
+                alignLabel: "center",
+                label: getTranslation(blockLabels?.singular, i18n),
+                onClick: () => {
+                  addRow(addRowIndex, slug);
+                  closeModal(drawerSlug);
+                },
+                thumbnail: imageURL ? _jsx("img", {
+                  alt: imageAltText,
+                  src: imageURL
+                }) : _jsx("div", {
+                  className: `${baseClass}__default-image`,
+                  children: _jsx(DefaultBlockImage, {})
+                })
+              })
+            }, index);
+          })
         })
-    }, /*#__PURE__*/ React.createElement(BlockSearch, {
-        setSearchTerm: setSearchTerm
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__blocks-wrapper`
-    }, /*#__PURE__*/ React.createElement("ul", {
-        className: `${baseClass}__blocks`
-    }, filteredBlocks?.map((block, index)=>{
-        const { slug, imageAltText, imageURL, labels: blockLabels } = block;
-        return /*#__PURE__*/ React.createElement("li", {
-            className: `${baseClass}__block`,
-            key: index
-        }, /*#__PURE__*/ React.createElement(ThumbnailCard, {
-            alignLabel: "center",
-            label: getTranslation(blockLabels?.singular, i18n),
-            onClick: ()=>{
-                addRow(addRowIndex, slug);
-                closeModal(drawerSlug);
-            },
-            thumbnail: imageURL ? /*#__PURE__*/ React.createElement("img", {
-                alt: imageAltText,
-                src: imageURL
-            }) : /*#__PURE__*/ React.createElement("div", {
-                className: `${baseClass}__default-image`
-            }, /*#__PURE__*/ React.createElement(DefaultBlockImage, null))
-        }));
-    }))));
+      })]
+    });
+    $[8] = labels.singular;
+    $[9] = i18n;
+    $[10] = t;
+    $[11] = filteredBlocks;
+    $[12] = addRow;
+    $[13] = addRowIndex;
+    $[14] = closeModal;
+    $[15] = drawerSlug;
+    $[16] = t4;
+  } else {
+    t4 = $[16];
+  }
+  return t4;
 };
-
 //# sourceMappingURL=index.js.map

package/dist/fields/Blocks/BlocksDrawer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/fields/Blocks/BlocksDrawer/index.tsx"],"sourcesContent":["'use client'\nimport type { I18n } from '@payloadcms/translations'\nimport type { Labels } from 'payload/types'\n\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useState } from 'react'\n\nimport type { ReducedBlock } from '../../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { Drawer } from '../../../elements/Drawer/index.js'\nimport { ThumbnailCard } from '../../../elements/ThumbnailCard/index.js'\nimport { DefaultBlockImage } from '../../../graphics/DefaultBlockImage/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { BlockSearch } from './BlockSearch/index.js'\nimport './index.scss'\n\nexport type Props = {\n  addRow: (index: number, blockType?: string) => void\n  addRowIndex: number\n  blocks: ReducedBlock[]\n  drawerSlug: string\n  labels: Labels\n}\n\nconst baseClass = 'blocks-drawer'\n\nconst getBlockLabel = (block: ReducedBlock, i18n: I18n) => {\n  if (typeof block.labels.singular === 'string') return block.labels.singular.toLowerCase()\n  if (typeof block.labels.singular === 'object') {\n    return getTranslation(block.labels.singular, i18n).toLowerCase()\n  }\n  return ''\n}\n\nexport const BlocksDrawer: React.FC<Props> = (props) => {\n  const { addRow, addRowIndex, blocks, drawerSlug, labels } = props\n  const { useModal } = facelessUIImport\n\n  const [searchTerm, setSearchTerm] = useState('')\n  const [filteredBlocks, setFilteredBlocks] = useState(blocks)\n  const { closeModal, isModalOpen } = useModal()\n  const { i18n, t } = useTranslation()\n\n  useEffect(() => {\n    if (!isModalOpen) {\n      setSearchTerm('')\n    }\n  }, [isModalOpen])\n\n  useEffect(() => {\n    const searchTermToUse = searchTerm.toLowerCase()\n\n    const matchingBlocks = blocks?.reduce((matchedBlocks, block) => {\n      const blockLabel = getBlockLabel(block, i18n)\n      if (blockLabel.includes(searchTermToUse)) matchedBlocks.push(block)\n      return matchedBlocks\n    }, [])\n\n    setFilteredBlocks(matchingBlocks)\n  }, [searchTerm, blocks, i18n])\n\n  return (\n    <Drawer\n      slug={drawerSlug}\n      title={t('fields:addLabel', { label: getTranslation(labels.singular, i18n) })}\n    >\n      <BlockSearch setSearchTerm={setSearchTerm} />\n      <div className={`${baseClass}__blocks-wrapper`}>\n        <ul className={`${baseClass}__blocks`}>\n          {filteredBlocks?.map((block, index) => {\n            const { slug, imageAltText, imageURL, labels: blockLabels } = block\n\n            return (\n              <li className={`${baseClass}__block`} key={index}>\n                <ThumbnailCard\n                  alignLabel=\"center\"\n                  label={getTranslation(blockLabels?.singular, i18n)}\n                  onClick={() => {\n                    addRow(addRowIndex, slug)\n                    closeModal(drawerSlug)\n                  }}\n                  thumbnail={\n                    imageURL ? (\n                      <img alt={imageAltText} src={imageURL} />\n                    ) : (\n                      <div className={`${baseClass}__default-image`}>\n                        <DefaultBlockImage />\n                      </div>\n                    )\n                  }\n                />\n              </li>\n            )\n          })}\n        </ul>\n      </div>\n    </Drawer>\n  )\n}\n"],"names":["facelessUIImport","getTranslation","React","useEffect","useState","Drawer","ThumbnailCard","DefaultBlockImage","useTranslation","BlockSearch","baseClass","getBlockLabel","block","i18n","labels","singular","toLowerCase","BlocksDrawer","props","addRow","addRowIndex","blocks","drawerSlug","useModal","searchTerm","setSearchTerm","filteredBlocks","setFilteredBlocks","closeModal","isModalOpen","t","searchTermToUse","matchingBlocks","reduce","matchedBlocks","blockLabel","includes","push","slug","title","label","div","className","ul","map","index","imageAltText","imageURL","blockLabels","li","key","alignLabel","onClick","thumbnail","img","alt","src"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAIA,YAAYA,sBAAsB,qBAAoB;AACtD,SAASC,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAIlD,SAASC,MAAM,QAAQ,oCAAmC;AAC1D,SAASC,aAAa,QAAQ,2CAA0C;AACxE,SAASC,iBAAiB,QAAQ,+CAA8C;AAChF,SAASC,cAAc,QAAQ,0CAAyC;AACxE,SAASC,WAAW,QAAQ,yBAAwB;AAWpD,MAAMC,YAAY;AAElB,MAAMC,gBAAgB,CAACC,OAAqBC;IAC1C,IAAI,OAAOD,MAAME,MAAM,CAACC,QAAQ,KAAK,UAAU,OAAOH,MAAME,MAAM,CAACC,QAAQ,CAACC,WAAW;IACvF,IAAI,OAAOJ,MAAME,MAAM,CAACC,QAAQ,KAAK,UAAU;QAC7C,OAAOd,eAAeW,MAAME,MAAM,CAACC,QAAQ,EAAEF,MAAMG,WAAW;IAChE;IACA,OAAO;AACT;AAEA,OAAO,MAAMC,eAAgC,CAACC;IAC5C,MAAM,EAAEC,MAAM,EAAEC,WAAW,EAAEC,MAAM,EAAEC,UAAU,EAAER,MAAM,EAAE,GAAGI;IAC5D,MAAM,EAAEK,QAAQ,EAAE,GAAGvB;IAErB,MAAM,CAACwB,YAAYC,cAAc,GAAGrB,SAAS;IAC7C,MAAM,CAACsB,gBAAgBC,kBAAkB,GAAGvB,SAASiB;IACrD,MAAM,EAAEO,UAAU,EAAEC,WAAW,EAAE,GAAGN;IACpC,MAAM,EAAEV,IAAI,EAAEiB,CAAC,EAAE,GAAGtB;IAEpBL,UAAU;QACR,IAAI,CAAC0B,aAAa;YAChBJ,cAAc;QAChB;IACF,GAAG;QAACI;KAAY;IAEhB1B,UAAU;QACR,MAAM4B,kBAAkBP,WAAWR,WAAW;QAE9C,MAAMgB,iBAAiBX,QAAQY,OAAO,CAACC,eAAetB;YACpD,MAAMuB,aAAaxB,cAAcC,OAAOC;YACxC,IAAIsB,WAAWC,QAAQ,CAACL,kBAAkBG,cAAcG,IAAI,CAACzB;YAC7D,OAAOsB;QACT,GAAG,EAAE;QAELP,kBAAkBK;IACpB,GAAG;QAACR;QAAYH;QAAQR;KAAK;IAE7B,qBACE,oBAACR;QACCiC,MAAMhB;QACNiB,OAAOT,EAAE,mBAAmB;YAAEU,OAAOvC,eAAea,OAAOC,QAAQ,EAAEF;QAAM;qBAE3E,oBAACJ;QAAYgB,eAAeA;sBAC5B,oBAACgB;QAAIC,WAAW,CAAC,EAAEhC,UAAU,gBAAgB,CAAC;qBAC5C,oBAACiC;QAAGD,WAAW,CAAC,EAAEhC,UAAU,QAAQ,CAAC;OAClCgB,gBAAgBkB,IAAI,CAAChC,OAAOiC;QAC3B,MAAM,EAAEP,IAAI,EAAEQ,YAAY,EAAEC,QAAQ,EAAEjC,QAAQkC,WAAW,EAAE,GAAGpC;QAE9D,qBACE,oBAACqC;YAAGP,WAAW,CAAC,EAAEhC,UAAU,OAAO,CAAC;YAAEwC,KAAKL;yBACzC,oBAACvC;YACC6C,YAAW;YACXX,OAAOvC,eAAe+C,aAAajC,UAAUF;YAC7CuC,SAAS;gBACPjC,OAAOC,aAAakB;gBACpBV,WAAWN;YACb;YACA+B,WACEN,yBACE,oBAACO;gBAAIC,KAAKT;gBAAcU,KAAKT;+BAE7B,oBAACN;gBAAIC,WAAW,CAAC,EAAEhC,UAAU,eAAe,CAAC;6BAC3C,oBAACH;;IAOf;AAKV,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","useModal","getTranslation","React","useEffect","useState","Drawer","ThumbnailCard","DefaultBlockImage","useTranslation","BlockSearch","baseClass","getBlockLabel","block","i18n","labels","singular","toLowerCase","BlocksDrawer","props","$","addRow","addRowIndex","blocks","drawerSlug","searchTerm","setSearchTerm","filteredBlocks","setFilteredBlocks","closeModal","isModalOpen","t","t0","t1","t2","t3","searchTermToUse","matchingBlocks","reduce","matchedBlocks","blockLabel","includes","push","t4","_jsxs","slug","title","label","children","_jsx","className","map","block_0","index","imageAltText","imageURL","blockLabels","alignLabel","onClick","thumbnail","alt","src"],"sources":["../../../../src/fields/Blocks/BlocksDrawer/index.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\nimport type { ClientBlock, Labels } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useState } from 'react'\n\nimport { Drawer } from '../../../elements/Drawer/index.js'\nimport { ThumbnailCard } from '../../../elements/ThumbnailCard/index.js'\nimport { DefaultBlockImage } from '../../../graphics/DefaultBlockImage/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { BlockSearch } from './BlockSearch/index.js'\nimport './index.scss'\n\nexport type Props = {\n  readonly addRow: (index: number, blockType?: string) => Promise<void> | void\n  readonly addRowIndex: number\n  readonly blocks: ClientBlock[]\n  readonly drawerSlug: string\n  readonly labels: Labels\n}\n\nconst baseClass = 'blocks-drawer'\n\nconst getBlockLabel = (block: ClientBlock, i18n: I18nClient) => {\n  if (typeof block.labels.singular === 'string') {\n    return block.labels.singular.toLowerCase()\n  }\n  if (typeof block.labels.singular === 'object') {\n    return getTranslation(block.labels.singular, i18n).toLowerCase()\n  }\n  return ''\n}\n\nexport const BlocksDrawer: React.FC<Props> = (props) => {\n  const { addRow, addRowIndex, blocks, drawerSlug, labels } = props\n\n  const [searchTerm, setSearchTerm] = useState('')\n  const [filteredBlocks, setFilteredBlocks] = useState(blocks)\n  const { closeModal, isModalOpen } = useModal()\n  const { i18n, t } = useTranslation()\n\n  useEffect(() => {\n    if (!isModalOpen) {\n      setSearchTerm('')\n    }\n  }, [isModalOpen])\n\n  useEffect(() => {\n    const searchTermToUse = searchTerm.toLowerCase()\n\n    const matchingBlocks = blocks?.reduce((matchedBlocks, block) => {\n      const blockLabel = getBlockLabel(block, i18n)\n      if (blockLabel.includes(searchTermToUse)) {\n        matchedBlocks.push(block)\n      }\n      return matchedBlocks\n    }, [])\n\n    setFilteredBlocks(matchingBlocks)\n  }, [searchTerm, blocks, i18n])\n\n  return (\n    <Drawer\n      slug={drawerSlug}\n      title={t('fields:addLabel', { label: getTranslation(labels.singular, i18n) })}\n    >\n      <BlockSearch setSearchTerm={setSearchTerm} />\n      <div className={`${baseClass}__blocks-wrapper`}>\n        <ul className={`${baseClass}__blocks`}>\n          {filteredBlocks?.map((block, index) => {\n            const { slug, imageAltText, imageURL, labels: blockLabels } = block\n\n            return (\n              <li className={`${baseClass}__block`} key={index}>\n                <ThumbnailCard\n                  alignLabel=\"center\"\n                  label={getTranslation(blockLabels?.singular, i18n)}\n                  onClick={() => {\n                    void addRow(addRowIndex, slug)\n                    closeModal(drawerSlug)\n                  }}\n                  thumbnail={\n                    imageURL ? (\n                      <img alt={imageAltText} src={imageURL} />\n                    ) : (\n                      <div className={`${baseClass}__default-image`}>\n                        <DefaultBlockImage />\n                      </div>\n                    )\n                  }\n                />\n              </li>\n            )\n          })}\n        </ul>\n      </div>\n    </Drawer>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Blocks/BlocksDrawer/index.scss

@@ -1,48 +1,50 @@
 @import '../../../scss/styles.scss';
 
-.blocks-drawer {
-  &__blocks-wrapper {
-    padding-top: base(1.5);
-  }
-
-  &__blocks {
-    position: relative;
-    padding: 0;
-    list-style: none;
-    display: grid;
-    grid-template-columns: repeat(6, 1fr);
-    gap: base(1);
-  }
-
-  &__default-image {
-    width: 100%;
-    overflow: hidden;
-    padding-top: base(0.75);
-  }
+@layer payload-default {
+  .blocks-drawer {
+    &__blocks-wrapper {
+      padding-top: base(1.5);
+    }
 
-  @include large-break {
     &__blocks {
-      grid-template-columns: repeat(5, 1fr);
+      position: relative;
+      padding: 0;
+      list-style: none;
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      gap: base(1);
     }
-  }
 
-  @include mid-break {
-    &__blocks-wrapper {
-      padding-top: base(1.75);
+    &__default-image {
+      width: 100%;
+      overflow: hidden;
+      padding-top: base(0.75);
     }
-    &__blocks {
-      grid-template-columns: repeat(3, 1fr);
-      gap: base(0.5);
+
+    @include large-break {
+      &__blocks {
+        grid-template-columns: repeat(5, 1fr);
+      }
     }
-  }
 
-  @include small-break {
-    &__blocks-wrapper {
-      padding-top: base(0.75);
+    @include mid-break {
+      &__blocks-wrapper {
+        padding-top: base(1.75);
+      }
+      &__blocks {
+        grid-template-columns: repeat(3, 1fr);
+        gap: base(0.5);
+      }
     }
 
-    &__blocks {
-      grid-template-columns: repeat(2, 1fr);
+    @include small-break {
+      &__blocks-wrapper {
+        padding-top: base(0.75);
+      }
+
+      &__blocks {
+        grid-template-columns: repeat(2, 1fr);
+      }
     }
   }
 }

package/dist/fields/Blocks/RowActions.d.ts

@@ -1,17 +1,17 @@
-import type { Labels } from 'payload/types';
+import type { ClientBlock, ClientField, Labels } from 'payload';
 import React from 'react';
-import type { FieldMap, ReducedBlock } from '../../providers/ComponentMap/buildComponentMap/types.js';
 export declare const RowActions: React.FC<{
-    addRow: (rowIndex: number, blockType: string) => void;
-    blockType: string;
-    blocks: ReducedBlock[];
-    duplicateRow: (rowIndex: number, blockType: string) => void;
-    fieldMap: FieldMap;
-    hasMaxRows?: boolean;
-    labels: Labels;
-    moveRow: (fromIndex: number, toIndex: number) => void;
-    removeRow: (rowIndex: number) => void;
-    rowCount: number;
-    rowIndex: number;
+    readonly addRow: (rowIndex: number, blockType: string) => Promise<void> | void;
+    readonly blocks: ClientBlock[];
+    readonly blockType: string;
+    readonly duplicateRow: (rowIndex: number, blockType: string) => void;
+    readonly fields: ClientField[];
+    readonly hasMaxRows?: boolean;
+    readonly isSortable?: boolean;
+    readonly labels: Labels;
+    readonly moveRow: (fromIndex: number, toIndex: number) => void;
+    readonly removeRow: (rowIndex: number) => void;
+    readonly rowCount: number;
+    readonly rowIndex: number;
 }>;
 //# sourceMappingURL=RowActions.d.ts.map

package/dist/fields/Blocks/RowActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RowActions.d.ts","sourceRoot":"","sources":["../../../src/fields/Blocks/RowActions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAG3C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EACV,QAAQ,EACR,YAAY,EACb,MAAM,yDAAyD,CAAA;AAMhE,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACrD,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,YAAY,EAAE,CAAA;IACtB,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3D,QAAQ,EAAE,QAAQ,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACrD,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;CACjB,CAgDA,CAAA"}
+{"version":3,"file":"RowActions.d.ts","sourceRoot":"","sources":["../../../src/fields/Blocks/RowActions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAG/D,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,QAAQ,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAC9E,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACpE,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9D,QAAQ,CAAC,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;CAC1B,CAiDA,CAAA"}