lkd-web-kit 0.7.11 → 0.7.13

package/dist/components/InfinityLoadMoreButton/index.cjs

@@ -0,0 +1,42 @@
+'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');
+const React = require('react');
+
+const InfinityLoadMoreButton = ({
+  infinity,
+  labels,
+  parentRef,
+  ...props
+}) => {
+  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 (hasNextPage && !isFetchingNextPage && isIntersecting) fetchNextPage();
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage, isIntersecting]);
+  return /* @__PURE__ */ require$$2.jsx(
+    core.Button,
+    {
+      ref,
+      onClick: () => fetchNextPage(),
+      disabled: !hasNextPage || isFetchingNextPage,
+      variant: "subtle",
+      ...props,
+      children: isFetchingNextPage ? loading : hasNextPage ? loadMore : end
+    }
+  );
+};
+
+exports.InfinityLoadMoreButton = InfinityLoadMoreButton;

package/dist/components/InfinityLoadMoreButton/index.js

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '@mantine/core';
+import { useIntersection } from '@mantine/hooks';
+import { useEffect } from 'react';
+
+const InfinityLoadMoreButton = ({
+  infinity,
+  labels,
+  parentRef,
+  ...props
+}) => {
+  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 (hasNextPage && !isFetchingNextPage && isIntersecting) fetchNextPage();
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage, isIntersecting]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      onClick: () => fetchNextPage(),
+      disabled: !hasNextPage || isFetchingNextPage,
+      variant: "subtle",
+      ...props,
+      children: isFetchingNextPage ? loading : hasNextPage ? loadMore : end
+    }
+  );
+};
+
+export { InfinityLoadMoreButton };

package/dist/components/SelectInfinity/index.cjs

@@ -9,7 +9,7 @@ const core = require('@mantine/core');
 const hooks = require('@mantine/hooks');
 const index = require('../../node_modules/@tanstack/react-virtual/dist/esm/index.cjs');
 const virtualStyles = require('../../utils/virtual-styles.cjs');
-const index$1 = require('../InfinityLoader/index.cjs');
+const index$1 = require('../InfinityLoadMoreButton/index.cjs');
 
 function InfinitySelect({
   value,
@@ -29,6 +29,7 @@ function InfinitySelect({
   comboboxProps,
   searchable = true,
   defaultSelectedOption = null,
+  loadMoreButtonProps,
   ...props
 }) {
   const combobox = core.useCombobox();
@@ -147,18 +148,14 @@ function InfinitySelect({
                   renderOption ? renderOption({ option }) : getOptionLabel(option)
                 );
               }) }) : !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(
-                index$1.InfinityLoader,
+              /* @__PURE__ */ require$$2.jsx(core.Center, { children: /* @__PURE__ */ require$$2.jsx(
+                index$1.InfinityLoadMoreButton,
                 {
-                  root: scrollRef,
                   infinity,
-                  loaderProps: {
-                    mt: 4,
-                    mb: 8,
-                    size: "sm"
-                  }
+                  size: "compact-sm",
+                  ...loadMoreButtonProps
                 }
-              )
+              ) })
             ]
           }
         ) })

package/dist/components/SelectInfinity/index.js

@@ -1,11 +1,11 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useEffect, useRef, createElement } from 'react';
-import { useCombobox, Combobox, InputBase, Input } from '@mantine/core';
+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 { InfinityLoader } from '../InfinityLoader/index.js';
+import { InfinityLoadMoreButton } from '../InfinityLoadMoreButton/index.js';
 
 function InfinitySelect({
   value,
@@ -25,6 +25,7 @@ function InfinitySelect({
   comboboxProps,
   searchable = true,
   defaultSelectedOption = null,
+  loadMoreButtonProps,
   ...props
 }) {
   const combobox = useCombobox();
@@ -143,18 +144,14 @@ function InfinitySelect({
                   renderOption ? renderOption({ option }) : getOptionLabel(option)
                 );
               }) }) : !infinity.isFetching ? /* @__PURE__ */ jsx(Combobox.Empty, { mih: 24, children: nothingFoundMessage ? typeof nothingFoundMessage === "function" ? nothingFoundMessage({ combobox }) : nothingFoundMessage : "No hay resultados" }) : null,
