v0.17.0

puckeditor/puckv0.17.0Dec 18, 2024by chrisvxd

AI Summary

A major feature release adding official React 19 support and Next.js 15, alongside enhanced field APIs for external fields and arrays, and improved data resolution capabilities.

Key Highlights

  • Official React 19 support added to peer dependencies
  • Next.js 15.1 upgrade for the Next recipe
  • New external field APIs (mapRow, renderFooter) for deeper customization
  • Duplicate action added to array fields
  • resolveFields API now accepts parent data for dynamic configuration

New Features

  • React 19 support
  • Next.js 15 upgrade
  • External field mapRow and renderFooter APIs
  • Duplicate array items feature
  • resolveFields parent parameter

Full Release Notes

Puck v0.17.0 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](https://github.com/measuredco/puck/pull/598) release until January while we iron out the last few kinks. Happy holidays, and thanks for being a wonderful community 🎄_ 

## TLDR

<!--Provide bullet points summarising up to 5 key features-->

- **React 19 support**: We've made [React 19](https://react.dev/blog/2024/12/05/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](https://nextjs.org/blog/next-15) and React 19 by default.
- **[New external field APIs](https://puckeditor.com/docs/api-reference/fields/external)**: 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](https://puckeditor.com/docs/api-reference/fields/array)**: Added a new action to the array field so you can easily duplicate array items. Thank you @siarhei-zharnasek 🙏
- **[resolveFields enhancement](https://puckeditor.com//docs/api-reference/configuration/component-config#paramsparent)**: 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](https://react.dev/blog/2024/12/05/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](https://github.com/measuredco/puck/tree/main/recipes/next) now uses  [Next 15.1](https://nextjs.org/blog/next-15) 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](https://nextjs.org/docs/app/building-your-application/upgrading/version-15) for more info.

### New external field APIs

The [`mapRow` API](https://puckeditor.com/docs/api-reference/fields/external#maprowitem) now supports react elements, making it possible to add richer content to your external field table:

```tsx
{
  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](https://puckeditor.com/v/canary/docs/api-reference/fields/external#renderfooterprops) enables you to customise the footer of your external field modal.

```tsx
{
  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.

<img src="https://res.cloudinary.com/die3nptcg/image/upload/v1752477957/396982092-a69a608d-fecf-42c1-ac4f-87ca26c09cc4_kvdrev.gif" width="512" alt="Cursor clicking the array item duplicate icon button, and the item duplicating, on loop" />

### Access parent data in resolveFields

The new [`parent` param](https://puckeditor.com/docs/api-reference/configuration/component-config#paramsparent) 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"`:

```tsx
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](https://github.com/measuredco/puck/commit/229cbddb7eed513c8ac9a2e36e3af3b53ff28d7e))
* add renderFooter API to external field ([ccec96e](https://github.com/measuredco/puck/commit/ccec96e5ddf831fcd89a2af335449ad4cff1ea81))
* allow react elements in external field mapRow ([2f781de](https://github.com/measuredco/puck/commit/2f781de0a910a193f0a4bae795725119476f8e94))
* enable resolveFields to access parent data ([196227b](https://github.com/measuredco/puck/commit/196227bdf33ee678ce47b68fc624804448008cc1))
* list React 19 as supported peer dependency ([85e8cc1](https://github.com/measuredco/puck/commit/85e8cc1a6fcd29d9dd04e5e53c6e7f9a85f99959))
* track focused field in app state ([91bc97a](https://github.com/measuredco/puck/commit/91bc97a760d1750d65dedbbffee962a6c6ee8d60))
* upgrade next recipe to v15.1 ([8ef51c5](https://github.com/measuredco/puck/commit/8ef51c54e386528fca69be1e54b8a3ce69651bd0))
* use React 19 in next recipe ([6b3d97f](https://github.com/measuredco/puck/commit/6b3d97f9f3d0cc2283178ba6f4bda3b23f1f718a))


### Bug Fixes

* always run field resolvers when item change ([159d819](https://github.com/measuredco/puck/commit/159d819e0263f4e91bff8a83adfa404601850aa5))
* always update fields when resolveData runs ([39dd619](https://github.com/measuredco/puck/commit/39dd61934c15a452c59f26b0c6721802df0c1889))
* ensure radio fields are functional inside arrays ([7736294](https://github.com/measuredco/puck/commit/7736294d201f432799c0854be14b35edbad156d8))
* prevent field name collision causing hook render mismatch ([b51954a](https://github.com/measuredco/puck/commit/b51954a19875e1f3c87e0cdc03c10173e9786820))
* prevent flicker when using resolveData with arrays ([1be9b88](https://github.com/measuredco/puck/commit/1be9b886325a1515434759011e9e3514c583bd2e))
* provide better error when usePuck used inappropriately ([9991c07](https://github.com/measuredco/puck/commit/9991c079b2b7d8f18ecb42efc3ebc32e5d679b88))
* remove leading zeros in Number field ([5ba9399](https://github.com/measuredco/puck/commit/5ba9399e6546919ae744d7a4986b59faa1cd7aef))
* respect original value type in radio and select fields ([00ccd1d](https://github.com/measuredco/puck/commit/00ccd1df6513d2420c87cd136577e1df1ac9a9a3) and [6e5864a](https://github.com/measuredco/puck/commit/6e5864a5df01a52fb4e6b23132d68d4496f1e64e))

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

**Full Changelog**: https://github.com/measuredco/puck/compare/v0.16.2...v0.17.0