v0.11.0

# v0.11.0 - Categories and dynamic props

## Summary

This release introduces new APIs for **categories** and **dynamic prop resolution**, and updates the Next.js recipe to render static pages.

### Categories API

The **categories** API enables the user to group their components in the left side bar.

Users can configure categories using the new `categories` configuration on the Puck config. They can also override this behaviour by using the `renderComponentList` API, accessible via the Puck root or plugins.

```tsx
  categories: {
    layout: {
      components: ["Columns", "Flex", "VerticalSpace"],
    },
    typography: {
      components: ["Heading", "Text"],
    },
    interactive: {
      title: "Actions",
      components: ["ButtonGroup"],
    },
  },
```

![](https://res.cloudinary.com/die3nptcg/image/upload/v1752492501/277460682-6475fbcd-5906-49e2-832b-fa6f62409ef2_yy82kf.png)
### Dynamic prop resolution

Dynamic prop resolution is an extremely powerful feature that enables developers to dynamically change props after the user has changed them. Full documentation available in the README.

This can be paired with external fields to query data from a third-party API, and also allows you to set fields as read-only.

```tsx
const config = {
  components: {
    HeadingBlock: {
      fields: {
        heading: {
          type: "text",
        },
        title: {
          type: "text",
        },
      },
      resolveData: async (props) => {
        return {
          props: {
            title: props.heading, // map `heading` to `title`
          },
          readOnly: {
            title: true, // make `title` read-only
          },
        };
      },
      render: ({ title }) => {
        return <h1>{title}</h1>;
      },
    },
  },
};
```

### Next.js recipe now supports static rendering
The default Next.js recipe has been updated to support static rendering, enabling Puck to generate static pages.

If you’ve already generated from this recipe and want to enable static rendering, we recommend manually updating your code to follow the [latest best practices](https://github.com/measuredco/puck/tree/main/recipes/next).

## Deprecations

This release includes various backwards-compatible deprecations that will be breaking in a future release.

### Deprecate use of props under `root` in Puck data in favour of `root.props` ([7593584](https://github.com/measuredco/puck/commit/759358446e01b4320e55156dbe849d264e4e7edf))

This affects all existing data payloads that make use of `root`. This allows us to align the behaviour of `root` with other components, including the new `resolveData` API.

<details>
<summary>Migration</summary>

#### Before

```json
{
  "root": {
    "title": "Hello, world"
  }
}
```
#### After

```json
{
  "root": {
    "props": {
      "title": "Hello, world"
    },
  }
}
```

</details>

_We may consider making this permanently backwards compatible via the [transformers proposal](https://github.com/measuredco/puck/issues/41)._

### Deprecate `adaptor` in favour of new external field APIs ([7f13efc](https://github.com/measuredco/puck/commit/7f13efc769ddc77fc7931a8191796f017354e89a))

The `adaptor` API on `external` field types has been removed in favour of keeping them at the root of the field configuration.

<details>
<summary>Migration</summary>

#### Before

```tsx
{
  myField: {
    type: "external",
    adaptor: {
      name: "External Source",
      fetchList: () => {}
    }
  }
}
```

#### After

```tsx
{
  myField: {
    type: "external",
    placeholder: "Select from External Source",
    fetchList: () => {}
  }
}
```

</details>

### Deprecate magic `_data` API in favour of `resolveData` ([4ee31e7](https://github.com/measuredco/puck/commit/4ee31e7c0d93578976b2b655e0c56477571f8341))

The magic `_data` field name previously allowed you to spread the result of your adaptor call across your object. This has been replaced in favour of `resolveData`.

<details>
<summary>Migration</summary>

#### Before

```tsx
{
  fields: {
    _data: {
      type: "external",
      adaptor: {
        name: "External Source",
        fetchList: () => {
          return [{ title: "Hello, world" }];
        },
      },
    },
    title: {
      type: "text",
    },
  },
};
```
#### After

```tsx
{
  fields: {
    data: {
      type: "external",
      // Also note adaptor API change
      placeholder: "Load from external Source",
      fetchList: () => {
        return [{ title: "Hello, world" }];
      },
    },
    title: {
      type: "text",
    },
  },
  resolveData: ({ props }) => ({ props: { ...props, ...props.data } }),
};
```

</details>

## Features

* add categories API for grouping components in side bar ([594cc76](https://github.com/measuredco/puck/commit/594cc76c763a7d2ce06cd78f34a4683c0fa89f8e))
* add read-only states to all field types ([746d896](https://github.com/measuredco/puck/commit/746d896996f01d086d557f2a2918f4e76e3f5b35))
* add icon to external fields ([a3a018b](https://github.com/measuredco/puck/commit/a3a018bb1876fd4b831676e8ff848052ec7ba527))
* add loading state to external field modal ([5b4fc92](https://github.com/measuredco/puck/commit/5b4fc92f96caf83148fa335321dad3a5f1a65789))
* add lock icon when field is read-only ([a051000](https://github.com/measuredco/puck/commit/a05100016fed1e368be333f2707087b152fb4c0e))
* add mapProp API to external fields ([86c4979](https://github.com/measuredco/puck/commit/86c49795ac1d198836242772ec01bd755ee699c8))
* add renderComponentList API ([ec985e3](https://github.com/measuredco/puck/commit/ec985e3d28a4915f8fb2816b9599060d20bbf621))
* add resolveData API for modifying props dynamically ([c1181ad](https://github.com/measuredco/puck/commit/c1181ad9b1de6cc036cfedebcc3e57334ef62196))
* deprecate adaptors in favour of new external field APIs ([7f13efc](https://github.com/measuredco/puck/commit/7f13efc769ddc77fc7931a8191796f017354e89a))
* deprecate magic adaptor _data behaviour in favour of resolveData API ([4ee31e7](https://github.com/measuredco/puck/commit/4ee31e7c0d93578976b2b655e0c56477571f8341))
* deprecate props under root in favour of `root.props` ([7593584](https://github.com/measuredco/puck/commit/759358446e01b4320e55156dbe849d264e4e7edf))
* make external field more consistent with other fields ([5bfbc5b](https://github.com/measuredco/puck/commit/5bfbc5bf71b0af72e97e24b5828ad7009836e51e))
* update next recipe to render to static ([a333857](https://github.com/measuredco/puck/commit/a33385783022179e12ef3f732cb4e2e387985030))


## Bug Fixes

* don't flicker root DropZone when dragging ([358435c](https://github.com/measuredco/puck/commit/358435c36a216e6749be73599ab631ffdd8069c8))
* ensure array fields can render if value is undefined ([47ab3c9](https://github.com/measuredco/puck/commit/47ab3c971e4aafec443e8b4d73e7c921dec38ac6))
* isolate external field modal from high z-indexes ([fdf97c7](https://github.com/measuredco/puck/commit/fdf97c7f6da6035447e9b7deec9019217875c4ef))
* make Field types required based on type ([daf36ac](https://github.com/measuredco/puck/commit/daf36ac8864dc1b0f324c3e08294f9d62568acf2))
* prevent global style pollution in external fields ([429731d](https://github.com/measuredco/puck/commit/429731dbb77de2d8ca1c4a88832c73294a9b141c))
* prevent long header titles from rendering over actions ([4613df4](https://github.com/measuredco/puck/commit/4613df47fdde9ac796419f02a2d9f649892b3d35))
* use correct heading component for external inputs ([462266d](https://github.com/measuredco/puck/commit/462266d069b04a3de09684af4b816e1d1dac46dc))

## Performance Improvements

* cache data between fetchList calls in external fields ([04b7322](https://github.com/measuredco/puck/commit/04b7322d5fa5a5506b853c3dcde7a0b47d5b21bc))
* improve render performance of fields ([d92de7f](https://github.com/measuredco/puck/commit/d92de7fe6eaf081deff139b010e4741d07ba6114))

## New Contributors

* @sagarchoudhary96 made their first contribution in https://github.com/measuredco/puck/pull/180

**Full Changelog**: https://github.com/measuredco/puck/compare/v0.10.0...v0.11.0