feat!: More label components and text display in modal

packages/builders/__tests__/components/selectMenu.test.ts

@@ -23,6 +23,7 @@ const selectMenuDataWithoutOptions = {
 	min_values: 1,
 	disabled: true,
 	placeholder: 'test',
+	required: false,
 } as const;
 
 const selectMenuData: APISelectMenuComponent = {

packages/builders/__tests__/interactions/modal.test.ts

@@ -1,6 +1,6 @@
 import { ComponentType, TextInputStyle, type APIModalInteractionResponseCallbackData } from 'discord-api-types/v10';
 import { describe, test, expect } from 'vitest';
-import { ModalBuilder, TextInputBuilder, LabelBuilder } from '../../src/index.js';
+import { ModalBuilder, TextInputBuilder, LabelBuilder, TextDisplayBuilder } from '../../src/index.js';
 
 const modal = () => new ModalBuilder();
 
@@ -9,19 +9,27 @@ const label = () =>
 		.setLabel('label')
 		.setTextInputComponent(new TextInputBuilder().setCustomId('text').setStyle(TextInputStyle.Short));
 
+const textDisplay = () => new TextDisplayBuilder().setContent('text');
+
 describe('Modals', () => {
 	test('GIVEN valid fields THEN builder does not throw', () => {
 		expect(() =>
-			modal().setTitle('test').setCustomId('foobar').setLabelComponents(label()).toJSON(),
+			modal().setTitle('test').setCustomId('foobar').addLabelComponents(label()).toJSON(),
+		).not.toThrowError();
+
+		expect(() =>
+			modal().setTitle('test').setCustomId('foobar').addLabelComponents(label()).toJSON(),
 		).not.toThrowError();
+
 		expect(() =>
-			modal().setTitle('test').setCustomId('foobar').setLabelComponents(label()).toJSON(),
+			modal().setTitle('test').setCustomId('foobar').addTextDisplayComponents(textDisplay()).toJSON(),
 		).not.toThrowError();
 	});
 
 	test('GIVEN invalid fields THEN builder does throw', () => {
 		expect(() => modal().setTitle('test').setCustomId('foobar').toJSON()).toThrowError();
-		// @ts-expect-error: CustomId is invalid
+
+		// @ts-expect-error: Custom id is invalid
 		expect(() => modal().setTitle('test').setCustomId(42).toJSON()).toThrowError();
 	});
 
@@ -42,14 +50,8 @@ describe('Modals', () => {
 					},
 				},
 				{
-					type: ComponentType.Label,
-					label: 'label',
-					description: 'description',
-					component: {
-						type: ComponentType.TextInput,
-						style: TextInputStyle.Paragraph,
-						custom_id: 'custom id',
-					},
+					type: ComponentType.TextDisplay,
+					content: 'yooooooooo',
 				},
 			],
 		} satisfies APIModalInteractionResponseCallbackData;
@@ -60,19 +62,14 @@ describe('Modals', () => {
 			modal()
 				.setTitle(modalData.title)
 				.setCustomId('custom id')
-				.setLabelComponents(
-					new LabelBuilder()
-						.setId(33)
-						.setLabel('label')
-						.setDescription('description')
-						.setTextInputComponent(new TextInputBuilder().setCustomId('custom id').setStyle(TextInputStyle.Paragraph)),
-				)
 				.addLabelComponents(
 					new LabelBuilder()
+						.setId(33)
 						.setLabel('label')
 						.setDescription('description')
 						.setTextInputComponent(new TextInputBuilder().setCustomId('custom id').setStyle(TextInputStyle.Paragraph)),
 				)
+				.addTextDisplayComponents((textDisplay) => textDisplay.setContent('yooooooooo'))
 				.toJSON(),
 		).toEqual(modalData);
 	});

packages/builders/src/components/Components.ts

@@ -89,6 +89,11 @@ export type ModalActionRowComponentBuilder = TextInputBuilder;
  */
 export type AnyActionRowComponentBuilder = MessageActionRowComponentBuilder | ModalActionRowComponentBuilder;
 
