@payloadcms/ui 4.0.0-internal.e55ccef → 4.0.0-internal.ea6e8f8

package/dist/elements/Card/index.css

@@ -1,11 +1,11 @@
 @layer payload-default {
   .card {
-    background: var(--color-bg-secondary);
-    padding: var(--spacer-2-5) var(--spacer-3);
+    background: var(--color-bg);
+    padding: var(--spacer-2-5);
     width: 100%;
     min-height: 4rem;
     position: relative;
-    border-radius: var(--radius-medium);
+    border-radius: var(--radius-large);
     border: var(--stroke-width-small) solid var(--color-border);
     display: flex;
     align-items: stretch;
@@ -14,10 +14,9 @@
 
   .card__title {
     letter-spacing: var(--text-body-medium-letter-spacing);
-    font-family: var(--text-body-medium-strong-font-family);
-    font-size: var(--text-body-medium-strong-font-size);
-    font-weight: var(--text-body-medium-strong-font-weight);
-    line-height: var(--text-body-medium-strong-line-height);
+    font-size: var(--text-body-medium-bold-font-size);
+    font-weight: var(--text-body-medium-bold-font-weight);
+    line-height: var(--text-body-medium-bold-line-height);
     color: var(--color-text);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -36,7 +35,7 @@
     cursor: pointer;
 
     &:hover {
-      background: var(--color-bg-secondary-hover);
+      background: var(--color-bg-secondary);
     }
 
     &:has(.card__click:active) {

package/dist/elements/CardGrid/index.css

@@ -0,0 +1,20 @@
+@layer payload-default {
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: var(--spacer-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    padding: var(--spacer-4) var(--gutter-h);
+  }
+
+  .card-grid__item {
+    min-width: 0;
+  }
+
+  .card-grid__item--selected {
+    border-radius: var(--radius-large);
+    box-shadow: 0 0 0 var(--stroke-width-medium) var(--color-border-selected);
+  }
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.css';
+export type CardGridProps<T> = {
+    readonly ariaLabel: string;
+    readonly className?: string;
+    readonly getItemClassName?: (item: T) => string | undefined;
+    readonly getKey: (item: T) => React.Key;
+    readonly items: readonly T[];
+    readonly renderItem: (item: T) => React.ReactNode;
+};
+/** A presentation-only responsive grid. Selection, navigation, and drag behavior belong to callers. */
+export declare const CardGrid: <T>({ ariaLabel, className, getItemClassName, getKey, items, renderItem, }: CardGridProps<T>) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CardGrid/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAA;IAC3D,QAAQ,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,GAAG,CAAA;IACvC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,CAAA;IAC5B,QAAQ,CAAC,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;CAClD,CAAA;AAED,uGAAuG;AACvG,eAAO,MAAM,QAAQ,GAAI,CAAC,0EAOvB,aAAa,CAAC,CAAC,CAAC,sBAWlB,CAAA"}

package/dist/elements/CardGrid/index.js

@@ -0,0 +1,23 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import './index.css';
+const baseClass = 'card-grid';
+/** A presentation-only responsive grid. Selection, navigation, and drag behavior belong to callers. */
+export const CardGrid = ({
+  ariaLabel,
+  className,
+  getItemClassName,
+  getKey,
+  items,
+  renderItem
+}) => /*#__PURE__*/_jsx("ul", {
+  "aria-label": ariaLabel,
+  className: [baseClass, className].filter(Boolean).join(' '),
+  children: items.map(item => /*#__PURE__*/_jsx("li", {
+    className: [`${baseClass}__item`, getItemClassName?.(item)].filter(Boolean).join(' '),
+    children: renderItem(item)
+  }, getKey(item)))
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","CardGrid","ariaLabel","className","getItemClassName","getKey","items","renderItem","_jsx","filter","Boolean","join","map","item"],"sources":["../../../src/elements/CardGrid/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'card-grid'\n\nexport type CardGridProps<T> = {\n  readonly ariaLabel: string\n  readonly className?: string\n  readonly getItemClassName?: (item: T) => string | undefined\n  readonly getKey: (item: T) => React.Key\n  readonly items: readonly T[]\n  readonly renderItem: (item: T) => React.ReactNode\n}\n\n/** A presentation-only responsive grid. Selection, navigation, and drag behavior belong to callers. */\nexport const CardGrid = <T,>({\n  ariaLabel,\n  className,\n  getItemClassName,\n  getKey,\n  items,\n  renderItem,\n}: CardGridProps<T>) => (\n  <ul aria-label={ariaLabel} className={[baseClass, className].filter(Boolean).join(' ')}>\n    {items.map((item) => (\n      <li\n        className={[`${baseClass}__item`, getItemClassName?.(item)].filter(Boolean).join(' ')}\n        key={getKey(item)}\n      >\n        {renderItem(item)}\n      </li>\n    ))}\n  </ul>\n)\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAWlB;AACA,OAAO,MAAMC,QAAA,GAAWA,CAAK;EAC3BC,SAAS;EACTC,SAAS;EACTC,gBAAgB;EAChBC,MAAM;EACNC,KAAK;EACLC;AAAU,CACO,kBACjBC,IAAA,CAAC;EAAG,cAAYN,SAAA;EAAWC,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,CAAU,CAACM,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;YAC/EL,KAAA,CAAMM,GAAG,CAAEC,IAAA,iBACVL,IAAA,CAAC;IACCL,SAAA,EAAW,CAAC,GAAGH,SAAA,QAAiB,EAAEI,gBAAA,GAAmBS,IAAA,EAAM,CAACJ,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cAGhFJ,UAAA,CAAWM,IAAA;KAFPR,MAAA,CAAOQ,IAAA","ignoreList":[]}

package/dist/elements/ChangeSummary/index.css

@@ -0,0 +1,18 @@
+@layer payload-default {
+  .change-summary {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacer-1);
+  }
+
+  .change-summary__operations {
+    font-family: var(--text-body-small-font-family);
+    font-size: var(--text-body-small-font-size);
+    color: var(--color-text-secondary);
+  }
+
+  .change-summary__view {
+    color: var(--color-text-brand);
+  }
+}

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

@@ -0,0 +1,29 @@
+import type { BranchOperation } from 'payload';
+import type React from 'react';
+import './index.css';
+/** The least a change has to say about itself to be counted here. */
+export type SummarizableChange = {
+    /** Absent for a global. */
+    collectionSlug?: string;
+    globalSlug?: string;
+    operation?: BranchOperation;
+};
+/**
+ * What a set of branch changes amounts to, in one sentence.
+ *
+ * "Changes to 3 Pages, 2 Media, and 1 Post" answers the question a bare count cannot
+ * — whether this merge touches the things the reader cares about — without making them
+ * open a list to find out. It is deliberately a summary and not a table: the table
+ * already exists on the branch view, and callers that can reach it link there themselves.
+ *
+ * Shared rather than written per caller, because the merge modal, a scheduled merge and
+ * the manage modal are all answering the same question about the same kind of set, and
+ * three hand-rolled sentences would drift apart.
+ */
+export declare const ChangeSummary: React.FC<{
+    changes: SummarizableChange[];
+    className?: string;
+    /** Shown as a second, muted line. Off where the operations are already on screen. */
+    showOperations?: boolean;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ChangeSummary/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,aAAa,CAAA;AAIpB,qEAAqE;AACrE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,2BAA2B;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,eAAe,CAAA;CAC5B,CAAA;AAKD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IACnC,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qFAAqF;IACrF,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAgEA,CAAA"}

package/dist/elements/ChangeSummary/index.js

@@ -0,0 +1,147 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { useConfig } from '../../providers/Config/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import './index.css';
+const baseClass = 'change-summary';
+/** Beyond this the sentence stops being readable, and the rest is rolled into a count. */
+const MAX_NAMED_COLLECTIONS = 3;
+/**
+ * What a set of branch changes amounts to, in one sentence.
+ *
+ * "Changes to 3 Pages, 2 Media, and 1 Post" answers the question a bare count cannot
+ * — whether this merge touches the things the reader cares about — without making them
+ * open a list to find out. It is deliberately a summary and not a table: the table
+ * already exists on the branch view, and callers that can reach it link there themselves.
+ *
+ * Shared rather than written per caller, because the merge modal, a scheduled merge and
+ * the manage modal are all answering the same question about the same kind of set, and
+ * three hand-rolled sentences would drift apart.
+ */
+export const ChangeSummary = t0 => {
+  const $ = _c(12);
+  const {
+    changes,
+    className,
+    showOperations: t1
+  } = t0;
+  const showOperations = t1 === undefined ? false : t1;
+  const {
+    getEntityConfig
+  } = useConfig();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  if (!changes.length) {
+    return null;
+  }
+  let t2;
+  if ($[0] !== changes || $[1] !== className || $[2] !== getEntityConfig || $[3] !== i18n || $[4] !== showOperations || $[5] !== t) {
+    const counts = new Map();
+    for (const change of changes) {
+      const key = change.globalSlug ? `global:${change.globalSlug}` : `collection:${change.collectionSlug}`;
+      counts.set(key, (counts.get(key) ?? 0) + 1);
+    }
+    const groups = [...counts.entries()].sort(_temp);
+    let t3;
+    if ($[7] !== getEntityConfig || $[8] !== i18n) {
+      t3 = t4 => {
+        const [key_0, count] = t4;
+        const [kind, slug] = key_0.split(":");
+        if (kind === "global") {
+          const label = getEntityConfig({
+            globalSlug: slug
+          })?.label;
+          return `${count} ${getTranslation(label ?? slug, i18n)}`;
+        }
+        const labels = getEntityConfig({
+          collectionSlug: slug
+        })?.labels;
+        const label_0 = count === 1 ? labels?.singular : labels?.plural;
+        return `${count} ${getTranslation(label_0 ?? slug, i18n)}`;
+      };
+      $[7] = getEntityConfig;
+      $[8] = i18n;
+      $[9] = t3;
+    } else {
+      t3 = $[9];
+    }
+    const named = groups.slice(0, MAX_NAMED_COLLECTIONS).map(t3);
+    const remainder = groups.slice(MAX_NAMED_COLLECTIONS).reduce(_temp2, 0);
+    if (remainder) {
+      named.push(t("branching:andMoreChanges", {
+        count: remainder
+      }));
+    }
+    const summary = new Intl.ListFormat(i18n.language, {
+      type: "conjunction",
+      style: "long"
+    }).format(named);
+    const operations = showOperations ? summarizeOperations({
+      changes,
+      t
+    }) : null;
+    let t4;
+    if ($[10] !== className) {
+      t4 = [baseClass, className].filter(Boolean);
+      $[10] = className;
+      $[11] = t4;
+    } else {
+      t4 = $[11];
+    }
+    t2 = _jsxs("div", {
+      className: t4.join(" "),
+      children: [_jsx("span", {
+        className: `${baseClass}__sentence`,
+        children: t("branching:changesTo", {
+          summary
+        })
+      }), operations && _jsx("span", {
+        className: `${baseClass}__operations`,
+        children: operations
+      })]
+    });
+    $[0] = changes;
+    $[1] = className;
+    $[2] = getEntityConfig;
+    $[3] = i18n;
+    $[4] = showOperations;
+    $[5] = t;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+};
+/**
+ * "2 Created · 3 Updated", in the order the operations happen to a document rather than
+ * by count — this line is about what kind of merge it is, and a delete matters at any size.
+ */
+const summarizeOperations = ({
+  changes,
+  t
+}) => {
+  const order = ['create', 'update', 'delete'];
+  const parts = order.reduce((acc, operation) => {
+    const count = changes.filter(change => change.operation === operation).length;
+    if (count) {
+      acc.push(`${count} ${t(`branching:operation_${operation}`)}`);
+    }
+    return acc;
+  }, []);
+  return parts.length ? parts.join(' · ') : null;
+};
+function _temp(t0, t1) {
+  const [slugA, countA] = t0;
+  const [slugB, countB] = t1;
+  return countB - countA || slugA.localeCompare(slugB);
+}
+function _temp2(total, t0) {
+  const [, count_0] = t0;
+  return total + count_0;
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","useConfig","useTranslation","baseClass","MAX_NAMED_COLLECTIONS","ChangeSummary","t0","$","changes","className","showOperations","t1","undefined","getEntityConfig","i18n","t","length","t2","counts","Map","change","key","globalSlug","collectionSlug","set","get","groups","entries","sort","_temp","t3","t4","key_0","count","kind","slug","split","label","labels","label_0","singular","plural","named","slice","map","remainder","reduce","_temp2","push","summary","Intl","ListFormat","language","type","style","format","operations","summarizeOperations","filter","Boolean","_jsxs","join","children","_jsx","order","parts","acc","operation","slugA","countA","slugB","countB","localeCompare","total","count_0"],"sources":["../../../src/elements/ChangeSummary/index.tsx"],"sourcesContent":["'use client'\n\nimport type { BranchOperation } from 'payload'\nimport type React from 'react'\n\nimport { getTranslation } from '@payloadcms/translations'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'change-summary'\n\n/** The least a change has to say about itself to be counted here. */\nexport type SummarizableChange = {\n  /** Absent for a global. */\n  collectionSlug?: string\n  globalSlug?: string\n  operation?: BranchOperation\n}\n\n/** Beyond this the sentence stops being readable, and the rest is rolled into a count. */\nconst MAX_NAMED_COLLECTIONS = 3\n\n/**\n * What a set of branch changes amounts to, in one sentence.\n *\n * \"Changes to 3 Pages, 2 Media, and 1 Post\" answers the question a bare count cannot\n * — whether this merge touches the things the reader cares about — without making them\n * open a list to find out. It is deliberately a summary and not a table: the table\n * already exists on the branch view, and callers that can reach it link there themselves.\n *\n * Shared rather than written per caller, because the merge modal, a scheduled merge and\n * the manage modal are all answering the same question about the same kind of set, and\n * three hand-rolled sentences would drift apart.\n */\nexport const ChangeSummary: React.FC<{\n  changes: SummarizableChange[]\n  className?: string\n  /** Shown as a second, muted line. Off where the operations are already on screen. */\n  showOperations?: boolean\n}> = ({ changes, className, showOperations = false }) => {\n  const { getEntityConfig } = useConfig()\n  const { i18n, t } = useTranslation()\n\n  if (!changes.length) {\n    return null\n  }\n\n  // Keyed by kind as well as slug: a global and a collection could share a slug, and they\n  // are labelled from different places.\n  const counts = new Map<string, number>()\n\n  for (const change of changes) {\n    const key = change.globalSlug\n      ? `global:${change.globalSlug}`\n      : `collection:${change.collectionSlug}`\n\n    counts.set(key, (counts.get(key) ?? 0) + 1)\n  }\n\n  // Biggest group first: it is the one that describes the merge. Ties fall back to the\n  // slug so the sentence is stable between renders rather than following Map order.\n  const groups = [...counts.entries()].sort(\n    ([slugA, countA], [slugB, countB]) => countB - countA || slugA.localeCompare(slugB),\n  )\n\n  const named = groups.slice(0, MAX_NAMED_COLLECTIONS).map(([key, count]) => {\n    const [kind, slug] = key.split(':') as ['collection' | 'global', string]\n\n    // A branch holds at most one change per global, so there is no plural form to pick.\n    if (kind === 'global') {\n      const label = getEntityConfig({ globalSlug: slug })?.label\n\n      return `${count} ${getTranslation(label ?? slug, i18n)}`\n    }\n\n    const labels = getEntityConfig({ collectionSlug: slug })?.labels\n    const label = count === 1 ? labels?.singular : labels?.plural\n\n    return `${count} ${getTranslation(label ?? slug, i18n)}`\n  })\n\n  const remainder = groups\n    .slice(MAX_NAMED_COLLECTIONS)\n    .reduce((total, [, count]) => total + count, 0)\n\n  if (remainder) {\n    named.push(t('branching:andMoreChanges', { count: remainder }))\n  }\n\n  // `Intl.ListFormat` rather than joining on \", \" and \"and\": the separator and the\n  // conjunction are both language-specific, and this is a translated sentence.\n  const summary = new Intl.ListFormat(i18n.language, { type: 'conjunction', style: 'long' }).format(\n    named,\n  )\n\n  const operations = showOperations ? summarizeOperations({ changes, t }) : null\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <span className={`${baseClass}__sentence`}>{t('branching:changesTo', { summary })}</span>\n      {operations && <span className={`${baseClass}__operations`}>{operations}</span>}\n    </div>\n  )\n}\n\n/**\n * \"2 Created · 3 Updated\", in the order the operations happen to a document rather than\n * by count — this line is about what kind of merge it is, and a delete matters at any size.\n */\nconst summarizeOperations = ({\n  changes,\n  t,\n}: {\n  changes: SummarizableChange[]\n  t: (key: string) => string\n}): null | string => {\n  const order = ['create', 'update', 'delete'] as const\n\n  const parts = order.reduce<string[]>((acc, operation) => {\n    const count = changes.filter((change) => change.operation === operation).length\n\n    if (count) {\n      acc.push(`${count} ${t(`branching:operation_${operation}`)}`)\n    }\n\n    return acc\n  }, [])\n\n  return parts.length ? parts.join(' · ') : null\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Chip/index.css

@@ -6,7 +6,6 @@
     gap: 0;
     border-radius: var(--button-radius);
     border: var(--stroke-width-small) solid var(--color-border);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);

package/dist/elements/ClipboardAction/clipboardUtilities.d.ts

@@ -1,4 +1,11 @@
-import type { ClipboardCopyActionArgs, ClipboardPasteActionArgs } from './types.js';
+import type { ClipboardCopyActionArgs, ClipboardPasteActionArgs, ClipboardPasteEligibilityArgs } from './types.js';
+/**
+ * Whether the clipboard contents can be pasted into the target field.
+ *
+ * Returns `false` when the clipboard is empty or its schema is incompatible
+ * with the target. Used to disable paste actions when they would fail.
+ */
+export declare function canPasteClipboardData(args: ClipboardPasteEligibilityArgs): boolean;
 /**
  * @note This function doesn't use the Clipboard API, but localStorage. See rationale in #11513
  */

package/dist/elements/ClipboardAction/clipboardUtilities.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"clipboardUtilities.d.ts","sourceRoot":"","sources":["../../../src/elements/ClipboardAction/clipboardUtilities.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,uBAAuB,EACvB,wBAAwB,EAGzB,MAAM,YAAY,CAAA;AAMnB;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,uBAAuB,GAAG,MAAM,GAAG,IAAI,CAc1E;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,IAAI,EAAE,SAAS,EACf,CAAC,EACD,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,MAAM,GAAG,IAAI,CA4B1C"}
+{"version":3,"file":"clipboardUtilities.d.ts","sourceRoot":"","sources":["../../../src/elements/ClipboardAction/clipboardUtilities.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,uBAAuB,EACvB,wBAAwB,EAGxB,6BAA6B,EAC9B,MAAM,YAAY,CAAA;AAyBnB;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,6BAA6B,GAAG,OAAO,CAgBlF;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,uBAAuB,GAAG,MAAM,GAAG,IAAI,CAc1E;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,IAAI,EAAE,SAAS,EACf,CAAC,EACD,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,MAAM,GAAG,IAAI,CAoB1C"}

package/dist/elements/ClipboardAction/clipboardUtilities.js

@@ -1,5 +1,43 @@
 import { isClipboardDataValid } from './isClipboardDataValid.js';
 const localStorageClipboardKey = '_payloadClipboard';
+/**
+ * Reads and parses the clipboard data from localStorage.
+ *
+ * @note This function doesn't use the Clipboard API, but localStorage. See rationale in #11513
+ */
+function readClipboardData() {
+  try {
+    const jsonFromClipboard = localStorage.getItem(localStorageClipboardKey);
+    if (!jsonFromClipboard) {
+      return null;
+    }
+    return JSON.parse(jsonFromClipboard);
+  } catch (_err) {
+    return null;
+  }
+}
+/**
+ * Whether the clipboard contents can be pasted into the target field.
+ *
+ * Returns `false` when the clipboard is empty or its schema is incompatible
+ * with the target. Used to disable paste actions when they would fail.
+ */
+export function canPasteClipboardData(args) {
+  const dataToPaste = readClipboardData();
+  if (!dataToPaste) {
+    return false;
+  }
+  const {
+    path,
+    ...schemaArgs
+  } = args;
+  const dataToValidate = {
+    ...dataToPaste,
+    ...schemaArgs,
+    fieldPath: path
+  };
+  return isClipboardDataValid(dataToValidate);
+}
 /**
  * @note This function doesn't use the Clipboard API, but localStorage. See rationale in #11513
  */
@@ -29,14 +67,8 @@ export function clipboardPaste({
   t,
   ...args
 }) {
-  let dataToPaste;
-  try {
-    const jsonFromClipboard = localStorage.getItem(localStorageClipboardKey);
-    if (!jsonFromClipboard) {
-      return t('error:invalidClipboardData');
-    }
-    dataToPaste = JSON.parse(jsonFromClipboard);
-  } catch (_err) {
+  const dataToPaste = readClipboardData();
+  if (!dataToPaste) {
     return t('error:invalidClipboardData');
   }
   const dataToValidate = {

package/dist/elements/ClipboardAction/clipboardUtilities.js.map

@@ -1 +1 @@
-{"version":3,"file":"clipboardUtilities.js","names":["isClipboardDataValid","localStorageClipboardKey","clipboardCopy","args","getDataToCopy","t","rest","dataToWrite","data","localStorage","setItem","JSON","stringify","_err","clipboardPaste","onPaste","path","fieldPath","dataToPaste","jsonFromClipboard","getItem","parse","dataToValidate"],"sources":["../../../src/elements/ClipboardAction/clipboardUtilities.ts"],"sourcesContent":["import type {\n  ClipboardCopyActionArgs,\n  ClipboardPasteActionArgs,\n  ClipboardPasteActionValidateArgs,\n  ClipboardPasteData,\n} from './types.js'\n\nimport { isClipboardDataValid } from './isClipboardDataValid.js'\n\nconst localStorageClipboardKey = '_payloadClipboard'\n\n/**\n * @note This function doesn't use the Clipboard API, but localStorage. See rationale in #11513\n */\nexport function clipboardCopy(args: ClipboardCopyActionArgs): string | true {\n  const { getDataToCopy, t, ...rest } = args\n\n  const dataToWrite = {\n    data: getDataToCopy(),\n    ...rest,\n  }\n\n  try {\n    localStorage.setItem(localStorageClipboardKey, JSON.stringify(dataToWrite))\n    return true\n  } catch (_err) {\n    return t('error:unableToCopy')\n  }\n}\n\n/**\n * @note This function doesn't use the Clipboard API, but localStorage. See rationale in #11513\n */\nexport function clipboardPaste({\n  onPaste,\n  path: fieldPath,\n  t,\n  ...args\n}: ClipboardPasteActionArgs): string | true {\n  let dataToPaste: ClipboardPasteData\n\n  try {\n    const jsonFromClipboard = localStorage.getItem(localStorageClipboardKey)\n\n    if (!jsonFromClipboard) {\n      return t('error:invalidClipboardData')\n    }\n\n    dataToPaste = JSON.parse(jsonFromClipboard)\n  } catch (_err) {\n    return t('error:invalidClipboardData')\n  }\n\n  const dataToValidate = {\n    ...dataToPaste,\n    ...args,\n    fieldPath,\n  } as ClipboardPasteActionValidateArgs\n\n  if (!isClipboardDataValid(dataToValidate)) {\n    return t('error:invalidClipboardData')\n  }\n\n  onPaste(dataToPaste)\n\n  return true\n}\n"],"mappings":"AAOA,SAASA,oBAAoB,QAAQ;AAErC,MAAMC,wBAAA,GAA2B;AAEjC;;;AAGA,OAAO,SAASC,cAAcC,IAA6B;EACzD,MAAM;IAAEC,aAAa;IAAEC,CAAC;IAAE,GAAGC;EAAA,CAAM,GAAGH,IAAA;EAEtC,MAAMI,WAAA,GAAc;IAClBC,IAAA,EAAMJ,aAAA;IACN,GAAGE;EACL;EAEA,IAAI;IACFG,YAAA,CAAaC,OAAO,CAACT,wBAAA,EAA0BU,IAAA,CAAKC,SAAS,CAACL,WAAA;IAC9D,OAAO;EACT,EAAE,OAAOM,IAAA,EAAM;IACb,OAAOR,CAAA,CAAE;EACX;AACF;AAEA;;;AAGA,OAAO,SAASS,eAAe;EAC7BC,OAAO;EACPC,IAAA,EAAMC,SAAS;EACfZ,CAAC;EACD,GAAGF;AAAA,CACsB;EACzB,IAAIe,WAAA;EAEJ,IAAI;IACF,MAAMC,iBAAA,GAAoBV,YAAA,CAAaW,OAAO,CAACnB,wBAAA;IAE/C,IAAI,CAACkB,iBAAA,EAAmB;MACtB,OAAOd,CAAA,CAAE;IACX;IAEAa,WAAA,GAAcP,IAAA,CAAKU,KAAK,CAACF,iBAAA;EAC3B,EAAE,OAAON,IAAA,EAAM;IACb,OAAOR,CAAA,CAAE;EACX;EAEA,MAAMiB,cAAA,GAAiB;IACrB,GAAGJ,WAAW;IACd,GAAGf,IAAI;IACPc;EACF;EAEA,IAAI,CAACjB,oBAAA,CAAqBsB,cAAA,GAAiB;IACzC,OAAOjB,CAAA,CAAE;EACX;EAEAU,OAAA,CAAQG,WAAA;EAER,OAAO;AACT","ignoreList":[]}
+{"version":3,"file":"clipboardUtilities.js","names":["isClipboardDataValid","localStorageClipboardKey","readClipboardData","jsonFromClipboard","localStorage","getItem","JSON","parse","_err","canPasteClipboardData","args","dataToPaste","path","schemaArgs","dataToValidate","fieldPath","clipboardCopy","getDataToCopy","t","rest","dataToWrite","data","setItem","stringify","clipboardPaste","onPaste"],"sources":["../../../src/elements/ClipboardAction/clipboardUtilities.ts"],"sourcesContent":["import type {\n  ClipboardCopyActionArgs,\n  ClipboardPasteActionArgs,\n  ClipboardPasteActionValidateArgs,\n  ClipboardPasteData,\n  ClipboardPasteEligibilityArgs,\n} from './types.js'\n\nimport { isClipboardDataValid } from './isClipboardDataValid.js'\n\nconst localStorageClipboardKey = '_payloadClipboard'\n\n/**\n * Reads and parses the clipboard data from localStorage.\n *\n * @note This function doesn't use the Clipboard API, but localStorage. See rationale in #11513\n */\nfunction readClipboardData(): ClipboardPasteData | null {\n  try {\n    const jsonFromClipboard = localStorage.getItem(localStorageClipboardKey)\n\n    if (!jsonFromClipboard) {\n      return null\n    }\n\n    return JSON.parse(jsonFromClipboard)\n  } catch (_err) {\n    return null\n  }\n}\n\n/**\n * Whether the clipboard contents can be pasted into the target field.\n *\n * Returns `false` when the clipboard is empty or its schema is incompatible\n * with the target. Used to disable paste actions when they would fail.\n */\nexport function canPasteClipboardData(args: ClipboardPasteEligibilityArgs): boolean {\n  const dataToPaste = readClipboardData()\n\n  if (!dataToPaste) {\n    return false\n  }\n\n  const { path, ...schemaArgs } = args\n\n  const dataToValidate = {\n    ...dataToPaste,\n    ...schemaArgs,\n    fieldPath: path,\n  } as ClipboardPasteActionValidateArgs\n\n  return isClipboardDataValid(dataToValidate)\n}\n\n/**\n * @note This function doesn't use the Clipboard API, but localStorage. See rationale in #11513\n */\nexport function clipboardCopy(args: ClipboardCopyActionArgs): string | true {\n  const { getDataToCopy, t, ...rest } = args\n\n  const dataToWrite = {\n    data: getDataToCopy(),\n    ...rest,\n  }\n\n  try {\n    localStorage.setItem(localStorageClipboardKey, JSON.stringify(dataToWrite))\n    return true\n  } catch (_err) {\n    return t('error:unableToCopy')\n  }\n}\n\n/**\n * @note This function doesn't use the Clipboard API, but localStorage. See rationale in #11513\n */\nexport function clipboardPaste({\n  onPaste,\n  path: fieldPath,\n  t,\n  ...args\n}: ClipboardPasteActionArgs): string | true {\n  const dataToPaste = readClipboardData()\n\n  if (!dataToPaste) {\n    return t('error:invalidClipboardData')\n  }\n\n  const dataToValidate = {\n    ...dataToPaste,\n    ...args,\n    fieldPath,\n  } as ClipboardPasteActionValidateArgs\n\n  if (!isClipboardDataValid(dataToValidate)) {\n    return t('error:invalidClipboardData')\n  }\n\n  onPaste(dataToPaste)\n\n  return true\n}\n"],"mappings":"AAQA,SAASA,oBAAoB,QAAQ;AAErC,MAAMC,wBAAA,GAA2B;AAEjC;;;;;AAKA,SAASC,kBAAA;EACP,IAAI;IACF,MAAMC,iBAAA,GAAoBC,YAAA,CAAaC,OAAO,CAACJ,wBAAA;IAE/C,IAAI,CAACE,iBAAA,EAAmB;MACtB,OAAO;IACT;IAEA,OAAOG,IAAA,CAAKC,KAAK,CAACJ,iBAAA;EACpB,EAAE,OAAOK,IAAA,EAAM;IACb,OAAO;EACT;AACF;AAEA;;;;;;AAMA,OAAO,SAASC,sBAAsBC,IAAmC;EACvE,MAAMC,WAAA,GAAcT,iBAAA;EAEpB,IAAI,CAACS,WAAA,EAAa;IAChB,OAAO;EACT;EAEA,MAAM;IAAEC,IAAI;IAAE,GAAGC;EAAA,CAAY,GAAGH,IAAA;EAEhC,MAAMI,cAAA,GAAiB;IACrB,GAAGH,WAAW;IACd,GAAGE,UAAU;IACbE,SAAA,EAAWH;EACb;EAEA,OAAOZ,oBAAA,CAAqBc,cAAA;AAC9B;AAEA;;;AAGA,OAAO,SAASE,cAAcN,IAA6B;EACzD,MAAM;IAAEO,aAAa;IAAEC,CAAC;IAAE,GAAGC;EAAA,CAAM,GAAGT,IAAA;EAEtC,MAAMU,WAAA,GAAc;IAClBC,IAAA,EAAMJ,aAAA;IACN,GAAGE;EACL;EAEA,IAAI;IACFf,YAAA,CAAakB,OAAO,CAACrB,wBAAA,EAA0BK,IAAA,CAAKiB,SAAS,CAACH,WAAA;IAC9D,OAAO;EACT,EAAE,OAAOZ,IAAA,EAAM;IACb,OAAOU,CAAA,CAAE;EACX;AACF;AAEA;;;AAGA,OAAO,SAASM,eAAe;EAC7BC,OAAO;EACPb,IAAA,EAAMG,SAAS;EACfG,CAAC;EACD,GAAGR;AAAA,CACsB;EACzB,MAAMC,WAAA,GAAcT,iBAAA;EAEpB,IAAI,CAACS,WAAA,EAAa;IAChB,OAAOO,CAAA,CAAE;EACX;EAEA,MAAMJ,cAAA,GAAiB;IACrB,GAAGH,WAAW;IACd,GAAGD,IAAI;IACPK;EACF;EAEA,IAAI,CAACf,oBAAA,CAAqBc,cAAA,GAAiB;IACzC,OAAOI,CAAA,CAAE;EACX;EAEAO,OAAA,CAAQd,WAAA;EAER,OAAO;AACT","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ClipboardAction/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAEzD,OAAO,EAAE,KAAK,EAAE,EAAe,MAAM,OAAO,CAAA;AAG5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAQ9D,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,MAAM,0BAA0B,CAAA;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,SAAS,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,iBAAiB,CAAA;AAErB;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CA8FrC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ClipboardAction/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAEzD,OAAO,EAAE,KAAK,EAAE,EAAe,MAAM,OAAO,CAAA;AAG5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAS9D,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,MAAM,0BAA0B,CAAA;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,SAAS,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,iBAAiB,CAAA;AAErB;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CA0GrC,CAAA"}

package/dist/elements/ClipboardAction/index.js

@@ -9,6 +9,7 @@ import { MoreIcon } from '../../icons/More/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Popup, PopupList } from '../Popup/index.js';
 import { clipboardCopy, clipboardPaste } from './clipboardUtilities.js';
+import { useCanPasteClipboard } from './useCanPasteClipboard.js';
 import './index.css';
 const baseClass = 'clipboard-action';
 /**
@@ -30,6 +31,16 @@ export const ClipboardAction = ({
   const {
     t
   } = useTranslation();
+  const {
+    canPaste,
+    refresh
+  } = useCanPasteClipboard(rest.type === 'array' ? {
+    path,
+    schemaFields: rest.fields
+  } : {
+    path,
+    schemaBlocks: rest.blocks
+  });
   const classes = [`${baseClass}__popup`, className].filter(Boolean).join(' ');
   const handleCopy = useCallback(() => {
     const clipboardResult = clipboardCopy({
@@ -70,6 +81,12 @@ export const ClipboardAction = ({
     className: classes,
     disabled: disabled,
     horizontalAlign: "right",
+    onToggleOpen: active => {
+      if (active) {
+        refresh();
+      }
+    },
+    popupType: "menu",
     render: ({
       close
     }) => /*#__PURE__*/_jsxs(PopupList.MenuItem, {
@@ -86,7 +103,7 @@ export const ClipboardAction = ({
         children: isRow ? t('general:copyRow') : t('general:copyField')
       }), /*#__PURE__*/_jsx(PopupList.Button, {
         className: pasteClassName,
-        disabled: !allowPaste,
+        disabled: !allowPaste || !canPaste,
         icon: /*#__PURE__*/_jsx(ClipboardIcon, {}),
         onClick: () => {
           void handlePaste();

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useCallback","toast","ClipboardIcon","CopyIcon","MoreIcon","useTranslation","Popup","PopupList","clipboardCopy","clipboardPaste","baseClass","ClipboardAction","allowCopy","allowPaste","className","copyClassName","disabled","isRow","onPaste","pasteClassName","path","rest","t","classes","filter","Boolean","join","handleCopy","clipboardResult","error","success","handlePaste","type","schemaFields","fields","schemaBlocks","blocks","_jsx","button","buttonAriaLabel","buttonClassName","caret","horizontalAlign","render","close","_jsxs","MenuItem","Button","icon","size","onClick","verticalAlign"],"sources":["../../../src/elements/ClipboardAction/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormStateWithoutComponents } from 'payload'\n\nimport { type FC, useCallback } from 'react'\nimport { toast } from 'sonner'\n\nimport type { ClipboardCopyData, OnPasteFn } from './types.js'\n\nimport { ClipboardIcon } from '../../icons/Clipboard/index.js'\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { MoreIcon } from '../../icons/More/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport { clipboardCopy, clipboardPaste } from './clipboardUtilities.js'\nimport './index.css'\n\nconst baseClass = 'clipboard-action'\n\ntype Props = {\n  allowCopy?: boolean\n  allowPaste?: boolean\n  className?: string\n  copyClassName?: string\n  disabled?: boolean\n  getDataToCopy: () => FormStateWithoutComponents\n  isRow?: boolean\n  onPaste: OnPasteFn\n  pasteClassName?: string\n} & ClipboardCopyData\n\n/**\n * Menu actions for copying and pasting fields. Currently, this is only used in Arrays and Blocks.\n * @note This component doesn't use the Clipboard API, but localStorage. See rationale in #11513\n */\nexport const ClipboardAction: FC<Props> = ({\n  allowCopy,\n  allowPaste,\n  className,\n  copyClassName,\n  disabled,\n  isRow,\n  onPaste,\n  pasteClassName,\n  path,\n  ...rest\n}) => {\n  const { t } = useTranslation()\n\n  const classes = [`${baseClass}__popup`, className].filter(Boolean).join(' ')\n\n  const handleCopy = useCallback(() => {\n    const clipboardResult = clipboardCopy({\n      path,\n      t,\n      ...rest,\n    })\n\n    if (typeof clipboardResult === 'string') {\n      toast.error(clipboardResult)\n    } else {\n      toast.success(t('general:copied'))\n    }\n  }, [t, rest, path])\n\n  const handlePaste = useCallback(() => {\n    const clipboardResult = clipboardPaste(\n      rest.type === 'array'\n        ? {\n            onPaste,\n            path,\n            schemaFields: rest.fields,\n            t,\n          }\n        : {\n            onPaste,\n            path,\n            schemaBlocks: rest.blocks,\n            t,\n          },\n    )\n\n    if (typeof clipboardResult === 'string') {\n      toast.error(clipboardResult)\n    }\n  }, [onPaste, rest, path, t])\n\n  if (!allowPaste && !allowCopy) {\n    return null\n  }\n\n  return (\n    <Popup\n      button={<MoreIcon />}\n      buttonAriaLabel={t('general:moreOptions')}\n      buttonClassName={`${baseClass}__button`}\n      caret={false}\n      className={classes}\n      disabled={disabled}\n      horizontalAlign=\"right\"\n      render={({ close }) => (\n        <PopupList.MenuItem>\n          <PopupList.Button\n            className={copyClassName}\n            disabled={!allowCopy}\n            icon={<CopyIcon size={24} />}\n            onClick={() => {\n              void handleCopy()\n              close()\n            }}\n          >\n            {isRow ? t('general:copyRow') : t('general:copyField')}\n          </PopupList.Button>\n          <PopupList.Button\n            className={pasteClassName}\n            disabled={!allowPaste}\n            icon={<ClipboardIcon />}\n            onClick={() => {\n              void handlePaste()\n              close()\n            }}\n          >\n            {isRow ? t('general:pasteRow') : t('general:pasteField')}\n          </PopupList.Button>\n        </PopupList.MenuItem>\n      )}\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useCallback","toast","ClipboardIcon","CopyIcon","MoreIcon","useTranslation","Popup","PopupList","clipboardCopy","clipboardPaste","useCanPasteClipboard","baseClass","ClipboardAction","allowCopy","allowPaste","className","copyClassName","disabled","isRow","onPaste","pasteClassName","path","rest","t","canPaste","refresh","type","schemaFields","fields","schemaBlocks","blocks","classes","filter","Boolean","join","handleCopy","clipboardResult","error","success","handlePaste","_jsx","button","buttonAriaLabel","buttonClassName","caret","horizontalAlign","onToggleOpen","active","popupType","render","close","_jsxs","MenuItem","Button","icon","size","onClick","verticalAlign"],"sources":["../../../src/elements/ClipboardAction/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormStateWithoutComponents } from 'payload'\n\nimport { type FC, useCallback } from 'react'\nimport { toast } from 'sonner'\n\nimport type { ClipboardCopyData, OnPasteFn } from './types.js'\n\nimport { ClipboardIcon } from '../../icons/Clipboard/index.js'\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { MoreIcon } from '../../icons/More/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport { clipboardCopy, clipboardPaste } from './clipboardUtilities.js'\nimport { useCanPasteClipboard } from './useCanPasteClipboard.js'\nimport './index.css'\n\nconst baseClass = 'clipboard-action'\n\ntype Props = {\n  allowCopy?: boolean\n  allowPaste?: boolean\n  className?: string\n  copyClassName?: string\n  disabled?: boolean\n  getDataToCopy: () => FormStateWithoutComponents\n  isRow?: boolean\n  onPaste: OnPasteFn\n  pasteClassName?: string\n} & ClipboardCopyData\n\n/**\n * Menu actions for copying and pasting fields. Currently, this is only used in Arrays and Blocks.\n * @note This component doesn't use the Clipboard API, but localStorage. See rationale in #11513\n */\nexport const ClipboardAction: FC<Props> = ({\n  allowCopy,\n  allowPaste,\n  className,\n  copyClassName,\n  disabled,\n  isRow,\n  onPaste,\n  pasteClassName,\n  path,\n  ...rest\n}) => {\n  const { t } = useTranslation()\n\n  const { canPaste, refresh } = useCanPasteClipboard(\n    rest.type === 'array'\n      ? { path, schemaFields: rest.fields }\n      : { path, schemaBlocks: rest.blocks },\n  )\n\n  const classes = [`${baseClass}__popup`, className].filter(Boolean).join(' ')\n\n  const handleCopy = useCallback(() => {\n    const clipboardResult = clipboardCopy({\n      path,\n      t,\n      ...rest,\n    })\n\n    if (typeof clipboardResult === 'string') {\n      toast.error(clipboardResult)\n    } else {\n      toast.success(t('general:copied'))\n    }\n  }, [t, rest, path])\n\n  const handlePaste = useCallback(() => {\n    const clipboardResult = clipboardPaste(\n      rest.type === 'array'\n        ? {\n            onPaste,\n            path,\n            schemaFields: rest.fields,\n            t,\n          }\n        : {\n            onPaste,\n            path,\n            schemaBlocks: rest.blocks,\n            t,\n          },\n    )\n\n    if (typeof clipboardResult === 'string') {\n      toast.error(clipboardResult)\n    }\n  }, [onPaste, rest, path, t])\n\n  if (!allowPaste && !allowCopy) {\n    return null\n  }\n\n  return (\n    <Popup\n      button={<MoreIcon />}\n      buttonAriaLabel={t('general:moreOptions')}\n      buttonClassName={`${baseClass}__button`}\n      caret={false}\n      className={classes}\n      disabled={disabled}\n      horizontalAlign=\"right\"\n      onToggleOpen={(active) => {\n        if (active) {\n          refresh()\n        }\n      }}\n      popupType=\"menu\"\n      render={({ close }) => (\n        <PopupList.MenuItem>\n          <PopupList.Button\n            className={copyClassName}\n            disabled={!allowCopy}\n            icon={<CopyIcon size={24} />}\n            onClick={() => {\n              void handleCopy()\n              close()\n            }}\n          >\n            {isRow ? t('general:copyRow') : t('general:copyField')}\n          </PopupList.Button>\n          <PopupList.Button\n            className={pasteClassName}\n            disabled={!allowPaste || !canPaste}\n            icon={<ClipboardIcon />}\n            onClick={() => {\n              void handlePaste()\n              close()\n            }}\n          >\n            {isRow ? t('general:pasteRow') : t('general:pasteField')}\n          </PopupList.Button>\n        </PopupList.MenuItem>\n      )}\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ClipboardAction/mergeFormStateFromClipboard.d.ts

@@ -11,4 +11,14 @@ export declare function mergeFormStateFromClipboard({ dataFromClipboard: clipboa
     path: string;
     rowIndex?: number;
 }): FormState;
+/**
+ * Inserts a new row at `rowIndex`, populated with clipboard data, without disturbing
+ * any existing rows. Existing rows at and after `rowIndex` are shifted down by one.
+ */
+export declare function insertRowFromClipboard({ dataFromClipboard: clipboardData, formState, path, rowIndex, }: {
+    dataFromClipboard: ClipboardPasteData;
+    formState: FormState;
+    path: string;
+    rowIndex: number;
+}): FormState;
 //# sourceMappingURL=mergeFormStateFromClipboard.d.ts.map

package/dist/elements/ClipboardAction/mergeFormStateFromClipboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mergeFormStateFromClipboard.d.ts","sourceRoot":"","sources":["../../../src/elements/ClipboardAction/mergeFormStateFromClipboard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAIpD,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,SAAS,EAAE,SAAS,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,8BAyBA;AAED,wBAAgB,2BAA2B,CAAC,EAC1C,iBAAiB,EAAE,aAAa,EAChC,SAAS,EACT,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,iBAAiB,EAAE,kBAAkB,CAAA;IACrC,SAAS,EAAE,SAAS,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,aA0IA"}
+{"version":3,"file":"mergeFormStateFromClipboard.d.ts","sourceRoot":"","sources":["../../../src/elements/ClipboardAction/mergeFormStateFromClipboard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAO,MAAM,SAAS,CAAA;AAIzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAcpD,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,SAAS,EAAE,SAAS,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,8BAyBA;AAED,wBAAgB,2BAA2B,CAAC,EAC1C,iBAAiB,EAAE,aAAa,EAChC,SAAS,EACT,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,iBAAiB,EAAE,kBAAkB,CAAA;IACrC,SAAS,EAAE,SAAS,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,aA0IA;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,iBAAiB,EAAE,aAAa,EAChC,SAAS,EACT,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,iBAAiB,EAAE,kBAAkB,CAAA;IACrC,SAAS,EAAE,SAAS,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;CACjB,GAAG,SAAS,CAqCZ"}