lkd-web-kit 0.4.11 → 0.4.13
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.
|
@@ -27,6 +27,7 @@ function InfinitySelect({
|
|
|
27
27
|
onSelectedOptionChange,
|
|
28
28
|
selectedOption,
|
|
29
29
|
comboboxProps,
|
|
30
|
+
searchable = true,
|
|
30
31
|
...props
|
|
31
32
|
}) {
|
|
32
33
|
const combobox = core.useCombobox();
|
|
@@ -45,7 +46,6 @@ function InfinitySelect({
|
|
|
45
46
|
value: searchValue,
|
|
46
47
|
onChange: onSearchChange
|
|
47
48
|
});
|
|
48
|
-
const [searchHasChanged, setSearchHasChanged] = React.useState(false);
|
|
49
49
|
const data = infinity.data?.pages.flatMap((page) => page.data) ?? [];
|
|
50
50
|
const _reset = () => {
|
|
51
51
|
handleSearch("");
|
|
@@ -68,9 +68,6 @@ function InfinitySelect({
|
|
|
68
68
|
overscan: 7,
|
|
69
69
|
getScrollElement: () => scrollRef.current
|
|
70
70
|
});
|
|
71
|
-
const openDropdown = () => {
|
|
72
|
-
if (searchHasChanged || _search === "" || !_value) combobox.openDropdown();
|
|
73
|
-
};
|
|
74
71
|
const scrollRef = React.useRef(null);
|
|
75
72
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
76
73
|
core.Combobox,
|
|
@@ -96,24 +93,31 @@ function InfinitySelect({
|
|
|
96
93
|
core.InputBase,
|
|
97
94
|
{
|
|
98
95
|
rightSection: props.readOnly ? null : value ? /* @__PURE__ */ jsxRuntime.jsx(core.Input.ClearButton, { onClick: _reset }) : /* @__PURE__ */ jsxRuntime.jsx(core.Combobox.Chevron, {}),
|
|
96
|
+
component: "input",
|
|
99
97
|
rightSectionPointerEvents: value ? void 0 : "none",
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
value: _search,
|
|
103
|
-
onChange: (event) => {
|
|
98
|
+
readOnly: !searchable || props.readOnly,
|
|
99
|
+
pointer: !searchable,
|
|
100
|
+
value: searchable ? _search : _selectedOption ? getOptionLabel(_selectedOption) : "",
|
|
101
|
+
onChange: searchable ? (event) => {
|
|
104
102
|
if (event.currentTarget.value) combobox.openDropdown();
|
|
105
103
|
else combobox.closeDropdown();
|
|
106
|
-
setSearchHasChanged(true);
|
|
107
104
|
handleSearch(event.currentTarget.value);
|
|
105
|
+
} : void 0,
|
|
106
|
+
onClick: (event) => {
|
|
107
|
+
if (!props.readOnly) searchable ? combobox.openDropdown() : combobox.toggleDropdown();
|
|
108
|
+
props.onClick?.(event);
|
|
108
109
|
},
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
110
|
+
onFocus: (event) => {
|
|
111
|
+
if (!props.readOnly && searchable) combobox.openDropdown();
|
|
112
|
+
props.onFocus?.(event);
|
|
113
|
+
},
|
|
114
|
+
onBlur: (event) => {
|
|
112
115
|
if (_selectedOption) setSearchAndValue(_selectedOption);
|
|
113
|
-
combobox.closeDropdown();
|
|
114
|
-
props.onBlur?.(
|
|
115
|
-
|
|
116
|
-
|
|
116
|
+
if (searchable) combobox.closeDropdown();
|
|
117
|
+
props.onBlur?.(event);
|
|
118
|
+
},
|
|
119
|
+
...props,
|
|
120
|
+
variant: props.readOnly ? "filled" : "default"
|
|
117
121
|
}
|
|
118
122
|
) }),
|
|
119
123
|
/* @__PURE__ */ jsxRuntime.jsx(core.Combobox.Dropdown, { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
-
import {
|
|
3
|
+
import { useEffect, useRef, createElement } from 'react';
|
|
4
4
|
import { useCombobox, Combobox, InputBase, Input } from '@mantine/core';
|
|
5
5
|
import { useUncontrolled } from '@mantine/hooks';
|
|
6
6
|
import { useVirtualizer } from '../../node_modules/@tanstack/react-virtual/dist/esm/index.js';
|
|
@@ -23,6 +23,7 @@ function InfinitySelect({
|
|
|
23
23
|
onSelectedOptionChange,
|
|
24
24
|
selectedOption,
|
|
25
25
|
comboboxProps,
|
|
26
|
+
searchable = true,
|
|
26
27
|
...props
|
|
27
28
|
}) {
|
|
28
29
|
const combobox = useCombobox();
|
|
@@ -41,7 +42,6 @@ function InfinitySelect({
|
|
|
41
42
|
value: searchValue,
|
|
42
43
|
onChange: onSearchChange
|
|
43
44
|
});
|
|
44
|
-
const [searchHasChanged, setSearchHasChanged] = useState(false);
|
|
45
45
|
const data = infinity.data?.pages.flatMap((page) => page.data) ?? [];
|
|
46
46
|
const _reset = () => {
|
|
47
47
|
handleSearch("");
|
|
@@ -64,9 +64,6 @@ function InfinitySelect({
|
|
|
64
64
|
overscan: 7,
|
|
65
65
|
getScrollElement: () => scrollRef.current
|
|
66
66
|
});
|
|
67
|
-
const openDropdown = () => {
|
|
68
|
-
if (searchHasChanged || _search === "" || !_value) combobox.openDropdown();
|
|
69
|
-
};
|
|
70
67
|
const scrollRef = useRef(null);
|
|
71
68
|
return /* @__PURE__ */ jsxs(
|
|
72
69
|
Combobox,
|
|
@@ -92,24 +89,31 @@ function InfinitySelect({
|
|
|
92
89
|
InputBase,
|
|
93
90
|
{
|
|
94
91
|
rightSection: props.readOnly ? null : value ? /* @__PURE__ */ jsx(Input.ClearButton, { onClick: _reset }) : /* @__PURE__ */ jsx(Combobox.Chevron, {}),
|
|
92
|
+
component: "input",
|
|
95
93
|
rightSectionPointerEvents: value ? void 0 : "none",
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
value: _search,
|
|
99
|
-
onChange: (event) => {
|
|
94
|
+
readOnly: !searchable || props.readOnly,
|
|
95
|
+
pointer: !searchable,
|
|
96
|
+
value: searchable ? _search : _selectedOption ? getOptionLabel(_selectedOption) : "",
|
|
97
|
+
onChange: searchable ? (event) => {
|
|
100
98
|
if (event.currentTarget.value) combobox.openDropdown();
|
|
101
99
|
else combobox.closeDropdown();
|
|
102
|
-
setSearchHasChanged(true);
|
|
103
100
|
handleSearch(event.currentTarget.value);
|
|
101
|
+
} : void 0,
|
|
102
|
+
onClick: (event) => {
|
|
103
|
+
if (!props.readOnly) searchable ? combobox.openDropdown() : combobox.toggleDropdown();
|
|
104
|
+
props.onClick?.(event);
|
|
104
105
|
},
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
106
|
+
onFocus: (event) => {
|
|
107
|
+
if (!props.readOnly && searchable) combobox.openDropdown();
|
|
108
|
+
props.onFocus?.(event);
|
|
109
|
+
},
|
|
110
|
+
onBlur: (event) => {
|
|
108
111
|
if (_selectedOption) setSearchAndValue(_selectedOption);
|
|
109
|
-
combobox.closeDropdown();
|
|
110
|
-
props.onBlur?.(
|
|
111
|
-
|
|
112
|
-
|
|
112
|
+
if (searchable) combobox.closeDropdown();
|
|
113
|
+
props.onBlur?.(event);
|
|
114
|
+
},
|
|
115
|
+
...props,
|
|
116
|
+
variant: props.readOnly ? "filled" : "default"
|
|
113
117
|
}
|
|
114
118
|
) }),
|
|
115
119
|
/* @__PURE__ */ jsx(Combobox.Dropdown, { children: /* @__PURE__ */ jsxs(
|
package/dist/index.d.ts
CHANGED
|
@@ -297,7 +297,7 @@ export declare interface InfinityLoaderProps extends CenterProps {
|
|
|
297
297
|
loaderProps?: LoaderProps;
|
|
298
298
|
}
|
|
299
299
|
|
|
300
|
-
export declare function InfinitySelect<T = unknown>({ value, searchValue, defaultSearchValue, nothingFoundMessage, infinity, defaultValue, onChange, onSearchChange, renderOption, onOptionSubmit, getOptionLabel, getOptionValue, onSelectedOptionChange, selectedOption, comboboxProps, ...props }: InfinitySelectProps<T>): JSX.Element;
|
|
300
|
+
export declare function InfinitySelect<T = unknown>({ value, searchValue, defaultSearchValue, nothingFoundMessage, infinity, defaultValue, onChange, onSearchChange, renderOption, onOptionSubmit, getOptionLabel, getOptionValue, onSelectedOptionChange, selectedOption, comboboxProps, searchable, ...props }: InfinitySelectProps<T>): JSX.Element;
|
|
301
301
|
|
|
302
302
|
export declare interface InfinitySelectProps<T = unknown> extends InputBaseProps, ElementProps<'input', keyof InputBaseProps | 'value' | 'onChange'> {
|
|
303
303
|
value?: string | null;
|
|
@@ -321,6 +321,7 @@ export declare interface InfinitySelectProps<T = unknown> extends InputBaseProps
|
|
|
321
321
|
getOptionLabel: (option: T) => string;
|
|
322
322
|
getOptionValue: (option: T) => string;
|
|
323
323
|
comboboxProps?: ComboboxProps;
|
|
324
|
+
searchable?: boolean;
|
|
324
325
|
}
|
|
325
326
|
|
|
326
327
|
export declare const isInfinityEmpty: (data: InfiniteData<{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "lkd-web-kit",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.13",
|
|
4
4
|
"description": "A template for creating React component libraries with Vite.",
|
|
5
5
|
"author": "LKD",
|
|
6
6
|
"license": "MIT",
|
|
@@ -52,15 +52,15 @@
|
|
|
52
52
|
"vite-plugin-dts": "^4.5.4",
|
|
53
53
|
"vitest": "^3.2.4"
|
|
54
54
|
},
|
|
55
|
-
"peerDependencies": {
|
|
56
|
-
"@mantine/core": "^8.1
|
|
57
|
-
"@mantine/dates": "^8.1
|
|
58
|
-
"@mantine/hooks": "^8.1
|
|
59
|
-
"@mantine/notifications": "^8.1
|
|
55
|
+
"peerDependencies": {
|
|
56
|
+
"@mantine/core": "^8.2.1",
|
|
57
|
+
"@mantine/dates": "^8.2.1",
|
|
58
|
+
"@mantine/hooks": "^8.2.1",
|
|
59
|
+
"@mantine/notifications": "^8.2.1",
|
|
60
60
|
"@tanstack/react-query": "^5.83.0",
|
|
61
61
|
"clsx": "^2.1.1",
|
|
62
|
-
"ky": "^1.8.
|
|
63
|
-
"next": "^15.4.
|
|
62
|
+
"ky": "^1.8.2",
|
|
63
|
+
"next": "^15.4.2",
|
|
64
64
|
"react": "^19.1.0",
|
|
65
65
|
"react-dom": "^19.1.0",
|
|
66
66
|
"react-hook-form": "^7.60.0",
|