@availity/mui-autocomplete 0.4.1 → 0.4.2
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.
- package/CHANGELOG.md +6 -0
- package/dist/index.d.mts +26 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.js +113 -76
- package/dist/index.mjs +111 -75
- package/jest.config.js +10 -0
- package/package.json +7 -7
- package/project.json +9 -10
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.4.2](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.4.1...@availity/mui-autocomplete@0.4.2) (2024-04-19)
|
|
6
|
+
|
|
7
|
+
### Dependency Updates
|
|
8
|
+
|
|
9
|
+
* `mui-form-utils` updated to version `0.4.1`
|
|
10
|
+
* `mui-textfield` updated to version `0.4.1`
|
|
5
11
|
## [0.4.1](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.4.0...@availity/mui-autocomplete@0.4.1) (2024-04-17)
|
|
6
12
|
|
|
7
13
|
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { AutocompleteProps as AutocompleteProps$1 } from '@mui/material/Autocomplete';
|
|
3
|
+
import { ChipTypeMap } from '@mui/material/Chip';
|
|
4
|
+
import { TextFieldProps } from '@availity/mui-textfield';
|
|
5
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
interface AutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends Omit<AutocompleteProps$1<T, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'clearIcon' | 'clearText' | 'closeText' | 'componentsProps' | 'disabledItemsFocusable' | 'forcePopupIcon' | 'fullWidth' | 'handleHomeEndKeys' | 'includeInputInList' | 'openOnFocus' | 'openText' | 'PaperComponent' | 'PopperComponent' | 'popupIcon' | 'selectOnFocus' | 'size' | 'renderInput' | 'slotProps'> {
|
|
8
|
+
/** Props applied to the `TextField` component */
|
|
9
|
+
FieldProps?: TextFieldProps;
|
|
10
|
+
name?: string;
|
|
11
|
+
}
|
|
12
|
+
declare const Autocomplete: <T, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends react.ElementType<any> = "div">({ FieldProps, ...props }: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => JSX.Element;
|
|
13
|
+
|
|
14
|
+
interface AsyncAutocompleteProps<Option, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends Omit<AutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'options' | 'disableListWrap'> {
|
|
15
|
+
/** Function that returns a promise with options and hasMore */
|
|
16
|
+
loadOptions: (page: number, limit: number) => Promise<{
|
|
17
|
+
options: Option[];
|
|
18
|
+
hasMore: boolean;
|
|
19
|
+
}>;
|
|
20
|
+
/** The number of options to request from the api
|
|
21
|
+
* @default 50 */
|
|
22
|
+
limit?: number;
|
|
23
|
+
}
|
|
24
|
+
declare const AsyncAutocomplete: <Option, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends react.ElementType<any> = "div">({ loadOptions, limit, ListboxProps, ...rest }: AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react_jsx_runtime.JSX.Element;
|
|
25
|
+
|
|
26
|
+
export { AsyncAutocomplete, type AsyncAutocompleteProps, Autocomplete, type AutocompleteProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import * as react from 'react';
|
|
|
2
2
|
import { AutocompleteProps as AutocompleteProps$1 } from '@mui/material/Autocomplete';
|
|
3
3
|
import { ChipTypeMap } from '@mui/material/Chip';
|
|
4
4
|
import { TextFieldProps } from '@availity/mui-textfield';
|
|
5
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
6
|
|
|
6
7
|
interface AutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends Omit<AutocompleteProps$1<T, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'clearIcon' | 'clearText' | 'closeText' | 'componentsProps' | 'disabledItemsFocusable' | 'forcePopupIcon' | 'fullWidth' | 'handleHomeEndKeys' | 'includeInputInList' | 'openOnFocus' | 'openText' | 'PaperComponent' | 'PopperComponent' | 'popupIcon' | 'selectOnFocus' | 'size' | 'renderInput' | 'slotProps'> {
|
|
7
8
|
/** Props applied to the `TextField` component */
|
|
@@ -20,6 +21,6 @@ interface AsyncAutocompleteProps<Option, Multiple extends boolean | undefined, D
|
|
|
20
21
|
* @default 50 */
|
|
21
22
|
limit?: number;
|
|
22
23
|
}
|
|
23
|
-
declare const AsyncAutocomplete: <Option, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends react.ElementType<any> = "div">({ loadOptions, limit, ListboxProps, ...rest }: AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => JSX.Element;
|
|
24
|
+
declare const AsyncAutocomplete: <Option, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends react.ElementType<any> = "div">({ loadOptions, limit, ListboxProps, ...rest }: AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react_jsx_runtime.JSX.Element;
|
|
24
25
|
|
|
25
|
-
export { AsyncAutocomplete, AsyncAutocompleteProps, Autocomplete, AutocompleteProps };
|
|
26
|
+
export { AsyncAutocomplete, type AsyncAutocompleteProps, Autocomplete, type AutocompleteProps };
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,39 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __create = Object.create;
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
|
+
var __defProps = Object.defineProperties;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
7
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
9
|
var __getProtoOf = Object.getPrototypeOf;
|
|
7
10
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
+
var __spreadValues = (a, b) => {
|
|
14
|
+
for (var prop in b || (b = {}))
|
|
15
|
+
if (__hasOwnProp.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
if (__getOwnPropSymbols)
|
|
18
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
+
if (__propIsEnum.call(b, prop))
|
|
20
|
+
__defNormalProp(a, prop, b[prop]);
|
|
21
|
+
}
|
|
22
|
+
return a;
|
|
23
|
+
};
|
|
24
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
+
var __objRest = (source, exclude) => {
|
|
26
|
+
var target = {};
|
|
27
|
+
for (var prop in source)
|
|
28
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
if (source != null && __getOwnPropSymbols)
|
|
31
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
8
37
|
var __export = (target, all) => {
|
|
9
38
|
for (var name in all)
|
|
10
39
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -18,10 +47,34 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
47
|
return to;
|
|
19
48
|
};
|
|
20
49
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
50
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
51
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
52
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
53
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
54
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
55
|
mod
|
|
23
56
|
));
|
|
24
57
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
58
|
+
var __async = (__this, __arguments, generator) => {
|
|
59
|
+
return new Promise((resolve, reject) => {
|
|
60
|
+
var fulfilled = (value) => {
|
|
61
|
+
try {
|
|
62
|
+
step(generator.next(value));
|
|
63
|
+
} catch (e) {
|
|
64
|
+
reject(e);
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
var rejected = (value) => {
|
|
68
|
+
try {
|
|
69
|
+
step(generator.throw(value));
|
|
70
|
+
} catch (e) {
|
|
71
|
+
reject(e);
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
75
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
76
|
+
});
|
|
77
|
+
};
|
|
25
78
|
|
|
26
79
|
// src/index.ts
|
|
27
80
|
var src_exports = {};
|
|
@@ -39,108 +92,92 @@ var import_IconButton = __toESM(require("@mui/material/IconButton"));
|
|
|
39
92
|
var import_mui_textfield = require("@availity/mui-textfield");
|
|
40
93
|
var import_mui_form_utils = require("@availity/mui-form-utils");
|
|
41
94
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
42
|
-
var PopupIndicatorWrapper = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
className: "MuiSelect-avEndAdornmentDivider"
|
|
47
|
-
}),
|
|
48
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_IconButton.default, {
|
|
49
|
-
...props,
|
|
50
|
-
ref
|
|
51
|
-
})
|
|
52
|
-
]
|
|
53
|
-
}));
|
|
95
|
+
var PopupIndicatorWrapper = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
96
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_form_utils.SelectDivider, { orientation: "vertical", className: "MuiSelect-avEndAdornmentDivider" }),
|
|
97
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_IconButton.default, __spreadProps(__spreadValues({}, props), { ref }))
|
|
98
|
+
] }));
|
|
54
99
|
var progressSx = { marginRight: ".5rem" };
|
|
55
|
-
var LoadingIndicator = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CircularProgress.default, {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}) => {
|
|
100
|
+
var LoadingIndicator = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CircularProgress.default, { size: 20, sx: progressSx });
|
|
101
|
+
var Autocomplete = (_a) => {
|
|
102
|
+
var _b = _a, {
|
|
103
|
+
FieldProps
|
|
104
|
+
} = _b, props = __objRest(_b, [
|
|
105
|
+
"FieldProps"
|
|
106
|
+
]);
|
|
63
107
|
const defaultProps = {
|
|
64
108
|
fullWidth: true,
|
|
65
109
|
size: "small"
|
|
66
110
|
};
|
|
67
111
|
const resolvedProps = (params) => ({
|
|
68
|
-
InputProps: {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
(params == null ? void 0 : params.InputProps.endAdornment) || null,
|
|
74
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingIndicator, {})
|
|
75
|
-
]
|
|
76
|
-
}) : (params == null ? void 0 : params.InputProps.endAdornment) || null
|
|
77
|
-
},
|
|
78
|
-
inputProps: {
|
|
79
|
-
...FieldProps == null ? void 0 : FieldProps.inputProps,
|
|
80
|
-
...params == null ? void 0 : params.inputProps
|
|
81
|
-
}
|
|
82
|
-
});
|
|
83
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Autocomplete.default, {
|
|
84
|
-
renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_textfield.TextField, {
|
|
85
|
-
...params,
|
|
86
|
-
...resolvedProps(params),
|
|
87
|
-
...FieldProps
|
|
88
|
-
}),
|
|
89
|
-
popupIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_form_utils.SelectExpandIcon, {
|
|
90
|
-
className: "MuiSelect-avExpandIcon"
|
|
112
|
+
InputProps: __spreadProps(__spreadValues(__spreadValues({}, FieldProps == null ? void 0 : FieldProps.InputProps), params == null ? void 0 : params.InputProps), {
|
|
113
|
+
endAdornment: props.loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
114
|
+
(params == null ? void 0 : params.InputProps.endAdornment) || null,
|
|
115
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingIndicator, {})
|
|
116
|
+
] }) : (params == null ? void 0 : params.InputProps.endAdornment) || null
|
|
91
117
|
}),
|
|
92
|
-
|
|
93
|
-
...props,
|
|
94
|
-
...defaultProps
|
|
118
|
+
inputProps: __spreadValues(__spreadValues({}, FieldProps == null ? void 0 : FieldProps.inputProps), params == null ? void 0 : params.inputProps)
|
|
95
119
|
});
|
|
120
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
121
|
+
import_Autocomplete.default,
|
|
122
|
+
__spreadValues(__spreadValues({
|
|
123
|
+
renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_textfield.TextField, __spreadValues(__spreadValues(__spreadValues({}, params), resolvedProps(params)), FieldProps)),
|
|
124
|
+
popupIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_form_utils.SelectExpandIcon, { className: "MuiSelect-avExpandIcon" }),
|
|
125
|
+
slotProps: { popupIndicator: { component: PopupIndicatorWrapper } }
|
|
126
|
+
}, props), defaultProps)
|
|
127
|
+
);
|
|
96
128
|
};
|
|
97
129
|
|
|
98
130
|
// src/lib/AsyncAutocomplete.tsx
|
|
99
131
|
var import_react2 = require("react");
|
|
100
|
-
var
|
|
101
|
-
var AsyncAutocomplete = ({
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}
|
|
132
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
133
|
+
var AsyncAutocomplete = (_a) => {
|
|
134
|
+
var _b = _a, {
|
|
135
|
+
loadOptions,
|
|
136
|
+
limit = 50,
|
|
137
|
+
ListboxProps
|
|
138
|
+
} = _b, rest = __objRest(_b, [
|
|
139
|
+
"loadOptions",
|
|
140
|
+
"limit",
|
|
141
|
+
"ListboxProps"
|
|
142
|
+
]);
|
|
107
143
|
const [page, setPage] = (0, import_react2.useState)(0);
|
|
108
144
|
const [options, setOptions] = (0, import_react2.useState)([]);
|
|
109
145
|
const [loading, setLoading] = (0, import_react2.useState)(false);
|
|
110
146
|
const [hasMore, setHasMore] = (0, import_react2.useState)(true);
|
|
111
147
|
(0, import_react2.useEffect)(() => {
|
|
112
|
-
const getInitialOptions =
|
|
148
|
+
const getInitialOptions = () => __async(void 0, null, function* () {
|
|
113
149
|
setLoading(true);
|
|
114
|
-
const result =
|
|
150
|
+
const result = yield loadOptions(page, limit);
|
|
115
151
|
setOptions(result.options);
|
|
116
152
|
setHasMore(result.hasMore);
|
|
117
153
|
setPage((prev) => prev + 1);
|
|
118
154
|
setLoading(false);
|
|
119
|
-
};
|
|
155
|
+
});
|
|
120
156
|
if (!loading && hasMore && page === 0) {
|
|
121
157
|
getInitialOptions();
|
|
122
158
|
}
|
|
123
159
|
}, [page, loading, loadOptions]);
|
|
124
|
-
return /* @__PURE__ */ (0,
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
160
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
161
|
+
Autocomplete,
|
|
162
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
163
|
+
loading,
|
|
164
|
+
options,
|
|
165
|
+
ListboxProps: __spreadProps(__spreadValues({}, ListboxProps), {
|
|
166
|
+
onScroll: (event) => __async(void 0, null, function* () {
|
|
167
|
+
const listboxNode = event.currentTarget;
|
|
168
|
+
const difference = listboxNode.scrollHeight - (listboxNode.scrollTop + listboxNode.clientHeight);
|
|
169
|
+
if (difference <= 5 && !loading && hasMore) {
|
|
170
|
+
setLoading(true);
|
|
171
|
+
const result = yield loadOptions(page, limit);
|
|
172
|
+
setOptions([...options, ...result.options]);
|
|
173
|
+
setHasMore(result.hasMore);
|
|
174
|
+
setPage((prev) => prev + 1);
|
|
175
|
+
setLoading(false);
|
|
176
|
+
}
|
|
177
|
+
})
|
|
178
|
+
})
|
|
179
|
+
})
|
|
180
|
+
);
|
|
144
181
|
};
|
|
145
182
|
// Annotate the CommonJS export names for ESM import in node:
|
|
146
183
|
0 && (module.exports = {
|
package/dist/index.mjs
CHANGED
|
@@ -1,3 +1,55 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
32
|
+
var __async = (__this, __arguments, generator) => {
|
|
33
|
+
return new Promise((resolve, reject) => {
|
|
34
|
+
var fulfilled = (value) => {
|
|
35
|
+
try {
|
|
36
|
+
step(generator.next(value));
|
|
37
|
+
} catch (e) {
|
|
38
|
+
reject(e);
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
var rejected = (value) => {
|
|
42
|
+
try {
|
|
43
|
+
step(generator.throw(value));
|
|
44
|
+
} catch (e) {
|
|
45
|
+
reject(e);
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
49
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
|
|
1
53
|
// src/lib/Autocomplete.tsx
|
|
2
54
|
import { forwardRef } from "react";
|
|
3
55
|
import {
|
|
@@ -8,108 +60,92 @@ import { default as MuiIconButton } from "@mui/material/IconButton";
|
|
|
8
60
|
import { TextField } from "@availity/mui-textfield";
|
|
9
61
|
import { SelectDivider, SelectExpandIcon } from "@availity/mui-form-utils";
|
|
10
62
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
-
var PopupIndicatorWrapper = forwardRef((props, ref) => /* @__PURE__ */ jsxs(Fragment, {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
className: "MuiSelect-avEndAdornmentDivider"
|
|
16
|
-
}),
|
|
17
|
-
/* @__PURE__ */ jsx(MuiIconButton, {
|
|
18
|
-
...props,
|
|
19
|
-
ref
|
|
20
|
-
})
|
|
21
|
-
]
|
|
22
|
-
}));
|
|
63
|
+
var PopupIndicatorWrapper = forwardRef((props, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
64
|
+
/* @__PURE__ */ jsx(SelectDivider, { orientation: "vertical", className: "MuiSelect-avEndAdornmentDivider" }),
|
|
65
|
+
/* @__PURE__ */ jsx(MuiIconButton, __spreadProps(__spreadValues({}, props), { ref }))
|
|
66
|
+
] }));
|
|
23
67
|
var progressSx = { marginRight: ".5rem" };
|
|
24
|
-
var LoadingIndicator = () => /* @__PURE__ */ jsx(CircularProgress, {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}) => {
|
|
68
|
+
var LoadingIndicator = () => /* @__PURE__ */ jsx(CircularProgress, { size: 20, sx: progressSx });
|
|
69
|
+
var Autocomplete = (_a) => {
|
|
70
|
+
var _b = _a, {
|
|
71
|
+
FieldProps
|
|
72
|
+
} = _b, props = __objRest(_b, [
|
|
73
|
+
"FieldProps"
|
|
74
|
+
]);
|
|
32
75
|
const defaultProps = {
|
|
33
76
|
fullWidth: true,
|
|
34
77
|
size: "small"
|
|
35
78
|
};
|
|
36
79
|
const resolvedProps = (params) => ({
|
|
37
|
-
InputProps: {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
(params == null ? void 0 : params.InputProps.endAdornment) || null,
|
|
43
|
-
/* @__PURE__ */ jsx(LoadingIndicator, {})
|
|
44
|
-
]
|
|
45
|
-
}) : (params == null ? void 0 : params.InputProps.endAdornment) || null
|
|
46
|
-
},
|
|
47
|
-
inputProps: {
|
|
48
|
-
...FieldProps == null ? void 0 : FieldProps.inputProps,
|
|
49
|
-
...params == null ? void 0 : params.inputProps
|
|
50
|
-
}
|
|
51
|
-
});
|
|
52
|
-
return /* @__PURE__ */ jsx(MuiAutocomplete, {
|
|
53
|
-
renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
|
|
54
|
-
...params,
|
|
55
|
-
...resolvedProps(params),
|
|
56
|
-
...FieldProps
|
|
57
|
-
}),
|
|
58
|
-
popupIcon: /* @__PURE__ */ jsx(SelectExpandIcon, {
|
|
59
|
-
className: "MuiSelect-avExpandIcon"
|
|
80
|
+
InputProps: __spreadProps(__spreadValues(__spreadValues({}, FieldProps == null ? void 0 : FieldProps.InputProps), params == null ? void 0 : params.InputProps), {
|
|
81
|
+
endAdornment: props.loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
82
|
+
(params == null ? void 0 : params.InputProps.endAdornment) || null,
|
|
83
|
+
/* @__PURE__ */ jsx(LoadingIndicator, {})
|
|
84
|
+
] }) : (params == null ? void 0 : params.InputProps.endAdornment) || null
|
|
60
85
|
}),
|
|
61
|
-
|
|
62
|
-
...props,
|
|
63
|
-
...defaultProps
|
|
86
|
+
inputProps: __spreadValues(__spreadValues({}, FieldProps == null ? void 0 : FieldProps.inputProps), params == null ? void 0 : params.inputProps)
|
|
64
87
|
});
|
|
88
|
+
return /* @__PURE__ */ jsx(
|
|
89
|
+
MuiAutocomplete,
|
|
90
|
+
__spreadValues(__spreadValues({
|
|
91
|
+
renderInput: (params) => /* @__PURE__ */ jsx(TextField, __spreadValues(__spreadValues(__spreadValues({}, params), resolvedProps(params)), FieldProps)),
|
|
92
|
+
popupIcon: /* @__PURE__ */ jsx(SelectExpandIcon, { className: "MuiSelect-avExpandIcon" }),
|
|
93
|
+
slotProps: { popupIndicator: { component: PopupIndicatorWrapper } }
|
|
94
|
+
}, props), defaultProps)
|
|
95
|
+
);
|
|
65
96
|
};
|
|
66
97
|
|
|
67
98
|
// src/lib/AsyncAutocomplete.tsx
|
|
68
99
|
import { useState, useEffect } from "react";
|
|
69
100
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
70
|
-
var AsyncAutocomplete = ({
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}
|
|
101
|
+
var AsyncAutocomplete = (_a) => {
|
|
102
|
+
var _b = _a, {
|
|
103
|
+
loadOptions,
|
|
104
|
+
limit = 50,
|
|
105
|
+
ListboxProps
|
|
106
|
+
} = _b, rest = __objRest(_b, [
|
|
107
|
+
"loadOptions",
|
|
108
|
+
"limit",
|
|
109
|
+
"ListboxProps"
|
|
110
|
+
]);
|
|
76
111
|
const [page, setPage] = useState(0);
|
|
77
112
|
const [options, setOptions] = useState([]);
|
|
78
113
|
const [loading, setLoading] = useState(false);
|
|
79
114
|
const [hasMore, setHasMore] = useState(true);
|
|
80
115
|
useEffect(() => {
|
|
81
|
-
const getInitialOptions =
|
|
116
|
+
const getInitialOptions = () => __async(void 0, null, function* () {
|
|
82
117
|
setLoading(true);
|
|
83
|
-
const result =
|
|
118
|
+
const result = yield loadOptions(page, limit);
|
|
84
119
|
setOptions(result.options);
|
|
85
120
|
setHasMore(result.hasMore);
|
|
86
121
|
setPage((prev) => prev + 1);
|
|
87
122
|
setLoading(false);
|
|
88
|
-
};
|
|
123
|
+
});
|
|
89
124
|
if (!loading && hasMore && page === 0) {
|
|
90
125
|
getInitialOptions();
|
|
91
126
|
}
|
|
92
127
|
}, [page, loading, loadOptions]);
|
|
93
|
-
return /* @__PURE__ */ jsx2(
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
128
|
+
return /* @__PURE__ */ jsx2(
|
|
129
|
+
Autocomplete,
|
|
130
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
131
|
+
loading,
|
|
132
|
+
options,
|
|
133
|
+
ListboxProps: __spreadProps(__spreadValues({}, ListboxProps), {
|
|
134
|
+
onScroll: (event) => __async(void 0, null, function* () {
|
|
135
|
+
const listboxNode = event.currentTarget;
|
|
136
|
+
const difference = listboxNode.scrollHeight - (listboxNode.scrollTop + listboxNode.clientHeight);
|
|
137
|
+
if (difference <= 5 && !loading && hasMore) {
|
|
138
|
+
setLoading(true);
|
|
139
|
+
const result = yield loadOptions(page, limit);
|
|
140
|
+
setOptions([...options, ...result.options]);
|
|
141
|
+
setHasMore(result.hasMore);
|
|
142
|
+
setPage((prev) => prev + 1);
|
|
143
|
+
setLoading(false);
|
|
144
|
+
}
|
|
145
|
+
})
|
|
146
|
+
})
|
|
147
|
+
})
|
|
148
|
+
);
|
|
113
149
|
};
|
|
114
150
|
export {
|
|
115
151
|
AsyncAutocomplete,
|
package/jest.config.js
CHANGED
|
@@ -4,4 +4,14 @@ module.exports = {
|
|
|
4
4
|
...global,
|
|
5
5
|
displayName: 'autocomplete',
|
|
6
6
|
coverageDirectory: '../../coverage/autocomplete',
|
|
7
|
+
/* TODO: Update to latest Jest snapshotFormat
|
|
8
|
+
* By default Nx has kept the older style of Jest Snapshot formats
|
|
9
|
+
* to prevent breaking of any existing tests with snapshots.
|
|
10
|
+
* It's recommend you update to the latest format.
|
|
11
|
+
* You can do this by removing snapshotFormat property
|
|
12
|
+
* and running tests with --update-snapshot flag.
|
|
13
|
+
* Example: From within the project directory, run "nx test --update-snapshot"
|
|
14
|
+
* More info: https://jestjs.io/docs/upgrading-to-jest29#snapshot-format
|
|
15
|
+
*/
|
|
16
|
+
snapshotFormat: { escapeString: true, printBasicPrototype: true },
|
|
7
17
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@availity/mui-autocomplete",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.2",
|
|
4
4
|
"description": "Availity MUI Autocomplete Component - part of the @availity/element design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -33,18 +33,18 @@
|
|
|
33
33
|
"publish:canary": "yarn npm publish --access public --tag canary"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@mui/types": "^7.2.
|
|
36
|
+
"@mui/types": "^7.2.14"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@mui/material": "^5.
|
|
39
|
+
"@mui/material": "^5.15.15",
|
|
40
40
|
"react": "18.2.0",
|
|
41
41
|
"react-dom": "18.2.0",
|
|
42
|
-
"tsup": "^
|
|
43
|
-
"typescript": "^4.
|
|
42
|
+
"tsup": "^8.0.2",
|
|
43
|
+
"typescript": "^5.4.5"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
|
-
"@availity/mui-form-utils": "^0.10.
|
|
47
|
-
"@availity/mui-textfield": "^0.5.
|
|
46
|
+
"@availity/mui-form-utils": "^0.10.3",
|
|
47
|
+
"@availity/mui-textfield": "^0.5.17",
|
|
48
48
|
"@mui/material": "^5.11.9",
|
|
49
49
|
"react": ">=16.3.0"
|
|
50
50
|
},
|
package/project.json
CHANGED
|
@@ -6,10 +6,9 @@
|
|
|
6
6
|
"tags": [],
|
|
7
7
|
"targets": {
|
|
8
8
|
"lint": {
|
|
9
|
-
"executor": "@
|
|
9
|
+
"executor": "@nx/eslint:lint",
|
|
10
10
|
"options": {
|
|
11
11
|
"eslintConfig": ".eslintrc.json",
|
|
12
|
-
"lintFilePatterns": ["packages/autocomplete/**/*.{js,ts}"],
|
|
13
12
|
"silent": false,
|
|
14
13
|
"fix": false,
|
|
15
14
|
"cache": true,
|
|
@@ -22,21 +21,21 @@
|
|
|
22
21
|
}
|
|
23
22
|
},
|
|
24
23
|
"test": {
|
|
25
|
-
"executor": "@
|
|
26
|
-
"outputs": ["coverage/autocomplete"],
|
|
24
|
+
"executor": "@nx/jest:jest",
|
|
25
|
+
"outputs": ["{workspaceRoot}/coverage/autocomplete"],
|
|
27
26
|
"options": {
|
|
28
|
-
"jestConfig": "packages/autocomplete/jest.config.js"
|
|
29
|
-
"passWithNoTests": true
|
|
27
|
+
"jestConfig": "packages/autocomplete/jest.config.js"
|
|
30
28
|
}
|
|
31
29
|
},
|
|
32
30
|
"version": {
|
|
33
31
|
"executor": "@jscutlery/semver:version",
|
|
34
32
|
"options": {
|
|
35
33
|
"preset": "conventional",
|
|
36
|
-
"commitMessageFormat": "chore(
|
|
37
|
-
"tagPrefix": "@availity
|
|
38
|
-
|
|
39
|
-
|
|
34
|
+
"commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
|
|
35
|
+
"tagPrefix": "@availity/{projectName}@",
|
|
36
|
+
"trackDeps": true,
|
|
37
|
+
"skipCommitTypes": ["docs"]
|
|
38
|
+
}
|
|
40
39
|
}
|
|
41
40
|
}
|
|
42
41
|
}
|