@kevlid/discordmenus 0.1.3 → 0.1.5

package/index.d.ts

@@ -3,10 +3,15 @@ export type GetFunction = (
     options?: Record<string, unknown>,
 ) => unknown | Promise<unknown>;
 
+/** Passed to save(): decoded option key, value, and context (includes category = decoded category key). */
 export type SaveFunction = (
     key: string,
     value: unknown,
-    options?: Record<string, unknown>,
+    options?: Record<string, unknown> & {
+        guildId?: string | null;
+        userId?: string | null;
+        category?: string | null;
+    },
 ) => unknown | Promise<unknown>;
 
 export type PermissionResolvable = string | number | bigint;

package/package.json

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

package/src/handle/component.js

@@ -77,7 +77,11 @@ async function handleListBranch({
                     arrayClone(await menu.get(optionKey, { guildId, userId })),
                 );
                 addItems.push(shapeObjectListItem(props, {}));
-                await menu.save(optionKey, addItems, { guildId, userId });
+                await menu.save(optionKey, addItems, {
+                    guildId,
+                    userId,
+                    category: menu.getCategoryKey(category),
+                });
                 return updateMessage(
                     await menu.renderListObjectItemPage(optionKey, addItems.length - 1, {
                         ...menuCtx,
@@ -116,11 +120,11 @@ async function handleListBranch({
                 const currentItem = doneItems[itemIndex];
                 if (objectListItemFailsRequired(option, currentItem)) {
                     doneItems.splice(itemIndex, 1);
-                    await menu.save(
-                        optionKey,
-                        normalizeObjectListItems(option.itemConfig.properties, doneItems),
-                        { guildId, userId },
-                    );
+                    await menu.save(optionKey, normalizeObjectListItems(option.itemConfig.properties, doneItems), {
+                        guildId,
+                        userId,
+                        category: menu.getCategoryKey(category),
+                    });
                 }
                 return updateMessage(await renderMenu(menu_key, menuCtx));
             }
@@ -151,7 +155,11 @@ async function handleListBranch({
                 ...asObject(boolItems[itemIndex]),
                 [propertyKey]: newBoolValue,
             });
-            await menu.save(optionKey, boolItems, { guildId, userId });
+            await menu.save(optionKey, boolItems, {
+                guildId,
+                userId,
+                category: menu.getCategoryKey(category),
+            });
             return updateMessage(
                 await menu.renderListObjectItemPage(optionKey, itemIndex, { ...menuCtx, listPage: sub }),
             );
@@ -165,7 +173,11 @@ async function handleListBranch({
                 deleteItems = normalizeObjectListItems(props, deleteItems);
             }
             deleteItems.splice(itemIndex, 1);
-            await menu.save(optionKey, deleteItems, { guildId, userId });
+            await menu.save(optionKey, deleteItems, {
+                guildId,
+                userId,
+                category: menu.getCategoryKey(category),
+            });
             if (objectItems) {
                 if (deleteItems.length <= 0) {
                     return updateMessage(await renderMenu(menu_key, menuCtx));
@@ -222,7 +234,11 @@ async function handleObjectBranch({
         const defaults = boolObjectOption ? objectDefaultsFromKeys(boolObjectOption.options) : {};
         const updatedObj = Object.assign(defaults, baseObj);
         updatedObj[subKey] = newValue;
-        await menu.save(objectKey, updatedObj, { guildId, userId });
+        await menu.save(objectKey, updatedObj, {
+            guildId,
+            userId,
+            category: menu.getCategoryKey(category),
+        });
         return updateMessage(await menu.renderObjectPage(objectKey, objectCtx));
     }
     if (subAction === Presets.subModal) {
@@ -276,7 +292,11 @@ async function handleObjectBranch({
         const obj = asObject(await menu.get(objectKey, { guildId, userId }));
         const items = arrayClone(obj[subKey]);
         items.splice(itemIndex, 1);
-        await menu.save(objectKey, Object.assign({}, obj, { [subKey]: items }), { guildId, userId });
+        await menu.save(objectKey, Object.assign({}, obj, { [subKey]: items }), {
+            guildId,
+            userId,
+            category: menu.getCategoryKey(category),
+        });
         return updateMessage(
             await menu.renderObjectListPage(objectKey, subKey, sub, { ...menuCtx, objectPage }),
         );
@@ -312,8 +332,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;
@@ -325,7 +345,11 @@ async function handleComponent(interaction, menu, menu_key, renderMenu) {
     } else if (action === OptionTypes.String || action === OptionTypes.Number) {
         result = openModal(await menu.renderModal(values[0], { category, index: page, guildId }));
     } else if (action === OptionTypes.Boolean) {
-        await menu.save(values[0], values[2] === "true", { guildId, userId });
+        await menu.save(values[0], values[2] === "true", {
+            guildId,
+            userId,
+            category: menu.getCategoryKey(category),
+        });
         result = updateMessage(
             await renderMenu(menu_key, { category, index: page, userId, guildId }),
         );
@@ -362,7 +386,15 @@ 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;
         let saveValue = multi ? [...selected] : selected[0] ?? null;
@@ -379,7 +411,11 @@ async function handleComponent(interaction, menu, menu_key, renderMenu) {
                 saveValue = only;
             }
         }
-        await menu.save(optionKey, saveValue, { guildId, userId });
+        await menu.save(optionKey, saveValue, {
+            guildId,
+            userId,
+            category: menu.getCategoryKey(category),
+        });
         result = updateMessage(
             await renderMenu(menu_key, { category, index: page, userId, guildId }),
         );

package/src/handle/modal.js

@@ -65,7 +65,11 @@ async function handleListModal(menu, values, options, rawValue, category, page,
             ...asObject(objItems[objItemIndex]),
             [property.key]: parsedPropertyValue,
         });
-        await menu.save(optionKey, objItems, { guildId, userId });
+        await menu.save(optionKey, objItems, {
+            guildId,
+            userId,
+            category: menu.getCategoryKey(category),
+        });
         return updateMessage(
             await menu.renderListObjectItemPage(optionKey, objItemIndex, { ...menuCtx, listPage: sub }),
         );
@@ -95,7 +99,11 @@ async function handleListModal(menu, values, options, rawValue, category, page,
     } else {
         throw new Error(`Unknown list sub-action "${subAction}"`);
     }
-    await menu.save(optionKey, items, { guildId, userId });
+    await menu.save(optionKey, items, {
+        guildId,
+        userId,
+        category: menu.getCategoryKey(category),
+    });
     return updateMessage(await menu.renderListPage(optionKey, sub, menuCtx));
 }
 
@@ -146,7 +154,11 @@ async function handleObjectModal(menu, values, options, rawValue, category, page
         const defaults = objectDefaultsFromKeys(option.options);
         const updatedObj = Object.assign(defaults, baseObj);
         updatedObj[subKey] = parsedValue;
-        await menu.save(optionKey, updatedObj, { guildId, userId });
+        await menu.save(optionKey, updatedObj, {
+            guildId,
+            userId,
+            category: menu.getCategoryKey(category),
+        });
         return updateMessage(await menu.renderObjectPage(optionKey, menuCtx));
     }
 
@@ -177,7 +189,11 @@ async function handleObjectModal(menu, values, options, rawValue, category, page
         } else {
             throw new Error(`Unknown list action "${listAction}"`);
         }
-        await menu.save(optionKey, Object.assign({}, baseObj, { [subKey]: items }), { guildId, userId });
+        await menu.save(optionKey, Object.assign({}, baseObj, { [subKey]: items }), {
+            guildId,
+            userId,
+            category: menu.getCategoryKey(category),
+        });
         return updateMessage(
             await menu.renderObjectListPage(optionKey, subKey, sub, menuCtx),
         );
@@ -214,7 +230,11 @@ async function handleModal(interaction, menu, menu_key, renderMenu) {
         return handleObjectModal(menu, values, options, rawValue, category, page, guildId, userId);
     }
     if (optionType === OptionTypes.String) {
-        await menu.save(values[0], rawValue, { guildId, userId });
+        await menu.save(values[0], rawValue, {
+            guildId,
+            userId,
+            category: menu.getCategoryKey(category),
+        });
         return updateMessage(await renderMenu(menu_key, menuCtx));
     }
     if (optionType === OptionTypes.Number) {
@@ -222,7 +242,11 @@ async function handleModal(interaction, menu, menu_key, renderMenu) {
         if (Number.isNaN(value)) {
             throw new Error("Invalid number");
         }
-        await menu.save(values[0], value, { guildId, userId });
+        await menu.save(values[0], value, {
+            guildId,
+            userId,
+            category: menu.getCategoryKey(category),
+        });
         return updateMessage(await renderMenu(menu_key, menuCtx));
     }
     throw new Error(`Option type "${optionType}" does not support modal input`);

package/src/menuInstance.js

@@ -58,6 +58,7 @@ class MenuInstance {
     build() {
         const built = this.builder.build();
         this.pages = [];
+        this.categoryKeys = [];
 
         for (const category of built.categories) {
             const categoryPages = [];
@@ -84,6 +85,7 @@ class MenuInstance {
             }
             if (categoryPages.length > 0) {
                 this.pages.push(categoryPages);
+                this.categoryKeys.push(decodeKey(category.key));
             }
         }
 
@@ -108,6 +110,28 @@ class MenuInstance {
         return page.options.find(o => o.key === optionKey) ?? null;
     }
 
+    getCategoryKey(categoryIndex) {
+        this.ensureBuilt();
+        if (typeof categoryIndex !== "number" || categoryIndex < 0 || categoryIndex >= this.categoryKeys.length) {
+            return null;
+        }
+        return this.categoryKeys[categoryIndex] ?? 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;
@@ -200,7 +224,11 @@ class MenuInstance {
             const props = option.itemConfig.properties;
             if (objectListItemsNeedReshape(props, items)) {
                 items = normalizeObjectListItems(props, arrayClone(items));
-                await this.save(option.key, items, { guildId, userId });
+                await this.save(option.key, items, {
+                    guildId,
+                    userId,
+                    category: this.getCategoryKey(category),
+                });
             }
         }
         return renderListPage(this.key, option, items, listPage, userId, category, index);
@@ -278,7 +306,11 @@ class MenuInstance {
             const props = option.itemConfig.properties;
             if (objectListItemsNeedReshape(props, items)) {
                 items = normalizeObjectListItems(props, arrayClone(items));
-                await this.save(option.key, items, { guildId, userId });
+                await this.save(option.key, items, {
+                    guildId,
+                    userId,
+                    category: this.getCategoryKey(category),
+                });
             }
         }
         const safeIndex = items.length <= 0 ? 0 : Math.max(0, Math.min(itemIndex, items.length - 1));

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