lkd-web-kit 0.8.0 → 0.8.1

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.
Files changed (135) hide show
  1. package/dist/_virtual/_rolldown/runtime.cjs +23 -0
  2. package/dist/components/EmptyState/index.cjs +38 -52
  3. package/dist/components/EmptyState/index.js +37 -48
  4. package/dist/components/Icon.cjs +46 -50
  5. package/dist/components/Icon.js +44 -46
  6. package/dist/components/InfinityLoadMoreButton/index.cjs +30 -42
  7. package/dist/components/InfinityLoadMoreButton/index.js +28 -38
  8. package/dist/components/InfinitySelect/index.cjs +126 -168
  9. package/dist/components/InfinitySelect/index.js +125 -164
  10. package/dist/components/MyCheckboxGroup/index.cjs +14 -22
  11. package/dist/components/MyCheckboxGroup/index.js +13 -18
  12. package/dist/components/MyDateInput/index.cjs +12 -18
  13. package/dist/components/MyDateInput/index.js +11 -14
  14. package/dist/components/MyDatePickerInput/CalendarIcon.cjs +45 -64
  15. package/dist/components/MyDatePickerInput/CalendarIcon.js +43 -61
  16. package/dist/components/MyDatePickerInput/index.cjs +12 -18
  17. package/dist/components/MyDatePickerInput/index.js +11 -14
  18. package/dist/components/MyDateTimePicker/index.cjs +12 -18
  19. package/dist/components/MyDateTimePicker/index.js +11 -14
  20. package/dist/components/MyMonthPickerInput/index.cjs +12 -18
  21. package/dist/components/MyMonthPickerInput/index.js +11 -14
  22. package/dist/components/MyMultiSelect/index.cjs +9 -9
  23. package/dist/components/MyMultiSelect/index.js +8 -5
  24. package/dist/components/MyNotifications/index.cjs +11 -17
  25. package/dist/components/MyNotifications/index.js +10 -13
  26. package/dist/components/MyNumberInput/index.cjs +9 -15
  27. package/dist/components/MyNumberInput/index.js +8 -11
  28. package/dist/components/MyRadioGroup/index.cjs +14 -22
  29. package/dist/components/MyRadioGroup/index.js +13 -18
  30. package/dist/components/MySelect/index.cjs +9 -15
  31. package/dist/components/MySelect/index.js +8 -11
  32. package/dist/components/MyTextInput/index.cjs +9 -15
  33. package/dist/components/MyTextInput/index.js +8 -11
  34. package/dist/components/MyTextarea/index.cjs +9 -15
  35. package/dist/components/MyTextarea/index.js +8 -11
  36. package/dist/components/MyTimeInput/index.cjs +9 -15
  37. package/dist/components/MyTimeInput/index.js +8 -11
  38. package/dist/components/NavItems.cjs +28 -38
  39. package/dist/components/NavItems.js +26 -34
  40. package/dist/consts/http-status.cjs +66 -69
  41. package/dist/consts/http-status.js +66 -65
  42. package/dist/consts/revalidate.cjs +10 -13
  43. package/dist/consts/revalidate.js +10 -9
  44. package/dist/contexts/NavigationHistoryContext/hook.cjs +41 -42
  45. package/dist/contexts/NavigationHistoryContext/hook.js +40 -38
  46. package/dist/contexts/NavigationHistoryContext/index.cjs +31 -28
  47. package/dist/contexts/NavigationHistoryContext/index.js +30 -24
  48. package/dist/contexts/PageDataContext/index.cjs +15 -18
  49. package/dist/contexts/PageDataContext/index.js +14 -14
  50. package/dist/form/Form.cjs +19 -28
  51. package/dist/form/Form.js +18 -24
  52. package/dist/form/FormSubmitButton.cjs +15 -27
  53. package/dist/form/FormSubmitButton.js +14 -23
  54. package/dist/form/base/FormCheckbox.cjs +15 -23
  55. package/dist/form/base/FormCheckbox.js +14 -19
  56. package/dist/form/base/FormCheckboxGroup.cjs +10 -16
  57. package/dist/form/base/FormCheckboxGroup.js +9 -12
  58. package/dist/form/base/FormDateInput.cjs +10 -16
  59. package/dist/form/base/FormDateInput.js +9 -12
  60. package/dist/form/base/FormDatePickerInput.cjs +10 -16
  61. package/dist/form/base/FormDatePickerInput.js +9 -12
  62. package/dist/form/base/FormDateTimePicker.cjs +10 -16
  63. package/dist/form/base/FormDateTimePicker.js +9 -12
  64. package/dist/form/base/FormMonthPickerInput.cjs +10 -16
  65. package/dist/form/base/FormMonthPickerInput.js +9 -12
  66. package/dist/form/base/FormMultiSelect.cjs +10 -10
  67. package/dist/form/base/FormMultiSelect.js +9 -6
  68. package/dist/form/base/FormNumberInput.cjs +12 -12
  69. package/dist/form/base/FormNumberInput.js +10 -8
  70. package/dist/form/base/FormRadioGroup.cjs +10 -16
  71. package/dist/form/base/FormRadioGroup.js +9 -12
  72. package/dist/form/base/FormSelect.cjs +10 -16
  73. package/dist/form/base/FormSelect.js +9 -12
  74. package/dist/form/base/FormSelectInfinity.cjs +15 -21
  75. package/dist/form/base/FormSelectInfinity.js +14 -17
  76. package/dist/form/base/FormTextInput.cjs +10 -16
  77. package/dist/form/base/FormTextInput.js +9 -12
  78. package/dist/form/base/FormTextarea.cjs +10 -10
  79. package/dist/form/base/FormTextarea.js +9 -6
  80. package/dist/form/base/FormTimeInput.cjs +18 -24
  81. package/dist/form/base/FormTimeInput.js +17 -20
  82. package/dist/form/utils/nullable-but-required.cjs +14 -17
  83. package/dist/form/utils/nullable-but-required.js +13 -13
  84. package/dist/form/utils/optional-but-required.cjs +14 -17
  85. package/dist/form/utils/optional-but-required.js +13 -13
  86. package/dist/form/utils/zodValidator.cjs +9 -13
  87. package/dist/form/utils/zodValidator.js +9 -9
  88. package/dist/hocs/withController.cjs +43 -54
  89. package/dist/hocs/withController.js +42 -50
  90. package/dist/hocs/withModalManager.cjs +29 -35
  91. package/dist/hocs/withModalManager.js +28 -31
  92. package/dist/hooks/useBreakpoint.cjs +8 -12
  93. package/dist/hooks/useBreakpoint.js +7 -8
  94. package/dist/hooks/useFetchNextPageOnScroll.cjs +13 -21
  95. package/dist/hooks/useFetchNextPageOnScroll.js +13 -17
  96. package/dist/hooks/useOnScrollProgress.cjs +33 -37
  97. package/dist/hooks/useOnScrollProgress.js +32 -33
  98. package/dist/hooks/useUpdateSearchParams.cjs +22 -22
  99. package/dist/hooks/useUpdateSearchParams.js +21 -18
  100. package/dist/hooks/useZodConfig.cjs +14 -19
  101. package/dist/hooks/useZodConfig.js +12 -15
  102. package/dist/index.cjs +130 -136
  103. package/dist/index.d.ts +13 -13
  104. package/dist/index.js +62 -61
  105. package/dist/mantine/breakpoints-with-px.cjs +9 -12
  106. package/dist/mantine/breakpoints-with-px.js +9 -8
  107. package/dist/mantine/my-default-theme.cjs +23 -42
  108. package/dist/mantine/my-default-theme.js +22 -38
  109. package/dist/mantine/to-tailwind-colors.cjs +9 -18
  110. package/dist/mantine/to-tailwind-colors.js +9 -14
  111. package/dist/node_modules/@tanstack/react-virtual/dist/esm/index.cjs +35 -70
  112. package/dist/node_modules/@tanstack/react-virtual/dist/esm/index.js +34 -42
  113. package/dist/node_modules/@tanstack/virtual-core/dist/esm/index.cjs +700 -870
  114. package/dist/node_modules/@tanstack/virtual-core/dist/esm/index.js +701 -863
  115. package/dist/node_modules/@tanstack/virtual-core/dist/esm/utils.cjs +44 -64
  116. package/dist/node_modules/@tanstack/virtual-core/dist/esm/utils.js +44 -60
  117. package/dist/utils/array/groupBy.cjs +30 -40
  118. package/dist/utils/array/groupBy.js +30 -36
  119. package/dist/utils/array/shuffleArray.cjs +11 -17
  120. package/dist/utils/array/shuffleArray.js +11 -13
  121. package/dist/utils/formatBytes.cjs +12 -11
  122. package/dist/utils/formatBytes.js +12 -7
  123. package/dist/utils/isInfinityEmpty.cjs +3 -6
  124. package/dist/utils/isInfinityEmpty.js +3 -2
  125. package/dist/utils/ky/addBodyJsonHook.cjs +9 -14
  126. package/dist/utils/ky/addBodyJsonHook.js +8 -10
  127. package/dist/utils/ky/parseJson.cjs +6 -9
  128. package/dist/utils/ky/parseJson.js +6 -5
  129. package/dist/utils/new-route.cjs +30 -39
  130. package/dist/utils/new-route.js +30 -35
  131. package/dist/utils/query-stringify.cjs +5 -8
  132. package/dist/utils/query-stringify.js +5 -4
  133. package/dist/utils/virtual-styles.cjs +21 -26
  134. package/dist/utils/virtual-styles.js +21 -22
  135. package/package.json +17 -16
