@availity/mui-autocomplete 0.4.0 → 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.
Files changed (9) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/index.d.mts +26 -0
  3. package/dist/index.d.ts +4 -3
  4. package/dist/index.js +113 -74
  5. package/dist/index.mjs +111 -73
  6. package/jest.config.js +10 -0
  7. package/package.json +7 -7
  8. package/project.json +9 -10
  9. package/src/lib/AsyncAutocomplete.tsx +6 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,19 @@
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`
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)
12
+
13
+
14
+ ### Bug Fixes
15
+
16
+ * **mui-autocomplete:** remove disableListWrap and spread ListboxProps ([e782424](https://github.com/Availity/element/commit/e782424d738018c8ba2e8397d534f537d1962435))
17
+
5
18
  ## [0.4.0](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.3.2...@availity/mui-autocomplete@0.4.0) (2024-04-11)
6
19
 
7
20
 
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 */
@@ -10,7 +11,7 @@ interface AutocompleteProps<T, Multiple extends boolean | undefined, DisableClea
10
11
  }
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;
12
13
 
13
- 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'> {
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'> {
14
15
  /** Function that returns a promise with options and hasMore */
15
16
  loadOptions: (page: number, limit: number) => Promise<{
16
17
  options: Option[];
@@ -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, ...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,106 +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
- children: [
44
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_form_utils.SelectDivider, {
45
- orientation: "vertical",
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
- size: 20,
57
- sx: progressSx
58
- });
59
- var Autocomplete = ({
60
- FieldProps,
61
- ...props
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
- ...FieldProps == null ? void 0 : FieldProps.InputProps,
70
- ...params == null ? void 0 : params.InputProps,
71
- endAdornment: props.loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
72
- children: [
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
- slotProps: { popupIndicator: { component: PopupIndicatorWrapper } },
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 import_jsx_runtime = require("react/jsx-runtime");
101
- var AsyncAutocomplete = ({
102
- loadOptions,
103
- limit = 50,
104
- ...rest
105
- }) => {
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
+ ]);
106
143
  const [page, setPage] = (0, import_react2.useState)(0);
107
144
  const [options, setOptions] = (0, import_react2.useState)([]);
108
145
  const [loading, setLoading] = (0, import_react2.useState)(false);
109
146
  const [hasMore, setHasMore] = (0, import_react2.useState)(true);
110
147
  (0, import_react2.useEffect)(() => {
111
- const getInitialOptions = async () => {
148
+ const getInitialOptions = () => __async(void 0, null, function* () {
112
149
  setLoading(true);
113
- const result = await loadOptions(page, limit);
150
+ const result = yield loadOptions(page, limit);
114
151
  setOptions(result.options);
115
152
  setHasMore(result.hasMore);
116
153
  setPage((prev) => prev + 1);
117
154
  setLoading(false);
118
- };
155
+ });
119
156
  if (!loading && hasMore && page === 0) {
120
157
  getInitialOptions();
121
158
  }
122
159
  }, [page, loading, loadOptions]);
123
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Autocomplete, {
124
- ...rest,
125
- loading,
126
- options,
127
- ListboxProps: {
128
- onScroll: async (event) => {
129
- const listboxNode = event.currentTarget;
130
- const difference = listboxNode.scrollHeight - (listboxNode.scrollTop + listboxNode.clientHeight);
131
- if (difference <= 5 && !loading && hasMore) {
132
- setLoading(true);
133
- const result = await loadOptions(page, limit);
134
- setOptions([...options, ...result.options]);
135
- setHasMore(result.hasMore);
136
- setPage((prev) => prev + 1);
137
- setLoading(false);
138
- }
139
- }
140
- }
141
- });
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
+ );
142
181
  };
143
182
  // Annotate the CommonJS export names for ESM import in node:
144
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,106 +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
- children: [
13
- /* @__PURE__ */ jsx(SelectDivider, {
14
- orientation: "vertical",
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
- size: 20,
26
- sx: progressSx
27
- });
28
- var Autocomplete = ({
29
- FieldProps,
30
- ...props
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
- ...FieldProps == null ? void 0 : FieldProps.InputProps,
39
- ...params == null ? void 0 : params.InputProps,
40
- endAdornment: props.loading ? /* @__PURE__ */ jsxs(Fragment, {
41
- children: [
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
- slotProps: { popupIndicator: { component: PopupIndicatorWrapper } },
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
- loadOptions,
72
- limit = 50,
73
- ...rest
74
- }) => {
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
+ ]);
75
111
  const [page, setPage] = useState(0);
76
112
  const [options, setOptions] = useState([]);
77
113
  const [loading, setLoading] = useState(false);
78
114
  const [hasMore, setHasMore] = useState(true);
79
115
  useEffect(() => {
80
- const getInitialOptions = async () => {
116
+ const getInitialOptions = () => __async(void 0, null, function* () {
81
117
  setLoading(true);
82
- const result = await loadOptions(page, limit);
118
+ const result = yield loadOptions(page, limit);
83
119
  setOptions(result.options);
84
120
  setHasMore(result.hasMore);
85
121
  setPage((prev) => prev + 1);
86
122
  setLoading(false);
87
- };
123
+ });
88
124
  if (!loading && hasMore && page === 0) {
89
125
  getInitialOptions();
90
126
  }
91
127
  }, [page, loading, loadOptions]);
92
- return /* @__PURE__ */ jsx2(Autocomplete, {
93
- ...rest,
94
- loading,
95
- options,
96
- ListboxProps: {
97
- onScroll: async (event) => {
98
- const listboxNode = event.currentTarget;
99
- const difference = listboxNode.scrollHeight - (listboxNode.scrollTop + listboxNode.clientHeight);
100
- if (difference <= 5 && !loading && hasMore) {
101
- setLoading(true);
102
- const result = await loadOptions(page, limit);
103
- setOptions([...options, ...result.options]);
104
- setHasMore(result.hasMore);
105
- setPage((prev) => prev + 1);
106
- setLoading(false);
107
- }
108
- }
109
- }
110
- });
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
+ );
111
149
  };
112
150
  export {
113
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.0",
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.5"
36
+ "@mui/types": "^7.2.14"
37
37
  },
38
38
  "devDependencies": {
39
- "@mui/material": "^5.11.9",
39
+ "@mui/material": "^5.15.15",
40
40
  "react": "18.2.0",
41
41
  "react-dom": "18.2.0",
42
- "tsup": "^5.12.7",
43
- "typescript": "^4.6.4"
42
+ "tsup": "^8.0.2",
43
+ "typescript": "^5.4.5"
44
44
  },
45
45
  "peerDependencies": {
46
- "@availity/mui-form-utils": "^0.10.1",
47
- "@availity/mui-textfield": "^0.5.15",
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": "@nrwl/linter:eslint",
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": "@nrwl/jest:jest",
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(${projectName}): release version ${version} [skip ci]",
37
- "tagPrefix": "@availity/${projectName}@"
38
- },
39
- "trackDeps": true
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
  }
package/src/lib/AsyncAutocomplete.tsx CHANGED
@@ -9,7 +9,10 @@ export interface AsyncAutocompleteProps<
9
9
  DisableClearable extends boolean | undefined,
10
10
  FreeSolo extends boolean | undefined,
11
11
  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']
12
- > extends Omit<AutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'options'> {
12
+ > extends Omit<
13
+ AutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>,
14
+ 'options' | 'disableListWrap'
15
+ > {
13
16
  /** Function that returns a promise with options and hasMore */
14
17
  loadOptions: (page: number, limit: number) => Promise<{ options: Option[]; hasMore: boolean }>;
15
18
  /** The number of options to request from the api
@@ -26,6 +29,7 @@ export const AsyncAutocomplete = <
26
29
  >({
27
30
  loadOptions,
28
31
  limit = 50,
32
+ ListboxProps,
29
33
  ...rest
30
34
  }: AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => {
31
35
  const [page, setPage] = useState(0);
@@ -54,6 +58,7 @@ export const AsyncAutocomplete = <
54
58
  loading={loading}
55
59
  options={options}
56
60
  ListboxProps={{
61
+ ...ListboxProps,
57
62
  onScroll: async (event: React.SyntheticEvent) => {
58
63
  const listboxNode = event.currentTarget;
59
64
  const difference = listboxNode.scrollHeight - (listboxNode.scrollTop + listboxNode.clientHeight);