Distributive Conditional Types in Mapped Types

[huanglei1991]

Description

Distributive Conditional Types in Mapped Types cause incorrect type evaluation for union UserField

When defining a mapped type (like Fields) with a conditional check on a generic type parameter (like UserField), if UserField is a union type, TypeScript's distributive behavior causes the entire mapped type to become a union of objects (Object<A> | Object<B>) instead of a single object where each property can be any type from the union. This prevents mixing different custom fields within the same configuration object.

Environment

• Puck version: [Your Version, e.g., 0.21.0]
• TypeScript version: [e.g., 5.0+]
• Additional environment info: Occurs in any environment using TypeScript for component configuration.

Steps to reproduce

1. Define a Fields type with a naked conditional check on UserField:

type ReactElement = any;

export type DefaultComponentProps = { [key: string]: any };

export type Metadata = { [key: string]: any };
export interface FieldMetadata extends Metadata {}

export interface BaseField {
  label?: string;
  labelIcon?: ReactElement;
  metadata?: FieldMetadata;
  visible?: boolean;
}

export interface TextField extends BaseField {
  type: "text";
  placeholder?: string;
  contentEditable?: boolean;
}

export interface NumberField extends BaseField {
  type: "number";
  placeholder?: string;
  min?: number;
  max?: number;
  step?: number;
}

export type Field<ValueType = any, UserField extends {} = {}> =
  | TextField
  | NumberField
  | ObjectField<ValueType, UserField>


export type Fields<
  ComponentProps extends DefaultComponentProps = DefaultComponentProps,
  UserField extends {} = {}
> = {
  [PropName in keyof Omit<ComponentProps, "editMode">]: UserField extends {
    type: PropertyKey;
  }
    ? Field<ComponentProps[PropName], UserField> | UserField
    : Field<ComponentProps[PropName]>;
};


export interface ObjectField<
  Props extends any = { [key: string]: any },
  UserField extends {} = {}
> extends BaseField {
  type: "object";
  objectFields: {
    [SubPropName in keyof Props]: UserField extends { type: PropertyKey }
      ? Field<Props[SubPropName]> | UserField
      : Field<Props[SubPropName]>;
  };
}



interface Props {
  name: string;
  number: number;
  ob: {
    user: string;
    color: string;
    name: string;
  };
}

interface ColorField extends BaseField {
  type: "color";
}
interface UserField extends BaseField {
  type: "user";
}

type MyUserField = ColorField | UserField;

const fields: Fields<Props, MyUserField> = {
  name: {
    type: "user",
  },
  number: {
    type: "color",
  },
  ob: {
    type: "object",
    // error
    objectFields: {
      name: {
        type: "text",
      },
      user: {
        type: "user",
      },
      color: {
        type: "color",
      },
    },
  },
};

What happens

TypeScript throws an error because it expects the object to either be Fields<ColorField> or Fields<CustomField>, but not a mixture of both.
Error: Type '{ prop1: ...; prop2: ...; }' is not assignable to type 'Fields<ColorField> | Fields<CustomField>'.

What I expect to happen

The Fields type should resolve to a single object where each property can independently be any valid field defined in the UserField union.

Suggested Solution

Wrap the generic type parameter in square brackets [] to disable distribution:

export type Fields<
  ComponentProps extends DefaultComponentProps = DefaultComponentProps,
  UserField extends {} = {}
> = {
  [PropName in keyof Omit<ComponentProps, "editMode">]: [UserField] extends [{
    type: PropertyKey;
  }]
    ? Field<ComponentProps[PropName], UserField> | UserField
    : Field<ComponentProps[PropName]>;
};
export interface ObjectField<
  Props extends any = { [key: string]: any },
  UserField extends {} = {}
> extends BaseField {
  type: "object";
  objectFields: {
    [SubPropName in keyof Props]: [UserField] extends [{ type: PropertyKey }]
      ? Field<Props[SubPropName]> | UserField
      : Field<Props[SubPropName]>;
  };
}

---

[huanglei1991]

@FedericoBonel I’ve also found another type error related to custom field types, which can be reproduced when multiple custom field types are used together in the same object.

[FedericoBonel]

Hey @huanglei1991!

You could achieve this a follows, unless I don't fully get what you're trying to do:

import type { Fields } from "@puckeditor/core";

// Define a union for your fields
type MyUserField = { type: "color" } | { type: "gps" };

// Attempt to mix fields
const test: Fields<{ prop1: string, prop2: string }, MyUserField> = {
  prop1: { type: "color" },
  prop2: { type: "gps" }
};

Does that make sense for your use case?

[huanglei1991]

Hey @huanglei1991!

You could achieve this a follows, unless I don't fully get what you're trying to do:

import type { Fields } from "@puckeditor/core";

// Define a union for your fields
type MyUserField = { type: "color" } | { type: "gps" };

// Attempt to mix fields
const test: Fields<{ prop1: string, prop2: string }, MyUserField> = {
prop1: { type: "color" },
prop2: { type: "gps" }
};
Does that make sense for your use case?

I’ve reorganized the question. The summary generated by AI is a bit inaccurate.

[huanglei1991]

@FedericoBonel

problematic types

the types I’ve fixed

[FedericoBonel]

Hey @huanglei1991,

Thanks for mentioning the fix.

I think I'm having a hard time understanding the issue on the Puck side, because you're showing the entire types definition from scratch and applying a fix, instead of specifying which types you're having trouble with from the codebase, and then showing the fix.

So, just to make sure I understand the original issue: the problem is that if you use user field types (through overrides), typing your field definitions causes object fields to lose the fields you've defined, right?

So this:

import type { Fields } from "@puckeditor/core";

// Define a union for your fields
type MyUserField = { type: "color" } | { type: "gps" };

// Attempt to mix fields
const test: Fields<{ object: { customField: string } }, MyUserField> = {
  object: {
    type: "object",
    objectFields: { customField: { type: "color" } } // Throws a type error
  }
};

On your end, throws an error, correct?

That I can't reproduce. In my case, the top-level object field correctly recognizes the user fields ("color", "gps").

That said, if I nest the user fields one level deeper, then they aren't typed correctly and I do get an error. But this seems to be the same issue we have in #1482:

// Define a union for your fields
type MyUserField = { type: "color" } | { type: "gps" };

// Attempt to mix fields
const test: Fields<
  { object: { customField: string; nested: { nestedCustom: string } } },
  MyUserField
> = {
  object: {
    type: "object",
    objectFields: {
      customField: { type: "color" }, // Works
      nested: { type: "object", objectFields: { nestedCustom: { type: "color" } } }, // Throws an error
    },
  },
};

[huanglei1991]

import type { Fields } from "@puckeditor/core";

// Define a union for your fields
type MyUserField = { type: "color" } | { type: "gps" };

// Attempt to mix fields
const test1: Fields<{ object: { customField: string, customField2: string } }, MyUserField> = {
  object: {
    type: "object",
    objectFields: {
      customField: { type: "color" },
      customField2: { type: "color" } 
    } 
  }
};

const test2: Fields<{ object: { customField: string, customField2: string } }, MyUserField> = {
  object: {
    type: "object",
    objectFields: {
      customField: { type: "color" },
      customField2: { type: "gps" } // Throws a type error
    } 
  }
};

Playground
@FedericoBonel

[FedericoBonel]

Hey @huanglei1991! Thanks for the reproduction, I can now reproduce the issue.

Basically, whenever you use more than one user field type, it breaks because it only infers one as valid and treats the rest as custom fields.

I'll mark this as ready.