@kevlid/discordmenus 0.1.6 → 0.1.7

package/README.md

@@ -60,3 +60,8 @@ client.on("interactionCreate", async (interaction) => {
 
 client.login(process.env.BOT_TOKEN);
 ```
+
+### Role / user / channel selects
+
+- Persist IDs as **strings** (Discord snowflakes are too large for JS numbers; Mongo/JSON numbers will corrupt them and `default_values` won’t show on rerender).
+- Select `custom_id`s include **category + page** so paging doesn’t reuse the same component identity in the same slot across pages.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kevlid/discordmenus",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "some menu stuff for discord stuff",
   "main": "src/index.js",
   "types": "index.d.ts",

package/src/handle/component.js

@@ -398,6 +398,15 @@ async function handleComponent(interaction, menu, menu_key, renderMenu) {
         const maxSel = Number(opt?.maxValues);
         const multi = Number.isFinite(maxSel) && maxSel > 1;
         let saveValue = multi ? [...selected] : selected[0] ?? null;
+        const snowflakeSelectTypes = new Set([
+            OptionTypes.UserSelect,
+            OptionTypes.RoleSelect,
+            OptionTypes.ChannelSelect,
+            OptionTypes.MentionableSelect,
+        ]);
+        if (opt && snowflakeSelectTypes.has(opt.type)) {
+            saveValue = multi ? selected.map(v => String(v)) : selected[0] != null ? String(selected[0]) : null;
+        }
         if (
             !multi &&
             saveValue == null &&

package/src/render/selectMenu.js

@@ -2,20 +2,48 @@ const { OptionTypes } = require("../utils/types");
 const { renderTextDisplay, renderActionRow, renderSeparator } = require("./utils");
 const { encodeId } = require("../utils/customIds");
 
-function toIdArray(currentValue) {
-    if (Array.isArray(currentValue)) {
-        return currentValue;
-    }
-    if (currentValue != null) {
-        return [currentValue];
+/**
+ * Discord snowflakes as JS numbers lose precision; DBs should store string IDs.
+ * Coerce to string and keep plausible snowflake digit strings for default_values.
+ */
+function collectEntityIds(value, maxCount) {
+    const max = Math.max(0, Math.min(25, Number(maxCount) || 25));
+    const out = [];
+    const seen = new Set();
+    const push = v => {
+        if (out.length >= max) return;
+        if (v == null) return;
+        let s;
+        if (typeof v === "bigint") {
+            s = v.toString();
+        } else if (typeof v === "number" && Number.isFinite(v)) {
+            s = String(Math.trunc(v));
+        } else if (typeof v === "string") {
+            s = v.trim();
+        } else if (typeof v === "object" && v !== null && v.id != null) {
+            s = String(v.id).trim();
+        } else {
+            return;
+        }
+        if (!/^\d{17,22}$/.test(s)) return;
+        if (seen.has(s)) return;
+        seen.add(s);
+        out.push(s);
+    };
+    if (Array.isArray(value)) {
+        for (const item of value) {
+            push(item);
+        }
+    } else {
+        push(value);
     }
-    return [];
+    return out;
 }
 
 function renderSelectMenuComponent(menuKey, opt, currentValue, userId, category, page) {
-    // Stateless: do not depend on current rendered page in the custom id.
-    // The handler can locate the option by key in the built menu.
-    const ctx = { u: userId };
+    // Include cat/page so each physical select is unique when paging; avoids client mix-ups
+    // when the same row position shows a different option on another page.
+    const ctx = { u: userId, cat: category, page };
     const customId = encodeId(menuKey, [opt.key, opt.type], ctx);
 
     const component = {
@@ -29,8 +57,14 @@ function renderSelectMenuComponent(menuKey, opt, currentValue, userId, category,
         component.placeholder = opt.placeholder;
     }
 
+    const maxDefaults = Math.min(25, Number(opt.maxValues) || 1);
+
     if (opt.type === OptionTypes.StringSelect) {
-        const selectedValues = toIdArray(currentValue);
+        const selectedValues = Array.isArray(currentValue)
+            ? currentValue.map(String)
+            : currentValue != null
+              ? [String(currentValue)]
+              : [];
         component.options = opt.choices.map(c => ({
             label: c.label,
             value: c.value,
@@ -40,14 +74,14 @@ function renderSelectMenuComponent(menuKey, opt, currentValue, userId, category,
     }
 
     if (opt.type === OptionTypes.UserSelect) {
-        const ids = toIdArray(currentValue);
+        const ids = collectEntityIds(currentValue, maxDefaults);
         if (ids.length > 0) {
             component.default_values = ids.map(id => ({ id, type: "user" }));
         }
     }
 
     if (opt.type === OptionTypes.RoleSelect) {
-        const ids = toIdArray(currentValue);
+        const ids = collectEntityIds(currentValue, maxDefaults);
         if (ids.length > 0) {
             component.default_values = ids.map(id => ({ id, type: "role" }));
         }
@@ -57,7 +91,7 @@ function renderSelectMenuComponent(menuKey, opt, currentValue, userId, category,
         if (opt.channelTypes && opt.channelTypes.length > 0) {
             component.channel_types = opt.channelTypes;
         }
-        const ids = toIdArray(currentValue);
+        const ids = collectEntityIds(currentValue, maxDefaults);
         if (ids.length > 0) {
             component.default_values = ids.map(id => ({ id, type: "channel" }));
         }
@@ -80,4 +114,4 @@ function renderSelectMenuOption(menuKey, opt, currentValue, userId, category, pa
     return [textDisplay, actionRow, renderSeparator()];
 }
 
-module.exports = { renderSelectMenuOption };
+module.exports = { renderSelectMenuOption, collectEntityIds };