@kevlid/discordmenus 0.1.2 → 0.1.4

package/index.d.ts

@@ -257,3 +257,8 @@ export declare function normalizeInteraction(
 ): DiscordInteraction;
 export declare function fromEris(interaction: DiscordInteraction): DiscordInteraction;
 export declare function fromDiscordJS(interaction: DiscordInteraction): DiscordInteraction;
+
+/** Encode option/menu keys for custom IDs (uppercase → _lowercase, spaces → _). */
+export declare function formatKey(key: string): string;
+/** Restore original key before get/save callbacks (inverse of formatKey). */
+export declare function decodeKey(encoded: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kevlid/discordmenus",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Components v2 settings menus for Discord bots",
   "main": "src/index.js",
   "types": "index.d.ts",

package/src/handle/component.js

@@ -312,8 +312,8 @@ async function handleComponent(interaction, menu, menu_key, renderMenu) {
         }
     }
 
-    const category = parseInt(options.get("cat") ?? 0);
-    const page = parseInt(options.get("page") ?? 0);
+    let category = parseInt(options.get("cat") ?? 0);
+    let page = parseInt(options.get("page") ?? 0);
     const action = values[1];
 
     let result;
@@ -362,10 +362,31 @@ async function handleComponent(interaction, menu, menu_key, renderMenu) {
     ) {
         const optionKey = values[0];
         const selected = Array.isArray(interactionData.values) ? interactionData.values : [];
-        const opt = menu.getOption(category, page, optionKey);
+        let opt = menu.getOption(category, page, optionKey);
+        if (!opt) {
+            const found = menu.findOption(optionKey);
+            if (found) {
+                opt = found.option;
+                category = found.category;
+                page = found.page;
+            }
+        }
         const maxSel = Number(opt?.maxValues);
         const multi = Number.isFinite(maxSel) && maxSel > 1;
-        const saveValue = multi ? [...selected] : selected[0] ?? null;
+        let saveValue = multi ? [...selected] : selected[0] ?? null;
+        if (
+            !multi &&
+            saveValue == null &&
+            opt?.type === OptionTypes.StringSelect &&
+            Number(opt.minValues ?? 1) >= 1 &&
+            Array.isArray(opt.choices) &&
+            opt.choices.length === 1
+        ) {
+            const only = opt.choices[0]?.value;
+            if (only != null && only !== "") {
+                saveValue = only;
+            }
+        }
         await menu.save(optionKey, saveValue, { guildId, userId });
         result = updateMessage(
             await renderMenu(menu_key, { category, index: page, userId, guildId }),

package/src/index.js

@@ -4,6 +4,7 @@ const { OptionTypes } = require("./utils/types");
 const { CustomIdPrefix, EphemeralMessageFlag } = require("./utils/constants");
 const { MenuStorage, MemoryMenuStorage } = require("./utils/storage");
 const { normalizeInteraction, fromEris, fromDiscordJS } = require("./utils/adapters");
+const { formatKey, decodeKey } = require("./utils/formatKey");
 
 module.exports = {
     MenuManager,
@@ -16,4 +17,6 @@ module.exports = {
     normalizeInteraction,
     fromEris,
     fromDiscordJS,
-}
+    formatKey,
+    decodeKey,
+};

package/src/menuInstance.js

@@ -6,6 +6,7 @@ const { OptionTypes } = require("./utils/types");
 const { PageRenderOverhead, OptionRenderCost, MaxComponents, ComponentsV2MessageFlags } = require("./utils/constants");
 const { validateComponents } = require("./utils/componentsValidate");
 const { arrayClone, normalizeObjectListItems, objectListItemsNeedReshape } = require("./utils/helpers");
+const { decodeKey } = require("./utils/formatKey");
 
 class MenuInstance {
     constructor(builder, options = {}) {
@@ -41,11 +42,11 @@ class MenuInstance {
     }
 
     async get(key, ctx = {}) {
-        return this.getData(key, ctx);
+        return this.getData(decodeKey(key), ctx);
     }
 
     async save(key, value, ctx = {}) {
-        return this.saveData(key, value, ctx);
+        return this.saveData(decodeKey(key), value, ctx);
     }
 
     ensureBuilt() {
@@ -107,6 +108,20 @@ class MenuInstance {
         return page.options.find(o => o.key === optionKey) ?? null;
     }
 
+    findOption(optionKey) {
+        for (let cat = 0; cat < this.pages.length; cat++) {
+            const categoryPages = this.pages[cat];
+            for (let page = 0; page < categoryPages.length; page++) {
+                const p = categoryPages[page];
+                const opt = p.options?.find(o => o.key === optionKey) ?? null;
+                if (opt) {
+                    return { option: opt, category: cat, page };
+                }
+            }
+        }
+        return null;
+    }
+
     getNavigationTargets(category, index) {
         const categoryPages = this.pages[category];
         const hasPrevCategory = category > 0;

package/src/render/selectMenu.js

@@ -1 +1,83 @@
-const { OptionTypes } = require("../utils/types");
    if (Array.isArray(currentValue)) {
        return currentValue;
    }
    if (currentValue != null) {
        return [currentValue];
    }
    return [];
    const ctx = { userId, category, page };
    const customId = encodeId(menuKey, [opt.key, opt.type], ctx);
    const component = {
        type: opt.selectType,
        custom_id: customId,
        min_values: opt.minValues,
        max_values: opt.maxValues,
    };
    if (opt.placeholder != null) {
        component.placeholder = opt.placeholder;
    }
    if (opt.type === OptionTypes.StringSelect) {
        const selectedValues = toIdArray(currentValue);
        component.options = opt.choices.map(c => ({
            label: c.label,
            value: c.value,
            description: c.description,
            default: selectedValues.includes(c.value),
        }));
    }
    if (opt.type === OptionTypes.UserSelect) {
        const ids = toIdArray(currentValue);
        if (ids.length > 0) {
            component.default_values = ids.map(id => ({ id, type: "user" }));
        }
    }
    if (opt.type === OptionTypes.RoleSelect) {
        const ids = toIdArray(currentValue);
        if (ids.length > 0) {
            component.default_values = ids.map(id => ({ id, type: "role" }));
        }
    }
    if (opt.type === OptionTypes.ChannelSelect) {
        if (opt.channelTypes && opt.channelTypes.length > 0) {
            component.channel_types = opt.channelTypes;
        }
        const ids = toIdArray(currentValue);
        if (ids.length > 0) {
            component.default_values = ids.map(id => ({ id, type: "channel" }));
        }
    }
    return component;
    const lines = [`**${opt.title}**`];
    if (opt.description) {
        lines.push(`-# ${opt.description}`);
    }
    const textDisplay = renderTextDisplay(lines.join("\n"));
    const selectMenu = renderSelectMenuComponent(menuKey, opt, currentValue, userId, category, page);
    const actionRow = renderActionRow(selectMenu);
    return [textDisplay, actionRow, renderSeparator()];
+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];
+    }
+    return [];
+}
+
+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 };
+    const customId = encodeId(menuKey, [opt.key, opt.type], ctx);
+
+    const component = {
+        type: opt.selectType,
+        custom_id: customId,
+        min_values: opt.minValues,
+        max_values: opt.maxValues,
+    };
+
+    if (opt.placeholder != null) {
+        component.placeholder = opt.placeholder;
+    }
+
+    if (opt.type === OptionTypes.StringSelect) {
+        const selectedValues = toIdArray(currentValue);
+        component.options = opt.choices.map(c => ({
+            label: c.label,
+            value: c.value,
+            description: c.description,
+            default: selectedValues.includes(c.value),
+        }));
+    }
+
+    if (opt.type === OptionTypes.UserSelect) {
+        const ids = toIdArray(currentValue);
+        if (ids.length > 0) {
+            component.default_values = ids.map(id => ({ id, type: "user" }));
+        }
+    }
+
+    if (opt.type === OptionTypes.RoleSelect) {
+        const ids = toIdArray(currentValue);
+        if (ids.length > 0) {
+            component.default_values = ids.map(id => ({ id, type: "role" }));
+        }
+    }
+
+    if (opt.type === OptionTypes.ChannelSelect) {
+        if (opt.channelTypes && opt.channelTypes.length > 0) {
+            component.channel_types = opt.channelTypes;
+        }
+        const ids = toIdArray(currentValue);
+        if (ids.length > 0) {
+            component.default_values = ids.map(id => ({ id, type: "channel" }));
+        }
+    }
+
+    return component;
+}
+
+function renderSelectMenuOption(menuKey, opt, currentValue, userId, category, page) {
+    const lines = [`**${opt.title}**`];
+
+    if (opt.description) {
+        lines.push(`-# ${opt.description}`);
+    }
+
+    const textDisplay = renderTextDisplay(lines.join("\n"));
+    const selectMenu = renderSelectMenuComponent(menuKey, opt, currentValue, userId, category, page);
+    const actionRow = renderActionRow(selectMenu);
+
+    return [textDisplay, actionRow, renderSeparator()];
+}
+
+module.exports = { renderSelectMenuOption };

package/src/utils/adapters.js

@@ -37,7 +37,15 @@ function normalizeInteraction(interaction) {
         customId = source.id;
     }
 
-    let values = source.data?.values ?? source.values ?? interaction?.data?.values ?? interaction?.values ?? [];
+    // Prefer live interaction: toJSON() often omits or strips data.values for select menus,
+    // which breaks saves (especially single-value selects).
+    let values = interaction?.data?.values;
+    if (!Array.isArray(values) && interaction != null && typeof interaction.values !== "undefined") {
+        values = interaction.values;
+    }
+    if (!Array.isArray(values)) {
+        values = source.data?.values ?? source.values ?? [];
+    }
     if (!Array.isArray(values)) {
         values = [];
     }

package/src/utils/formatKey.js

@@ -1 +1,46 @@
-function formatKey(key) {
    if (typeof key !== "string") throw new TypeError("Key must be a string");
    return key.toLowerCase().replace(" ", "_");
    formatKey
+/**
+ * Encodes a key for custom IDs (Discord is case-insensitive in some paths; this keeps uniqueness).
+ * Each uppercase letter becomes "_" + its lowercase form (e.g. guildId → guild_id).
+ * Spaces become "_".
+ * Lowercase letters, digits, and underscores are kept as-is (underscores are not escaped).
+ */
+function formatKey(key) {
+    if (typeof key !== "string") throw new TypeError("Key must be a string");
+    const s = String(key).replace(/ /g, "_");
+    let out = "";
+    for (const c of s) {
+        if (c >= "A" && c <= "Z") {
+            out += "_" + c.toLowerCase();
+        } else {
+            out += c;
+        }
+    }
+    return out;
+}
+
+/**
+ * Reverses formatKey: "_" followed by a-z becomes A–Z. Literal "_" + letter in keys that were
+ * not produced by an uppercase letter may decode incorrectly; prefer camelCase/PascalCase keys.
+ */
+function decodeKey(encoded) {
+    if (typeof encoded !== "string") throw new TypeError("Key must be a string");
+    let out = "";
+    for (let i = 0; i < encoded.length; i++) {
+        const c = encoded[i];
+        if (c === "_" && i + 1 < encoded.length) {
+            const next = encoded[i + 1];
+            if (next >= "a" && next <= "z") {
+                out += next.toUpperCase();
+                i++;
+                continue;
+            }
+        }
+        out += c;
+    }
+    return out;
+}
+
+module.exports = {
+    formatKey,
+    decodeKey,
+};