@@ -1,170 +1,128 @@
1
- 'use client';
2
- 'use strict';
3
-
4
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
-
6
- const jsxRuntime = require('react/jsx-runtime');
7
- const React = require('react');
8
- const core = require('@mantine/core');
9
- const hooks = require('@mantine/hooks');
10
- const index = require('../../node_modules/@tanstack/react-virtual/dist/esm/index.cjs');
11
- const virtualStyles = require('../../utils/virtual-styles.cjs');
12
- const index$1 = require('../InfinityLoadMoreButton/index.cjs');
13
-
14
- function InfinitySelect({
15
- value,
16
- searchValue,
17
- defaultSearchValue,
18
- nothingFoundMessage,
19
- infinity,
20
- defaultValue,
21
- onChange,
22
- onSearchChange,
23
- renderOption,
24
- onOptionSubmit,
25
- getOptionLabel,
26
- getOptionValue,
27
- onSelectedOptionChange,
28
- selectedOption,
29
- comboboxProps,
30
- searchable = true,
31
- defaultSelectedOption = null,
32
- loadMoreButtonProps,
33
- ...props
34
- }) {
35
- const combobox = core.useCombobox();
36
- const [_selectedOption, handleSelectedOption] = hooks.useUncontrolled({
37
- defaultValue: defaultSelectedOption,
38
- value: selectedOption,
39
- onChange: onSelectedOptionChange
40
- });
41
- const [_value, handleValue] = hooks.useUncontrolled({
42
- defaultValue,
43
- value,
44
- onChange
45
- });
46
- const [_search, handleSearch] = hooks.useUncontrolled({
47
- defaultValue: defaultSearchValue,
48
- value: searchValue,
49
- onChange: onSearchChange
50
- });
51
- const data = infinity.data?.pages.flatMap((page) => page.data) ?? [];
52
- const _reset = () => {
53
- handleSearch("");
54
- handleValue(null);
55
- handleSelectedOption(null);
56
- };
57
- const setSearchAndValue = (option) => {
58
- if (option === null) _reset();
59
- else {
60
- handleSearch(getOptionLabel(option));
61
- handleValue(getOptionValue(option));
62
- }
63
- };
64
- React.useEffect(() => {
65
- setSearchAndValue(_selectedOption);
66
- }, [_selectedOption]);
67
- const virtualizer = index.useVirtualizer({
68
- count: data.length,
69
- estimateSize: () => 40,
70
- overscan: 7,
71
- getScrollElement: () => scrollRef.current
72
- });
73
- const scrollRef = React.useRef(null);
74
- return /* @__PURE__ */ jsxRuntime.jsxs(
75
- core.Combobox,
76
- {
77
- store: combobox,
78
- middlewares: {
79
- shift: {
80
- crossAxis: true
81
- }
82
- },
83
- onOptionSubmit: (val) => {
84
- const selectedOption2 = data.find((i) => i && getOptionValue(i) === val);
85
- if (selectedOption2) {
86
- setSearchAndValue(selectedOption2);
87
- handleSelectedOption(selectedOption2);
88
- onOptionSubmit?.(val, selectedOption2);
89
- }
90
- combobox.closeDropdown();
91
- },
92
- ...comboboxProps,
93
- children: [
94
- /* @__PURE__ */ jsxRuntime.jsx(core.Combobox.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
95
- core.InputBase,
96
- {
97
- rightSection: props.readOnly ? null : value ? /* @__PURE__ */ jsxRuntime.jsx(core.Input.ClearButton, { onClick: _reset }) : /* @__PURE__ */ jsxRuntime.jsx(core.Combobox.Chevron, {}),
98
- component: "input",
99
- rightSectionPointerEvents: value ? void 0 : "none",
100
- readOnly: !searchable || props.readOnly,
101
- pointer: !searchable,
102
- value: searchable ? _search : _selectedOption ? getOptionLabel(_selectedOption) : "",
103
- onChange: searchable ? (event) => {
104
- if (event.currentTarget.value) combobox.openDropdown();
105
- else combobox.closeDropdown();
106
- handleSearch(event.currentTarget.value);
107
- } : void 0,
108
- onClick: (event) => {
109
- if (!props.readOnly) searchable ? combobox.openDropdown() : combobox.toggleDropdown();
110
- props.onClick?.(event);
111
- },
112
- onFocus: (event) => {
113
- if (!props.readOnly && searchable) combobox.openDropdown();
114
- props.onFocus?.(event);
115
- },
116
- onBlur: (event) => {
117
- if (_selectedOption) setSearchAndValue(_selectedOption);
118
- if (searchable) combobox.closeDropdown();
119
- props.onBlur?.(event);
120
- },
121
- ...props,
122
- variant: props.readOnly ? "filled" : "default"
123
- }
124
- ) }),
125
- /* @__PURE__ */ jsxRuntime.jsx(core.Combobox.Dropdown, { children: /* @__PURE__ */ jsxRuntime.jsx(
126
- core.Combobox.Options,
127
- {
128
- mih: 50,
129
- mah: 200,
130
- style: {
131
- overflowY: "auto"
132
- },
133
- ref: scrollRef,
134
- children: data.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
135
- /* @__PURE__ */ jsxRuntime.jsx("div", { ...virtualStyles.getVirtualContainerProps(virtualizer), children: virtualizer.getVirtualItems().map((virtualItem) => {
136
- const option = data[virtualItem.index];
137
- const virtualItemProps = virtualStyles.getVirtualItemProps(virtualItem, virtualizer);
138
- if (!option) return null;
139
- return /* @__PURE__ */ React.createElement(
140
- core.Combobox.Option,
141
- {
142
- value: getOptionValue(option),
143
- ...virtualItemProps,
144
- key: virtualItemProps.key,
145
- style: {
146
- ...virtualItemProps.style,
147
- fontWeight: 400
148
- }
149
- },
150
- renderOption ? renderOption({ option }) : getOptionLabel(option)
151
- );
152
- }) }),
153
- virtualizer.getTotalSize() !== 0 && /* @__PURE__ */ jsxRuntime.jsx(core.Center, { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
154
- index$1.InfinityLoadMoreButton,
155
- {
156
- infinity,
157
- parentRef: scrollRef,
158
- size: "compact-sm",
159
- ...loadMoreButtonProps
160
- }
161
- ) })
162
- ] }) : !infinity.isFetching ? /* @__PURE__ */ jsxRuntime.jsx(core.Combobox.Empty, { mih: 24, children: nothingFoundMessage ? typeof nothingFoundMessage === "function" ? nothingFoundMessage({ combobox }) : nothingFoundMessage : "No hay resultados" }) : null
163
- }
164
- ) })
165
- ]
166
- }
167
- );
1
+ "use client";
2
+ require("../../../_virtual/_rolldown/runtime.cjs");
3
+ const require_index = require("../InfinityLoadMoreButton/index.cjs");
4
+ const require_index$1 = require("../../../node_modules/@tanstack/react-virtual/dist/esm/index.cjs");
5
+ const require_virtual_styles = require("../../utils/virtual-styles.cjs");
6
+ let react = require("react");
7
+ let react_jsx_runtime = require("react/jsx-runtime");
8
+ let _mantine_core = require("@mantine/core");
9
+ let _mantine_hooks = require("@mantine/hooks");
10
+ //#region src/components/InfinitySelect/index.tsx
11
+ function InfinitySelect({ value, searchValue, defaultSearchValue, nothingFoundMessage, infinity, defaultValue, onChange, onSearchChange, renderOption, onOptionSubmit, getOptionLabel, getOptionValue, onSelectedOptionChange, selectedOption, comboboxProps, searchable = true, defaultSelectedOption = null, loadMoreButtonProps, ...props }) {
12
+ const combobox = (0, _mantine_core.useCombobox)();
13
+ const [_selectedOption, handleSelectedOption] = (0, _mantine_hooks.useUncontrolled)({
14
+ defaultValue: defaultSelectedOption,
15
+ value: selectedOption,
16
+ onChange: onSelectedOptionChange
17
+ });
18
+ const [_value, handleValue] = (0, _mantine_hooks.useUncontrolled)({
19
+ defaultValue,
20
+ value,
21
+ onChange
22
+ });
23
+ const [_search, handleSearch] = (0, _mantine_hooks.useUncontrolled)({
24
+ defaultValue: defaultSearchValue,
25
+ value: searchValue,
26
+ onChange: onSearchChange
27
+ });
28
+ const data = infinity.data?.pages.flatMap((page) => page.data) ?? [];
29
+ const _reset = () => {
30
+ handleSearch("");
31
+ handleValue(null);
32
+ handleSelectedOption(null);
33
+ };
34
+ const setSearchAndValue = (option) => {
35
+ if (option === null) _reset();
36
+ else {
37
+ handleSearch(getOptionLabel(option));
38
+ handleValue(getOptionValue(option));
39
+ }
40
+ };
41
+ (0, react.useEffect)(() => {
42
+ setSearchAndValue(_selectedOption);
43
+ }, [_selectedOption]);
44
+ const virtualizer = require_index$1.useVirtualizer({
45
+ count: data.length,
46
+ estimateSize: () => 40,
47
+ overscan: 7,
48
+ getScrollElement: () => scrollRef.current
49
+ });
50
+ const scrollRef = (0, react.useRef)(null);
51
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Combobox, {
52
+ store: combobox,
53
+ middlewares: { shift: { crossAxis: true } },
54
+ onOptionSubmit: (val) => {
55
+ const selectedOption = data.find((i) => i && getOptionValue(i) === val);
56
+ if (selectedOption) {
57
+ setSearchAndValue(selectedOption);
58
+ handleSelectedOption(selectedOption);
59
+ onOptionSubmit?.(val, selectedOption);
60
+ }
61
+ combobox.closeDropdown();
62
+ },
63
+ ...comboboxProps,
64
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Combobox.Target, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.InputBase, {
65
+ rightSection: props.readOnly ? null : value ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Input.ClearButton, { onClick: _reset }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Combobox.Chevron, {}),
66
+ component: "input",
67
+ rightSectionPointerEvents: value ? void 0 : "none",
68
+ readOnly: !searchable || props.readOnly,
69
+ pointer: !searchable,
70
+ value: searchable ? _search : _selectedOption ? getOptionLabel(_selectedOption) : "",
71
+ onChange: searchable ? (event) => {
72
+ if (event.currentTarget.value) combobox.openDropdown();
73
+ else combobox.closeDropdown();
74
+ handleSearch(event.currentTarget.value);
75
+ } : void 0,
76
+ onClick: (event) => {
77
+ if (!props.readOnly) searchable ? combobox.openDropdown() : combobox.toggleDropdown();
78
+ props.onClick?.(event);
79
+ },
80
+ onFocus: (event) => {
81
+ if (!props.readOnly && searchable) combobox.openDropdown();
82
+ props.onFocus?.(event);
83
+ },
84
+ onBlur: (event) => {
85
+ if (_selectedOption) setSearchAndValue(_selectedOption);
86
+ if (searchable) combobox.closeDropdown();
87
+ props.onBlur?.(event);
88
+ },
89
+ ...props,
90
+ variant: props.readOnly ? "filled" : "default"
91
+ }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Combobox.Dropdown, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Combobox.Options, {
92
+ mih: 50,
93
+ mah: 200,
94
+ style: { overflowY: "auto" },
95
+ ref: scrollRef,
96
+ children: data.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
97
+ ...require_virtual_styles.getVirtualContainerProps(virtualizer),
98
+ children: virtualizer.getVirtualItems().map((virtualItem) => {
99
+ const option = data[virtualItem.index];
100
+ const virtualItemProps = require_virtual_styles.getVirtualItemProps(virtualItem, virtualizer);
101
+ if (!option) return null;
102
+ return /* @__PURE__ */ (0, react.createElement)(_mantine_core.Combobox.Option, {
103
+ value: getOptionValue(option),
104
+ ...virtualItemProps,
105
+ key: virtualItemProps.key,
106
+ style: {
107
+ ...virtualItemProps.style,
108
+ fontWeight: 400
109
+ }
110
+ }, renderOption ? renderOption({ option }) : getOptionLabel(option));
111
+ })
112
+ }), virtualizer.getTotalSize() !== 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Center, {
113
+ className: "mt-2",
114
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.InfinityLoadMoreButton, {
115
+ infinity,
116
+ parentRef: scrollRef,
117
+ size: "compact-sm",
118
+ ...loadMoreButtonProps
119
+ })
120
+ })] }) : !infinity.isFetching ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Combobox.Empty, {
121
+ mih: 24,
122
+ children: nothingFoundMessage ? typeof nothingFoundMessage === "function" ? nothingFoundMessage({ combobox }) : nothingFoundMessage : "No hay resultados"
123
+ }) : null
124
+ }) })]
125
+ });
168
126
  }
