release: v0.17.0

[chrisvxd]

Bugs noticed during prep:

• renderFooter docs line highlight incorrect
• renderFooter interactive demo not working
• duplicate items for radio fix in the changelog - delete one
• Next 15 sets minimum React as 19, which Puck doesn't yet use internally, causing the dependencies for the next package to be out of sync. Options are 1) drop Next 15 from this release, 2) upgrade React in Next 15 handlebars deps only or 3) finish React 19 upgrade.
• Next recipe README refers to Next 13

Puck v0.17.0 - React 19 support and field improvements

Puck v0.17.0 introduces adds support for React 19, improves various field APIs and squashes some bugs.

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.
• Duplicate array items: Added a new action to the array field so you can easily duplicate array items.
• 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)

Contributors

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
puck-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 18, 2024 3:16pm
puck-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 18, 2024 3:16pm