@funnest/charts-ui 0.6.15 → 0.6.16

package/dist/index.js

@@ -1821,6 +1821,8 @@ var DEBOUNCE_MS = 150;
 var RECENT_KEY2 = "recent-symbols";
 var FAVORITE_KEY = "favorite-symbols";
 var MAX_RECENT = 8;
+var FIRST_ROWS = 40;
+var MORE_ROWS = 80;
 var displayCode = (symbol) => symbol.slice(symbol.lastIndexOf(":") + 1);
 var toStored = (info) => JSON.parse(JSON.stringify({ ...info, tickSize: 0, price: void 0, changePercent: void 0, sparkline: void 0 }));
 function Highlight({ text, query }) {
@@ -1896,8 +1898,10 @@ function SymbolSearch({ ctx }) {
   const [recent, setRecent] = d2(() => ctx.storage.get(RECENT_KEY2, []));
   const [favorites, setFavorites] = d2(() => ctx.storage.get(FAVORITE_KEY, []));
   const [active, setActive] = d2(0);
+  const [limit, setLimit] = d2(FIRST_ROWS);
   const inputRef = T2(null);
   const listRef = T2(null);
+  const endRef = T2(null);
   A2(() => inputRef.current?.focus(), []);
   A2(() => {
     let alive = true;
@@ -1923,7 +1927,8 @@ function SymbolSearch({ ctx }) {
   }, [query]);
   const matchCategory = ctx.searchCategories.find((c3) => c3.id === category)?.match ?? (() => true);
   const categoryOf = (info) => ctx.searchCategories.find((c3) => c3.id !== "all" && c3.match(info));
-  const isFavorite = (info) => favorites.some((f4) => f4.symbol === info.symbol);
+  const favoriteSet = w2(() => new Set(favorites.map((f4) => f4.symbol)), [favorites]);
+  const isFavorite = (info) => favoriteSet.has(info.symbol);
   const filter = (list) => list.filter((i3) => matchCategory(i3) && (!exchange || i3.exchange === exchange));
   const exchanges = w2(() => {
     const counts = /* @__PURE__ */ new Map();
@@ -1954,11 +1959,36 @@ function SymbolSearch({ ctx }) {
     }
   }
   const rows = [...recentRows, ...resultRows];
+  const shownRows = resultRows.length > limit ? resultRows.slice(0, limit) : resultRows;
   const exchangeLabel = (name) => ctx.searchExchanges.find((e3) => e3.name === name)?.label?.[locale] ?? name;
   A2(() => setActive(0), [query, category, exchange, view, results]);
   A2(() => {
-    listRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
+    setLimit(FIRST_ROWS);
+    if (listRef.current) listRef.current.scrollTop = 0;
+  }, [query, category, exchange, view]);
+  const hasMore = resultRows.length > limit;
+  A2(() => {
+    const end = endRef.current;
+    if (!hasMore || !end) return;
+    const io = new IntersectionObserver((entries) => entries.some((e3) => e3.isIntersecting) && setLimit((l3) => l3 + MORE_ROWS), {
+      root: listRef.current,
+      rootMargin: "0px 0px 600px 0px"
+    });
+    io.observe(end);
+    return () => io.disconnect();
+  }, [hasMore, limit]);
+  const scrollToActive = T2(false);
+  A2(() => {
+    if (active - recentRows.length >= limit - 1) {
+      scrollToActive.current = true;
+      setLimit(active - recentRows.length + MORE_ROWS);
+    } else listRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
   }, [active]);
+  A2(() => {
+    if (!scrollToActive.current) return;
+    scrollToActive.current = false;
+    listRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [limit]);
   const close = () => ctx.setSearchOpen(false);
   const save = (key, next, set) => {
     set(next);
@@ -2048,7 +2078,8 @@ function SymbolSearch({ ctx }) {
             }
           )
         ]
-      }
+      },
+      (isRecent ? "recent:" : "") + info.symbol
     );
   };
   const sideItem = (label, selected, onClick, extra, logoUrl) => /* @__PURE__ */ a3("button", { class: "fnc-sr-side-item", "aria-pressed": selected, onClick, children: [
@@ -2104,13 +2135,14 @@ function SymbolSearch({ ctx }) {
         ] }),
         recentRows.map((info, i3) => row2(info, i3, true)),
         (recentRows.length > 0 || view.kind === "favorites") && /* @__PURE__ */ a3("div", { class: "fnc-sr-section", children: view.kind === "favorites" ? t3.favorites : t3.symbols }),
-        loading && !results && view.kind === "all" ? Array.from({ length: 6 }, () => /* @__PURE__ */ a3("div", { class: "fnc-sr-skeleton", "aria-hidden": "true" })) : resultRows.map((info, i3) => {
+        loading && !results && view.kind === "all" ? Array.from({ length: 6 }, () => /* @__PURE__ */ a3("div", { class: "fnc-sr-skeleton", "aria-hidden": "true" })) : shownRows.map((info, i3) => {
           const m3 = more.get(i3);
           return m3 ? /* @__PURE__ */ a3($, { children: [
             row2(info, recentRows.length + i3, false),
             /* @__PURE__ */ a3("button", { class: "fnc-sr-more", onClick: () => (setView({ kind: "all" }), setExchange(m3.exchange)), children: t3.showAllIn.replace("{exchange}", exchangeLabel(m3.exchange)).replace("{n}", m3.count.toLocaleString(locale === "ko" ? "ko-KR" : "en-US")) })
-          ] }) : row2(info, recentRows.length + i3, false);
+          ] }, info.symbol) : row2(info, recentRows.length + i3, false);
         }),
+        hasMore && /* @__PURE__ */ a3("div", { ref: endRef, class: "fnc-sr-end", "aria-hidden": "true" }),
         !loading && rows.length === 0 && /* @__PURE__ */ a3("div", { class: "fnc-empty", children: view.kind === "favorites" && favorites.length === 0 ? t3.noFavorites : t3.noResults })
       ] })
     ] }),
@@ -3255,6 +3287,7 @@ var CSS = (
 .fnc-sr-spark-slot { display: inline-flex; flex: none; width: 72px; height: 24px; }
 .fnc-sr-more { display: block; width: calc(100% - 16px); margin: 2px 8px 8px; padding: 8px 12px; border-radius: var(--fnc-radius); background: var(--fnc-surface); color: var(--fnc-text-2); font-size: 13px; font-weight: 600; text-align: left; }
 .fnc-sr-more:hover { color: var(--fnc-text); }
+.fnc-sr-end { height: 1px; }
 .fnc-sr-side-item:hover { background: var(--fnc-surface); }
 .fnc-sr-side-item[aria-pressed='true'] { background: var(--fnc-surface); font-weight: 700; }
 .fnc-chip-token {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts-ui",
-  "version": "0.6.15",
+  "version": "0.6.16",
   "description": "Pro trading UI (toolbar, drawing tools, sheets) for Funnest Charts. Framework-agnostic.",
   "keywords": [
     "chart",
@@ -42,7 +42,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@funnest/charts": "0.6.15"
+    "@funnest/charts": "0.6.16"
   },
   "devDependencies": {
     "preact": "^11.2.0"