lkd-web-kit 0.7.13 → 0.7.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
5
  const require$$2 = require('react/jsx-runtime');
6
6
  const core = require('@mantine/core');
7
7
  const hooks = require('@mantine/hooks');
8
+ const clsx = require('clsx');
8
9
  const React = require('react');
9
10
 
10
11
  const InfinityLoadMoreButton = ({
@@ -14,7 +15,9 @@ const InfinityLoadMoreButton = ({
14
15
  ...props
15
16
  }) => {
16
17
  const { entry, ref } = hooks.useIntersection({
17
- root: parentRef?.current ?? void 0
18
+ root: parentRef?.current,
19
+ rootMargin: "0px 0px 0px 0px",
20
+ threshold: 0.5
18
21
  });
19
22
  const {
20
23
  loadMore = "Cargar más",
@@ -22,17 +25,21 @@ const InfinityLoadMoreButton = ({
22
25
  end = "Fin de la lista"
23
26
  } = labels || {};
24
27
  const { hasNextPage, isFetchingNextPage, fetchNextPage } = infinity;
25
- const isIntersecting = entry?.isIntersecting ?? false;
26
28
  React.useEffect(() => {
27
- if (hasNextPage && !isFetchingNextPage && isIntersecting) fetchNextPage();
28
- }, [hasNextPage, isFetchingNextPage, fetchNextPage, isIntersecting]);
29
+ if (hasNextPage && !isFetchingNextPage && entry?.isIntersecting)
30
+ fetchNextPage();
31
+ }, [entry?.isIntersecting]);
29
32
  return /* @__PURE__ */ require$$2.jsx(
30
33
  core.Button,
31
34
  {
32
35
  ref,
33
36
  onClick: () => fetchNextPage(),
34
- disabled: !hasNextPage || isFetchingNextPage,
35
- variant: "subtle",
37
+ className: clsx(
38
+ (!hasNextPage || isFetchingNextPage) && "pointer-events-none",
39
+ "font-medium"
40
+ ),
41
+ variant: "transparent",
42
+ color: !hasNextPage ? "gray" : void 0,
36
43
  ...props,
37
44
  children: isFetchingNextPage ? loading : hasNextPage ? loadMore : end
38
45
  }
@@ -1,6 +1,7 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { Button } from '@mantine/core';
3
3
  import { useIntersection } from '@mantine/hooks';
4
+ import clsx from 'clsx';
4
5
  import { useEffect } from 'react';
5
6
 
6
7
  const InfinityLoadMoreButton = ({
@@ -10,7 +11,9 @@ const InfinityLoadMoreButton = ({
10
11
  ...props
11
12
  }) => {
12
13
  const { entry, ref } = useIntersection({
13
- root: parentRef?.current ?? void 0
14
+ root: parentRef?.current,
15
+ rootMargin: "0px 0px 0px 0px",
16
+ threshold: 0.5
14
17
  });
15
18
  const {
16
19
  loadMore = "Cargar más",
@@ -18,17 +21,21 @@ const InfinityLoadMoreButton = ({
18
21
  end = "Fin de la lista"
19
22
  } = labels || {};
20
23
  const { hasNextPage, isFetchingNextPage, fetchNextPage } = infinity;
21
- const isIntersecting = entry?.isIntersecting ?? false;
22
24
  useEffect(() => {
23
- if (hasNextPage && !isFetchingNextPage && isIntersecting) fetchNextPage();
24
- }, [hasNextPage, isFetchingNextPage, fetchNextPage, isIntersecting]);
25
+ if (hasNextPage && !isFetchingNextPage && entry?.isIntersecting)
26
+ fetchNextPage();
27
+ }, [entry?.isIntersecting]);
25
28
  return /* @__PURE__ */ jsx(
26
29
  Button,
27
30
  {
28
31
  ref,
29
32
  onClick: () => fetchNextPage(),
30
- disabled: !hasNextPage || isFetchingNextPage,
31
- variant: "subtle",
33
+ className: clsx(
34
+ (!hasNextPage || isFetchingNextPage) && "pointer-events-none",
35
+ "font-medium"
36
+ ),
37
+ variant: "transparent",
38
+ color: !hasNextPage ? "gray" : void 0,
32
39
  ...props,
33
40
  children: isFetchingNextPage ? loading : hasNextPage ? loadMore : end
34
41
  }
@@ -70,6 +70,7 @@ function InfinitySelect({
70
70
  overscan: 7,
71
71
  getScrollElement: () => scrollRef.current
72
72
  });
73
+ console.log(virtualizer.getTotalSize());
73
74
  const scrollRef = React.useRef(null);
74
75
  return /* @__PURE__ */ require$$2.jsxs(
75
76
  core.Combobox,
@@ -106,7 +107,8 @@ function InfinitySelect({
106
107
  handleSearch(event.currentTarget.value);
107
108
  } : void 0,
108
109
  onClick: (event) => {
109
- if (!props.readOnly) searchable ? combobox.openDropdown() : combobox.toggleDropdown();
110
+ if (!props.readOnly)
111
+ searchable ? combobox.openDropdown() : combobox.toggleDropdown();
110
112
  props.onClick?.(event);
111
113
  },
112
114
  onFocus: (event) => {
@@ -122,18 +124,22 @@ function InfinitySelect({
122
124
  variant: props.readOnly ? "filled" : "default"
123
125
  }
124
126
  ) }),
125
- /* @__PURE__ */ require$$2.jsx(core.Combobox.Dropdown, { children: /* @__PURE__ */ require$$2.jsxs(
127
+ /* @__PURE__ */ require$$2.jsx(core.Combobox.Dropdown, { children: /* @__PURE__ */ require$$2.jsx(
126
128
  core.Combobox.Options,
127
129
  {
130
+ mih: 50,
128
131
  mah: 200,
129
132
  style: {
130
133
  overflowY: "auto"
131
134
  },
132
135
  ref: scrollRef,
133
- children: [
134
- data.length > 0 ? /* @__PURE__ */ require$$2.jsx("div", { ...virtualStyles.getVirtualContainerProps(virtualizer), children: virtualizer.getVirtualItems().map((virtualItem) => {
136
+ children: data.length > 0 ? /* @__PURE__ */ require$$2.jsxs(require$$2.Fragment, { children: [
137
+ /* @__PURE__ */ require$$2.jsx("div", { ...virtualStyles.getVirtualContainerProps(virtualizer), children: virtualizer.getVirtualItems().map((virtualItem) => {
135
138
  const option = data[virtualItem.index];
136
- const virtualItemProps = virtualStyles.getVirtualItemProps(virtualItem, virtualizer);
139
+ const virtualItemProps = virtualStyles.getVirtualItemProps(
140
+ virtualItem,
141
+ virtualizer
142
+ );
137
143
  return /* @__PURE__ */ React.createElement(
138
144
  core.Combobox.Option,
139
145
  {
@@ -147,16 +153,17 @@ function InfinitySelect({
147
153
  },
148
154
  renderOption ? renderOption({ option }) : getOptionLabel(option)
149
155
  );
150
- }) }) : !infinity.isFetching ? /* @__PURE__ */ require$$2.jsx(core.Combobox.Empty, { mih: 24, children: nothingFoundMessage ? typeof nothingFoundMessage === "function" ? nothingFoundMessage({ combobox }) : nothingFoundMessage : "No hay resultados" }) : null,
151
- /* @__PURE__ */ require$$2.jsx(core.Center, { children: /* @__PURE__ */ require$$2.jsx(
156
+ }) }),
157
+ virtualizer.getTotalSize() !== 0 && /* @__PURE__ */ require$$2.jsx(core.Center, { className: "mt-2", children: /* @__PURE__ */ require$$2.jsx(
152
158
  index$1.InfinityLoadMoreButton,
153
159
  {
154
160
  infinity,
161
+ parentRef: scrollRef,
155
162
  size: "compact-sm",
156
163
  ...loadMoreButtonProps
157
164
  }
158
165
  ) })
159
- ]
166
+ ] }) : !infinity.isFetching ? /* @__PURE__ */ require$$2.jsx(core.Combobox.Empty, { mih: 24, children: nothingFoundMessage ? typeof nothingFoundMessage === "function" ? nothingFoundMessage({ combobox }) : nothingFoundMessage : "No hay resultados" }) : null
160
167
  }
161
168
  ) })
162
169
  ]
@@ -1,5 +1,5 @@
1
1
  'use client';
2
- import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
3
3
  import { useEffect, useRef, createElement } from 'react';
4
4
  import { useCombobox, Combobox, InputBase, Input, Center } from '@mantine/core';
5
5
  import { useUncontrolled } from '@mantine/hooks';
@@ -66,6 +66,7 @@ function InfinitySelect({
66
66
  overscan: 7,
67
67
  getScrollElement: () => scrollRef.current
68
68
  });
69
+ console.log(virtualizer.getTotalSize());
69
70
  const scrollRef = useRef(null);
70
71
  return /* @__PURE__ */ jsxs(
71
72
  Combobox,
@@ -102,7 +103,8 @@ function InfinitySelect({
102
103
  handleSearch(event.currentTarget.value);
103
104
  } : void 0,
104
105
  onClick: (event) => {
105
- if (!props.readOnly) searchable ? combobox.openDropdown() : combobox.toggleDropdown();
106
+ if (!props.readOnly)
107
+ searchable ? combobox.openDropdown() : combobox.toggleDropdown();
106
108
  props.onClick?.(event);
107
109
  },
108
110
  onFocus: (event) => {
@@ -118,18 +120,22 @@ function InfinitySelect({
118
120
  variant: props.readOnly ? "filled" : "default"
119
121
  }
120
122
  ) }),
121
- /* @__PURE__ */ jsx(Combobox.Dropdown, { children: /* @__PURE__ */ jsxs(
123
+ /* @__PURE__ */ jsx(Combobox.Dropdown, { children: /* @__PURE__ */ jsx(
122
124
  Combobox.Options,
123
125
  {
126
+ mih: 50,
124
127
  mah: 200,
125
128
  style: {
126
129
  overflowY: "auto"
127
130
  },
128
131
  ref: scrollRef,
129
- children: [
130
- data.length > 0 ? /* @__PURE__ */ jsx("div", { ...getVirtualContainerProps(virtualizer), children: virtualizer.getVirtualItems().map((virtualItem) => {
132
+ children: data.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
133
+ /* @__PURE__ */ jsx("div", { ...getVirtualContainerProps(virtualizer), children: virtualizer.getVirtualItems().map((virtualItem) => {
131
134
  const option = data[virtualItem.index];
132
- const virtualItemProps = getVirtualItemProps(virtualItem, virtualizer);
135
+ const virtualItemProps = getVirtualItemProps(
136
+ virtualItem,
137
+ virtualizer
138
+ );
133
139
  return /* @__PURE__ */ createElement(
134
140
  Combobox.Option,
135
141
  {
@@ -143,16 +149,17 @@ function InfinitySelect({
143
149
  },
144
150
  renderOption ? renderOption({ option }) : getOptionLabel(option)
145
151
  );
146
- }) }) : !infinity.isFetching ? /* @__PURE__ */ jsx(Combobox.Empty, { mih: 24, children: nothingFoundMessage ? typeof nothingFoundMessage === "function" ? nothingFoundMessage({ combobox }) : nothingFoundMessage : "No hay resultados" }) : null,
147
- /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(
152
+ }) }),
153
+ virtualizer.getTotalSize() !== 0 && /* @__PURE__ */ jsx(Center, { className: "mt-2", children: /* @__PURE__ */ jsx(
148
154
  InfinityLoadMoreButton,
149
155
  {
150
156
  infinity,
157
+ parentRef: scrollRef,
151
158
  size: "compact-sm",
152
159
  ...loadMoreButtonProps
153
160
  }
154
161
  ) })
155
- ]
162
+ ] }) : !infinity.isFetching ? /* @__PURE__ */ jsx(Combobox.Empty, { mih: 24, children: nothingFoundMessage ? typeof nothingFoundMessage === "function" ? nothingFoundMessage({ combobox }) : nothingFoundMessage : "No hay resultados" }) : null
156
163
  }
157
164
  ) })
158
165
  ]
@@ -7,7 +7,7 @@ const require$$2 = require('react/jsx-runtime');
7
7
  const core = require('@mantine/core');
8
8
  const reactHookForm = require('react-hook-form');
9
9
 
10
- const FormButtonSubmit = ({
10
+ const FormSubmitButton = ({
11
11
  disabled,
12
12
  disabledWhenSuccess,
13
13
  ...props
@@ -26,4 +26,4 @@ const FormButtonSubmit = ({
26
26
  );
27
27
  };
28
28
 
29
- exports.FormButtonSubmit = FormButtonSubmit;
29
+ exports.FormSubmitButton = FormSubmitButton;
@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
3
3
  import { Button } from '@mantine/core';
4
4
  import { useFormContext } from 'react-hook-form';
5
5
 
6
- const FormButtonSubmit = ({
6
+ const FormSubmitButton = ({
7
7
  disabled,
8
8
  disabledWhenSuccess,
9
9
  ...props
@@ -22,4 +22,4 @@ const FormButtonSubmit = ({
22
22
  );
23
23
  };
24
24
 
25
- export { FormButtonSubmit };
25
+ export { FormSubmitButton };
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
5
  const require$$2 = require('react/jsx-runtime');
6
- const index = require('../../components/SelectInfinity/index.cjs');
6
+ const index = require('../../components/InfinitySelect/index.cjs');
7
7
  const withController = require('../../hocs/withController.cjs');
8
8
 
9
9
  const FormInfinitySelect = withController.withController(({ field, props }) => {
@@ -1,5 +1,5 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
- import { InfinitySelect } from '../../components/SelectInfinity/index.js';
2
+ import { InfinitySelect } from '../../components/InfinitySelect/index.js';
3
3
  import { withController } from '../../hocs/withController.js';
4
4
 
5
5
  const FormInfinitySelect = withController(({ field, props }) => {
package/dist/index.cjs CHANGED
@@ -3,31 +3,30 @@
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
5
  const index = require('./components/EmptyState/index.cjs');
6
- const index$1 = require('./components/InfinityLoader/index.cjs');
7
6
  const NavItems = require('./components/NavItems.cjs');
8
7
  const Icon = require('./components/Icon.cjs');
9
- const index$2 = require('./components/InfinityLoadMoreButton/index.cjs');
10
- const index$3 = require('./components/MyDatePickerInput/index.cjs');
11
- const index$4 = require('./components/MyDateTimePicker/index.cjs');
12
- const index$5 = require('./components/MyNotifications/index.cjs');
13
- const index$6 = require('./components/MyNumberInput/index.cjs');
14
- const index$7 = require('./components/MySelect/index.cjs');
15
- const index$8 = require('./components/MyTextarea/index.cjs');
16
- const index$9 = require('./components/MyTextInput/index.cjs');
17
- const index$a = require('./components/MyTimeInput/index.cjs');
18
- const index$b = require('./components/SelectInfinity/index.cjs');
19
- const index$c = require('./components/MyMultiSelect/index.cjs');
20
- const index$d = require('./components/MyMonthPickerInput/index.cjs');
21
- const index$e = require('./components/MyDateInput/index.cjs');
22
- const index$f = require('./components/MyCheckboxGroup/index.cjs');
23
- const index$g = require('./components/MyRadioGroup/index.cjs');
8
+ const index$1 = require('./components/InfinityLoadMoreButton/index.cjs');
9
+ const index$2 = require('./components/MyDatePickerInput/index.cjs');
10
+ const index$3 = require('./components/MyDateTimePicker/index.cjs');
11
+ const index$4 = require('./components/MyNotifications/index.cjs');
12
+ const index$5 = require('./components/MyNumberInput/index.cjs');
13
+ const index$6 = require('./components/MySelect/index.cjs');
14
+ const index$7 = require('./components/MyTextarea/index.cjs');
15
+ const index$8 = require('./components/MyTextInput/index.cjs');
16
+ const index$9 = require('./components/MyTimeInput/index.cjs');
17
+ const index$a = require('./components/InfinitySelect/index.cjs');
18
+ const index$b = require('./components/MyMultiSelect/index.cjs');
19
+ const index$c = require('./components/MyMonthPickerInput/index.cjs');
20
+ const index$d = require('./components/MyDateInput/index.cjs');
21
+ const index$e = require('./components/MyCheckboxGroup/index.cjs');
22
+ const index$f = require('./components/MyRadioGroup/index.cjs');
24
23
  const httpStatus = require('./consts/http-status.cjs');
25
24
  const revalidate = require('./consts/revalidate.cjs');
26
- const index$h = require('./contexts/NavigationHistoryContext/index.cjs');
25
+ const index$g = require('./contexts/NavigationHistoryContext/index.cjs');
27
26
  const hook = require('./contexts/NavigationHistoryContext/hook.cjs');
28
- const index$i = require('./contexts/PageDataContext/index.cjs');
27
+ const index$h = require('./contexts/PageDataContext/index.cjs');
29
28
  const Form = require('./form/Form.cjs');
30
- const FormButtonSubmit = require('./form/FormButtonSubmit.cjs');
29
+ const FormSubmitButton = require('./form/FormSubmitButton.cjs');
31
30
  const zodValidator = require('./form/utils/zodValidator.cjs');
32
31
  const nullableButRequired = require('./form/utils/nullable-but-required.cjs');
33
32
  const optionalButRequired = require('./form/utils/optional-but-required.cjs');
@@ -68,33 +67,32 @@ const virtualStyles = require('./utils/virtual-styles.cjs');
68
67
 
69
68
 
70
69
  exports.EmptyState = index.EmptyState;
71
- exports.InfinityLoader = index$1.InfinityLoader;
72
70
  exports.NavItems = NavItems.NavItems;
73
71
  exports.Icon = Icon.Icon;
74
- exports.InfinityLoadMoreButton = index$2.InfinityLoadMoreButton;
75
- exports.MyDatePickerInput = index$3.MyDatePickerInput;
76
- exports.MyDateTimePicker = index$4.MyDateTimePicker;
77
- exports.MyNotifications = index$5.MyNotifications;
78
- exports.MyNumberInput = index$6.MyNumberInput;
79
- exports.MySelect = index$7.MySelect;
80
- exports.MyTextarea = index$8.MyTextarea;
81
- exports.MyTextInput = index$9.MyTextInput;
82
- exports.MyTimeInput = index$a.MyTimeInput;
83
- exports.InfinitySelect = index$b.InfinitySelect;
84
- exports.MyMultiSelect = index$c.MyMultiSelect;
85
- exports.MyMonthPickerInput = index$d.MyMonthPickerInput;
86
- exports.MyDateInput = index$e.MyDateInput;
87
- exports.MyCheckboxGroup = index$f.MyCheckboxGroup;
88
- exports.MyRadioGroup = index$g.MyRadioGroup;
72
+ exports.InfinityLoadMoreButton = index$1.InfinityLoadMoreButton;
73
+ exports.MyDatePickerInput = index$2.MyDatePickerInput;
74
+ exports.MyDateTimePicker = index$3.MyDateTimePicker;
75
+ exports.MyNotifications = index$4.MyNotifications;
76
+ exports.MyNumberInput = index$5.MyNumberInput;
77
+ exports.MySelect = index$6.MySelect;
78
+ exports.MyTextarea = index$7.MyTextarea;
79
+ exports.MyTextInput = index$8.MyTextInput;
80
+ exports.MyTimeInput = index$9.MyTimeInput;
81
+ exports.InfinitySelect = index$a.InfinitySelect;
82
+ exports.MyMultiSelect = index$b.MyMultiSelect;
83
+ exports.MyMonthPickerInput = index$c.MyMonthPickerInput;
84
+ exports.MyDateInput = index$d.MyDateInput;
85
+ exports.MyCheckboxGroup = index$e.MyCheckboxGroup;
86
+ exports.MyRadioGroup = index$f.MyRadioGroup;
89
87
  exports.HttpStatus = httpStatus.HttpStatus;
90
88
  exports.Revalidate = revalidate.Revalidate;
91
- exports.NavigationHistoryProvider = index$h.NavigationHistoryProvider;
89
+ exports.NavigationHistoryProvider = index$g.NavigationHistoryProvider;
92
90
  exports.QP_BACK_URL_NAME = hook.QP_BACK_URL_NAME;
93
91
  exports.useNavigationHistory = hook.useNavigationHistory;
94
- exports.PageDataProvider = index$i.PageDataProvider;
95
- exports.usePageData = index$i.usePageData;
92
+ exports.PageDataProvider = index$h.PageDataProvider;
93
+ exports.usePageData = index$h.usePageData;
96
94
  exports.Form = Form.Form;
97
- exports.FormButtonSubmit = FormButtonSubmit.FormButtonSubmit;
95
+ exports.FormSubmitButton = FormSubmitButton.FormSubmitButton;
98
96
  exports.zodValidator = zodValidator.zodValidator;
99
97
  exports.nullableButRequired = nullableButRequired.nullableButRequired;
100
98
  exports.optionalButRequired = optionalButRequired.optionalButRequired;
package/dist/index.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { BeforeErrorHook } from 'ky';
2
2
  import { BoxProps } from '@mantine/core';
3
3
  import { ButtonProps } from '@mantine/core';
4
- import { CenterProps } from '@mantine/core';
5
4
  import { ChangeEventHandler } from 'react';
6
5
  import { CheckboxGroupProps } from '@mantine/core';
7
6
  import { CheckboxProps } from '@mantine/core';
@@ -28,7 +27,6 @@ import { InfiniteQueryHookResult } from 'react-query-kit';
28
27
  import { InputBaseProps } from '@mantine/core';
29
28
  import { JSX } from 'react/jsx-runtime';
30
29
  import { KyResponse } from 'ky';
31
- import { LoaderProps } from '@mantine/core';
32
30
  import { MantineColorShade } from '@mantine/core';
33
31
  import { MantineSpacing } from '@mantine/core';
34
32
  import { MantineThemeColors } from '@mantine/core';
@@ -114,12 +112,6 @@ export declare const Form: <T extends FieldValues, TContext = any, TT extends T
114
112
 
115
113
  export declare function formatBytes(bytes: number, decimals?: number): string;
116
114
 
117
- export declare const FormButtonSubmit: ({ disabled, disabledWhenSuccess, ...props }: FormButtonSubmitProps) => JSX.Element;
118
-
119
- export declare interface FormButtonSubmitProps extends ButtonProps, ElementProps<'button', keyof ButtonProps> {
120
- disabledWhenSuccess?: boolean;
121
- }
122
-
123
115
  export declare const FormCheckbox: FC<CheckboxProps & WithControllerProps & {
124
116
  onValueChange?: ChangeEventHandler<HTMLInputElement> | undefined;
125
117
  }>;
@@ -200,6 +192,12 @@ onValueChange?: ((value: string | null, option: ComboboxItem) => void) | undefin
200
192
 
201
193
  export declare type FormSelectProps = MySelectProps & WithControllerProps;
202
194
 
195
+ export declare const FormSubmitButton: ({ disabled, disabledWhenSuccess, ...props }: FormSubmitButtonProps) => JSX.Element;
196
+
197
+ export declare interface FormSubmitButtonProps extends ButtonProps, ElementProps<'button', keyof ButtonProps> {
198
+ disabledWhenSuccess?: boolean;
199
+ }
200
+
203
201
  export declare const FormTextarea: FC<TextareaProps & WithControllerProps & {
204
202
  onValueChange?: ChangeEventHandler<HTMLTextAreaElement> | undefined;
205
203
  }>;
@@ -322,25 +320,13 @@ export declare function indexBy<T, K, C extends string>(arr: T[], getKey: (item:
322
320
 
323
321
  export declare type IndexByResult<T> = Record<string, T | undefined>;
324
322
 
325
- export declare const InfinityLoader: ({ root, infinity, rootMargin, endMessage, loaderProps, ...props }: InfinityLoaderProps) => JSX.Element;
326
-
327
- export declare interface InfinityLoaderProps extends CenterProps {
328
- infinity: InfiniteQueryHookResult<InfiniteData<{
329
- data: unknown[];
330
- }, number>, Error>;
331
- root?: RefObject<HTMLElement | null>;
332
- rootMargin?: string;
333
- endMessage?: React.ReactNode;
334
- loaderProps?: LoaderProps;
335
- }
336
-
337
323
  export declare const InfinityLoadMoreButton: <T>({ infinity, labels, parentRef, ...props }: InfinityLoadMoreButtonProps<T>) => JSX.Element;
338
324
 
339
325
  export declare interface InfinityLoadMoreButtonProps<T> extends ButtonProps {
340
326
  infinity: InfiniteQueryHookResult<InfiniteData<{
341
327
  data: T[];
342
328
  }, number>, Error>;
343
- parentRef?: RefObject<HTMLElement>;
329
+ parentRef?: RefObject<HTMLElement | null>;
344
330
  labels?: {
345
331
  loadMore?: string;
346
332
  loading?: string;
@@ -350,7 +336,7 @@ export declare interface InfinityLoadMoreButtonProps<T> extends ButtonProps {
350
336
 
351
337
  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;
352
338
 
353
- export declare interface InfinitySelectProps<T = unknown> extends InputBaseProps, ElementProps<'input', keyof InputBaseProps | 'value' | 'onChange'> {
339
+ export declare interface InfinitySelectProps<T = unknown> extends InputBaseProps, ElementProps<"input", keyof InputBaseProps | "value" | "onChange"> {
354
340
  value?: string | null;
355
341
  defaultValue?: string;
356
342
  searchValue?: string;
@@ -372,6 +358,7 @@ export declare interface InfinitySelectProps<T = unknown> extends InputBaseProps
372
358
  onOptionSubmit?: (value: string, option: T) => void;
373
359
  getOptionLabel: (option: T) => string;
374
360
  getOptionValue: (option: T) => string;
361
+ resetPageParam?: () => Promise<void>;
375
362
  comboboxProps?: ComboboxProps;
376
363
  searchable?: boolean;
377
364
  ref?: React.Ref<HTMLInputElement>;
package/dist/index.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export { EmptyState } from './components/EmptyState/index.js';
2
- export { InfinityLoader } from './components/InfinityLoader/index.js';
3
2
  export { NavItems } from './components/NavItems.js';
4
3
  export { Icon } from './components/Icon.js';
5
4
  export { InfinityLoadMoreButton } from './components/InfinityLoadMoreButton/index.js';
@@ -11,7 +10,7 @@ export { MySelect } from './components/MySelect/index.js';
11
10
  export { MyTextarea } from './components/MyTextarea/index.js';
12
11
  export { MyTextInput } from './components/MyTextInput/index.js';
13
12
  export { MyTimeInput } from './components/MyTimeInput/index.js';
14
- export { InfinitySelect } from './components/SelectInfinity/index.js';
13
+ export { InfinitySelect } from './components/InfinitySelect/index.js';
15
14
  export { MyMultiSelect } from './components/MyMultiSelect/index.js';
16
15
  export { MyMonthPickerInput } from './components/MyMonthPickerInput/index.js';
17
16
  export { MyDateInput } from './components/MyDateInput/index.js';
@@ -23,7 +22,7 @@ export { NavigationHistoryProvider } from './contexts/NavigationHistoryContext/i
23
22
  export { QP_BACK_URL_NAME, useNavigationHistory } from './contexts/NavigationHistoryContext/hook.js';
24
23
  export { PageDataProvider, usePageData } from './contexts/PageDataContext/index.js';
25
24
  export { Form } from './form/Form.js';
26
- export { FormButtonSubmit } from './form/FormButtonSubmit.js';
25
+ export { FormSubmitButton } from './form/FormSubmitButton.js';
27
26
  export { zodValidator } from './form/utils/zodValidator.js';
28
27
  export { nullableButRequired } from './form/utils/nullable-but-required.js';
29
28
  export { optionalButRequired } from './form/utils/optional-but-required.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lkd-web-kit",
3
- "version": "0.7.13",
3
+ "version": "0.7.15",
4
4
  "description": "A template for creating React component libraries with Vite.",
5
5
  "author": "LKD",
6
6
  "license": "MIT",
@@ -63,7 +63,7 @@
63
63
  "next": "^16.0.3",
64
64
  "react": "^19.2.0",
65
65
  "react-dom": "^19.2.0",
66
- "react-hook-form": "^7.66.0",
66
+ "react-hook-form": "^7.66.1",
67
67
  "react-query-kit": "^3.3.2",
68
68
  "zod": "^4.1.12"
69
69
  },
@@ -1,68 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
-
5
- const require$$2 = require('react/jsx-runtime');
6
- const core = require('@mantine/core');
7
- const hooks = require('@mantine/hooks');
8
- const React = require('react');
9
-
10
- const InfinityLoader = ({
11
- root,
12
- infinity,
13
- rootMargin = "0px 0px 0px 0px",
14
- endMessage = "No hay más resultados",
15
- loaderProps,
16
- ...props
17
- }) => {
18
- const { entry, ref } = hooks.useIntersection({
19
- root: root?.current,
20
- rootMargin
21
- });
22
- React.useEffect(() => {
23
- if (!entry?.isIntersecting) return;
24
- if (!infinity.hasNextPage) return;
25
- if (infinity.isFetchingNextPage || infinity.isFetching) return;
26
- infinity.fetchNextPage();
27
- }, [
28
- entry?.isIntersecting,
29
- infinity.hasNextPage,
30
- infinity.isFetchingNextPage,
31
- infinity.isFetching
32
- ]);
33
- React.useEffect(() => {
34
- if (!entry?.isIntersecting) return;
35
- const el = root?.current ?? document.documentElement;
36
- const hasScroll = el?.scrollHeight > el?.clientHeight;
37
- if (hasScroll) return;
38
- if (!infinity.hasNextPage) return;
39
- if (infinity.isFetchingNextPage || infinity.isFetching) return;
40
- infinity.fetchNextPage();
41
- }, [
42
- entry?.isIntersecting,
43
- infinity.data?.pages.length,
44
- infinity.hasNextPage,
45
- infinity.isFetchingNextPage,
46
- infinity.isFetching
47
- ]);
48
- const showLoader = infinity.isLoading || infinity.isFetchingNextPage;
49
- const showEndMessage = infinity.data && infinity.data.pages.length > 1 && !infinity.hasNextPage;
50
- if (!showLoader && !showEndMessage) {
51
- return /* @__PURE__ */ require$$2.jsx("div", { ref });
52
- }
53
- return /* @__PURE__ */ require$$2.jsx(
54
- core.Center,
55
- {
56
- ref,
57
- ...props,
58
- style: {
59
- minHeight: "1rem",
60
- fontSize: "14px",
61
- ...props.style
62
- },
63
- children: showLoader ? /* @__PURE__ */ require$$2.jsx(core.Loader, { ...loaderProps }) : showEndMessage ? endMessage : null
64
- }
65
- );
66
- };
67
-
68
- exports.InfinityLoader = InfinityLoader;
@@ -1,64 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { Center, Loader } from '@mantine/core';
3
- import { useIntersection } from '@mantine/hooks';
4
- import { useEffect } from 'react';
5
-
6
- const InfinityLoader = ({
7
- root,
8
- infinity,
9
- rootMargin = "0px 0px 0px 0px",
10
- endMessage = "No hay más resultados",
11
- loaderProps,
12
- ...props
13
- }) => {
14
- const { entry, ref } = useIntersection({
15
- root: root?.current,
16
- rootMargin
17
- });
18
- useEffect(() => {
19
- if (!entry?.isIntersecting) return;
20
- if (!infinity.hasNextPage) return;
21
- if (infinity.isFetchingNextPage || infinity.isFetching) return;
22
- infinity.fetchNextPage();
23
- }, [
24
- entry?.isIntersecting,
25
- infinity.hasNextPage,
26
- infinity.isFetchingNextPage,
27
- infinity.isFetching
28
- ]);
29
- useEffect(() => {
30
- if (!entry?.isIntersecting) return;
31
- const el = root?.current ?? document.documentElement;
32
- const hasScroll = el?.scrollHeight > el?.clientHeight;
33
- if (hasScroll) return;
34
- if (!infinity.hasNextPage) return;
35
- if (infinity.isFetchingNextPage || infinity.isFetching) return;
36
- infinity.fetchNextPage();
37
- }, [
38
- entry?.isIntersecting,
39
- infinity.data?.pages.length,
40
- infinity.hasNextPage,
41
- infinity.isFetchingNextPage,
42
- infinity.isFetching
43
- ]);
44
- const showLoader = infinity.isLoading || infinity.isFetchingNextPage;
45
- const showEndMessage = infinity.data && infinity.data.pages.length > 1 && !infinity.hasNextPage;
46
- if (!showLoader && !showEndMessage) {
47
- return /* @__PURE__ */ jsx("div", { ref });
48
- }
49
- return /* @__PURE__ */ jsx(
50
- Center,
51
- {
52
- ref,
53
- ...props,
54
- style: {
55
- minHeight: "1rem",
56
- fontSize: "14px",
57
- ...props.style
58
- },
59
- children: showLoader ? /* @__PURE__ */ jsx(Loader, { ...loaderProps }) : showEndMessage ? endMessage : null
60
- }
61
- );
62
- };
63
-
64
- export { InfinityLoader };