@kevlid/discordmenus 0.1.6 → 0.1.8

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.8",
   "description": "some menu stuff for discord stuff",
   "main": "src/index.js",
   "types": "index.d.ts",

package/src/handle/component.js

@@ -74,7 +74,7 @@ async function handleListBranch({
                 const props = option.itemConfig.properties;
                 const addItems = normalizeObjectListItems(
                     props,
-                    arrayClone(await menu.get(optionKey, { guildId, userId })),
+                    arrayClone(await menu.get(optionKey, { guildId, userId, cat: category })),
                 );
                 addItems.push(shapeObjectListItem(props, {}));
                 await menu.save(optionKey, addItems, {
@@ -101,7 +101,7 @@ async function handleListBranch({
         case Presets.previousCategory:
         case Presets.nextCategory:
             if (objectItems) {
-                const jumpItems = arrayClone(await menu.get(optionKey, { guildId, userId }));
+                const jumpItems = arrayClone(await menu.get(optionKey, { guildId, userId, cat: category }));
                 const currentItemIndex = parseInt(options.get("item") ?? 0);
                 const delta = subAction === Presets.previousCategory ? -listJumpSize(jumpItems.length) : listJumpSize(jumpItems.length);
                 return updateMessage(
@@ -116,7 +116,7 @@ async function handleListBranch({
         case Presets.listItemDone: {
             const itemIndex = parseInt(options.get("item") ?? -1);
             if (objectItems && itemIndex >= 0) {
-                const doneItems = arrayClone(await menu.get(optionKey, { guildId, userId }));
+                const doneItems = arrayClone(await menu.get(optionKey, { guildId, userId, cat: category }));
                 const currentItem = doneItems[itemIndex];
                 if (objectListItemFailsRequired(option, currentItem)) {
                     doneItems.splice(itemIndex, 1);
@@ -149,7 +149,7 @@ async function handleListBranch({
             const props = option.itemConfig.properties;
             const boolItems = normalizeObjectListItems(
                 props,
-                arrayClone(await menu.get(optionKey, { guildId, userId })),
+                arrayClone(await menu.get(optionKey, { guildId, userId, cat: category })),
             );
             boolItems[itemIndex] = shapeObjectListItem(props, {
                 ...asObject(boolItems[itemIndex]),
@@ -168,7 +168,7 @@ async function handleListBranch({
         case Presets.delete: {
             const itemIndex = parseInt(values[3]);
             const props = option.itemConfig.properties;
-            let deleteItems = arrayClone(await menu.get(optionKey, { guildId, userId }));
+            let deleteItems = arrayClone(await menu.get(optionKey, { guildId, userId, cat: category }));
             if (objectItems) {
                 deleteItems = normalizeObjectListItems(props, deleteItems);
             }
@@ -230,7 +230,7 @@ async function handleObjectBranch({
         const subKey = values[3];
         const newValue = values[4] === "true";
         const boolObjectOption = menu.getOption(category, page, objectKey);
-        const baseObj = asObject(await menu.get(objectKey, { guildId, userId }));
+        const baseObj = asObject(await menu.get(objectKey, { guildId, userId, cat: category }));
         const defaults = boolObjectOption ? objectDefaultsFromKeys(boolObjectOption.options) : {};
         const updatedObj = Object.assign(defaults, baseObj);
         updatedObj[subKey] = newValue;
@@ -289,7 +289,7 @@ async function handleObjectBranch({
     }
     if (listAction === Presets.delete) {
         const itemIndex = parseInt(values[5]);
-        const obj = asObject(await menu.get(objectKey, { guildId, userId }));
+        const obj = asObject(await menu.get(objectKey, { guildId, userId, cat: category }));
         const items = arrayClone(obj[subKey]);
         items.splice(itemIndex, 1);
         await menu.save(objectKey, Object.assign({}, obj, { [subKey]: items }), {
@@ -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/handle/modal.js

@@ -39,7 +39,7 @@ async function handleListModal(menu, values, options, rawValue, category, page,
             throw new Error(`Option "${optionKey}" not found`);
         }
         const props = option.itemConfig.properties;
-        const objItems = normalizeObjectListItems(props, arrayClone(await menu.get(optionKey, { guildId, userId })));
+        const objItems = normalizeObjectListItems(props, arrayClone(await menu.get(optionKey, { guildId, userId, cat: category })));
         let property;
         const propertyIndex = parseInt(propertyToken, 10);
         if (!Number.isNaN(propertyIndex)) {
@@ -79,7 +79,7 @@ async function handleListModal(menu, values, options, rawValue, category, page,
     if (!option) {
         throw new Error(`Option "${optionKey}" not found`);
     }
-    const items = arrayClone(await menu.get(optionKey, { guildId, userId }));
+    const items = arrayClone(await menu.get(optionKey, { guildId, userId, cat: category }));
     let parsedValue;
     if (option.itemType === OptionTypes.String) {
         parsedValue = rawValue;
@@ -150,7 +150,7 @@ async function handleObjectModal(menu, values, options, rawValue, category, page
         } else {
             throw new Error(`Sub-option type "${subOption.type}" does not support modal input`);
         }
-        const baseObj = asObject(await menu.get(optionKey, { guildId, userId }));
+        const baseObj = asObject(await menu.get(optionKey, { guildId, userId, cat: category }));
         const defaults = objectDefaultsFromKeys(option.options);
         const updatedObj = Object.assign(defaults, baseObj);
         updatedObj[subKey] = parsedValue;
@@ -169,7 +169,7 @@ async function handleObjectModal(menu, values, options, rawValue, category, page
         if (!subOption) {
             throw new Error(`Sub-option "${subKey}" not found`);
         }
-        const baseObj = asObject(await menu.get(optionKey, { guildId, userId }));
+        const baseObj = asObject(await menu.get(optionKey, { guildId, userId, cat: category }));
         const items = arrayClone(baseObj[subKey]);
         let parsedValue;
         if (subOption.itemType === OptionTypes.String) {

package/src/menuInstance.js

@@ -41,12 +41,22 @@ class MenuInstance {
         this.builder = builder;
     }
 
+    withCategoryCtx(ctx = {}) {
+        // Ensure ctx.category is always present (string key or null).
+        if (ctx && Object.prototype.hasOwnProperty.call(ctx, "category")) {
+            return ctx;
+        }
+        const catIndex = typeof ctx?.cat === "number" ? ctx.cat : typeof ctx?.categoryIndex === "number" ? ctx.categoryIndex : null;
+        const categoryKey = catIndex != null ? this.getCategoryKey(catIndex) : null;
+        return Object.assign({}, ctx, { category: categoryKey });
+    }
+
     async get(key, ctx = {}) {
-        return this.getData(decodeKey(key), ctx);
+        return this.getData(decodeKey(key), this.withCategoryCtx(ctx));
     }
 
     async save(key, value, ctx = {}) {
-        return this.saveData(decodeKey(key), value, ctx);
+        return this.saveData(decodeKey(key), value, this.withCategoryCtx(ctx));
     }
 
     ensureBuilt() {
@@ -177,7 +187,7 @@ class MenuInstance {
         }
 
         const page = categoryPages[index];
-        const ctx = { guildId, userId };
+        const ctx = { guildId, userId, cat: category };
         const navigation = renderNavigation(this.key, userId, this.getNavigationTargets(category, index), category, index);
         const optionComponents = [];
         for (const option of page.options) {
@@ -209,7 +219,7 @@ class MenuInstance {
         if (!option) {
             throw new Error(`Option "${optionKey}" not found on page ${category}:${index}`);
         }
-        const currentValue = await this.get(option.key, { guildId, userId });
+        const currentValue = await this.get(option.key, { guildId, userId, cat: category });
         return renderModal(this.key, this.title, [renderTextInput(option, currentValue)], { category, page: index });
     }
 
@@ -219,7 +229,7 @@ class MenuInstance {
         if (!option) {
             throw new Error(`Option "${optionKey}" not found on page ${category}:${index}`);
         }
-        let items = await this.get(option.key, { guildId, userId }) ?? [];
+        let items = await this.get(option.key, { guildId, userId, cat: category }) ?? [];
         if (option.itemType === OptionTypes.Object) {
             const props = option.itemConfig.properties;
             if (objectListItemsNeedReshape(props, items)) {
@@ -240,7 +250,7 @@ class MenuInstance {
         if (!option) {
             throw new Error(`Option "${optionKey}" not found on page ${category}:${index}`);
         }
-        const items = await this.get(option.key, { guildId, userId }) ?? [];
+        const items = await this.get(option.key, { guildId, userId, cat: category }) ?? [];
         const currentValue = itemIndex != null ? items[itemIndex] : null;
         return renderModal(
             this.key,
@@ -256,7 +266,7 @@ class MenuInstance {
         if (!option) {
             throw new Error(`Object "${objectKey}" not found on page ${category}:${index}`);
         }
-        const objectValue = await this.get(option.key, { guildId, userId }) ?? {};
+        const objectValue = await this.get(option.key, { guildId, userId, cat: category }) ?? {};
         return renderObjectPage(this.key, option, objectValue, userId, category, index, objectPage);
     }
 
@@ -270,7 +280,7 @@ class MenuInstance {
         if (!subOption) {
             throw new Error(`Sub-option "${subKey}" not found in Object "${objectKey}"`);
         }
-        const objectValue = await this.get(objectKey, { guildId, userId }) ?? {};
+        const objectValue = await this.get(objectKey, { guildId, userId, cat: category }) ?? {};
         const currentValue = objectValue[subKey] != null ? objectValue[subKey] : null;
         return renderModal(
             this.key,
@@ -290,7 +300,7 @@ class MenuInstance {
         if (!subOption) {
             throw new Error(`Sub-option "${subKey}" not found in Object "${objectKey}"`);
         }
-        const objectValue = await this.get(objectKey, { guildId, userId }) ?? {};
+        const objectValue = await this.get(objectKey, { guildId, userId, cat: category }) ?? {};
         const items = Array.isArray(objectValue[subKey]) ? objectValue[subKey] : [];
         return renderObjectListPage(this.key, option, subOption, items, listPage, userId, category, index, objectPage);
     }
@@ -301,7 +311,7 @@ class MenuInstance {
         if (!option) {
             throw new Error(`Option "${optionKey}" not found on page ${category}:${index}`);
         }
-        let items = await this.get(option.key, { guildId, userId }) ?? [];
+        let items = await this.get(option.key, { guildId, userId, cat: category }) ?? [];
         if (option.itemType === OptionTypes.Object) {
             const props = option.itemConfig.properties;
             if (objectListItemsNeedReshape(props, items)) {
@@ -328,7 +338,7 @@ class MenuInstance {
         if (!property) {
             throw new Error(`Property "${propertyKey}" not found in ObjectList "${optionKey}"`);
         }
-        const items = await this.get(option.key, { guildId, userId }) ?? [];
+        const items = await this.get(option.key, { guildId, userId, cat: category }) ?? [];
         const currentItem = items[itemIndex] ?? null;
         const currentValue =
             currentItem != null && typeof currentItem === "object"
@@ -352,7 +362,7 @@ class MenuInstance {
         if (!subOption) {
             throw new Error(`Sub-option "${subKey}" not found in Object "${objectKey}"`);
         }
-        const objectValue = await this.get(objectKey, { guildId, userId }) ?? {};
+        const objectValue = await this.get(objectKey, { guildId, userId, cat: category }) ?? {};
         const items = Array.isArray(objectValue[subKey]) ? objectValue[subKey] : [];
         const currentValue = itemIndex != null ? items[itemIndex] : null;
         return renderModal(

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 };