+/**
+ * Any modal component builder.
+ */
+export type AnyModalComponentBuilder = LabelBuilder | TextDisplayBuilder;
+
 /**
  * Components here are mapped to their respective builder.
  */

packages/builders/src/components/label/Assertions.ts

@@ -1,11 +1,24 @@
 import { ComponentType } from 'discord-api-types/v10';
 import { z } from 'zod';
-import { selectMenuStringPredicate } from '../Assertions';
+import {
+	selectMenuChannelPredicate,
+	selectMenuMentionablePredicate,
+	selectMenuRolePredicate,
+	selectMenuStringPredicate,
+	selectMenuUserPredicate,
+} from '../Assertions';
 import { textInputPredicate } from '../textInput/Assertions';
 
 export const labelPredicate = z.object({
 	type: z.literal(ComponentType.Label),
 	label: z.string().min(1).max(45),
 	description: z.string().min(1).max(100).optional(),
-	component: z.union([selectMenuStringPredicate, textInputPredicate]),
+	component: z.union([
+		selectMenuStringPredicate,
+		textInputPredicate,
+		selectMenuUserPredicate,
+		selectMenuRolePredicate,
+		selectMenuMentionablePredicate,
+		selectMenuChannelPredicate,
+	]),
 });

packages/builders/src/components/label/Label.ts

@@ -1,15 +1,33 @@
-import type { APILabelComponent, APIStringSelectComponent, APITextInputComponent } from 'discord-api-types/v10';
+import type {
+	APIChannelSelectComponent,
+	APILabelComponent,
+	APIMentionableSelectComponent,
+	APIRoleSelectComponent,
+	APIStringSelectComponent,
+	APITextInputComponent,
+	APIUserSelectComponent,
+} from 'discord-api-types/v10';
 import { ComponentType } from 'discord-api-types/v10';
 import { resolveBuilder } from '../../util/resolveBuilder.js';
 import { validate } from '../../util/validation.js';
 import { ComponentBuilder } from '../Component.js';
 import { createComponentBuilder } from '../Components.js';
+import { ChannelSelectMenuBuilder } from '../selectMenu/ChannelSelectMenu.js';
+import { MentionableSelectMenuBuilder } from '../selectMenu/MentionableSelectMenu.js';
+import { RoleSelectMenuBuilder } from '../selectMenu/RoleSelectMenu.js';
 import { StringSelectMenuBuilder } from '../selectMenu/StringSelectMenu.js';
