feat(builders)!: Support select in modals (#11034)

BREAKING CHANGE: Text inputs no longer accept a label.
BREAKING CHANGE: Modals now only set labels instead of action rows.

packages/builders/src/components/Components.ts

@@ -17,6 +17,7 @@ import {
 } from './button/CustomIdButton.js';
 import { LinkButtonBuilder } from './button/LinkButton.js';
 import { PremiumButtonBuilder } from './button/PremiumButton.js';
+import { LabelBuilder } from './label/Label.js';
 import { ChannelSelectMenuBuilder } from './selectMenu/ChannelSelectMenu.js';
 import { MentionableSelectMenuBuilder } from './selectMenu/MentionableSelectMenu.js';
 import { RoleSelectMenuBuilder } from './selectMenu/RoleSelectMenu.js';
@@ -54,7 +55,7 @@ export type MessageComponentBuilder =
 /**
  * The builders that may be used for modals.
  */
-export type ModalComponentBuilder = ActionRowBuilder | ModalActionRowComponentBuilder;
+export type ModalComponentBuilder = ActionRowBuilder | LabelBuilder | ModalActionRowComponentBuilder;
 
 /**
  * Any button builder
@@ -152,6 +153,10 @@ export interface MappedComponentTypes {
 	 * The container component type is associated with a {@link ContainerBuilder}.
 	 */
 	[ComponentType.Container]: ContainerBuilder;
+	/**
+	 * The label component type is associated with a {@link LabelBuilder}.
+	 */
+	[ComponentType.Label]: LabelBuilder;
 }
 
 /**
@@ -182,8 +187,6 @@ export function createComponentBuilder(
 		return data;
 	}
 
-	// https://github.com/discordjs/discord.js/pull/11034
-	// eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
 	switch (data.type) {
 		case ComponentType.ActionRow:
 			return new ActionRowBuilder(data);
@@ -215,7 +218,10 @@ export function createComponentBuilder(
 			return new SectionBuilder(data);
 		case ComponentType.Container:
 			return new ContainerBuilder(data);
+		case ComponentType.Label:
+			return new LabelBuilder(data);
 		default:
+			// @ts-expect-error This case can still occur if we get a newer unsupported component type
 			throw new Error(`Cannot properly serialize component type: ${data.type}`);
 	}
 }

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

@@ -0,0 +1,11 @@
+import { ComponentType } from 'discord-api-types/v10';
+import { z } from 'zod';
+import { selectMenuStringPredicate } 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]),
+});

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

@@ -0,0 +1,127 @@
+import type { APILabelComponent, APIStringSelectComponent, APITextInputComponent } 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 { StringSelectMenuBuilder } from '../selectMenu/StringSelectMenu.js';
+import { TextInputBuilder } from '../textInput/TextInput.js';
+import { labelPredicate } from './Assertions.js';
+
+export interface LabelBuilderData extends Partial<Omit<APILabelComponent, 'component'>> {
+	component?: StringSelectMenuBuilder | TextInputBuilder;
+}
+
+/**
+ * A builder that creates API-compatible JSON data for labels.
+ */
+export class LabelBuilder extends ComponentBuilder<APILabelComponent> {
+	/**
+	 * @internal
+	 */
+	protected readonly data: LabelBuilderData;
+
+	/**
+	 * Creates a new label.
+	 *
+	 * @param data - The API data to create this label with
+	 * @example
+	 * Creating a label from an API data object:
+	 * ```ts
+	 * const label = new LabelBuilder({
+	 * 	label: "label",
+	 * 	component,
+	 * });
+	 * ```
+	 * @example
+	 * Creating a label using setters and API data:
+	 * ```ts
+	 * const label = new LabelBuilder({
+	 * 	label: 'label',
+	 * 	component,
+	 * }).setContent('new text');
+	 * ```
+	 */
+	public constructor(data: Partial<APILabelComponent> = {}) {
+		super();
+
+		const { component, ...rest } = data;
+
+		this.data = {
+			...structuredClone(rest),
+			component: component ? createComponentBuilder(component) : undefined,
+			type: ComponentType.Label,
+		};
+	}
+
+	/**
+	 * Sets the label for this label.
+	 *
+	 * @param label - The label to use
+	 */
+	public setLabel(label: string) {
+		this.data.label = label;
+		return this;
+	}
+
+	/**
+	 * Sets the description for this label.
+	 *
+	 * @param description - The description to use
+	 */
+	public setDescription(description: string) {
+		this.data.description = description;
+		return this;
+	}
+
+	/**
+	 * Clears the description for this label.
+	 */
+	public clearDescription() {
+		this.data.description = undefined;
+		return this;
+	}
+
+	/**
+	 * Sets a string select menu component to this label.
+	 *
+	 * @param input - A function that returns a component builder or an already built builder
+	 */
+	public setStringSelectMenuComponent(
+		input:
+			| APIStringSelectComponent
+			| StringSelectMenuBuilder
+			| ((builder: StringSelectMenuBuilder) => StringSelectMenuBuilder),
+	): this {
+		this.data.component = resolveBuilder(input, StringSelectMenuBuilder);
+		return this;
+	}
+
+	/**
+	 * Sets a text input component to this label.
+	 *
+	 * @param input - A function that returns a component builder or an already built builder
+	 */
+	public setTextInputComponent(
+		input: APITextInputComponent | TextInputBuilder | ((builder: TextInputBuilder) => TextInputBuilder),
+	): this {
+		this.data.component = resolveBuilder(input, TextInputBuilder);
+		return this;
+	}
+
+	/**
+	 * {@inheritDoc ComponentBuilder.toJSON}
+	 */
+	public override toJSON(validationOverride?: boolean): APILabelComponent {
+		const { component, ...rest } = this.data;
+
+		const data = {
+			...structuredClone(rest),
+			component: component?.toJSON(false),
+		};
+
+		validate(labelPredicate, data, validationOverride);
+
+		return data as APILabelComponent;
+	}
+}

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

