@payloadcms/ui 3.24.0 → 3.25.0-canary.9728d80

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,WAAW,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAIlD,OAAO,KAA8B,MAAM,OAAO,CAAA;AAOlD,OAAO,cAAc,CAAA;AAGrB,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,CAAC,WAAW,GAAG,MAAM,CAAC,EAAE,CAAA;IACzC,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,CAqExC,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,KAAuC,MAAM,OAAO,CAAA;AAO3D,OAAO,cAAc,CAAA;AAGrB,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,CAAC,WAAW,GAAG,MAAM,CAAC,EAAE,CAAA;IACzC,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,CA6GxC,CAAA"}

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

@@ -1,10 +1,9 @@
 'use client';
 
-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 React, { useEffect, useMemo, useState } from 'react';
 import { Drawer } from '../../../elements/Drawer/index.js';
 import { ThumbnailCard } from '../../../elements/ThumbnailCard/index.js';
 import { DefaultBlockImage } from '../../../graphics/DefaultBlockImage/index.js';
@@ -23,7 +22,6 @@ const getBlockLabel = (block, i18n) => {
   return '';
 };
 export const BlocksDrawer = props => {
-  const $ = _c(20);
   const {
     addRow,
     addRowIndex,
@@ -31,7 +29,7 @@ export const BlocksDrawer = props => {
     drawerSlug,
     labels
   } = props;
-  const [searchTerm, setSearchTerm] = useState("");
+  const [searchTerm, setSearchTerm] = useState('');
   const [filteredBlocks, setFilteredBlocks] = useState(blocks);
   const {
     closeModal,
@@ -44,107 +42,91 @@ export const BlocksDrawer = props => {
   const {
     config
   } = useConfig();
-  let t0;
-  let t1;
-  if ($[0] !== drawerSlug || $[1] !== isModalOpen) {
-    t0 = () => {
-      if (!isModalOpen(drawerSlug)) {
-        setSearchTerm("");
-      }
+  const blockGroups = useMemo(() => {
+    const groups = {
+      _none: []
     };
-    t1 = [isModalOpen, drawerSlug];
-    $[0] = drawerSlug;
-    $[1] = isModalOpen;
-    $[2] = t0;
-    $[3] = t1;
-  } else {
-    t0 = $[2];
-    t1 = $[3];
-  }
-  useEffect(t0, t1);
-  let t2;
-  let t3;
-  if ($[4] !== blocks || $[5] !== config.blocksMap || $[6] !== i18n || $[7] !== searchTerm) {
-    t2 = () => {
-      const searchTermToUse = searchTerm.toLowerCase();
-      const matchingBlocks = blocks?.reduce((matchedBlocks, _block) => {
-        const block = typeof _block === "string" ? config.blocksMap[_block] : _block;
-        const blockLabel = getBlockLabel(block, i18n);
-        if (blockLabel.includes(searchTermToUse)) {
-          matchedBlocks.push(block);
+    filteredBlocks.forEach(block => {
+      if (typeof block === 'object' && block.admin?.group) {
+        const group = block.admin.group;
+        const label = typeof group === 'string' ? group : getTranslation(group, i18n);
+        if (Object.hasOwn(groups, label)) {
+          groups[label].push(block);
+        } else {
+          groups[label] = [block];
         }
-        return matchedBlocks;
-      }, []);
-      setFilteredBlocks(matchingBlocks);
-    };
-    t3 = [searchTerm, blocks, i18n, config.blocksMap];
-    $[4] = blocks;
-    $[5] = config.blocksMap;
-    $[6] = i18n;
-    $[7] = searchTerm;
-    $[8] = t2;
-    $[9] = t3;
-  } else {
-    t2 = $[8];
-    t3 = $[9];
-  }
-  useEffect(t2, t3);
-  let t4;
-  if ($[10] !== addRow || $[11] !== addRowIndex || $[12] !== closeModal || $[13] !== config.blocksMap || $[14] !== drawerSlug || $[15] !== filteredBlocks || $[16] !== i18n || $[17] !== labels.singular || $[18] !== t) {
-    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 block_0 = typeof _block_0 === "string" ? config.blocksMap[_block_0] : _block_0;
-            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);
-          })
-        })
-      })]
+      } else {
+        groups._none.push(block);
+      }
     });
-    $[10] = addRow;
-    $[11] = addRowIndex;
-    $[12] = closeModal;
-    $[13] = config.blocksMap;
-    $[14] = drawerSlug;
-    $[15] = filteredBlocks;
-    $[16] = i18n;
-    $[17] = labels.singular;
-    $[18] = t;
-    $[19] = t4;
-  } else {
-    t4 = $[19];
-  }
-  return t4;
+    return groups;
+  }, [filteredBlocks, i18n]);
+  useEffect(() => {
+    if (!isModalOpen(drawerSlug)) {
+      setSearchTerm('');
+    }
+  }, [isModalOpen, drawerSlug]);
+  useEffect(() => {
+    const searchTermToUse = searchTerm.toLowerCase();
+    const matchingBlocks = blocks?.reduce((matchedBlocks, _block) => {
+      const block_0 = typeof _block === 'string' ? config.blocksMap[_block] : _block;
+      const blockLabel = getBlockLabel(block_0, i18n);
+      if (blockLabel.includes(searchTermToUse)) {
+        matchedBlocks.push(block_0);
+      }
+      return matchedBlocks;
+    }, []);
+    setFilteredBlocks(matchingBlocks);
+  }, [searchTerm, blocks, i18n, config.blocksMap]);
+  return /*#__PURE__*/_jsxs(Drawer, {
+    slug: drawerSlug,
+    title: t('fields:addLabel', {
+      label: getTranslation(labels.singular, i18n)
+    }),
+    children: [/*#__PURE__*/_jsx(BlockSearch, {
+      setSearchTerm: setSearchTerm
+    }), /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__blocks-wrapper`,
+      children: /*#__PURE__*/_jsx("ul", {
+        className: `${baseClass}__block-groups`,
+        children: Object.entries(blockGroups).map(([groupLabel, groupBlocks]) => !groupBlocks.length ? null : /*#__PURE__*/_jsxs("li", {
+          className: [`${baseClass}__block-group`, groupLabel === '_none' && `${baseClass}__block-group-none`].filter(Boolean).join(' '),
+          children: [groupLabel !== '_none' && /*#__PURE__*/_jsx("h3", {
+            className: `${baseClass}__block-group-label`,
+            children: groupLabel
+          }), /*#__PURE__*/_jsx("ul", {
+            className: `${baseClass}__blocks`,
+            children: groupBlocks.map((_block_0, index) => {
+              const block_1 = typeof _block_0 === 'string' ? config.blocksMap[_block_0] : _block_0;
+              const {
+                slug,
+                imageAltText,
+                imageURL,
+                labels: blockLabels
+              } = block_1;
+              return /*#__PURE__*/_jsx("li", {
+                className: `${baseClass}__block`,
+                children: /*#__PURE__*/_jsx(ThumbnailCard, {
+                  alignLabel: "center",
+                  label: getTranslation(blockLabels?.singular, i18n),
+                  onClick: () => {
+                    void addRow(addRowIndex, slug);
+                    closeModal(drawerSlug);
+                  },
+                  thumbnail: imageURL ? /*#__PURE__*/_jsx("img", {
+                    alt: imageAltText,
+                    src: imageURL
+                  }) : /*#__PURE__*/_jsx("div", {
+                    className: `${baseClass}__default-image`,
+                    children: /*#__PURE__*/_jsx(DefaultBlockImage, {})
+                  })
+                })
+              }, index);
+            })
+          })]
+        }, groupLabel))
+      })
+    })]
+  });
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useModal","getTranslation","React","useEffect","useState","Drawer","ThumbnailCard","DefaultBlockImage","useConfig","useTranslation","BlockSearch","baseClass","getBlockLabel","block","i18n","labels","singular","toLowerCase","BlocksDrawer","props","$","addRow","addRowIndex","blocks","drawerSlug","searchTerm","setSearchTerm","filteredBlocks","setFilteredBlocks","closeModal","isModalOpen","t","config","t0","t1","t2","t3","blocksMap","searchTermToUse","matchingBlocks","reduce","matchedBlocks","_block","blockLabel","includes","push","t4","_jsxs","slug","title","label","children","_jsx","className","map","_block_0","index","block_0","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 { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\nimport { BlockSearch } from './BlockSearch/index.js'\n\nexport type Props = {\n  readonly addRow: (index: number, blockType?: string) => Promise<void> | void\n  readonly addRowIndex: number\n  readonly blocks: (ClientBlock | string)[]\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  const { config } = useConfig()\n\n  useEffect(() => {\n    if (!isModalOpen(drawerSlug)) {\n      setSearchTerm('')\n    }\n  }, [isModalOpen, drawerSlug])\n\n  useEffect(() => {\n    const searchTermToUse = searchTerm.toLowerCase()\n\n    const matchingBlocks = blocks?.reduce((matchedBlocks, _block) => {\n      const block = typeof _block === 'string' ? config.blocksMap[_block] : _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, config.blocksMap])\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 block = typeof _block === 'string' ? config.blocksMap[_block] : _block\n\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":[]}
+{"version":3,"file":"index.js","names":["useModal","getTranslation","React","useEffect","useMemo","useState","Drawer","ThumbnailCard","DefaultBlockImage","useConfig","useTranslation","BlockSearch","baseClass","getBlockLabel","block","i18n","labels","singular","toLowerCase","BlocksDrawer","props","addRow","addRowIndex","blocks","drawerSlug","searchTerm","setSearchTerm","filteredBlocks","setFilteredBlocks","closeModal","isModalOpen","t","config","blockGroups","groups","_none","forEach","admin","group","label","Object","hasOwn","push","searchTermToUse","matchingBlocks","reduce","matchedBlocks","_block","blocksMap","blockLabel","includes","_jsxs","slug","title","_jsx","className","entries","map","groupLabel","groupBlocks","length","filter","Boolean","join","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, useMemo, 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 { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\nimport { BlockSearch } from './BlockSearch/index.js'\n\nexport type Props = {\n  readonly addRow: (index: number, blockType?: string) => Promise<void> | void\n  readonly addRowIndex: number\n  readonly blocks: (ClientBlock | string)[]\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  const { config } = useConfig()\n\n  const blockGroups = useMemo(() => {\n    const groups: Record<string, (ClientBlock | string)[]> = {\n      _none: [],\n    }\n    filteredBlocks.forEach((block) => {\n      if (typeof block === 'object' && block.admin?.group) {\n        const group = block.admin.group\n        const label = typeof group === 'string' ? group : getTranslation(group, i18n)\n\n        if (Object.hasOwn(groups, label)) {\n          groups[label].push(block)\n        } else {\n          groups[label] = [block]\n        }\n      } else {\n        groups._none.push(block)\n      }\n    })\n    return groups\n  }, [filteredBlocks, 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 matchingBlocks = blocks?.reduce((matchedBlocks, _block) => {\n      const block = typeof _block === 'string' ? config.blocksMap[_block] : _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, config.blocksMap])\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}__block-groups`}>\n          {Object.entries(blockGroups).map(([groupLabel, groupBlocks]) =>\n            !groupBlocks.length ? null : (\n              <li\n                className={[\n                  `${baseClass}__block-group`,\n                  groupLabel === '_none' && `${baseClass}__block-group-none`,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                key={groupLabel}\n              >\n                {groupLabel !== '_none' && (\n                  <h3 className={`${baseClass}__block-group-label`}>{groupLabel}</h3>\n                )}\n                <ul className={`${baseClass}__blocks`}>\n                  {groupBlocks.map((_block, index) => {\n                    const block = typeof _block === 'string' ? config.blocksMap[_block] : _block\n\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              </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

@@ -21,6 +21,32 @@
       padding-top: base(0.75);
     }
 
+    &__block-groups {
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: base(1.5);
+    }
+
+    &__block-group {
+      list-style: none;
+    }
+
+    &__block-group-label {
+      padding-bottom: base(0.5);
+    }
+
+    &__block-group-none {
+      order: 1;
+      padding-top: base(1.5);
+      border-top: 1px solid var(--theme-border-color);
+
+      &:only-child {
+        padding-top: 0;
+        border-top: 0;
+      }
+    }
+
     @include large-break {
       &__blocks {
         grid-template-columns: repeat(5, 1fr);
@@ -31,10 +57,19 @@
       &__blocks-wrapper {
         padding-top: base(1.75);
       }
+
       &__blocks {
         grid-template-columns: repeat(3, 1fr);
         gap: base(0.5);
       }
+
+      &__block-groups {
+        gap: base(1.75);
+      }
+
+      &__block-group-none {
+        padding-top: base(1.75);
+      }
     }
 
     @include small-break {
@@ -45,6 +80,14 @@
       &__blocks {
         grid-template-columns: repeat(2, 1fr);
       }
+
+      &__block-groups {
+        gap: base(0.75);
+      }
+
+      &__block-group-none {
+        padding-top: base(0.75);
+      }
     }
   }
 }