169
-
127
+ //#endregion
170
128
  exports.InfinitySelect = InfinitySelect;
@@ -1,166 +1,127 @@
1
- 'use client';
2
- import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
3
- import { useEffect, useRef, createElement } from 'react';
4
- import { useCombobox, Combobox, InputBase, Input, Center } from '@mantine/core';
5
- import { useUncontrolled } from '@mantine/hooks';
6
- import { useVirtualizer } from '../../node_modules/@tanstack/react-virtual/dist/esm/index.js';
7
- import { getVirtualContainerProps, getVirtualItemProps } from '../../utils/virtual-styles.js';
8
- import { InfinityLoadMoreButton } from '../InfinityLoadMoreButton/index.js';
9
-
10
- function InfinitySelect({
11
- value,
12
- searchValue,
13
- defaultSearchValue,
14
- nothingFoundMessage,
15
- infinity,
16
- defaultValue,
17
- onChange,
18
- onSearchChange,
19
- renderOption,
20
- onOptionSubmit,
21
- getOptionLabel,
22
- getOptionValue,
23
- onSelectedOptionChange,
24
- selectedOption,
25
- comboboxProps,
26
- searchable = true,
27
- defaultSelectedOption = null,
28
- loadMoreButtonProps,
29
- ...props
30
- }) {
31
- const combobox = useCombobox();
32
- const [_selectedOption, handleSelectedOption] = useUncontrolled({
33
- defaultValue: defaultSelectedOption,
34
- value: selectedOption,
35
- onChange: onSelectedOptionChange
36
- });
37
- const [_value, handleValue] = useUncontrolled({
38
- defaultValue,
39
- value,
40
- onChange
41
- });
42
- const [_search, handleSearch] = useUncontrolled({
43
- defaultValue: defaultSearchValue,
44
- value: searchValue,
45
- onChange: onSearchChange
46
- });
47
- const data = infinity.data?.pages.flatMap((page) => page.data) ?? [];
48
- const _reset = () => {
49
- handleSearch("");
50
- handleValue(null);
51
- handleSelectedOption(null);
52
- };
53
- const setSearchAndValue = (option) => {
54
- if (option === null) _reset();
55
- else {
56
- handleSearch(getOptionLabel(option));
57
- handleValue(getOptionValue(option));
58
- }
59
- };
60
- useEffect(() => {
61
- setSearchAndValue(_selectedOption);
62
- }, [_selectedOption]);
63
- const virtualizer = useVirtualizer({
64
- count: data.length,
65
- estimateSize: () => 40,
66
- overscan: 7,
67
- getScrollElement: () => scrollRef.current
68
- });
69
- const scrollRef = useRef(null);
70
- return /* @__PURE__ */ jsxs(
71
- Combobox,
72
- {
73
- store: combobox,
74
- middlewares: {
75
- shift: {
76
- crossAxis: true
77
- }
78
- },
79
- onOptionSubmit: (val) => {
80
- const selectedOption2 = data.find((i) => i && getOptionValue(i) === val);
81
- if (selectedOption2) {
82
- setSearchAndValue(selectedOption2);
83
- handleSelectedOption(selectedOption2);
84
- onOptionSubmit?.(val, selectedOption2);
85
- }
86
- combobox.closeDropdown();
87
- },
88
- ...comboboxProps,
89
- children: [
90
- /* @__PURE__ */ jsx(Combobox.Target, { children: /* @__PURE__ */ jsx(
91
- InputBase,
92
- {
93
- rightSection: props.readOnly ? null : value ? /* @__PURE__ */ jsx(Input.ClearButton, { onClick: _reset }) : /* @__PURE__ */ jsx(Combobox.Chevron, {}),
94
- component: "input",
95
- rightSectionPointerEvents: value ? void 0 : "none",
96
- readOnly: !searchable || props.readOnly,
97
- pointer: !searchable,
98
- value: searchable ? _search : _selectedOption ? getOptionLabel(_selectedOption) : "",
99
- onChange: searchable ? (event) => {
100
- if (event.currentTarget.value) combobox.openDropdown();
101
- else combobox.closeDropdown();
102
- handleSearch(event.currentTarget.value);
103
- } : void 0,
104
- onClick: (event) => {
105
- if (!props.readOnly) searchable ? combobox.openDropdown() : combobox.toggleDropdown();
106
- props.onClick?.(event);
107
- },
108
- onFocus: (event) => {
109
- if (!props.readOnly && searchable) combobox.openDropdown();
110
- props.onFocus?.(event);
111
- },
112
- onBlur: (event) => {
113
- if (_selectedOption) setSearchAndValue(_selectedOption);
114
- if (searchable) combobox.closeDropdown();
115
- props.onBlur?.(event);
116
- },
117
- ...props,
118
- variant: props.readOnly ? "filled" : "default"
119
- }
120
- ) }),
121
- /* @__PURE__ */ jsx(Combobox.Dropdown, { children: /* @__PURE__ */ jsx(
122
- Combobox.Options,
123
- {
124
- mih: 50,
125
- mah: 200,
126
- style: {
127
- overflowY: "auto"
128
- },
129
- ref: scrollRef,
130
- children: data.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
131
- /* @__PURE__ */ jsx("div", { ...getVirtualContainerProps(virtualizer), children: virtualizer.getVirtualItems().map((virtualItem) => {
132
- const option = data[virtualItem.index];
133
- const virtualItemProps = getVirtualItemProps(virtualItem, virtualizer);
134
- if (!option) return null;
135
- return /* @__PURE__ */ createElement(
136
- Combobox.Option,
137
- {
138
- value: getOptionValue(option),
139
- ...virtualItemProps,
140
- key: virtualItemProps.key,
141
- style: {
142
- ...virtualItemProps.style,
143
- fontWeight: 400
144
- }
145
- },
146
- renderOption ? renderOption({ option }) : getOptionLabel(option)
147
- );
148
- }) }),
149
- virtualizer.getTotalSize() !== 0 && /* @__PURE__ */ jsx(Center, { className: "mt-2", children: /* @__PURE__ */ jsx(
150
- InfinityLoadMoreButton,
151
- {
152
- infinity,
153
- parentRef: scrollRef,
154
- size: "compact-sm",
155
- ...loadMoreButtonProps
156
- }
157
- ) })
158
- ] }) : !infinity.isFetching ? /* @__PURE__ */ jsx(Combobox.Empty, { mih: 24, children: nothingFoundMessage ? typeof nothingFoundMessage === "function" ? nothingFoundMessage({ combobox }) : nothingFoundMessage : "No hay resultados" }) : null
159
- }
160
- ) })
161
- ]
162
- }
163
- );
1
+ "use client";
2
+ import { InfinityLoadMoreButton } from "../InfinityLoadMoreButton/index.js";
3
+ import { useVirtualizer } from "../../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
4
+ import { getVirtualContainerProps, getVirtualItemProps } from "../../utils/virtual-styles.js";
5
+ import { createElement, useEffect, useRef } from "react";
6
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
7
+ import { Center, Combobox, Input, InputBase, useCombobox } from "@mantine/core";
8
+ import { useUncontrolled } from "@mantine/hooks";
9
+ //#region src/components/InfinitySelect/index.tsx
10
+ function InfinitySelect({ value, searchValue, defaultSearchValue, nothingFoundMessage, infinity, defaultValue, onChange, onSearchChange, renderOption, onOptionSubmit, getOptionLabel, getOptionValue, onSelectedOptionChange, selectedOption, comboboxProps, searchable = true, defaultSelectedOption = null, loadMoreButtonProps, ...props }) {
11
+ const combobox = useCombobox();
12
+ const [_selectedOption, handleSelectedOption] = useUncontrolled({
13
+ defaultValue: defaultSelectedOption,
14
+ value: selectedOption,
15
+ onChange: onSelectedOptionChange
16
+ });
17
+ const [_value, handleValue] = useUncontrolled({
18
+ defaultValue,
19
+ value,
20
+ onChange
21
+ });
22
+ const [_search, handleSearch] = useUncontrolled({
23
+ defaultValue: defaultSearchValue,
24
+ value: searchValue,
25
+ onChange: onSearchChange
26
+ });
27
+ const data = infinity.data?.pages.flatMap((page) => page.data) ?? [];
28
+ const _reset = () => {
29
+ handleSearch("");
30
+ handleValue(null);
31
+ handleSelectedOption(null);
32
+ };
33
+ const setSearchAndValue = (option) => {
34
+ if (option === null) _reset();
35
+ else {
36
+ handleSearch(getOptionLabel(option));
37
+ handleValue(getOptionValue(option));
38
+ }
39
+ };
40
+ useEffect(() => {
41
+ setSearchAndValue(_selectedOption);
42
+ }, [_selectedOption]);
43
+ const virtualizer = useVirtualizer({
44
+ count: data.length,
45
+ estimateSize: () => 40,
46
+ overscan: 7,
47
+ getScrollElement: () => scrollRef.current
48
+ });
49
+ const scrollRef = useRef(null);
50
+ return /* @__PURE__ */ jsxs(Combobox, {
51
+ store: combobox,
52
+ middlewares: { shift: { crossAxis: true } },
53
+ onOptionSubmit: (val) => {
54
+ const selectedOption = data.find((i) => i && getOptionValue(i) === val);
55
+ if (selectedOption) {
56
+ setSearchAndValue(selectedOption);
57
+ handleSelectedOption(selectedOption);
58
+ onOptionSubmit?.(val, selectedOption);
59
+ }
60
+ combobox.closeDropdown();
61
+ },
62
+ ...comboboxProps,
63
+ children: [/* @__PURE__ */ jsx(Combobox.Target, { children: /* @__PURE__ */ jsx(InputBase, {
64
+ rightSection: props.readOnly ? null : value ? /* @__PURE__ */ jsx(Input.ClearButton, { onClick: _reset }) : /* @__PURE__ */ jsx(Combobox.Chevron, {}),
65
+ component: "input",
66
+ rightSectionPointerEvents: value ? void 0 : "none",
67
+ readOnly: !searchable || props.readOnly,
68
+ pointer: !searchable,
69
+ value: searchable ? _search : _selectedOption ? getOptionLabel(_selectedOption) : "",
70
+ onChange: searchable ? (event) => {
71
+ if (event.currentTarget.value) combobox.openDropdown();
72
+ else combobox.closeDropdown();
73
+ handleSearch(event.currentTarget.value);
74
+ } : void 0,
75
+ onClick: (event) => {
76
+ if (!props.readOnly) searchable ? combobox.openDropdown() : combobox.toggleDropdown();
77
+ props.onClick?.(event);
78
+ },
79
+ onFocus: (event) => {
80
+ if (!props.readOnly && searchable) combobox.openDropdown();
81
+ props.onFocus?.(event);
82
+ },
83
+ onBlur: (event) => {
84
+ if (_selectedOption) setSearchAndValue(_selectedOption);
85
+ if (searchable) combobox.closeDropdown();
86
+ props.onBlur?.(event);
87
+ },
88
+ ...props,
89
+ variant: props.readOnly ? "filled" : "default"
90
+ }) }), /* @__PURE__ */ jsx(Combobox.Dropdown, { children: /* @__PURE__ */ jsx(Combobox.Options, {
91
+ mih: 50,
92
+ mah: 200,
93
+ style: { overflowY: "auto" },
94
+ ref: scrollRef,
95
+ children: data.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
96
+ ...getVirtualContainerProps(virtualizer),
97
+ children: virtualizer.getVirtualItems().map((virtualItem) => {
98
+ const option = data[virtualItem.index];
99
+ const virtualItemProps = getVirtualItemProps(virtualItem, virtualizer);
100
+ if (!option) return null;
101
+ return /* @__PURE__ */ createElement(Combobox.Option, {
102
+ value: getOptionValue(option),
103
+ ...virtualItemProps,
104
+ key: virtualItemProps.key,
105
+ style: {
106
+ ...virtualItemProps.style,
107
+ fontWeight: 400
108
+ }
109
+ }, renderOption ? renderOption({ option }) : getOptionLabel(option));
110
+ })
111
+ }), virtualizer.getTotalSize() !== 0 && /* @__PURE__ */ jsx(Center, {
112
+ className: "mt-2",
113
+ children: /* @__PURE__ */ jsx(InfinityLoadMoreButton, {
114
+ infinity,
115
+ parentRef: scrollRef,
116
+ size: "compact-sm",
117
+ ...loadMoreButtonProps
118
+ })
119
+ })] }) : !infinity.isFetching ? /* @__PURE__ */ jsx(Combobox.Empty, {
120
+ mih: 24,
121
+ children: nothingFoundMessage ? typeof nothingFoundMessage === "function" ? nothingFoundMessage({ combobox }) : nothingFoundMessage : "No hay resultados"
122
+ }) : null
123
+ }) })]
124
+ });
164
125
  }
