feat: make emoji picker close on select / interact elsewhere

package.json

@@ -73,7 +73,7 @@
         "@hcaptcha/react-hcaptcha": "^0.3.6",
         "@insertish/vite-plugin-babel-macros": "^1.0.5",
         "@preact/preset-vite": "^2.0.0",
-        "@revoltchat/ui": "1.0.76",
+        "@revoltchat/ui": "1.0.77",
         "@rollup/plugin-replace": "^2.4.2",
         "@styled-icons/boxicons-logos": "^10.38.0",
         "@styled-icons/boxicons-regular": "^10.38.0",

src/components/common/messaging/MessageBox.tsx

@@ -143,56 +143,62 @@ const RE_SED = new RegExp("^s/([^])*/([^])*$");
 // Tests for code block delimiters (``` at start of line)
 const RE_CODE_DELIMITER = new RegExp("^```", "gm");
 
-const HackAlertThisFileWillBeReplaced = observer(({ channel }: Props) => {
+const HackAlertThisFileWillBeReplaced = observer(
-    const renderEmoji = useMemo(
+    ({ channel, onClose }: Props & { onClose: () => void }) => {
-        () =>
+        const renderEmoji = useMemo(
-            memo(({ emoji }: { emoji: string }) => (
+            () =>
-                <RenderEmoji match={emoji} {...({} as any)} />
+                memo(({ emoji }: { emoji: string }) => (
-            )),
+                    <RenderEmoji match={emoji} {...({} as any)} />
-        [],
+                )),
-    );
+            [],
+        );
 
-    const emojis: Record<string, any> = {
+        const emojis: Record<string, any> = {
-        default: Object.keys(emojiDictionary),
+            default: Object.keys(emojiDictionary).map((id) => ({ id })),
-    };
+        };
 
-    // ! FIXME: also expose typing from component
+        // ! FIXME: also expose typing from component
-    const categories: any[] = [];
+        const categories: any[] = [];
 
-    for (const server of state.ordering.orderedServers) {
+        for (const server of state.ordering.orderedServers) {
-        // ! FIXME: add a separate map on each server for emoji
+            // ! FIXME: add a separate map on each server for emoji
-        const list = [...channel.client.emojis.values()]
+            const list = [...channel.client.emojis.values()]
-            .filter((emoji) => emoji.parent.id === server._id)
+                .filter((emoji) => emoji.parent.id === server._id)
-            .map((x) => x._id);
+                .map(({ _id, name }) => ({ id: _id, name }));
 
-        if (list.length > 0) {
+            if (list.length > 0) {
-            emojis[server._id] = list;
+                emojis[server._id] = list;
-            categories.push({
+                categories.push({
-                id: server._id,
+                    id: server._id,
-                name: server.name,
+                    name: server.name,
-                iconURL: server.generateIconURL({ max_side: 256 }),
+                    iconURL: server.generateIconURL({ max_side: 256 }),
-            });
+                });
+            }
         }
-    }
 
-    categories.push({
+        categories.push({
-        id: "default",
+            id: "default",
-        name: "Default",
+            name: "Default",
-        emoji: "smiley",
+            emoji: "smiley",
-    });
+        });
 
-    return (
+        return (
-        <Picker
+            <Picker
-            emojis={emojis}
+                emojis={emojis}
-            categories={categories}
+                categories={categories}
-            renderEmoji={renderEmoji}
+                renderEmoji={renderEmoji}
-            onSelect={(emoji) => {
+                onSelect={(emoji) => {
-                const v = state.draft.get(channel._id);
+                    const v = state.draft.get(channel._id);
-                state.draft.set(channel._id, `${v ? `${v} ` : ""}:${emoji}:`);
+                    state.draft.set(
-            }}
+                        channel._id,
-        />
+                        `${v ? `${v} ` : ""}:${emoji}:`,
-    );
+                    );
-});
+                }}
+                onClose={onClose}
+            />
+        );
+    },
+);
 
 // ! FIXME: add to app config and load from app config
 export const CAN_UPLOAD_AT_ONCE = 5;
@@ -209,6 +215,8 @@ export default observer(({ channel }: Props) => {
     const client = useClient();
     const translate = useTranslation();
 
+    const closePicker = useCallback(() => setPicker(false), []);
+
     const renderer = getRenderer(channel);
 
     if (!channel.havePermission("SendMessage")) {
@@ -559,7 +567,10 @@ export default observer(({ channel }: Props) => {
             />
             <FloatingLayer>
                 {picker && (
-                    <HackAlertThisFileWillBeReplaced channel={channel} />
+                    <HackAlertThisFileWillBeReplaced
+                        channel={channel}
+                        onClose={closePicker}
+                    />
                 )}
             </FloatingLayer>
             <Base>

yarn.lock

@@ -2240,9 +2240,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@revoltchat/ui@npm:1.0.76":
+"@revoltchat/ui@npm:1.0.77":
-  version: 1.0.76
+  version: 1.0.77
-  resolution: "@revoltchat/ui@npm:1.0.76"
+  resolution: "@revoltchat/ui@npm:1.0.77"
   dependencies:
     "@styled-icons/boxicons-logos": ^10.38.0
     "@styled-icons/boxicons-regular": ^10.38.0
@@ -2256,7 +2256,7 @@ __metadata:
     react-virtuoso: ^2.12.0
   peerDependencies:
     revolt.js: "*"
-  checksum: b4051c759bd2e350eaab0f28c4d27b8df391086d63d58db14edf0c557d19da6d1f95df20327682086db46c6348ab7c7a0e6c696829e16d18fd341e4fbc8cbaf2
+  checksum: ac3cf9787ff11df2156db0e871e48072013d0827b14b5dbcb54e9fe7f8f97daa19325d0fda93ded7487c642df57d6aee998bbe0ccf20bb095b1027f247e47e64
   languageName: node
   linkType: hard
 
@@ -3626,7 +3626,7 @@ __metadata:
     "@hcaptcha/react-hcaptcha": ^0.3.6
     "@insertish/vite-plugin-babel-macros": ^1.0.5
     "@preact/preset-vite": ^2.0.0
-    "@revoltchat/ui": 1.0.76
+    "@revoltchat/ui": 1.0.77
     "@rollup/plugin-replace": ^2.4.2
     "@styled-icons/boxicons-logos": ^10.38.0
     "@styled-icons/boxicons-regular": ^10.38.0