@hokkiai/discord-emoji-selector 1.1.5 → 1.1.6

package/dist/index.cjs

@@ -89,84 +89,86 @@ function useSearchValue({ pickerId }) {
 
 // src/categoryDisplay.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function Emoji({
+var Emoji = (0, import_react2.memo)(function Emoji2({
   pickerId,
   emoji,
   onEmojiMouseEnter,
   onEmojiMouseLeave,
-  onEmojiSelect,
-  key
+  onEmojiSelect
 }) {
+  const handleMouseEnter = (0, import_react2.useCallback)(() => {
+    window["emojipicker-" + pickerId].changeFooterEmoji(emoji);
+    window["emojipicker-" + pickerId].changeSearchbarPlaceholder(emoji.name);
+    onEmojiMouseEnter(emoji);
+  }, [pickerId, emoji, onEmojiMouseEnter]);
+  const handleMouseLeave = (0, import_react2.useCallback)(() => {
+    onEmojiMouseLeave(emoji);
+  }, [emoji, onEmojiMouseLeave]);
+  const handleClick = (0, import_react2.useCallback)(() => {
+    onEmojiSelect(emoji);
+  }, [emoji, onEmojiSelect]);
+  const html = (0, import_react2.useMemo)(() => render(emoji.char), [emoji.char]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      onMouseEnter: () => {
-        window["emojipicker-" + pickerId].changeFooterEmoji(emoji);
-        window["emojipicker-" + pickerId].changeSearchbarPlaceholder(
-          emoji.name
-        );
-        onEmojiMouseEnter(emoji);
-      },
-      onMouseLeave: () => {
-        onEmojiMouseLeave(emoji);
-      },
-      onClick: () => {
-        onEmojiSelect(emoji);
-      },
-      className: "HOKKIEMOJIPICKER-emoji text-4xl p-1 cursor-pointer hover:bg-white/15  rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
-      dangerouslySetInnerHTML: {
-        __html: render(emoji.char)
-      }
+      tabIndex: -1,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      className: "HOKKIEMOJIPICKER-emoji text-4xl p-1 cursor-pointer hover:bg-white/15 focus:bg-white/20 rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
+      dangerouslySetInnerHTML: { __html: html }
     }
   );
-}
-function SkinEmoji({
+});
+var SkinEmoji = (0, import_react2.memo)(function SkinEmoji2({
   pickerId,
   emoji,
   onEmojiSelect,
   onEmojiMouseEnter,
-  onEmojiMouseLeave,
-  key
+  onEmojiMouseLeave
 }) {
   const skin = useSkin({ pickerId });
-  const grabEmoji = () => [1, 2, 3, 4, 5].includes(skin) ? emoji.tones.find((a) => a.tone.find((b) => b === skin) === skin)?.char : emoji.char;
-  const fakeEmoji = {
-    ...emoji,
-    char: grabEmoji(),
-    preRendered: true,
-    tones: [
-      {
-        name: emoji.tones[0].name.replaceAll("1", "0"),
-        tone: [0],
-        char: emoji.char
-      },
-      ...emoji.tones
-    ]
-  };
+  const fakeEmoji = (0, import_react2.useMemo)(() => {
+    const charForSkin = [1, 2, 3, 4, 5].includes(skin) ? emoji.tones.find((a) => a.tone.find((b) => b === skin) === skin)?.char : emoji.char;
+    return {
+      ...emoji,
+      char: charForSkin,
+      preRendered: true,
+      tones: [
+        {
+          name: emoji.tones[0].name.replaceAll("1", "0"),
+          tone: [0],
+          char: emoji.char
+        },
+        ...emoji.tones
+      ]
+    };
+  }, [emoji, skin]);
+  const handleMouseEnter = (0, import_react2.useCallback)(() => {
+    window["emojipicker-" + pickerId].changeFooterEmoji(fakeEmoji);
+    window["emojipicker-" + pickerId].changeSearchbarPlaceholder(emoji.name);
+    onEmojiMouseEnter(fakeEmoji);
+  }, [pickerId, fakeEmoji, emoji.name, onEmojiMouseEnter]);
+  const handleMouseLeave = (0, import_react2.useCallback)(() => {
+    onEmojiMouseLeave(fakeEmoji);
+  }, [fakeEmoji, onEmojiMouseLeave]);
+  const handleClick = (0, import_react2.useCallback)(() => {
+    onEmojiSelect(fakeEmoji);
+  }, [fakeEmoji, onEmojiSelect]);
+  const html = (0, import_react2.useMemo)(() => render(fakeEmoji.char), [fakeEmoji.char]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      onMouseEnter: () => {
-        window["emojipicker-" + pickerId].changeFooterEmoji(fakeEmoji);
-        window["emojipicker-" + pickerId].changeSearchbarPlaceholder(
-          emoji.name
-        );
-        onEmojiMouseEnter(fakeEmoji);
-      },
-      onMouseLeave: () => {
-        onEmojiMouseLeave(fakeEmoji);
-      },
-      onClick: () => {
-        onEmojiSelect(fakeEmoji);
-      },
-      className: "HOKKIEMOJIPICKER-skinemoji text-4xl p-1 cursor-pointer hover:bg-white/15  rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
-      dangerouslySetInnerHTML: {
-        __html: render(fakeEmoji.char)
-      }
+      tabIndex: -1,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      className: "HOKKIEMOJIPICKER-skinemoji text-4xl p-1 cursor-pointer hover:bg-white/15 focus:bg-white/20 rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
+      dangerouslySetInnerHTML: { __html: html }
     }
   );
-}
-function CategoryDisplay({
+});
+var CategoryDisplay = (0, import_react2.memo)(function CategoryDisplay2({
   category,
   categoryInfo,
   isToneSelectorEnabled,
@@ -183,13 +185,21 @@ function CategoryDisplay({
         "hokkiemojipicker-category-" + category.name + "-open"
       ) || "true") === "true"
     );
-  }, []);
-  if ((searchValue || "").length > 0) {
+  }, [category.name]);
+  const searchLower = (0, import_react2.useMemo)(
+    () => (searchValue || "").toLowerCase().replace(/_/g, " "),
+    [searchValue]
+  );
+  const filteredEmojis = (0, import_react2.useMemo)(() => {
+    if (!searchLower) return null;
+    return category.emojis.filter(
+      (emoji) => emoji.name.toLowerCase().replace(/_/g, " ").includes(searchLower)
+    );
+  }, [category.emojis, searchLower]);
+  if (searchLower) {
     if (category.name === "recentlyUsed")
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-1.5 w-full " });
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: category.emojis.map((emoji) => {
-      if (!emoji.name.toLowerCase().replace(/_/g, " ").includes(searchValue.toLowerCase().replace(/_/g, " ")))
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-1.5 w-full" });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: filteredEmojis.map((emoji) => {
       if (emoji.hasTone && !emoji.preRendered) {
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           SkinEmoji,
@@ -271,7 +281,8 @@ function CategoryDisplay({
       );
     }) })
   ] });
