@hokkiai/discord-emoji-selector 1.1.3 → 1.1.5

package/dist/index.cjs

@@ -57,33 +57,33 @@ var import_react = require("react");
 function useSkin({ pickerId }) {
   const [skin, setSkin] = (0, import_react.useState)(0);
   (0, import_react.useEffect)(() => {
-    const a = setInterval(() => {
+    let raf;
+    const loop = () => {
       const newSkin = window["emojipicker-" + pickerId]?.skin;
-      const oldSkin = skin;
-      if (newSkin !== oldSkin) {
-        setSkin(newSkin);
-      }
-    }, 100);
+      setSkin(newSkin || 0);
+      raf = requestAnimationFrame(loop);
+    };
+    raf = requestAnimationFrame(loop);
     return () => {
-      clearInterval(a);
+      cancelAnimationFrame(raf);
     };
-  }, [skin]);
+  }, [pickerId]);
   return skin;
 }
 function useSearchValue({ pickerId }) {
   const [searchValue, setSearchValue] = (0, import_react.useState)("");
   (0, import_react.useEffect)(() => {
-    const a = setInterval(() => {
-      const newSearchValue = window["emojipicker-" + pickerId]?.searchValue;
-      const oldSearchValue = searchValue;
-      if (newSearchValue !== oldSearchValue) {
-        setSearchValue(newSearchValue);
-      }
-    }, 100);
+    let raf;
+    const loop = () => {
+      const newSearchValue = window["emojipicker-" + pickerId]?.searchValue || "";
+      setSearchValue(newSearchValue);
+      raf = requestAnimationFrame(loop);
+    };
+    raf = requestAnimationFrame(loop);
     return () => {
-      clearInterval(a);
+      cancelAnimationFrame(raf);
     };
-  }, [searchValue]);
+  }, [pickerId]);
   return searchValue;
 }
 
