@payloadcms/ui 3.84.0 → 4.0.0-internal.38b7f1d

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

@@ -4,12 +4,12 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Drawer } from '../../../elements/Drawer/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import { BlockSelector } from '../BlockSelector/index.js';
 export const BlocksDrawer = props => {
-  const $ = _c(19);
+  const $ = _c(26);
   const {
     addRow,
     addRowIndex,
@@ -25,13 +25,15 @@ export const BlocksDrawer = props => {
     i18n,
     t
   } = useTranslation();
-  const [searchTermOverride, setSearchTermOverride] = React.useState("");
+  const [searchTermOverride, setSearchTermOverride] = useState("");
+  const [selectedBlock, setSelectedBlock] = useState(null);
   let t0;
   let t1;
   if ($[0] !== drawerSlug || $[1] !== isModalOpen) {
     t0 = () => {
       if (!isModalOpen(drawerSlug)) {
         setSearchTermOverride("");
+        setSelectedBlock(null);
       }
     };
     t1 = [isModalOpen, drawerSlug];
@@ -45,45 +47,74 @@ export const BlocksDrawer = props => {
   }
   useEffect(t0, t1);
   let t2;
-  if ($[4] !== addRow || $[5] !== addRowIndex || $[6] !== blocks || $[7] !== closeModal || $[8] !== drawerSlug || $[9] !== i18n || $[10] !== labels.singular || $[11] !== searchTermOverride || $[12] !== t) {
-    let t3;
-    if ($[14] !== addRow || $[15] !== addRowIndex || $[16] !== closeModal || $[17] !== drawerSlug) {
-      t3 = slug => {
-        addRow(addRowIndex, slug);
+  if ($[4] !== addRow || $[5] !== addRowIndex || $[6] !== closeModal || $[7] !== drawerSlug || $[8] !== selectedBlock) {
+    t2 = () => {
+      if (selectedBlock) {
+        addRow(addRowIndex, selectedBlock);
         closeModal(drawerSlug);
-      };
-      $[14] = addRow;
-      $[15] = addRowIndex;
-      $[16] = closeModal;
-      $[17] = drawerSlug;
-      $[18] = t3;
-    } else {
-      t3 = $[18];
-    }
-    t2 = _jsx(Drawer, {
+      }
+    };
+    $[4] = addRow;
+    $[5] = addRowIndex;
+    $[6] = closeModal;
+    $[7] = drawerSlug;
+    $[8] = selectedBlock;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  const handleInsert = t2;
+  let t3;
+  if ($[10] !== addRow || $[11] !== addRowIndex || $[12] !== closeModal || $[13] !== drawerSlug) {
+    t3 = slug => {
+      addRow(addRowIndex, slug);
+      closeModal(drawerSlug);
+    };
+    $[10] = addRow;
+    $[11] = addRowIndex;
+    $[12] = closeModal;
+    $[13] = drawerSlug;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  const handleDoubleClick = t3;
+  const t4 = !selectedBlock;
+  let t5;
+  if ($[15] !== blocks || $[16] !== drawerSlug || $[17] !== handleDoubleClick || $[18] !== handleInsert || $[19] !== i18n || $[20] !== labels.singular || $[21] !== searchTermOverride || $[22] !== selectedBlock || $[23] !== t || $[24] !== t4) {
+    t5 = _jsx(Drawer, {
+      headerActions: [{
+        disabled: t4,
+        label: "Insert",
+        onClick: handleInsert,
+        style: "primary"
+      }],
       slug: drawerSlug,
       title: t("fields:addLabel", {
         label: getTranslation(labels.singular, i18n)
       }),
       children: _jsx(BlockSelector, {
         blocks,
-        onSelect: t3,
-        searchTerm: searchTermOverride
+        onDoubleClick: handleDoubleClick,
+        onSelect: setSelectedBlock,
+        searchTerm: searchTermOverride,
+        selectedBlock
       })
     });
-    $[4] = addRow;
-    $[5] = addRowIndex;
-    $[6] = blocks;
-    $[7] = closeModal;
-    $[8] = drawerSlug;
-    $[9] = i18n;
-    $[10] = labels.singular;
-    $[11] = searchTermOverride;
-    $[12] = t;
-    $[13] = t2;
+    $[15] = blocks;
+    $[16] = drawerSlug;
+    $[17] = handleDoubleClick;
+    $[18] = handleInsert;
+    $[19] = i18n;
+    $[20] = labels.singular;
+    $[21] = searchTermOverride;
+    $[22] = selectedBlock;
+    $[23] = t;
+    $[24] = t4;
+    $[25] = t5;
   } else {
-    t2 = $[13];
+    t5 = $[25];
   }
-  return t2;
+  return t5;
 };
 //# 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","Drawer","useTranslation","BlockSelector","BlocksDrawer","props","$","addRow","addRowIndex","blocks","drawerSlug","labels","closeModal","isModalOpen","i18n","t","searchTermOverride","setSearchTermOverride","useState","t0","t1","t2","singular","t3","slug","_jsx","title","label","children","onSelect","searchTerm"],"sources":["../../../../src/fields/Blocks/BlocksDrawer/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientBlock, Labels } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect } from 'react'\n\nimport { Drawer } from '../../../elements/Drawer/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { BlockSelector } from '../BlockSelector/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\nexport const BlocksDrawer: React.FC<Props> = (props) => {\n  const { addRow, addRowIndex, blocks, drawerSlug, labels } = props\n\n  const { closeModal, isModalOpen } = useModal()\n  const { i18n, t } = useTranslation()\n  const [searchTermOverride, setSearchTermOverride] = React.useState('')\n\n  useEffect(() => {\n    if (!isModalOpen(drawerSlug)) {\n      setSearchTermOverride('')\n    }\n  }, [isModalOpen, drawerSlug])\n\n  return (\n    <Drawer\n      slug={drawerSlug}\n      title={t('fields:addLabel', { label: getTranslation(labels.singular, i18n) })}\n    >\n      <BlockSelector\n        blocks={blocks}\n        onSelect={(slug) => {\n          void addRow(addRowIndex, slug)\n          closeModal(drawerSlug)\n        }}\n        searchTerm={searchTermOverride}\n      />\n    </Drawer>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,IAASC,SAAS,QAAQ;AAEjC,SAASC,MAAM,QAAQ;AACvB,SAASC,cAAc,QAAQ;AAC/B,SAASC,aAAa,QAAQ;AAU9B,OAAO,MAAMC,YAAA,GAAgCC,KAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAC3C;IAAAW,MAAA;IAAAC,WAAA;IAAAC,MAAA;IAAAC,UAAA;IAAAC;EAAA,IAA4DN,KAAA;EAE5D;IAAAO,UAAA;IAAAC;EAAA,IAAoChB,QAAA;EACpC;IAAAiB,IAAA;IAAAC;EAAA,IAAoBb,cAAA;EACpB,OAAAc,kBAAA,EAAAC,qBAAA,IAAoDlB,KAAA,CAAAmB,QAAA,CAAe;EAAA,IAAAC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAd,CAAA,QAAAI,UAAA,IAAAJ,CAAA,QAAAO,WAAA;IAEzDM,EAAA,GAAAA,CAAA;MAAA,KACHN,WAAA,CAAYH,UAAA;QACfO,qBAAA,CAAsB;MAAA;IAAA;IAEvBG,EAAA,IAACP,WAAA,EAAaH,UAAA;IAAWJ,CAAA,MAAAI,UAAA;IAAAJ,CAAA,MAAAO,WAAA;IAAAP,CAAA,MAAAa,EAAA;IAAAb,CAAA,MAAAc,EAAA;EAAA;IAAAD,EAAA,GAAAb,CAAA;IAAAc,EAAA,GAAAd,CAAA;EAAA;EAJ5BN,SAAA,CAAUmB,EAIV,EAAGC,EAAyB;EAAA,IAAAC,EAAA;EAAA,IAAAf,CAAA,QAAAC,MAAA,IAAAD,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAG,MAAA,IAAAH,CAAA,QAAAM,UAAA,IAAAN,CAAA,QAAAI,UAAA,IAAAJ,CAAA,QAAAQ,IAAA,IAAAR,CAAA,SAAAK,MAAA,CAAAW,QAAA,IAAAhB,CAAA,SAAAU,kBAAA,IAAAV,CAAA,SAAAS,CAAA;IAAA,IAAAQ,EAAA;IAAA,IAAAjB,CAAA,SAAAC,MAAA,IAAAD,CAAA,SAAAE,WAAA,IAAAF,CAAA,SAAAM,UAAA,IAAAN,CAAA,SAAAI,UAAA;MASZa,EAAA,GAAAC,IAAA;QACHjB,MAAA,CAAOC,WAAA,EAAagB,IAAA;QACzBZ,UAAA,CAAWF,UAAA;MAAA;MACbJ,CAAA,OAAAC,MAAA;MAAAD,CAAA,OAAAE,WAAA;MAAAF,CAAA,OAAAM,UAAA;MAAAN,CAAA,OAAAI,UAAA;MAAAJ,CAAA,OAAAiB,EAAA;IAAA;MAAAA,EAAA,GAAAjB,CAAA;IAAA;IATJe,EAAA,GAAAI,IAAA,CAAAxB,MAAA;MAAAuB,IAAA,EACQd,UAAA;MAAAgB,KAAA,EACCX,CAAA,CAAE;QAAAY,KAAA,EAA4B7B,cAAA,CAAea,MAAA,CAAAW,QAAA,EAAiBR,IAAA;MAAA,CAAM;MAAAc,QAAA,EAE3EH,IAAA,CAAAtB,aAAA;QAAAM,MAAA;QAAAoB,QAAA,EAEYN,EAGV;QAAAO,UAAA,EACYd;MAAA,C;;;;;;;;;;;;;;;SAVhBK,E;CAcJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useModal","getTranslation","React","useCallback","useEffect","useState","Drawer","useTranslation","BlockSelector","BlocksDrawer","props","$","addRow","addRowIndex","blocks","drawerSlug","labels","closeModal","isModalOpen","i18n","t","searchTermOverride","setSearchTermOverride","selectedBlock","setSelectedBlock","t0","t1","t2","handleInsert","t3","slug","handleDoubleClick","t4","t5","singular","_jsx","headerActions","disabled","label","onClick","style","title","children","onDoubleClick","onSelect","searchTerm"],"sources":["../../../../src/fields/Blocks/BlocksDrawer/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientBlock, Labels } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { Drawer } from '../../../elements/Drawer/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { BlockSelector } from '../BlockSelector/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\nexport const BlocksDrawer: React.FC<Props> = (props) => {\n  const { addRow, addRowIndex, blocks, drawerSlug, labels } = props\n\n  const { closeModal, isModalOpen } = useModal()\n  const { i18n, t } = useTranslation()\n  const [searchTermOverride, setSearchTermOverride] = useState('')\n  const [selectedBlock, setSelectedBlock] = useState<null | string>(null)\n\n  useEffect(() => {\n    if (!isModalOpen(drawerSlug)) {\n      setSearchTermOverride('')\n      setSelectedBlock(null)\n    }\n  }, [isModalOpen, drawerSlug])\n\n  const handleInsert = useCallback(() => {\n    if (selectedBlock) {\n      void addRow(addRowIndex, selectedBlock)\n      closeModal(drawerSlug)\n    }\n  }, [selectedBlock, addRow, addRowIndex, closeModal, drawerSlug])\n\n  const handleDoubleClick = useCallback(\n    (slug: string) => {\n      void addRow(addRowIndex, slug)\n      closeModal(drawerSlug)\n    },\n    [addRow, addRowIndex, closeModal, drawerSlug],\n  )\n\n  return (\n    <Drawer\n      headerActions={[\n        {\n          disabled: !selectedBlock,\n          label: 'Insert',\n          onClick: handleInsert,\n          style: 'primary',\n        },\n      ]}\n      slug={drawerSlug}\n      title={t('fields:addLabel', { label: getTranslation(labels.singular, i18n) })}\n    >\n      <BlockSelector\n        blocks={blocks}\n        onDoubleClick={handleDoubleClick}\n        onSelect={setSelectedBlock}\n        searchTerm={searchTermOverride}\n        selectedBlock={selectedBlock}\n      />\n    </Drawer>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Blocks/SectionTitle/index.css

@@ -0,0 +1,74 @@
+@layer payload-default {
+  .section-title {
+    position: relative;
+    min-width: fit-content;
+    max-width: 100%;
+    pointer-events: all;
+    display: flex;
+    overflow: hidden;
+
+    &:after {
+      display: block;
+      content: attr(data-value) ' ';
+      visibility: hidden;
+      white-space: pre;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+    }
+  }
+
+  .section-title:after,
+  .section-title__input {
+    font-family: var(--text-body-medium-strong-font-family);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    font-size: var(--text-body-medium-strong-font-size);
+    line-height: var(--text-body-medium-strong-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    padding: 0 var(--spacer-1);
+    width: 100%;
+  }
+
+  .section-title__input {
+    color: var(--color-text);
+    border: 1px solid transparent;
+    border-radius: var(--radius-medium);
+
+    &::placeholder {
+      color: var(--color-text-tertiary);
+      font-family: var(--text-body-medium-font-family);
+      font-weight: var(--text-body-medium-font-weight);
+    }
+    min-width: min-content;
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    resize: none;
+    appearance: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    &:hover:not([readonly]) {
+      background-color: var(--color-bg-transparent-hover);
+    }
+
+    &:hover,
+    &:focus {
+      outline: 0;
+    }
+
+    &:focus:not([readonly]) {
+      outline: none;
+      border: var(--accessibility-outline);
+    }
+  }
+
+  .collapsible--collapsed .section-title--empty {
+    display: none;
+  }
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type Props = {
     customOnChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     customValue?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Blocks/SectionTitle/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACjE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8BxC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Blocks/SectionTitle/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,KAAK,GAAG;IAClB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACjE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8BxC,CAAA"}

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

@@ -5,14 +5,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useField } from '../../../forms/useField/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'section-title';
 /**
  * An input field representing the block's `blockName` property - responsible for reading and saving the `blockName`
  * property from/into the provided path.
  */
 export const SectionTitle = props => {
-  const $ = _c(14);
+  const $ = _c(13);
   const {
     customOnChange,
     customValue,
@@ -58,12 +58,11 @@ export const SectionTitle = props => {
     t2 = $[5];
   }
   const onChange = t2;
-  const t3 = customValue || value;
-  let t4;
-  if ($[6] !== customValue || $[7] !== onChange || $[8] !== path || $[9] !== readOnly || $[10] !== t || $[11] !== t3 || $[12] !== value) {
-    t4 = _jsx("div", {
+  let t3;
+  if ($[6] !== customValue || $[7] !== onChange || $[8] !== path || $[9] !== readOnly || $[10] !== t || $[11] !== value) {
+    t3 = _jsx("div", {
       className: classes,
-      "data-value": t3,
+      "data-value": customValue || value || t("general:untitled"),
       children: _jsx("input", {
         className: `${baseClass}__input`,
         id: path,
@@ -80,12 +79,11 @@ export const SectionTitle = props => {
     $[8] = path;
     $[9] = readOnly;
     $[10] = t;
-    $[11] = t3;
-    $[12] = value;
-    $[13] = t4;
+    $[11] = value;
+    $[12] = t3;
   } else {
-    t4 = $[13];
+    t3 = $[12];
   }
-  return t4;
+  return t3;
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useField","useTranslation","baseClass","SectionTitle","props","$","customOnChange","customValue","path","readOnly","t0","setValue","value","t","t1","Symbol","for","filter","Boolean","classes","join","t2","e","stopPropagation","preventDefault","target","onChange","t3","t4","_jsx","className","children","id","name","placeholder","type"],"sources":["../../../../src/fields/Blocks/SectionTitle/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useField } from '../../../forms/useField/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'section-title'\n\nexport type Props = {\n  customOnChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n  customValue?: string\n  path: string\n  readOnly: boolean\n}\n\n/**\n * An input field representing the block's `blockName` property - responsible for reading and saving the `blockName`\n * property from/into the provided path.\n */\nexport const SectionTitle: React.FC<Props> = (props) => {\n  const { customOnChange, customValue, path, readOnly } = props\n\n  const { setValue, value } = useField({ path })\n  const { t } = useTranslation()\n\n  const classes = [baseClass].filter(Boolean).join(' ')\n\n  const onChange =\n    customOnChange ||\n    ((e) => {\n      e.stopPropagation()\n      e.preventDefault()\n      setValue(e.target.value)\n    })\n\n  return (\n    <div className={classes} data-value={customValue || value}>\n      <input\n        className={`${baseClass}__input`}\n        id={path}\n        name={path}\n        onChange={onChange}\n        placeholder={t('general:untitled')}\n        readOnly={readOnly}\n        type=\"text\"\n        value={customValue || (value as string) || ''}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AASlB;;;;AAIA,OAAO,MAAMC,YAAA,GAAgCC,KAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAC3C;IAAAQ,cAAA;IAAAC,WAAA;IAAAC,IAAA;IAAAC;EAAA,IAAwDL,KAAA;EAAA,IAAAM,EAAA;EAAA,IAAAL,CAAA,QAAAG,IAAA;IAEnBE,EAAA;MAAAF;IAAA;IAAOH,CAAA,MAAAG,IAAA;IAAAH,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAA5C;IAAAM,QAAA;IAAAC;EAAA,IAA4BZ,QAAA,CAASU,EAAO;EAC5C;IAAAG;EAAA,IAAcZ,cAAA;EAAA,IAAAa,EAAA;EAAA,IAAAT,CAAA,QAAAU,MAAA,CAAAC,GAAA;IAEEF,EAAA,IAAAZ,SAAA,EAAAe,MAAA,CAAAC,OAAmB;IAAAb,CAAA,MAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EAAnC,MAAAc,OAAA,GAAgBL,EAAmB,CAAAM,IAAA,CAAc;EAAA,IAAAC,EAAA;EAAA,IAAAhB,CAAA,QAAAC,cAAA,IAAAD,CAAA,QAAAM,QAAA;IAG/CU,EAAA,GAAAf,cAAA,KAAAgB,CAAA;MAEEA,CAAA,CAAAC,eAAA,CAAiB;MACjBD,CAAA,CAAAE,cAAA,CAAgB;MAChBb,QAAA,CAASW,CAAA,CAAAG,MAAA,CAAAb,KAAc;IAAA,EACzB;IAAAP,CAAA,MAAAC,cAAA;IAAAD,CAAA,MAAAM,QAAA;IAAAN,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EANF,MAAAqB,QAAA,GACEL,EAKA;EAGqC,MAAAM,EAAA,GAAApB,WAAA,IAAeK,KAAA;EAAA,IAAAgB,EAAA;EAAA,IAAAvB,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAqB,QAAA,IAAArB,CAAA,QAAAG,IAAA,IAAAH,CAAA,QAAAI,QAAA,IAAAJ,CAAA,SAAAQ,CAAA,IAAAR,CAAA,SAAAsB,EAAA,IAAAtB,CAAA,SAAAO,KAAA;IAApDgB,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAeX,OAAA;MAAA,cAAqBQ,EAAe;MAAAI,QAAA,EAClDF,IAAA,CAAC;QAAAC,SAAA,EACY,GAAA5B,SAAA,SAAqB;QAAA8B,EAAA,EAC5BxB,IAAA;QAAAyB,IAAA,EACEzB,IAAA;QAAAkB,QAAA;QAAAQ,WAAA,EAEOrB,CAAA,CAAE;QAAAJ,QAAA;QAAA0B,IAAA,EAEV;QAAAvB,KAAA,EACEL,WAAA,IAAgBK,KAAA,IAAoB;MAAA,C;;;;;;;;;;;;;SAT/CgB,E;CAaJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useField","useTranslation","baseClass","SectionTitle","props","$","customOnChange","customValue","path","readOnly","t0","setValue","value","t","t1","Symbol","for","filter","Boolean","classes","join","t2","e","stopPropagation","preventDefault","target","onChange","t3","_jsx","className","children","id","name","placeholder","type"],"sources":["../../../../src/fields/Blocks/SectionTitle/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useField } from '../../../forms/useField/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'section-title'\n\nexport type Props = {\n  customOnChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n  customValue?: string\n  path: string\n  readOnly: boolean\n}\n\n/**\n * An input field representing the block's `blockName` property - responsible for reading and saving the `blockName`\n * property from/into the provided path.\n */\nexport const SectionTitle: React.FC<Props> = (props) => {\n  const { customOnChange, customValue, path, readOnly } = props\n\n  const { setValue, value } = useField({ path })\n  const { t } = useTranslation()\n\n  const classes = [baseClass].filter(Boolean).join(' ')\n\n  const onChange =\n    customOnChange ||\n    ((e) => {\n      e.stopPropagation()\n      e.preventDefault()\n      setValue(e.target.value)\n    })\n\n  return (\n    <div className={classes} data-value={customValue || value || t('general:untitled')}>\n      <input\n        className={`${baseClass}__input`}\n        id={path}\n        name={path}\n        onChange={onChange}\n        placeholder={t('general:untitled')}\n        readOnly={readOnly}\n        type=\"text\"\n        value={customValue || (value as string) || ''}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AASlB;;;;AAIA,OAAO,MAAMC,YAAA,GAAgCC,KAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAC3C;IAAAQ,cAAA;IAAAC,WAAA;IAAAC,IAAA;IAAAC;EAAA,IAAwDL,KAAA;EAAA,IAAAM,EAAA;EAAA,IAAAL,CAAA,QAAAG,IAAA;IAEnBE,EAAA;MAAAF;IAAA;IAAOH,CAAA,MAAAG,IAAA;IAAAH,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAA5C;IAAAM,QAAA;IAAAC;EAAA,IAA4BZ,QAAA,CAASU,EAAO;EAC5C;IAAAG;EAAA,IAAcZ,cAAA;EAAA,IAAAa,EAAA;EAAA,IAAAT,CAAA,QAAAU,MAAA,CAAAC,GAAA;IAEEF,EAAA,IAAAZ,SAAA,EAAAe,MAAA,CAAAC,OAAmB;IAAAb,CAAA,MAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EAAnC,MAAAc,OAAA,GAAgBL,EAAmB,CAAAM,IAAA,CAAc;EAAA,IAAAC,EAAA;EAAA,IAAAhB,CAAA,QAAAC,cAAA,IAAAD,CAAA,QAAAM,QAAA;IAG/CU,EAAA,GAAAf,cAAA,KAAAgB,CAAA;MAEEA,CAAA,CAAAC,eAAA,CAAiB;MACjBD,CAAA,CAAAE,cAAA,CAAgB;MAChBb,QAAA,CAASW,CAAA,CAAAG,MAAA,CAAAb,KAAc;IAAA,EACzB;IAAAP,CAAA,MAAAC,cAAA;IAAAD,CAAA,MAAAM,QAAA;IAAAN,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EANF,MAAAqB,QAAA,GACEL,EAKA;EAAA,IAAAM,EAAA;EAAA,IAAAtB,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAqB,QAAA,IAAArB,CAAA,QAAAG,IAAA,IAAAH,CAAA,QAAAI,QAAA,IAAAJ,CAAA,SAAAQ,CAAA,IAAAR,CAAA,SAAAO,KAAA;IAGAe,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAeV,OAAA;MAAA,cAAqBZ,WAAA,IAAeK,KAAA,IAASC,CAAA,CAAE;MAAAiB,QAAA,EAC7DF,IAAA,CAAC;QAAAC,SAAA,EACY,GAAA3B,SAAA,SAAqB;QAAA6B,EAAA,EAC5BvB,IAAA;QAAAwB,IAAA,EACExB,IAAA;QAAAkB,QAAA;QAAAO,WAAA,EAEOpB,CAAA,CAAE;QAAAJ,QAAA;QAAAyB,IAAA,EAEV;QAAAtB,KAAA,EACEL,WAAA,IAAgBK,KAAA,IAAoB;MAAA,C;;;;;;;;;;;;SAT/Ce,E;CAaJ","ignoreList":[]}

package/dist/fields/Blocks/index.css

@@ -0,0 +1,136 @@
+@layer payload-default {
+  .blocks-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+  }
+
+  .blocks-field__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-1);
+  }
+
+  .blocks-field__header-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: var(--spacer-2);
+  }
+
+  .blocks-field__header-content {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+  }
+
+  .blocks-field--has-no-error > .blocks-field__header .blocks-field__header-content {
+    color: var(--color-text);
+  }
+
+  .blocks-field--has-error > .blocks-field__header {
+    color: var(--color-text-danger);
+  }
+
+  .blocks-field--has-error .section-title__input,
+  .blocks-field--has-error .blocks-field__header-content {
+    color: var(--color-text-danger);
+  }
+
+  .blocks-field--has-error .blocks-field__row--no-errors .section-title__input,
+  .blocks-field--has-error .blocks-field__row--no-errors .blocks-field__header-content,
+  .blocks-field--has-error .blocks-field--has-no-error .section-title__input,
+  .blocks-field--has-error .blocks-field--has-no-error .blocks-field__header-content {
+    color: var(--color-text);
+  }
+
+  .blocks-field__error-pill {
+    align-self: center;
+  }
+
+  .blocks-field__header-actions {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    flex-shrink: 0;
+    color: var(--color-text);
+
+    & > li:first-child .blocks-field__header-action {
+      padding: 0 var(--spacer-2) 0 0;
+    }
+
+    & > li:last-child .blocks-field__header-action {
+      padding: 0;
+    }
+
+    @media (max-width: 768px) {
+      & > li:not(:last-child) {
+        display: none;
+      }
+    }
+  }
+
+  .blocks-field__header-action {
+    cursor: pointer;
+
+    &:hover,
+    &:focus-visible {
+      color: var(--color-text-secondary);
+    }
+  }
+
+  .blocks-field__title {
+    margin-bottom: 0;
+    color: var(--color-text);
+    font-weight: var(--text-body-medium-strong-font-weight);
+  }
+
+  .blocks-field__block-header {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    gap: var(--spacer-2);
+    align-items: center;
+  }
+
+  .blocks-field__block-header-number-wrap {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    flex-shrink: 0;
+  }
+
+  .blocks-field__block-number {
+    flex-shrink: 0;
+    color: var(--color-text);
+  }
+
+  .blocks-field__block-pill {
+    flex-shrink: 0;
+  }
+
+  .blocks-field__rows {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+  }
+
+  .blocks-field__drawer-toggler {
+    display: flex;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    border: none;
+    align-self: flex-start;
+    border-radius: var(--radius-medium);
+  }
+
+  .blocks-field__row--is-dragging {
+    opacity: 0.5;
+  }
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const BlocksField: React.FC<{
     readonly validate?: import("payload").BlocksFieldValidation;
 } & import("payload").FieldPaths & {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Blocks/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAyC,MAAM,OAAO,CAAA;AA6B7D,OAAO,cAAc,CAAA;AA6erB,eAAO,MAAM,WAAW;;;;+EAAsC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Blocks/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAgC7D,OAAO,aAAa,CAAA;AAihBpB,eAAO,MAAM,WAAW;;;;+EAAsC,CAAA"}