Puck 0.17: React 19 support

This is our final feature release of the year! We’re delaying the new drag-and-drop engine release until January while we iron out the last few kinks. Happy holidays, and thanks for being a wonderful community 🎄

TLDR

• React 19 support: We’ve made React 19 support official by adding it to the supported list of peer dependencies.
• Next.js 15: Upgraded the next recipe to use Next 15.1 and React 19 by default.
• New external field APIs: External fields now support react elements as rows, and a custom footer, enabling much more customization. Thanks to @camhammel for these improvements!
• Duplicate array items: Added a new action to the array field so you can easily duplicate array items. Thank you @siarhei-zharnasek 🙏
• resolveFields enhancement: You can now access the DropZone parent data when using the resolveFields API, enabling you to customize the fields based on the container’s type or props.

Highlights

React 19 support

We’ve made React 19 support official by adding it to the supported list of peer dependencies. It turns out that earlier versions of Puck already play well with React 19, you don’t need to upgrade Puck to use React 19 if you don’t want to.

Next 15

The official next recipe now uses Next 15.1 and React 19 by default. If you’re using the recipe and want to upgrade, make sure you also upgrade to React 19 as required by Next 15 when using the App Router. See the official Next.js upgrade guide for more info.

New external field APIs

The mapRow API now supports react elements, making it possible to add richer content to your external field table:

{
  type: "external",
  fetchList: async () => {
    return [
      { title: "Hello, world", imgUrl: "https://example.com/img.jpg" },
      { title: "Goodbye, world", imgUrl: "https://example.com/img.jpg" },
    ];
  },
  mapRow: (item) => ({ ...item, imgUrl: <img src={item.imgUrl} /> }),
}

And the new renderFooter API enables you to customise the footer of your external field modal.

{
  type: "external",
  fetchList: async () => {
    return [
      { title: "Hello, world" },
      { title: "Goodbye, world" },
    ];
  },
  renderFooter: ({ items }) => (
    <b>Custom footer with {items.length} results</b>
  ),
}

Duplicate array items

A new action in the array field allows you to easily duplicate array items.

Access parent data in resolveFields

The new parent param on the resolveFields API enables you to configure your fields based on the props of the parent item when using DropZones.

Here’s an example that shows a field called flex when the parent component has a display prop of "flex":

const config = {
  components: {
    MyComponent: {
      resolveFields: (data, { fields, parent }) => {
        if (parent.props.display === "flex") {
          return {
            ...fields,
            flex: {
              type: "radio",
              options: [
                { label: "Grow", value: "grow" },
                { label: "Shrink", value: "shrink" },
              ],
            },
          };
        }
 
        return fields;
      },
      // ...
    },
  },
};

Full changelog

Features

• add duplicate action to array field (229cbdd)
• add renderFooter API to external field (ccec96e)
• allow react elements in external field mapRow (2f781de)
• enable resolveFields to access parent data (196227b)
• list React 19 as supported peer dependency (85e8cc1)
• track focused field in app state (91bc97a)
• upgrade next recipe to v15.1 (8ef51c5)
• use React 19 in next recipe (6b3d97f)

Bug Fixes

• always run field resolvers when item change (159d819)
• always update fields when resolveData runs (39dd619)
• ensure radio fields are functional inside arrays (7736294)
• prevent field name collision causing hook render mismatch (b51954a)
• prevent flicker when using resolveData with arrays (1be9b88)
• provide better error when usePuck used inappropriately (9991c07)
• remove leading zeros in Number field (5ba9399)
• respect original value type in radio and select fields (00ccd1d and 6e5864a)

New Contributors

• @ruofee made their first contribution in https://github.com/puckeditor/puck/pull/693
• @DevOfManyThings made their first contribution in https://github.com/puckeditor/puck/pull/698
• @benlife5 made their first contribution in https://github.com/puckeditor/puck/pull/695
• @camhammel made their first contribution in https://github.com/puckeditor/puck/pull/682
• @siarhei-zharnasek made their first contribution in https://github.com/puckeditor/puck/pull/676
• @antonva made their first contribution in https://github.com/puckeditor/puck/pull/707
• @jswhisperer made their first contribution in https://github.com/puckeditor/puck/pull/722

See GitHub for more.