@pro6pp/infer-react 0.0.2-beta.15 → 0.0.2-beta.16

package/README.md

@@ -45,7 +45,7 @@ You can customize the appearance of the component via the following props:
 | `debounceMs`           | Delay in ms before API search. Defaults to `150` (min `50`).                              |
 | `maxRetries`           | Maximum retry attempts for transient network errors. Valid range: `0` to `10`.            |
 | `showClearButton`      | If `true`, displays a button to empty the input field. Defaults to `true`.                |
-| `loadMoreText`         | The text to display on the pagination button.                                             |
+| `loadingText`          | The text displayed at the bottom of the list when fetching more results.                  |
 
 ---
 

package/dist/index.cjs

@@ -524,17 +524,6 @@ var DEFAULT_STYLES = `
     background-color: #f3f4f6;
   }
 
-  .pro6pp-loader {
-    width: 20px;
-    height: 20px;
-    margin: 0 8px;
-    border: 2px solid #e0e0e0;
-    border-top-color: #6b7280;
-    border-radius: 50%;
-    animation: pro6pp-spin 0.6s linear infinite;
-    flex-shrink: 0;
-  }
-
   .pro6pp-dropdown {
     position: absolute;
     top: 100%;
@@ -636,6 +625,27 @@ var DEFAULT_STYLES = `
     touch-action: manipulation;
   }
 