@@ -17122,7 +17122,6 @@ function SidebarCategory({
 }) {
   const searchValue = useSearchValue({ pickerId: id });
   const [isActive, setIsActive] = (0, import_react5.useState)(false);
-  const [scrollTop, setScrollTop] = (0, import_react5.useState)(0);
   (0, import_react5.useEffect)(() => {
     if ((searchValue || "").length > 0) {
       setIsActive(false);
@@ -17136,16 +17135,18 @@ function SidebarCategory({
       );
       if (!header) return;
       const categoryContainer = header.parentElement;
-      const scrollStart = categoryContainer.offsetTop - header.offsetHeight * 6;
-      const scrollEnd = categoryContainer.offsetTop + categoryContainer.offsetHeight - header.offsetHeight * 5.5;
-      const actualScroll = elem.querySelector(
+      const scrollElem = elem.querySelector(
         ".HOKKIEMOJIPICKER-emojidisplay"
-      ).scrollTop;
-      if (actualScroll > scrollStart && actualScroll < scrollEnd) {
-        setIsActive(true);
-      } else {
-        setIsActive(false);
-      }
+      );
+      if (!scrollElem) return;
+      const containerRect = scrollElem.getBoundingClientRect();
+      const categoryRect = categoryContainer.getBoundingClientRect();
+      const headerHeight = header.offsetHeight;
+      const categoryTop = categoryRect.top - containerRect.top + scrollElem.scrollTop;
+      const categoryBottom = categoryTop + categoryContainer.offsetHeight;
+      const sTop = scrollElem.scrollTop;
+      const inView = sTop >= categoryTop - headerHeight && sTop < categoryBottom - headerHeight;
+      setIsActive(inView);
     };
     elem.querySelector(".HOKKIEMOJIPICKER-emojidisplay").addEventListener("scroll", updateActive);
     updateActive();
@@ -17153,28 +17154,34 @@ function SidebarCategory({
       elem.querySelector(".HOKKIEMOJIPICKER-emojidisplay").removeEventListener("scroll", updateActive);
     };
   }, [picker, searchValue]);
-  (0, import_react5.useEffect)(() => {
-    const elem = picker.current;
-    if (!elem) return;
-    const header = elem.querySelector(
-      ".HOKKIEMOJIPICKER-categoryHeader." + categoryName
-    );
-    const categoryContainer = header.parentElement;
-    const scrollTop2 = categoryContainer.offsetTop - header.offsetHeight * 5.5;
-    setScrollTop(scrollTop2);
-  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "button",
     {
       onClick: () => {
         const elem = picker.current;
+        if (!elem) return;
+        const doScroll = () => {
+          const header = elem.querySelector(
+            ".HOKKIEMOJIPICKER-categoryHeader." + categoryName
+          );
+          if (!header) return;
+          const categoryContainer = header.parentElement;
+          const scrollElem = elem.querySelector(
+            ".HOKKIEMOJIPICKER-emojidisplay"
+          );
+          if (!scrollElem) return;
+          const containerRect = scrollElem.getBoundingClientRect();
+          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" });
+        };
         if ((searchValue || "").length > 0) {
           window["emojipicker-" + id].setSearchValue("");
-          setTimeout(() => {
-            elem.querySelector(".HOKKIEMOJIPICKER-emojidisplay").scrollTop = scrollTop;
-          }, 600);
+          setTimeout(doScroll, 50);
+        } else {
+          doScroll();
         }
-        elem.querySelector(".HOKKIEMOJIPICKER-emojidisplay").scrollTop = scrollTop;
       },
       "data-active": isActive ? "true" : "false",
       className: "!outline-0 HOKKIEMOJIPICKER-sidebarButton cursor-pointer size-8 data-[active=true]:bg-white/5 hover:bg-white/10 overflow-hidden *:!size-6.5 transition-all hover:*:!opacity-85 data-[active=true]:*:!opacity-100 flex items-center justify-center rounded-sm *:opacity-50",
@@ -17522,7 +17529,6 @@ function EmojiSelector({
   const navHeight = showNav ? Math.floor(height / 7) : 0;
   const id = Math.random().toString(36).substring(2, 15);
   const picker = (0, import_react7.useRef)(null);
-  console.log(id);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "HOKKIEMOJIPICKER-emojiContainer", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {

package/dist/index.js

@@ -23,33 +23,33 @@ import { useEffect, useState } from "react";
 function useSkin({ pickerId }) {
   const [skin, setSkin] = useState(0);
   useEffect(() => {
-    const a = setInterval(() => {
+    let raf;
+    const loop = () => {
       const newSkin = window["emojipicker-" + pickerId]?.skin;
-      const oldSkin = skin;
-      if (newSkin !== oldSkin) {
-        setSkin(newSkin);
-      }
-    }, 100);
+      setSkin(newSkin || 0);
+      raf = requestAnimationFrame(loop);
+    };
+    raf = requestAnimationFrame(loop);
     return () => {
-      clearInterval(a);
+      cancelAnimationFrame(raf);
     };
-  }, [skin]);
+  }, [pickerId]);
   return skin;
 }
 function useSearchValue({ pickerId }) {
   const [searchValue, setSearchValue] = useState("");
   useEffect(() => {
-    const a = setInterval(() => {
-      const newSearchValue = window["emojipicker-" + pickerId]?.searchValue;
-      const oldSearchValue = searchValue;
-      if (newSearchValue !== oldSearchValue) {
-        setSearchValue(newSearchValue);
-      }
-    }, 100);
+    let raf;
+    const loop = () => {
+      const newSearchValue = window["emojipicker-" + pickerId]?.searchValue || "";
+      setSearchValue(newSearchValue);
+      raf = requestAnimationFrame(loop);
+    };
+    raf = requestAnimationFrame(loop);
     return () => {
-      clearInterval(a);
+      cancelAnimationFrame(raf);
     };
-  }, [searchValue]);
+  }, [pickerId]);
   return searchValue;
 }
 
@@ -17088,7 +17088,6 @@ function SidebarCategory({
 }) {
   const searchValue = useSearchValue({ pickerId: id });
   const [isActive, setIsActive] = useState5(false);
-  const [scrollTop, setScrollTop] = useState5(0);
   useEffect5(() => {
     if ((searchValue || "").length > 0) {
       setIsActive(false);
@@ -17102,16 +17101,18 @@ function SidebarCategory({
       );
       if (!header) return;
       const categoryContainer = header.parentElement;
-      const scrollStart = categoryContainer.offsetTop - header.offsetHeight * 6;
-      const scrollEnd = categoryContainer.offsetTop + categoryContainer.offsetHeight - header.offsetHeight * 5.5;
-      const actualScroll = elem.querySelector(
+      const scrollElem = elem.querySelector(
         ".HOKKIEMOJIPICKER-emojidisplay"
-      ).scrollTop;
-      if (actualScroll > scrollStart && actualScroll < scrollEnd) {
-        setIsActive(true);
-      } else {
-        setIsActive(false);
-      }
+      );
+      if (!scrollElem) return;
+      const containerRect = scrollElem.getBoundingClientRect();
+      const categoryRect = categoryContainer.getBoundingClientRect();
+      const headerHeight = header.offsetHeight;
+      const categoryTop = categoryRect.top - containerRect.top + scrollElem.scrollTop;
+      const categoryBottom = categoryTop + categoryContainer.offsetHeight;
+      const sTop = scrollElem.scrollTop;
+      const inView = sTop >= categoryTop - headerHeight && sTop < categoryBottom - headerHeight;
+      setIsActive(inView);
     };
     elem.querySelector(".HOKKIEMOJIPICKER-emojidisplay").addEventListener("scroll", updateActive);
     updateActive();
@@ -17119,28 +17120,34 @@ function SidebarCategory({
       elem.querySelector(".HOKKIEMOJIPICKER-emojidisplay").removeEventListener("scroll", updateActive);
     };
   }, [picker, searchValue]);
-  useEffect5(() => {
-    const elem = picker.current;
-    if (!elem) return;
-    const header = elem.querySelector(
-      ".HOKKIEMOJIPICKER-categoryHeader." + categoryName
-    );
-    const categoryContainer = header.parentElement;
-    const scrollTop2 = categoryContainer.offsetTop - header.offsetHeight * 5.5;
-    setScrollTop(scrollTop2);
-  }, []);
   return /* @__PURE__ */ jsx5(
     "button",
     {
       onClick: () => {
         const elem = picker.current;
+        if (!elem) return;
+        const doScroll = () => {
+          const header = elem.querySelector(
+            ".HOKKIEMOJIPICKER-categoryHeader." + categoryName
+          );
+          if (!header) return;
+          const categoryContainer = header.parentElement;
+          const scrollElem = elem.querySelector(
+            ".HOKKIEMOJIPICKER-emojidisplay"
+          );
+          if (!scrollElem) return;
+          const containerRect = scrollElem.getBoundingClientRect();
+          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" });
+        };
         if ((searchValue || "").length > 0) {
           window["emojipicker-" + id].setSearchValue("");
-          setTimeout(() => {
-            elem.querySelector(".HOKKIEMOJIPICKER-emojidisplay").scrollTop = scrollTop;
-          }, 600);
+          setTimeout(doScroll, 50);
+        } else {
+          doScroll();
         }
-        elem.querySelector(".HOKKIEMOJIPICKER-emojidisplay").scrollTop = scrollTop;
       },
       "data-active": isActive ? "true" : "false",
       className: "!outline-0 HOKKIEMOJIPICKER-sidebarButton cursor-pointer size-8 data-[active=true]:bg-white/5 hover:bg-white/10 overflow-hidden *:!size-6.5 transition-all hover:*:!opacity-85 data-[active=true]:*:!opacity-100 flex items-center justify-center rounded-sm *:opacity-50",
@@ -17488,7 +17495,6 @@ function EmojiSelector({
   const navHeight = showNav ? Math.floor(height / 7) : 0;
   const id = Math.random().toString(36).substring(2, 15);
   const picker = useRef2(null);
-  console.log(id);
   return /* @__PURE__ */ jsx7("div", { className: "HOKKIEMOJIPICKER-emojiContainer", children: /* @__PURE__ */ jsxs6(
     "div",
     {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@hokkiai/discord-emoji-selector",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "A lightweight & powerful discord-style emoji picker",
   "type": "module",
   "main": "dist/index.cjs",
-  "homepage": "https://github.com/shardteam-dev/discord-emoji-selector",
+  "homepage": "https://github.com/hokkiai/discord-emoji-selector",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "keywords": [
@@ -28,9 +28,6 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "tsup src/index.tsx --dts --format esm,cjs"
-  },
   "peerDependencies": {
     "react": ">=18"
   },
@@ -44,5 +41,8 @@
     "@types/react": "^19.1.10",
     "tsup": "^8.5.0",
     "typescript": "^5.9.2"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --dts --format esm,cjs"
   }
-}
+}