165
-
126
+ //#endregion
166
127
  export { InfinitySelect };
@@ -1,24 +1,16 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
-
5
- const jsxRuntime = require('react/jsx-runtime');
6
- const core = require('@mantine/core');
7
-
8
- const MyCheckboxGroup = ({
9
- options,
10
- orientation = "horizontal",
11
- gap = "md",
12
- ...checkboxGroupProps
13
- }) => {
14
- const Container = orientation === "horizontal" ? core.Group : core.Stack;
15
- return /* @__PURE__ */ jsxRuntime.jsx(core.CheckboxGroup, { ...checkboxGroupProps, children: /* @__PURE__ */ jsxRuntime.jsx(Container, { gap, children: options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
16
- core.Checkbox,
17
- {
18
- ...option
19
- },
20
- String(option.value) || String(index)
21
- )) }) });
1
+ require("../../../_virtual/_rolldown/runtime.cjs");
2
+ let react_jsx_runtime = require("react/jsx-runtime");
3
+ let _mantine_core = require("@mantine/core");
4
+ //#region src/components/MyCheckboxGroup/index.tsx
5
+ var MyCheckboxGroup = ({ options, orientation = "horizontal", gap = "md", ...checkboxGroupProps }) => {
6
+ const Container = orientation === "horizontal" ? _mantine_core.Group : _mantine_core.Stack;
7
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.CheckboxGroup, {
8
+ ...checkboxGroupProps,
9
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container, {
10
+ gap,
11
+ children: options.map((option, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Checkbox, { ...option }, String(option.value) || String(index)))
12
+ })
13
+ });
22
14
  };
23
-
15
+ //#endregion
24
16
  exports.MyCheckboxGroup = MyCheckboxGroup;