+  .pro6pp-loader-item {
+    padding: 10px 12px;
+    color: #6b7280;
+    font-size: 0.875rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    background-color: #f9fafb;
+    border-top: 1px solid #f3f4f6;
+  }
+
+  .pro6pp-mini-spinner {
+    width: 14px;
+    height: 14px;
+    border: 2px solid #e5e7eb;
+    border-top-color: #6b7280;
+    border-radius: 50%;
+    animation: pro6pp-spin 0.6s linear infinite;
+  }
+
   @media (max-width: 640px) {
     .pro6pp-input {
       font-size: 16px;
@@ -753,7 +763,7 @@ var Pro6PPInfer = (0, import_react.forwardRef)(
     renderItem,
     disableDefaultStyles = false,
     noResultsText = "No results found",
-    loadMoreText = "Show more results...",
+    loadingText = "Loading more...",
     renderNoResults,
     showClearButton = true,
     ...config
@@ -762,6 +772,7 @@ var Pro6PPInfer = (0, import_react.forwardRef)(
     const [isOpen, setIsOpen] = (0, import_react.useState)(false);
     const internalInputRef = (0, import_react.useRef)(null);
     const wrapperRef = (0, import_react.useRef)(null);
+    const observerTarget = (0, import_react.useRef)(null);
     (0, import_react.useImperativeHandle)(ref, () => internalInputRef.current);
     (0, import_react.useEffect)(() => {
       if (disableDefaultStyles) return;
@@ -782,6 +793,22 @@ var Pro6PPInfer = (0, import_react.forwardRef)(
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
+    (0, import_react.useEffect)(() => {
+      const currentTarget = observerTarget.current;
+      if (!currentTarget) return;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].isIntersecting && state.hasMore && !state.isLoading) {
+            loadMore();
+          }
+        },
+        { threshold: 0.1 }
+      );
+      observer.observe(currentTarget);
+      return () => {
+        if (currentTarget) observer.unobserve(currentTarget);
+      };
+    }, [state.hasMore, state.isLoading, loadMore, isOpen]);
     const items = (0, import_react.useMemo)(() => {
       return [
         ...state.cities.map((c) => ({ ...c, type: "city" })),
@@ -804,6 +831,7 @@ var Pro6PPInfer = (0, import_react.forwardRef)(
     const hasResults = items.length > 0;
     const showNoResults = !state.isLoading && !state.isError && state.query.length > 0 && !hasResults && !state.isValid;
     const showDropdown = isOpen && (hasResults || state.isLoading || showNoResults);
+    const isInfiniteLoading = state.isLoading && items.length > 0;
     return /* @__PURE__ */ import_react.default.createElement("div", { ref: wrapperRef, className: `pro6pp-wrapper ${className || ""}`, style }, /* @__PURE__ */ import_react.default.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ import_react.default.createElement(
       "input",
       {
@@ -824,7 +852,7 @@ var Pro6PPInfer = (0, import_react.forwardRef)(
           inputProps?.onFocus?.(e);
         }
       }
-    ), /* @__PURE__ */ import_react.default.createElement("div", { className: "pro6pp-input-addons" }, state.isLoading && /* @__PURE__ */ import_react.default.createElement("div", { className: "pro6pp-loader" }), showClearButton && state.query.length > 0 && /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react.default.createElement("div", { className: "pro6pp-input-addons" }, showClearButton && state.query.length > 0 && /* @__PURE__ */ import_react.default.createElement(
       "button",
       {
         type: "button",
@@ -854,7 +882,7 @@ var Pro6PPInfer = (0, import_react.forwardRef)(
         onWheel: (e) => e.stopPropagation(),
         onMouseDown: (e) => e.stopPropagation()
       },
-      /* @__PURE__ */ import_react.default.createElement("ul", { className: "pro6pp-list", role: "listbox" }, hasResults ? items.map((item, index) => {
+      /* @__PURE__ */ import_react.default.createElement("ul", { className: "pro6pp-list", role: "listbox" }, hasResults ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, items.map((item, index) => {
         const isActive = index === state.selectedSuggestionIndex;
         const secondaryText = item.subtitle || (item.count !== void 0 ? item.count : "");
         const showChevron = item.value === void 0 || item.value === null;
@@ -883,19 +911,7 @@ var Pro6PPInfer = (0, import_react.forwardRef)(
             /* @__PURE__ */ import_react.default.createElement("polyline", { points: "9 18 15 12 9 6" })
           )))
         );
-      }) : state.isLoading ? /* @__PURE__ */ import_react.default.createElement("li", { className: "pro6pp-no-results" }, "Loading suggestions...") : /* @__PURE__ */ import_react.default.createElement("li", { className: "pro6pp-no-results" }, renderNoResults ? renderNoResults(state) : noResultsText)),
-      state.hasMore && /* @__PURE__ */ import_react.default.createElement(
-        "button",
-        {
-          type: "button",
-          className: "pro6pp-load-more",
-          onClick: (e) => {
-            e.preventDefault();
-            loadMore();
-          }
-        },
-        loadMoreText
-      )
+      }), state.hasMore && !state.isLoading && /* @__PURE__ */ import_react.default.createElement("li", { key: "sentinel", ref: observerTarget, style: { height: "1px", opacity: 0 } }), isInfiniteLoading && /* @__PURE__ */ import_react.default.createElement("li", { key: "loader", className: "pro6pp-loader-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pro6pp-mini-spinner" }), /* @__PURE__ */ import_react.default.createElement("span", null, loadingText))) : state.isLoading ? /* @__PURE__ */ import_react.default.createElement("li", { className: "pro6pp-no-results" }, "Searching...") : /* @__PURE__ */ import_react.default.createElement("li", { className: "pro6pp-no-results" }, renderNoResults ? renderNoResults(state) : noResultsText))
     ));
   }
 );

package/dist/index.d.cts

@@ -58,10 +58,10 @@ interface Pro6PPInferProps extends UseInferConfig {
      * @default 'No results found'
      */
     noResultsText?: string;
-    /** * The text to show on the load more button.
-     * @default 'Show more results...'
+    /** * The text to show on the bottom loading indicator.
+     * @default 'Loading more...'
      */
-    loadMoreText?: string;
+    loadingText?: string;
     /** A custom render function for the "no results" state. */
     renderNoResults?: (state: InferState) => React.ReactNode;
     /**

package/dist/index.d.ts

@@ -58,10 +58,10 @@ interface Pro6PPInferProps extends UseInferConfig {
      * @default 'No results found'
      */
     noResultsText?: string;
-    /** * The text to show on the load more button.
-     * @default 'Show more results...'
+    /** * The text to show on the bottom loading indicator.
+     * @default 'Loading more...'
      */
-    loadMoreText?: string;
+    loadingText?: string;
     /** A custom render function for the "no results" state. */
     renderNoResults?: (state: InferState) => React.ReactNode;
     /**

package/dist/index.js

@@ -498,17 +498,6 @@ var DEFAULT_STYLES = `
     background-color: #f3f4f6;
   }
 
-  .pro6pp-loader {
-    width: 20px;
-    height: 20px;
-    margin: 0 8px;
-    border: 2px solid #e0e0e0;
-    border-top-color: #6b7280;
-    border-radius: 50%;
-    animation: pro6pp-spin 0.6s linear infinite;
-    flex-shrink: 0;
-  }
-
   .pro6pp-dropdown {
     position: absolute;
     top: 100%;
@@ -610,6 +599,27 @@ var DEFAULT_STYLES = `
     touch-action: manipulation;
   }
 
+  .pro6pp-loader-item {
+    padding: 10px 12px;
+    color: #6b7280;
+    font-size: 0.875rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    background-color: #f9fafb;
+    border-top: 1px solid #f3f4f6;
+  }
+
+  .pro6pp-mini-spinner {
+    width: 14px;
+    height: 14px;
+    border: 2px solid #e5e7eb;
+    border-top-color: #6b7280;
+    border-radius: 50%;
+    animation: pro6pp-spin 0.6s linear infinite;
+  }
+
   @media (max-width: 640px) {
     .pro6pp-input {
       font-size: 16px;
@@ -727,7 +737,7 @@ var Pro6PPInfer = forwardRef(
     renderItem,
     disableDefaultStyles = false,
     noResultsText = "No results found",
-    loadMoreText = "Show more results...",
+    loadingText = "Loading more...",
     renderNoResults,
     showClearButton = true,
     ...config
@@ -736,6 +746,7 @@ var Pro6PPInfer = forwardRef(
     const [isOpen, setIsOpen] = useState(false);
     const internalInputRef = useRef(null);
     const wrapperRef = useRef(null);
+    const observerTarget = useRef(null);
     useImperativeHandle(ref, () => internalInputRef.current);
     useEffect(() => {
       if (disableDefaultStyles) return;
@@ -756,6 +767,22 @@ var Pro6PPInfer = forwardRef(
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
+    useEffect(() => {
+      const currentTarget = observerTarget.current;
+      if (!currentTarget) return;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].isIntersecting && state.hasMore && !state.isLoading) {
+            loadMore();
+          }
+        },
+        { threshold: 0.1 }
+      );
+      observer.observe(currentTarget);
+      return () => {
+        if (currentTarget) observer.unobserve(currentTarget);
+      };
+    }, [state.hasMore, state.isLoading, loadMore, isOpen]);
     const items = useMemo(() => {
       return [
         ...state.cities.map((c) => ({ ...c, type: "city" })),
@@ -778,6 +805,7 @@ var Pro6PPInfer = forwardRef(
     const hasResults = items.length > 0;
     const showNoResults = !state.isLoading && !state.isError && state.query.length > 0 && !hasResults && !state.isValid;
     const showDropdown = isOpen && (hasResults || state.isLoading || showNoResults);
+    const isInfiniteLoading = state.isLoading && items.length > 0;
     return /* @__PURE__ */ React.createElement("div", { ref: wrapperRef, className: `pro6pp-wrapper ${className || ""}`, style }, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(
       "input",
       {
@@ -798,7 +826,7 @@ var Pro6PPInfer = forwardRef(
           inputProps?.onFocus?.(e);
         }
       }
-    ), /* @__PURE__ */ React.createElement("div", { className: "pro6pp-input-addons" }, state.isLoading && /* @__PURE__ */ React.createElement("div", { className: "pro6pp-loader" }), showClearButton && state.query.length > 0 && /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React.createElement("div", { className: "pro6pp-input-addons" }, showClearButton && state.query.length > 0 && /* @__PURE__ */ React.createElement(
       "button",
       {
         type: "button",
@@ -828,7 +856,7 @@ var Pro6PPInfer = forwardRef(
         onWheel: (e) => e.stopPropagation(),
         onMouseDown: (e) => e.stopPropagation()
       },
-      /* @__PURE__ */ React.createElement("ul", { className: "pro6pp-list", role: "listbox" }, hasResults ? items.map((item, index) => {
+      /* @__PURE__ */ React.createElement("ul", { className: "pro6pp-list", role: "listbox" }, hasResults ? /* @__PURE__ */ React.createElement(React.Fragment, null, items.map((item, index) => {
         const isActive = index === state.selectedSuggestionIndex;
         const secondaryText = item.subtitle || (item.count !== void 0 ? item.count : "");
         const showChevron = item.value === void 0 || item.value === null;
@@ -857,19 +885,7 @@ var Pro6PPInfer = forwardRef(
             /* @__PURE__ */ React.createElement("polyline", { points: "9 18 15 12 9 6" })
           )))
         );
-      }) : state.isLoading ? /* @__PURE__ */ React.createElement("li", { className: "pro6pp-no-results" }, "Loading suggestions...") : /* @__PURE__ */ React.createElement("li", { className: "pro6pp-no-results" }, renderNoResults ? renderNoResults(state) : noResultsText)),
-      state.hasMore && /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          type: "button",
-          className: "pro6pp-load-more",
-          onClick: (e) => {
-            e.preventDefault();
-            loadMore();
-          }
-        },
-        loadMoreText
-      )
+      }), state.hasMore && !state.isLoading && /* @__PURE__ */ React.createElement("li", { key: "sentinel", ref: observerTarget, style: { height: "1px", opacity: 0 } }), isInfiniteLoading && /* @__PURE__ */ React.createElement("li", { key: "loader", className: "pro6pp-loader-item" }, /* @__PURE__ */ React.createElement("div", { className: "pro6pp-mini-spinner" }), /* @__PURE__ */ React.createElement("span", null, loadingText))) : state.isLoading ? /* @__PURE__ */ React.createElement("li", { className: "pro6pp-no-results" }, "Searching...") : /* @__PURE__ */ React.createElement("li", { className: "pro6pp-no-results" }, renderNoResults ? renderNoResults(state) : noResultsText))
     ));
   }
 );

package/package.json

@@ -20,7 +20,7 @@
     "url": "https://github.com/pro6pp/infer-sdk/issues"
   },
   "sideEffects": false,
-  "version": "0.0.2-beta.15",
+  "version": "0.0.2-beta.16",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,7 +46,7 @@
     "react": ">=16"
   },
   "dependencies": {
-    "@pro6pp/infer-core": "0.0.2-beta.13"
+    "@pro6pp/infer-core": "0.0.2-beta.14"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",