Bug: Wrong type definition with defaultValue in JSX UserSelectMenu Component

[Pawe-320]

Hey, so I absolutely love using JSX components instead of the very long default builders, but I've noticed a discrepancy between what typescript wants me to put in vs what the API actually wants, so here's the explanation.

The error description

Typescript expects me put in an array of objects that adheres to this interface: https://discord.js.org/docs/packages/discord.js/14.25.1/APISelectMenuDefaultValue:Interface, which expects { id: Snowflake, type: SelectMenuDefaultValueType.User }, however it is incorrect and throws a stack trace, with no error message, here are some actual examples:

Examples

import { ChatInputCommand, CommandData, Label, Modal, UserSelectMenu } from "commandkit";
import { ApplicationCommandOptionType, SelectMenuDefaultValueType } from "discord.js";


export const command: CommandData = {
  name: "movement",
  description: "Issue a Staff Movement on a member",
  options: [
    {
      name: "target",
      description: "Who is the target of this command?",
      type: ApplicationCommandOptionType.User,
      required: true
    }
  ]
}

export const chatInput: ChatInputCommand = async ({ interaction }) => {
  const target = interaction.options.getUser("target", true)
  
  const correctModal = (
  <Modal title="Staff Movement Selection" customId="staffmovemententrymodal">
      <Label label="Member" description="The target of the command">
        <UserSelectMenu customId="member" minValues={1} maxValues={1} defaultValues={[target.id]}/>
      </Label>
    </Modal>)
  await interaction.showModal(correctModal) 
// This modal correctly shows in discord with the default value being in the select menu with no runtime errors, typescript shows this error in the IDE: 
// Type 'string' is not assignable to type 'APISelectMenuDefaultValue<SelectMenuDefaultValueType.User>'.

  const incorrectModal = (
  <Modal title="Staff Movement Selection" customId="staffmovemententrymodal">
      <Label label="Member" description="The target of the command">
        <UserSelectMenu customId="member" minValues={1} maxValues={1} defaultValues=
{
  [
    { 
      id: target.id, 
      type: SelectMenuDefaultValueType.User
    }
  ]
} />
      </Label>
    </Modal>)
  await interaction.showModal(incorrectModal) // This modal is correct according to typescript, throws error at runtime
  

  const incorrectModalWithoutEnum = (
  <Modal title="Staff Movement Selection" customId="staffmovemententrymodal">
      <Label label="Member" description="The target of the command">
        <UserSelectMenu customId="member" minValues={1} maxValues={1} defaultValues=
{
  [
    { 
      id: target.id, 
      type: "user"
    }
  ]
} />
      </Label>
    </Modal>)
  await interaction.showModal(incorrectModalWithoutEnum) 
// This modal SHOULD be correct, as SelectMenuDefaultValueType.User evaluates to "user" anyway, but typescript says: 
// Type '"user"' is not assignable to type 'SelectMenuDefaultValueType.User'.
  return;
}

Error stack after posting one of the incorrectly structured modals

 [ERROR]    │ 10:57:28.013 └ [movement - 3.38ms] Error executing command: Received one or more errors
Error: Received one or more errors
    at _ObjectValidator.handleIgnoreStrategy (C:\Users\48724\Desktop\Paweł\rcrpBot\node_modules\.pnpm\@sapphire+shapeshift@4.0.0\node_modules\@sapphire\shapeshift\src\validators\ObjectValidator.ts:239:47)
    at _ObjectValidator.handleStrategy (C:\Users\48724\Desktop\Paweł\rcrpBot\node_modules\.pnpm\@sapphire+shapeshift@4.0.0\node_modules\@sapphire\shapeshift\src\validators\ObjectValidator.ts:40:43)
    at _ObjectValidator.handle (C:\Users\48724\Desktop\Paweł\rcrpBot\node_modules\.pnpm\@sapphire+shapeshift@4.0.0\node_modules\@sapphire\shapeshift\src\validators\ObjectValidator.ts:173:10)
    at _ObjectValidator.parse (C:\Users\48724\Desktop\Paweł\rcrpBot\node_modules\.pnpm\@sapphire+shapeshift@4.0.0\node_modules\@sapphire\shapeshift\src\validators\BaseValidator.ts:126:2)
    at LabelBuilder.toJSON (C:\Users\48724\Desktop\Paweł\rcrpBot\node_modules\.pnpm\@discordjs+builders@1.13.1\node_modules\@discordjs\builders\src\components\label\Label.ts:209:18)
    at <anonymous> (C:\Users\48724\Desktop\Paweł\rcrpBot\node_modules\.pnpm\@discordjs+builders@1.13.1\node_modules\@discordjs\builders\src\interactions\modals\Modal.ts:262:61)
    at Array.map (<anonymous>)
    at ModalKit.toJSON (C:\Users\48724\Desktop\Paweł\rcrpBot\node_modules\.pnpm\@discordjs+builders@1.13.1\node_modules\@discordjs\builders\src\interactions\modals\Modal.ts:262:32)
    at ChatInputCommandInteraction.showModal (C:\Users\48724\Desktop\Paweł\rcrpBot\node_modules\.pnpm\discord.js@14.25.1\node_modules\discord.js\src\structures\interfaces\InteractionResponses.js:402:46)
    at chatInput (C:\Users\48724\Desktop\Paweł\rcrpBot\src\app\commands\(Hr)\movement.tsx:35:21)

[twlite]

The type comes from discord.js itself which points to https://discordjs.dev/docs/packages/discord.js/14.25.1/UserSelectMenuComponentData:Interface#defaultValues but looks like some other types have to be used instead of this

commandkit/packages/commandkit/src/components/interactive/select-menu/SelectMenu.ts

Lines 181 to 186 in 3df8464

	/**
	* The UserSelectMenu component.
	*/
	export interface UserSelectMenuProps
	extends Partial<Omit<UserSelectMenuComponentData, 'type'>>,
	CommonSelectMenuProps<UserSelectMenuInteraction, UserSelectMenuKit> {}