-              /* @__PURE__ */ jsx(
-                InfinityLoader,
+              /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(
+                InfinityLoadMoreButton,
                 {
-                  root: scrollRef,
                   infinity,
-                  loaderProps: {
-                    mt: 4,
-                    mb: 8,
-                    size: "sm"
-                  }
+                  size: "compact-sm",
+                  ...loadMoreButtonProps
                 }
-              )
+              ) })
             ]
           }
         ) })

package/dist/index.cjs

@@ -6,7 +6,7 @@ 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/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');
@@ -20,11 +20,12 @@ 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,7 +71,7 @@ exports.EmptyState = index.EmptyState;
 exports.InfinityLoader = index$1.InfinityLoader;
 exports.NavItems = NavItems.NavItems;
 exports.Icon = Icon.Icon;
-exports.MyRadioGroup = index$2.MyRadioGroup;
+exports.InfinityLoadMoreButton = index$2.InfinityLoadMoreButton;
 exports.MyDatePickerInput = index$3.MyDatePickerInput;
 exports.MyDateTimePicker = index$4.MyDateTimePicker;
 exports.MyNotifications = index$5.MyNotifications;
@@ -84,13 +85,14 @@ 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,7 +334,21 @@ export declare interface InfinityLoaderProps extends CenterProps {
     loaderProps?: LoaderProps;
 }
 
-export declare function InfinitySelect<T = unknown>({ value, searchValue, defaultSearchValue, nothingFoundMessage, infinity, defaultValue, onChange, onSearchChange, renderOption, onOptionSubmit, getOptionLabel, getOptionValue, onSelectedOptionChange, selectedOption, comboboxProps, searchable, defaultSelectedOption, ...props }: InfinitySelectProps<T>): JSX.Element;
+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>;
+    labels?: {
+        loadMore?: string;
+        loading?: string;
+        end?: string;
+    };
+}
+
+export declare function InfinitySelect<T = unknown>({ value, searchValue, defaultSearchValue, nothingFoundMessage, infinity, defaultValue, onChange, onSearchChange, renderOption, onOptionSubmit, getOptionLabel, getOptionValue, onSelectedOptionChange, selectedOption, comboboxProps, searchable, defaultSelectedOption, loadMoreButtonProps, ...props }: InfinitySelectProps<T>): JSX.Element;
 
 export declare interface InfinitySelectProps<T = unknown> extends InputBaseProps, ElementProps<'input', keyof InputBaseProps | 'value' | 'onChange'> {
     value?: string | null;
@@ -361,6 +375,7 @@ export declare interface InfinitySelectProps<T = unknown> extends InputBaseProps
     comboboxProps?: ComboboxProps;
     searchable?: boolean;
     ref?: React.Ref<HTMLInputElement>;
+    loadMoreButtonProps?: Partial<InfinityLoadMoreButtonProps<T>>;
 }
 
 export declare const isInfinityEmpty: (data: InfiniteData<{

package/dist/index.js

@@ -2,7 +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 { MyRadioGroup } from './components/MyRadioGroup/index.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';
@@ -16,6 +16,7 @@ export { MyMultiSelect } from './components/MyMultiSelect/index.js';
 export { MyMonthPickerInput } from './components/MyMonthPickerInput/index.js';
 export { MyDateInput } from './components/MyDateInput/index.js';
 export { MyCheckboxGroup } from './components/MyCheckboxGroup/index.js';
+export { MyRadioGroup } from './components/MyRadioGroup/index.js';
 export { HttpStatus } from './consts/http-status.js';
 export { Revalidate } from './consts/revalidate.js';
 export { NavigationHistoryProvider } from './contexts/NavigationHistoryContext/index.js';

package/package.json

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