@@ -9,6 +9,7 @@ import { StringSelectMenuOptionBuilder } from './StringSelectMenuOption.js';
 
 export interface StringSelectMenuData extends Partial<Omit<APIStringSelectComponent, 'options'>> {
 	options: StringSelectMenuOptionBuilder[];
+	required?: boolean;
 }
 
 /**
@@ -146,6 +147,17 @@ 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/components/textInput/Assertions.ts

@@ -5,7 +5,6 @@ import { customIdPredicate } from '../../Assertions.js';
 export const textInputPredicate = z.object({
 	type: z.literal(ComponentType.TextInput),
 	custom_id: customIdPredicate,
-	label: z.string().min(1).max(45),
 	style: z.enum(TextInputStyle),
 	min_length: z.number().min(0).max(4_000).optional(),
 	max_length: z.number().min(1).max(4_000).optional(),

packages/builders/src/components/textInput/TextInput.ts

@@ -21,7 +21,7 @@ export class TextInputBuilder extends ComponentBuilder<APITextInputComponent> {
 	 * ```ts
 	 * const textInput = new TextInputBuilder({
 	 * 	custom_id: 'a cool text input',
-	 * 	label: 'Type something',
+	 * 	placeholder: 'Type something',
 	 * 	style: TextInputStyle.Short,
 	 * });
 	 * ```
@@ -29,7 +29,7 @@ export class TextInputBuilder extends ComponentBuilder<APITextInputComponent> {
 	 * Creating a text input using setters and API data:
 	 * ```ts
 	 * const textInput = new TextInputBuilder({
-	 * 	label: 'Type something else',
+	 * 	placeholder: 'Type something else',
 	 * })
 	 * 	.setCustomId('woah')
 	 * 	.setStyle(TextInputStyle.Paragraph);
@@ -50,16 +50,6 @@ export class TextInputBuilder extends ComponentBuilder<APITextInputComponent> {
 		return this;
 	}
 
-	/**
-	 * Sets the label for this text input.
-	 *
-	 * @param label - The label to use
-	 */
-	public setLabel(label: string) {
-		this.data.label = label;
-		return this;
-	}
-
 	/**
 	 * Sets the style for this text input.
 	 *