lkd-web-kit 0.3.8 → 0.3.9

package/dist/index.cjs3.js

@@ -4,9 +4,41 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const core = require('@mantine/core');
+const hooks = require('@mantine/hooks');
+const clsx = require('clsx');
+const react = require('react');
 
-const InfinityLoader = ({ infinity, loaderProps, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(core.Center, { ...props, children: infinity.isFetching ? /* @__PURE__ */ jsxRuntime.jsx(core.Loader, { ...loaderProps }) : !infinity.hasNextPage && (infinity.data?.pages.length ?? 0) > 1 && /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No hay más resultados" }) });
+const InfinityLoader = ({
+  root,
+  infinity,
+  rootMargin = "0px 0px 0px 0px",
+  endMessage = "No hay más resultados",
+  loaderProps,
+  className,
+  ...props
+}) => {
+  const { entry, ref } = hooks.useIntersection({
+    root: root?.current,
+    rootMargin
+  });
+  react.useEffect(() => {
+    if (entry?.isIntersecting && infinity.hasNextPage) infinity.fetchNextPage();
+  }, [entry?.isIntersecting]);
+  react.useEffect(() => {
+    if (!entry?.isIntersecting) return;
+    const el = root?.current ?? document.documentElement;
+    const hasScroll = el?.scrollHeight > el?.clientHeight;
+    if (!hasScroll) infinity.fetchNextPage();
+  }, [entry?.isIntersecting, infinity.data?.pages.length]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Center,
+    {
+      ref,
+      className: clsx("min-h-4 text-sm", className),
+      ...props,
+      children: infinity.isFetching ? /* @__PURE__ */ jsxRuntime.jsx(core.Loader, { ...loaderProps }) : infinity.data && infinity.data.pages.length > 1 && !infinity.hasNextPage ? endMessage : null
+    }
+  );
 };
 
 exports.InfinityLoader = InfinityLoader;

package/dist/index.d.ts

@@ -259,12 +259,15 @@ export declare function indexBy<T, K, C extends string>(arr: T[], getKey: (item:
 
 export declare type IndexByResult<T> = Record<string, T | undefined>;
 
-export declare const InfinityLoader: ({ infinity, loaderProps, ...props }: InfinityLoaderProps) => JSX.Element;
+export declare const InfinityLoader: ({ root, infinity, rootMargin, endMessage, loaderProps, className, ...props }: InfinityLoaderProps) => JSX.Element;
 
 export declare interface InfinityLoaderProps extends CenterProps {
     infinity: InfiniteQueryHookResult<InfiniteData<{
         data: unknown[];
-    }>, unknown>;
+    }, number>, Error>;
+    root?: RefObject<HTMLElement | null>;
+    rootMargin?: string;
+    endMessage?: React.ReactNode;
     loaderProps?: LoaderProps;
 }
 

package/dist/index.es3.js

@@ -1,8 +1,40 @@
 import { jsx } from 'react/jsx-runtime';
 import { Center, Loader } from '@mantine/core';
+import { useIntersection } from '@mantine/hooks';
+import clsx from 'clsx';
+import { useEffect } from 'react';
 
-const InfinityLoader = ({ infinity, loaderProps, ...props }) => {
-  return /* @__PURE__ */ jsx(Center, { ...props, children: infinity.isFetching ? /* @__PURE__ */ jsx(Loader, { ...loaderProps }) : !infinity.hasNextPage && (infinity.data?.pages.length ?? 0) > 1 && /* @__PURE__ */ jsx("p", { children: "No hay más resultados" }) });
+const InfinityLoader = ({
+  root,
+  infinity,
+  rootMargin = "0px 0px 0px 0px",
+  endMessage = "No hay más resultados",
+  loaderProps,
+  className,
+  ...props
+}) => {
+  const { entry, ref } = useIntersection({
+    root: root?.current,
+    rootMargin
+  });
+  useEffect(() => {
+    if (entry?.isIntersecting && infinity.hasNextPage) infinity.fetchNextPage();
+  }, [entry?.isIntersecting]);
+  useEffect(() => {
+    if (!entry?.isIntersecting) return;
+    const el = root?.current ?? document.documentElement;
+    const hasScroll = el?.scrollHeight > el?.clientHeight;
+    if (!hasScroll) infinity.fetchNextPage();
+  }, [entry?.isIntersecting, infinity.data?.pages.length]);
+  return /* @__PURE__ */ jsx(
+    Center,
+    {
+      ref,
+      className: clsx("min-h-4 text-sm", className),
+      ...props,
+      children: infinity.isFetching ? /* @__PURE__ */ jsx(Loader, { ...loaderProps }) : infinity.data && infinity.data.pages.length > 1 && !infinity.hasNextPage ? endMessage : null
+    }
+  );
 };
 
 export { InfinityLoader };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkd-web-kit",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "A template for creating React component libraries with Vite.",
   "author": "LKD",
   "license": "MIT",
@@ -31,14 +31,14 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^22.15.18",
-    "@types/react": "^19.1.4",
+    "@types/node": "^22.15.21",
+    "@types/react": "^19.1.5",
     "@types/react-dom": "^19.1.5",
     "@typescript-eslint/eslint-plugin": "^8.32.1",
     "@typescript-eslint/parser": "^8.32.1",
     "@vitejs/plugin-react-swc": "^3.9.0",
-    "@vitest/coverage-v8": "^3.1.3",
-    "eslint": "^9.26.0",
+    "@vitest/coverage-v8": "^3.1.4",
+    "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-react": "^7.37.5",
@@ -50,7 +50,7 @@
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^3.1.3"
+    "vitest": "^3.1.4"
   },
   "peerDependencies": {
     "@mantine/core": "^8.0.1",
@@ -61,11 +61,11 @@
     "clsx": "^2.1.1",
     "ky": "^1.8.1",
     "next": "^15.3.2",
-    "query-string": "^9.1.2",
+    "query-string": "^9.2.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-hook-form": "^7.56.3",
+    "react-hook-form": "^7.56.4",
     "react-query-kit": "^3.3.1",
-    "zod": "^3.24.4"
+    "zod": "^3.25.20"
   }
 }