lkd-web-kit 0.7.12 → 0.7.14

package/dist/components/InfinityLoadMoreButton/index.cjs

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
 const require$$2 = require('react/jsx-runtime');
 const core = require('@mantine/core');
 const hooks = require('@mantine/hooks');
@@ -8,18 +10,22 @@ const React = require('react');
 const InfinityLoadMoreButton = ({
   infinity,
   labels,
+  parentRef,
   ...props
 }) => {
-  const { inViewport, ref } = hooks.useInViewport();
+  const { entry, ref } = hooks.useIntersection({
+    root: parentRef?.current ?? void 0
+  });
   const {
     loadMore = "Cargar más",
     loading = "Cargando...",
     end = "Fin de la lista"
   } = labels || {};
   const { hasNextPage, isFetchingNextPage, fetchNextPage } = infinity;
+  const isIntersecting = entry?.isIntersecting ?? false;
   React.useEffect(() => {
-    if (inViewport && hasNextPage && !isFetchingNextPage) fetchNextPage();
-  }, [inViewport, hasNextPage, isFetchingNextPage, fetchNextPage]);
+    if (hasNextPage && !isFetchingNextPage && isIntersecting) fetchNextPage();
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage, isIntersecting]);
   return /* @__PURE__ */ require$$2.jsx(
     core.Button,
     {
@@ -33,4 +39,4 @@ const InfinityLoadMoreButton = ({
   );
 };
 
-module.exports = InfinityLoadMoreButton;
+exports.InfinityLoadMoreButton = InfinityLoadMoreButton;

package/dist/components/InfinityLoadMoreButton/index.js

@@ -1,23 +1,27 @@
 import { jsx } from 'react/jsx-runtime';
 import { Button } from '@mantine/core';
-import { useInViewport } from '@mantine/hooks';
+import { useIntersection } from '@mantine/hooks';
 import { useEffect } from 'react';
 
 const InfinityLoadMoreButton = ({
   infinity,
   labels,
+  parentRef,
   ...props
 }) => {
-  const { inViewport, ref } = useInViewport();
+  const { entry, ref } = useIntersection({
+    root: parentRef?.current ?? void 0
+  });
   const {
     loadMore = "Cargar más",
     loading = "Cargando...",
     end = "Fin de la lista"
   } = labels || {};
   const { hasNextPage, isFetchingNextPage, fetchNextPage } = infinity;
+  const isIntersecting = entry?.isIntersecting ?? false;
   useEffect(() => {
-    if (inViewport && hasNextPage && !isFetchingNextPage) fetchNextPage();
-  }, [inViewport, hasNextPage, isFetchingNextPage, fetchNextPage]);
+    if (hasNextPage && !isFetchingNextPage && isIntersecting) fetchNextPage();
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage, isIntersecting]);
   return /* @__PURE__ */ jsx(
     Button,
     {
@@ -31,4 +35,4 @@ const InfinityLoadMoreButton = ({
   );
 };
 
-export { InfinityLoadMoreButton as default };
+export { InfinityLoadMoreButton };

package/dist/components/SelectInfinity/index.cjs

@@ -149,9 +149,10 @@ function InfinitySelect({
                 );
               }) }) : !infinity.isFetching ? /* @__PURE__ */ require$$2.jsx(core.Combobox.Empty, { mih: 24, children: nothingFoundMessage ? typeof nothingFoundMessage === "function" ? nothingFoundMessage({ combobox }) : nothingFoundMessage : "No hay resultados" }) : null,
               /* @__PURE__ */ require$$2.jsx(core.Center, { children: /* @__PURE__ */ require$$2.jsx(
-                index$1,
+                index$1.InfinityLoadMoreButton,
                 {
                   infinity,
+                  parentRef: scrollRef,
                   size: "compact-sm",
                   ...loadMoreButtonProps
                 }

package/dist/components/SelectInfinity/index.js

@@ -5,7 +5,7 @@ import { useCombobox, Combobox, InputBase, Input, Center } from '@mantine/core';
 import { useUncontrolled } from '@mantine/hooks';
 import { useVirtualizer } from '../../node_modules/@tanstack/react-virtual/dist/esm/index.js';
 import { getVirtualContainerProps, getVirtualItemProps } from '../../utils/virtual-styles.js';
-import InfinityLoadMoreButton from '../InfinityLoadMoreButton/index.js';
+import { InfinityLoadMoreButton } from '../InfinityLoadMoreButton/index.js';
 
 function InfinitySelect({
   value,
@@ -148,6 +148,7 @@ function InfinitySelect({
                 InfinityLoadMoreButton,
                 {
                   infinity,
+                  parentRef: scrollRef,
                   size: "compact-sm",
                   ...loadMoreButtonProps
                 }

package/dist/index.cjs

@@ -6,25 +6,26 @@ const index = require('./components/EmptyState/index.cjs');
 const index$1 = require('./components/InfinityLoader/index.cjs');
 const NavItems = require('./components/NavItems.cjs');
 const Icon = require('./components/Icon.cjs');
-const index$2 = require('./components/MyDatePickerInput/index.cjs');
-const index$3 = require('./components/MyDateTimePicker/index.cjs');
-const index$4 = require('./components/MyNotifications/index.cjs');
-const index$5 = require('./components/MyNumberInput/index.cjs');
-const index$6 = require('./components/MySelect/index.cjs');
-const index$7 = require('./components/MyTextarea/index.cjs');
-const index$8 = require('./components/MyTextInput/index.cjs');
-const index$9 = require('./components/MyTimeInput/index.cjs');
-const index$a = require('./components/SelectInfinity/index.cjs');
-const index$b = require('./components/MyMultiSelect/index.cjs');
-const index$c = require('./components/MyMonthPickerInput/index.cjs');
-const index$d = require('./components/MyDateInput/index.cjs');
-const index$e = require('./components/MyCheckboxGroup/index.cjs');
-const index$f = require('./components/MyRadioGroup/index.cjs');
+const index$2 = require('./components/InfinityLoadMoreButton/index.cjs');
+const index$3 = require('./components/MyDatePickerInput/index.cjs');
+const index$4 = require('./components/MyDateTimePicker/index.cjs');
+const index$5 = require('./components/MyNotifications/index.cjs');
+const index$6 = require('./components/MyNumberInput/index.cjs');
+const index$7 = require('./components/MySelect/index.cjs');
+const index$8 = require('./components/MyTextarea/index.cjs');
+const index$9 = require('./components/MyTextInput/index.cjs');
+const index$a = require('./components/MyTimeInput/index.cjs');
+const index$b = require('./components/SelectInfinity/index.cjs');
+const index$c = require('./components/MyMultiSelect/index.cjs');
+const index$d = require('./components/MyMonthPickerInput/index.cjs');
+const index$e = require('./components/MyDateInput/index.cjs');
+const index$f = require('./components/MyCheckboxGroup/index.cjs');
+const index$g = require('./components/MyRadioGroup/index.cjs');
 const httpStatus = require('./consts/http-status.cjs');
 const revalidate = require('./consts/revalidate.cjs');
-const index$g = require('./contexts/NavigationHistoryContext/index.cjs');
+const index$h = require('./contexts/NavigationHistoryContext/index.cjs');
 const hook = require('./contexts/NavigationHistoryContext/hook.cjs');
-const index$h = require('./contexts/PageDataContext/index.cjs');
+const index$i = require('./contexts/PageDataContext/index.cjs');
 const Form = require('./form/Form.cjs');
 const FormButtonSubmit = require('./form/FormButtonSubmit.cjs');
 const zodValidator = require('./form/utils/zodValidator.cjs');
@@ -70,27 +71,28 @@ exports.EmptyState = index.EmptyState;
 exports.InfinityLoader = index$1.InfinityLoader;
 exports.NavItems = NavItems.NavItems;
 exports.Icon = Icon.Icon;
-exports.MyDatePickerInput = index$2.MyDatePickerInput;
-exports.MyDateTimePicker = index$3.MyDateTimePicker;
-exports.MyNotifications = index$4.MyNotifications;
-exports.MyNumberInput = index$5.MyNumberInput;
-exports.MySelect = index$6.MySelect;
-exports.MyTextarea = index$7.MyTextarea;
-exports.MyTextInput = index$8.MyTextInput;
-exports.MyTimeInput = index$9.MyTimeInput;
-exports.InfinitySelect = index$a.InfinitySelect;
-exports.MyMultiSelect = index$b.MyMultiSelect;
-exports.MyMonthPickerInput = index$c.MyMonthPickerInput;
-exports.MyDateInput = index$d.MyDateInput;
-exports.MyCheckboxGroup = index$e.MyCheckboxGroup;
-exports.MyRadioGroup = index$f.MyRadioGroup;
+exports.InfinityLoadMoreButton = index$2.InfinityLoadMoreButton;
+exports.MyDatePickerInput = index$3.MyDatePickerInput;
+exports.MyDateTimePicker = index$4.MyDateTimePicker;
+exports.MyNotifications = index$5.MyNotifications;
+exports.MyNumberInput = index$6.MyNumberInput;
+exports.MySelect = index$7.MySelect;
+exports.MyTextarea = index$8.MyTextarea;
+exports.MyTextInput = index$9.MyTextInput;
+exports.MyTimeInput = index$a.MyTimeInput;
+exports.InfinitySelect = index$b.InfinitySelect;
+exports.MyMultiSelect = index$c.MyMultiSelect;
+exports.MyMonthPickerInput = index$d.MyMonthPickerInput;
+exports.MyDateInput = index$e.MyDateInput;
+exports.MyCheckboxGroup = index$f.MyCheckboxGroup;
+exports.MyRadioGroup = index$g.MyRadioGroup;
 exports.HttpStatus = httpStatus.HttpStatus;
 exports.Revalidate = revalidate.Revalidate;
-exports.NavigationHistoryProvider = index$g.NavigationHistoryProvider;
+exports.NavigationHistoryProvider = index$h.NavigationHistoryProvider;
 exports.QP_BACK_URL_NAME = hook.QP_BACK_URL_NAME;
 exports.useNavigationHistory = hook.useNavigationHistory;
-exports.PageDataProvider = index$h.PageDataProvider;
-exports.usePageData = index$h.usePageData;
+exports.PageDataProvider = index$i.PageDataProvider;
+exports.usePageData = index$i.usePageData;
 exports.Form = Form.Form;
 exports.FormButtonSubmit = FormButtonSubmit.FormButtonSubmit;
 exports.zodValidator = zodValidator.zodValidator;

package/dist/index.d.ts

@@ -334,10 +334,13 @@ export declare interface InfinityLoaderProps extends CenterProps {
     loaderProps?: LoaderProps;
 }
 
+export declare const InfinityLoadMoreButton: <T>({ infinity, labels, parentRef, ...props }: InfinityLoadMoreButtonProps<T>) => JSX.Element;
+
 export declare interface InfinityLoadMoreButtonProps<T> extends ButtonProps {
     infinity: InfiniteQueryHookResult<InfiniteData<{
         data: T[];
     }, number>, Error>;
+    parentRef?: RefObject<HTMLElement | null>;
     labels?: {
         loadMore?: string;
         loading?: string;

package/dist/index.js

@@ -2,6 +2,7 @@ export { EmptyState } from './components/EmptyState/index.js';
 export { InfinityLoader } from './components/InfinityLoader/index.js';
 export { NavItems } from './components/NavItems.js';
 export { Icon } from './components/Icon.js';
+export { InfinityLoadMoreButton } from './components/InfinityLoadMoreButton/index.js';
 export { MyDatePickerInput } from './components/MyDatePickerInput/index.js';
 export { MyDateTimePicker } from './components/MyDateTimePicker/index.js';
 export { MyNotifications } from './components/MyNotifications/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkd-web-kit",
-  "version": "0.7.12",
+  "version": "0.7.14",
   "description": "A template for creating React component libraries with Vite.",
   "author": "LKD",
   "license": "MIT",