+import { UserSelectMenuBuilder } from '../selectMenu/UserSelectMenu.js';
 import { TextInputBuilder } from '../textInput/TextInput.js';
 import { labelPredicate } from './Assertions.js';
 
 export interface LabelBuilderData extends Partial<Omit<APILabelComponent, 'component'>> {
-	component?: StringSelectMenuBuilder | TextInputBuilder;
+	component?:
+		| ChannelSelectMenuBuilder
+		| MentionableSelectMenuBuilder
+		| RoleSelectMenuBuilder
+		| StringSelectMenuBuilder
+		| TextInputBuilder
+		| UserSelectMenuBuilder;
 }
 
 /**
@@ -49,7 +67,6 @@ export class LabelBuilder extends ComponentBuilder<APILabelComponent> {
 
 		this.data = {
 			...structuredClone(rest),
-			// @ts-expect-error https://github.com/discordjs/discord.js/pull/11078
 			component: component ? createComponentBuilder(component) : undefined,
 			type: ComponentType.Label,
 		};
@@ -98,6 +115,60 @@ export class LabelBuilder extends ComponentBuilder<APILabelComponent> {
 		return this;
 	}
 
+	/**
+	 * Sets a user select menu component to this label.
+	 *
+	 * @param input - A function that returns a component builder or an already built builder
+	 */
+	public setUserSelectMenuComponent(
+		input: APIUserSelectComponent | UserSelectMenuBuilder | ((builder: UserSelectMenuBuilder) => UserSelectMenuBuilder),
+	): this {
+		this.data.component = resolveBuilder(input, UserSelectMenuBuilder);
+		return this;
+	}
+
+	/**
+	 * Sets a role select menu component to this label.
+	 *
+	 * @param input - A function that returns a component builder or an already built builder
+	 */
+	public setRoleSelectMenuComponent(
+		input: APIRoleSelectComponent | RoleSelectMenuBuilder | ((builder: RoleSelectMenuBuilder) => RoleSelectMenuBuilder),
+	): this {
+		this.data.component = resolveBuilder(input, RoleSelectMenuBuilder);
+		return this;
+	}
+
+	/**
+	 * Sets a mentionable select menu component to this label.
+	 *
+	 * @param input - A function that returns a component builder or an already built builder
+	 */
+	public setMentionableSelectMenuComponent(
+		input:
+			| APIMentionableSelectComponent
+			| MentionableSelectMenuBuilder
+			| ((builder: MentionableSelectMenuBuilder) => MentionableSelectMenuBuilder),
+	): this {
+		this.data.component = resolveBuilder(input, MentionableSelectMenuBuilder);
+		return this;
+	}
+
+	/**
+	 * Sets a channel select menu component to this label.
+	 *
+	 * @param input - A function that returns a component builder or an already built builder
+	 */
+	public setChannelSelectMenuComponent(
+		input:
+			| APIChannelSelectComponent
+			| ChannelSelectMenuBuilder
+			| ((builder: ChannelSelectMenuBuilder) => ChannelSelectMenuBuilder),
+	): this {
+		this.data.component = resolveBuilder(input, ChannelSelectMenuBuilder);
+		return this;
+	}
+
 	/**
 	 * Sets a text input component to this label.
 	 *
@@ -118,6 +189,7 @@ export class LabelBuilder extends ComponentBuilder<APILabelComponent> {
 
 		const data = {
 			...structuredClone(rest),
+			// The label predicate validates the component.
 			component: component?.toJSON(false),
 		};
 

packages/builders/src/components/selectMenu/BaseSelectMenu.ts

@@ -15,7 +15,7 @@ export abstract class BaseSelectMenuBuilder<Data extends APISelectMenuComponent>
 	 * @internal
 	 */
 	protected abstract override readonly data: Partial<
-		Pick<Data, 'custom_id' | 'disabled' | 'id' | 'max_values' | 'min_values' | 'placeholder'>
+		Pick<Data, 'custom_id' | 'disabled' | 'id' | 'max_values' | 'min_values' | 'placeholder' | 'required'>
 	>;
 
 	/**
@@ -75,4 +75,15 @@ export abstract class BaseSelectMenuBuilder<Data extends APISelectMenuComponent>
 		this.data.disabled = disabled;
 		return this;
 	}
+
+	/**
+	 * Sets whether this select menu is required.
+	 *
+	 * @remarks Only for use in modals.
+	 * @param required - Whether this string select menu is required
+	 */
+	public setRequired(required = true) {
+		this.data.required = required;
+		return this;
+	}
 }

packages/builders/src/components/selectMenu/StringSelectMenu.ts

@@ -147,17 +147,6 @@ export class StringSelectMenuBuilder extends BaseSelectMenuBuilder<APIStringSele
 		return this;
 	}
 
-	/**
-	 * Sets whether this string select menu is required.
-	 *
-	 * @remarks Only for use in modals.
-	 * @param required - Whether this string select menu is required
-	 */
-	public setRequired(required = true) {
-		this.data.required = required;
-		return this;
-	}
-
 	/**
 	 * {@inheritDoc ComponentBuilder.toJSON}
 	 */

packages/builders/src/interactions/modals/Assertions.ts

@@ -2,6 +2,7 @@ import { ComponentType } from 'discord-api-types/v10';
 import { z } from 'zod';
 import { customIdPredicate } from '../../Assertions.js';
 import { labelPredicate } from '../../components/label/Assertions.js';
+import { textDisplayPredicate } from '../../components/v2/Assertions.js';
 
 const titlePredicate = z.string().min(1).max(45);
 
@@ -18,6 +19,7 @@ export const modalPredicate = z.object({
 					.length(1),
 			}),
 			labelPredicate,
+			textDisplayPredicate,
 		])
 		.array()
 		.min(1)