-}
+});
+var categoryDisplay_default = CategoryDisplay;
 
 // src/emojilib.json
 var emojilib_default = [
@@ -17174,7 +17185,10 @@ function SidebarCategory({
           const categoryRect = categoryContainer.getBoundingClientRect();
           const headerHeight = header.offsetHeight;
           const targetTop = categoryRect.top - containerRect.top + scrollElem.scrollTop - headerHeight;
-          scrollElem.scrollTo({ top: Math.max(0, targetTop), behavior: "smooth" });
+          scrollElem.scrollTo({
+            top: Math.max(0, targetTop),
+            behavior: "smooth"
+          });
         };
         if ((searchValue || "").length > 0) {
           window["emojipicker-" + id].setSearchValue("");
@@ -17527,8 +17541,55 @@ function EmojiSelector({
     ...emojilib_default
   ].filter((a) => a !== void 0);
   const navHeight = showNav ? Math.floor(height / 7) : 0;
-  const id = Math.random().toString(36).substring(2, 15);
+  const id = (0, import_react7.useMemo)(
+    () => Math.random().toString(36).substring(2, 15),
+    []
+  );
   const picker = (0, import_react7.useRef)(null);
+  const scrollRef = (0, import_react7.useRef)(null);
+  const [focusIndex, setFocusIndex] = (0, import_react7.useState)(-1);
+  const handleWheel = (0, import_react7.useCallback)((e) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    e.preventDefault();
+    el.scrollTop += e.deltaY;
+  }, []);
+  (0, import_react7.useEffect)(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      el.removeEventListener("wheel", handleWheel);
+    };
+  }, [handleWheel]);
+  const handleKeyDown = (0, import_react7.useCallback)(
+    (e) => {
+      const el = scrollRef.current;
+      if (!el) return;
+      const emojiElements = el.querySelectorAll(
+        ".HOKKIEMOJIPICKER-emoji, .HOKKIEMOJIPICKER-skinemoji"
+      );
+      const count = emojiElements.length;
+      if (count === 0) return;
+      if (e.key === "Tab") {
+        e.preventDefault();
+        let next = focusIndex + (e.shiftKey ? -1 : 1);
+        if (next < 0) next = count - 1;
+        if (next >= count) next = 0;
+        setFocusIndex(next);
+        const target = emojiElements[next];
+        if (target) {
+          target.scrollIntoView({ block: "nearest" });
+          target.focus();
+        }
+      } else if (e.key === "Enter" && focusIndex >= 0) {
+        e.preventDefault();
+        const target = emojiElements[focusIndex];
+        if (target) target.click();
+      }
+    },
+    [focusIndex]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "HOKKIEMOJIPICKER-emojiContainer", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
@@ -17596,6 +17657,9 @@ function EmojiSelector({
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "div",
                   {
+                    ref: scrollRef,
+                    tabIndex: 0,
+                    onKeyDown: handleKeyDown,
                     style: {
                       flexBasis: "fit-content"
                     },
@@ -17604,7 +17668,7 @@ function EmojiSelector({
                       if (!category) return;
                       const categoryInfo = categoryData[category.name];
                       return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                        CategoryDisplay,
+                        categoryDisplay_default,
                         {
                           onEmojiMouseEnter,
                           onEmojiMouseLeave,

package/dist/index.js

@@ -1,9 +1,9 @@
 // src/index.tsx
-import { useRef as useRef2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect7, useMemo as useMemo2, useRef as useRef2, useState as useState7 } from "react";
 
 // src/categoryDisplay.tsx
 import { ChevronDown } from "lucide-react";
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { memo, useEffect as useEffect2, useState as useState2, useCallback, useMemo } from "react";
 
 // src/render.tsx
 import tw from "@twemoji/api";
@@ -55,84 +55,86 @@ function useSearchValue({ pickerId }) {
 
 // src/categoryDisplay.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function Emoji({
+var Emoji = memo(function Emoji2({
   pickerId,
   emoji,
   onEmojiMouseEnter,
   onEmojiMouseLeave,
-  onEmojiSelect,
-  key
+  onEmojiSelect
 }) {
+  const handleMouseEnter = useCallback(() => {
+    window["emojipicker-" + pickerId].changeFooterEmoji(emoji);
+    window["emojipicker-" + pickerId].changeSearchbarPlaceholder(emoji.name);
+    onEmojiMouseEnter(emoji);
+  }, [pickerId, emoji, onEmojiMouseEnter]);
+  const handleMouseLeave = useCallback(() => {
+    onEmojiMouseLeave(emoji);
+  }, [emoji, onEmojiMouseLeave]);
+  const handleClick = useCallback(() => {
+    onEmojiSelect(emoji);
+  }, [emoji, onEmojiSelect]);
+  const html = useMemo(() => render(emoji.char), [emoji.char]);
   return /* @__PURE__ */ jsx(
     "div",
     {
-      onMouseEnter: () => {
-        window["emojipicker-" + pickerId].changeFooterEmoji(emoji);
-        window["emojipicker-" + pickerId].changeSearchbarPlaceholder(
-          emoji.name
-        );
-        onEmojiMouseEnter(emoji);
-      },
-      onMouseLeave: () => {
-        onEmojiMouseLeave(emoji);
-      },
-      onClick: () => {
-        onEmojiSelect(emoji);
-      },
-      className: "HOKKIEMOJIPICKER-emoji text-4xl p-1 cursor-pointer hover:bg-white/15  rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
-      dangerouslySetInnerHTML: {
-        __html: render(emoji.char)
-      }
+      tabIndex: -1,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      className: "HOKKIEMOJIPICKER-emoji text-4xl p-1 cursor-pointer hover:bg-white/15 focus:bg-white/20 rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
+      dangerouslySetInnerHTML: { __html: html }
     }
   );
-}
-function SkinEmoji({
+});
+var SkinEmoji = memo(function SkinEmoji2({
   pickerId,
   emoji,
   onEmojiSelect,
   onEmojiMouseEnter,
-  onEmojiMouseLeave,
-  key
+  onEmojiMouseLeave
 }) {
   const skin = useSkin({ pickerId });
-  const grabEmoji = () => [1, 2, 3, 4, 5].includes(skin) ? emoji.tones.find((a) => a.tone.find((b) => b === skin) === skin)?.char : emoji.char;
-  const fakeEmoji = {
-    ...emoji,
-    char: grabEmoji(),
-    preRendered: true,
-    tones: [
-      {
-        name: emoji.tones[0].name.replaceAll("1", "0"),
-        tone: [0],
-        char: emoji.char
-      },
-      ...emoji.tones
-    ]
-  };
+  const fakeEmoji = useMemo(() => {
+    const charForSkin = [1, 2, 3, 4, 5].includes(skin) ? emoji.tones.find((a) => a.tone.find((b) => b === skin) === skin)?.char : emoji.char;
+    return {
+      ...emoji,
+      char: charForSkin,
+      preRendered: true,
+      tones: [
+        {
+          name: emoji.tones[0].name.replaceAll("1", "0"),
+          tone: [0],
+          char: emoji.char
+        },
+        ...emoji.tones
+      ]
+    };
+  }, [emoji, skin]);
+  const handleMouseEnter = useCallback(() => {
+    window["emojipicker-" + pickerId].changeFooterEmoji(fakeEmoji);
+    window["emojipicker-" + pickerId].changeSearchbarPlaceholder(emoji.name);
+    onEmojiMouseEnter(fakeEmoji);
+  }, [pickerId, fakeEmoji, emoji.name, onEmojiMouseEnter]);
+  const handleMouseLeave = useCallback(() => {
+    onEmojiMouseLeave(fakeEmoji);
+  }, [fakeEmoji, onEmojiMouseLeave]);
+  const handleClick = useCallback(() => {
+    onEmojiSelect(fakeEmoji);
+  }, [fakeEmoji, onEmojiSelect]);
+  const html = useMemo(() => render(fakeEmoji.char), [fakeEmoji.char]);
   return /* @__PURE__ */ jsx(
     "div",
     {
-      onMouseEnter: () => {
-        window["emojipicker-" + pickerId].changeFooterEmoji(fakeEmoji);
-        window["emojipicker-" + pickerId].changeSearchbarPlaceholder(
-          emoji.name
-        );
-        onEmojiMouseEnter(fakeEmoji);
-      },
-      onMouseLeave: () => {
-        onEmojiMouseLeave(fakeEmoji);
-      },
-      onClick: () => {
-        onEmojiSelect(fakeEmoji);
-      },
-      className: "HOKKIEMOJIPICKER-skinemoji text-4xl p-1 cursor-pointer hover:bg-white/15  rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
-      dangerouslySetInnerHTML: {
-        __html: render(fakeEmoji.char)
-      }
+      tabIndex: -1,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      className: "HOKKIEMOJIPICKER-skinemoji text-4xl p-1 cursor-pointer hover:bg-white/15 focus:bg-white/20 rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
+      dangerouslySetInnerHTML: { __html: html }
     }
   );
-}
-function CategoryDisplay({
+});
+var CategoryDisplay = memo(function CategoryDisplay2({
   category,
   categoryInfo,
   isToneSelectorEnabled,
@@ -149,13 +151,21 @@ function CategoryDisplay({
         "hokkiemojipicker-category-" + category.name + "-open"
       ) || "true") === "true"
     );
-  }, []);
-  if ((searchValue || "").length > 0) {
+  }, [category.name]);
+  const searchLower = useMemo(
+    () => (searchValue || "").toLowerCase().replace(/_/g, " "),
+    [searchValue]
+  );
+  const filteredEmojis = useMemo(() => {
+    if (!searchLower) return null;
+    return category.emojis.filter(
+      (emoji) => emoji.name.toLowerCase().replace(/_/g, " ").includes(searchLower)
+    );
+  }, [category.emojis, searchLower]);
+  if (searchLower) {
     if (category.name === "recentlyUsed")
-      return /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full " });
-    return /* @__PURE__ */ jsx(Fragment, { children: category.emojis.map((emoji) => {
-      if (!emoji.name.toLowerCase().replace(/_/g, " ").includes(searchValue.toLowerCase().replace(/_/g, " ")))
-        return /* @__PURE__ */ jsx(Fragment, {});
+      return /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full" });
+    return /* @__PURE__ */ jsx(Fragment, { children: filteredEmojis.map((emoji) => {
       if (emoji.hasTone && !emoji.preRendered) {
         return /* @__PURE__ */ jsx(
           SkinEmoji,
@@ -237,7 +247,8 @@ function CategoryDisplay({
       );
     }) })
   ] });
-}
+});
+var categoryDisplay_default = CategoryDisplay;
 
 // src/emojilib.json
 var emojilib_default = [
@@ -17140,7 +17151,10 @@ function SidebarCategory({
           const categoryRect = categoryContainer.getBoundingClientRect();
           const headerHeight = header.offsetHeight;
           const targetTop = categoryRect.top - containerRect.top + scrollElem.scrollTop - headerHeight;
-          scrollElem.scrollTo({ top: Math.max(0, targetTop), behavior: "smooth" });
+          scrollElem.scrollTo({
+            top: Math.max(0, targetTop),
+            behavior: "smooth"
+          });
         };
         if ((searchValue || "").length > 0) {
           window["emojipicker-" + id].setSearchValue("");
@@ -17493,8 +17507,55 @@ function EmojiSelector({
     ...emojilib_default
   ].filter((a) => a !== void 0);
   const navHeight = showNav ? Math.floor(height / 7) : 0;
-  const id = Math.random().toString(36).substring(2, 15);
+  const id = useMemo2(
+    () => Math.random().toString(36).substring(2, 15),
+    []
+  );
   const picker = useRef2(null);
+  const scrollRef = useRef2(null);
+  const [focusIndex, setFocusIndex] = useState7(-1);
+  const handleWheel = useCallback2((e) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    e.preventDefault();
+    el.scrollTop += e.deltaY;
+  }, []);
+  useEffect7(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      el.removeEventListener("wheel", handleWheel);
+    };
+  }, [handleWheel]);
+  const handleKeyDown = useCallback2(
+    (e) => {
+      const el = scrollRef.current;
+      if (!el) return;
+      const emojiElements = el.querySelectorAll(
+        ".HOKKIEMOJIPICKER-emoji, .HOKKIEMOJIPICKER-skinemoji"
+      );
+      const count = emojiElements.length;
+      if (count === 0) return;
+      if (e.key === "Tab") {
+        e.preventDefault();
+        let next = focusIndex + (e.shiftKey ? -1 : 1);
+        if (next < 0) next = count - 1;
+        if (next >= count) next = 0;
+        setFocusIndex(next);
+        const target = emojiElements[next];
+        if (target) {
+          target.scrollIntoView({ block: "nearest" });
+          target.focus();
+        }
+      } else if (e.key === "Enter" && focusIndex >= 0) {
+        e.preventDefault();
+        const target = emojiElements[focusIndex];
+        if (target) target.click();
+      }
+    },
+    [focusIndex]
+  );
   return /* @__PURE__ */ jsx7("div", { className: "HOKKIEMOJIPICKER-emojiContainer", children: /* @__PURE__ */ jsxs6(
     "div",
     {
@@ -17562,6 +17623,9 @@ function EmojiSelector({
                 /* @__PURE__ */ jsx7(
                   "div",
                   {
+                    ref: scrollRef,
+                    tabIndex: 0,
+                    onKeyDown: handleKeyDown,
                     style: {
                       flexBasis: "fit-content"
                     },
@@ -17570,7 +17634,7 @@ function EmojiSelector({
                       if (!category) return;
                       const categoryInfo = categoryData[category.name];
                       return /* @__PURE__ */ jsx7(
-                        CategoryDisplay,
+                        categoryDisplay_default,
                         {
                           onEmojiMouseEnter,
                           onEmojiMouseLeave,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hokkiai/discord-emoji-selector",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "A lightweight & powerful discord-style emoji picker",
   "type": "module",
   "main": "dist/index.cjs",