react-core-ts 1.5.8 → 1.6.0

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 (10) hide show
  1. package/dist/ReactAutoCompleteDropdown.d.ts +47 -0
  2. package/dist/ReactAutoCompleteDropdown.js +620 -0
  3. package/dist/ReactAutoCompleteDropdown.js.map +1 -0
  4. package/dist/index.d.ts +1 -0
  5. package/dist/index.js +3 -1
  6. package/dist/index.js.map +1 -1
  7. package/docs/App.tsx +17 -1
  8. package/package.json +1 -1
  9. package/src/ReactAutoCompleteDropdown.tsx +892 -0
  10. package/src/index.tsx +1 -0
package/dist/ReactAutoCompleteDropdown.d.ts ADDED
@@ -0,0 +1,47 @@
1
+ import React from 'react';
2
+ import { FieldErrors } from 'react-hook-form';
3
+ type valueProps = {
4
+ id?: string | number;
5
+ name: string;
6
+ label?: string;
7
+ param1?: string | number | null;
8
+ param2?: string | number | null;
9
+ param3?: string | number | null;
10
+ param4?: string | number | null;
11
+ from?: number;
12
+ };
13
+ interface AutoSuggestionInputProps {
14
+ id?: string;
15
+ label?: string;
16
+ fullWidth?: boolean;
17
+ className?: string;
18
+ autoFocus?: boolean;
19
+ required?: boolean;
20
+ shortCode?: string;
21
+ hideClear?: boolean;
22
+ value?: valueProps;
23
+ onChange: (value?: valueProps) => void;
24
+ data?: any[];
25
+ type?: 'custom_select' | 'auto_complete' | 'custom_search_select';
26
+ placeholder?: string;
27
+ getData?: ((key?: string) => Promise<any>) | ((key?: string) => any);
28
+ errors?: FieldErrors;
29
+ name: string;
30
+ readOnly?: boolean;
31
+ disabled?: boolean;
32
+ autoFilter?: boolean;
33
+ insideOpen?: boolean;
34
+ isClose?: boolean;
35
+ noLocalFilter?: boolean;
36
+ isStaticList?: boolean;
37
+ isCustomPlaceholder?: boolean;
38
+ checkParams?: string[];
39
+ fromPrefix?: boolean;
40
+ hasParentError?: boolean;
41
+ width?: number;
42
+ labelTitle?: string;
43
+ isModern?: boolean;
44
+ autoDropdown?: boolean;
45
+ }
46
+ declare const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps>;
47
+ export default ModernAutoCompleteDropdown;
package/dist/ReactAutoCompleteDropdown.js ADDED
@@ -0,0 +1,620 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
14
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
15
+ return new (P || (P = Promise))(function (resolve, reject) {
16
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
17
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
18
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
19
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
20
+ });
21
+ };
22
+ var __generator = (this && this.__generator) || function (thisArg, body) {
23
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
24
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
25
+ function verb(n) { return function (v) { return step([n, v]); }; }
26
+ function step(op) {
27
+ if (f) throw new TypeError("Generator is already executing.");
28
+ while (g && (g = 0, op[0] && (_ = 0)), _) try {
29
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
30
+ if (y = 0, t) op = [op[0] & 2, t.value];
31
+ switch (op[0]) {
32
+ case 0: case 1: t = op; break;
33
+ case 4: _.label++; return { value: op[1], done: false };
34
+ case 5: _.label++; y = op[1]; op = [0]; continue;
35
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
36
+ default:
37
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
38
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
39
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
40
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
41
+ if (t[2]) _.ops.pop();
42
+ _.trys.pop(); continue;
43
+ }
44
+ op = body.call(thisArg, _);
45
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
46
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
47
+ }
48
+ };
49
+ var __importDefault = (this && this.__importDefault) || function (mod) {
50
+ return (mod && mod.__esModule) ? mod : { "default": mod };
51
+ };
52
+ Object.defineProperty(exports, "__esModule", { value: true });
53
+ var jsx_runtime_1 = require("react/jsx-runtime");
54
+ var react_1 = require("react");
55
+ var customIcons_1 = __importDefault(require("./components/customIcons"));
56
+ var Spinner_1 = __importDefault(require("./components/loader/Spinner"));
57
+ var portal_1 = __importDefault(require("./components/portal"));
58
+ var debounce_1 = require("./utilities/debounce");
59
+ var getPosition_1 = require("./utilities/getPosition");
60
+ var icons_1 = require("./utilities/icons");
61
+ var ModernAutoCompleteDropdown = function (_a) {
62
+ var _b;
63
+ var label = _a.label, onChange = _a.onChange, getData = _a.getData, data = _a.data, errors = _a.errors, _c = _a.required, required = _c === void 0 ? false : _c, autoFocus = _a.autoFocus, name = _a.name, _d = _a.shortCode, shortCode = _d === void 0 ? '' : _d, fullWidth = _a.fullWidth, placeholder = _a.placeholder, id = _a.id, propsClassName = _a.className, _e = _a.type, type = _e === void 0 ? 'custom_select' : _e, readOnly = _a.readOnly, _f = _a.disabled, disabled = _f === void 0 ? false : _f, value = _a.value, _g = _a.autoFilter, autoFilter = _g === void 0 ? false : _g, _h = _a.autoDropdown, autoDropdown = _h === void 0 ? true : _h, _j = _a.insideOpen, insideOpen = _j === void 0 ? false : _j, _k = _a.isClose, isClose = _k === void 0 ? true : _k, _l = _a.noLocalFilter, noLocalFilter = _l === void 0 ? false : _l, _m = _a.isStaticList, isStaticList = _m === void 0 ? false : _m, _o = _a.isCustomPlaceholder, isCustomPlaceholder = _o === void 0 ? false : _o, checkParams = _a.checkParams, width = _a.width, hasParentError = _a.hasParentError, fromPrefix = _a.fromPrefix, labelTitle = _a.labelTitle, _p = _a.isModern, isModern = _p === void 0 ? true : _p;
64
+ var _q = (0, react_1.useState)((_b = value === null || value === void 0 ? void 0 : value.name) !== null && _b !== void 0 ? _b : ''), inputValue = _q[0], setInputValue = _q[1];
65
+ var _r = (0, react_1.useState)(false), isHovered = _r[0], setIsHovered = _r[1];
66
+ var _s = (0, react_1.useState)(false), isLoading = _s[0], setIsLoading = _s[1];
67
+ var _t = (0, react_1.useState)(false), dropOpen = _t[0], setDropOpen = _t[1];
68
+ var _u = (0, react_1.useState)(disabled), isDisabled = _u[0], setIsDisabled = _u[1];
69
+ var _v = (0, react_1.useState)(false), showClose = _v[0], setShowClose = _v[1];
70
+ var _w = (0, react_1.useState)(false), showToolTip = _w[0], setShowTooltip = _w[1];
71
+ var _x = (0, react_1.useState)(false), tooltipIsHovered = _x[0], setTooltipIsHovered = _x[1];
72
+ var _y = (0, react_1.useState)([]), suggestions = _y[0], setSuggestions = _y[1];
73
+ var inputRef = (0, react_1.useRef)(null);
74
+ var adorementRef = (0, react_1.useRef)(null);
75
+ var dropdownref = (0, react_1.useRef)(null);
76
+ var dropBtnRef = (0, react_1.useRef)(null);
77
+ var timerRef = (0, react_1.useRef)(0); // To fix the no results found issue on second type
78
+ var _z = (0, react_1.useState)(0), selectedIndex = _z[0], setSelectedIndex = _z[1];
79
+ var itemRefs = (0, react_1.useRef)([]);
80
+ var scrollContainerRef = (0, react_1.useRef)(null);
81
+ var _0 = (0, react_1.useState)({
82
+ top: 0,
83
+ left: 0,
84
+ bottom: 0,
85
+ right: 0,
86
+ }), dropPosition = _0[0], setDropPosition = _0[1];
87
+ var checkIncludes = function (mainString, subString, param1, param2, param3, param4) {
88
+ var checkIncludesIfExists = function (mainString, substring) {
89
+ return substring &&
90
+ mainString &&
91
+ typeof mainString === 'string' &&
92
+ typeof subString === 'string'
93
+ ? mainString
94
+ .toString()
95
+ .toLowerCase()
96
+ .startsWith(substring.toString().toLowerCase())
97
+ : false;
98
+ };
99
+ var checkArrayContains = function (strArray, param) { var _a; return (_a = strArray === null || strArray === void 0 ? void 0 : strArray.includes(param)) !== null && _a !== void 0 ? _a : false; };
100
+ return (checkIncludesIfExists(mainString, subString) ||
101
+ (!!checkParams &&
102
+ ((checkArrayContains(checkParams, 'param1') &&
103
+ checkIncludesIfExists(param1, subString)) ||
104
+ (checkArrayContains(checkParams, 'param2') &&
105
+ checkIncludesIfExists(param2, subString)) ||
106
+ (checkArrayContains(checkParams, 'param3') &&
107
+ checkIncludesIfExists(param3, subString)) ||
108
+ (checkArrayContains(checkParams, 'param4') &&
109
+ checkIncludesIfExists(param4, subString)))));
110
+ };
111
+ var handleChange = function (event) {
112
+ var value = event.target.value;
113
+ timerRef.current = 0;
114
+ setInputValue(value);
115
+ handleValChange(value);
116
+ if (!value) {
117
+ setInputValue('');
118
+ onChange({ id: undefined, name: '', from: 2 });
119
+ }
120
+ };
121
+ var handleValChange = (0, react_1.useCallback)((0, debounce_1.debounce)(function (value) {
122
+ setDropOpen(true);
123
+ onChange({ id: undefined, name: '', from: 1 });
124
+ if (value.trim() === '' && type === 'auto_complete') {
125
+ setSuggestions([]);
126
+ if (autoFilter) {
127
+ handleDropData('*');
128
+ }
129
+ else {
130
+ setDropOpen(false);
131
+ }
132
+ }
133
+ else {
134
+ handleDropData(value);
135
+ }
136
+ setTimeout(function () {
137
+ timerRef.current = 1;
138
+ }, 200);
139
+ }, isStaticList ? 0 : 1000), []);
140
+ var handleDropData = function (value) {
141
+ if (type === 'auto_complete') {
142
+ if (isStaticList) {
143
+ loadStaticData();
144
+ var filteredData_1 = value && value !== '*'
145
+ ? data === null || data === void 0 ? void 0 : data.filter(function (item) {
146
+ return checkIncludes(item.name, value, item.param1, item.param2, item.param3);
147
+ })
148
+ : data;
149
+ setSuggestions(filteredData_1);
150
+ }
151
+ else {
152
+ handlePickSuggestions(value);
153
+ }
154
+ }
155
+ else if ((type === 'custom_select' || type === 'custom_search_select') &&
156
+ (!data || (data === null || data === void 0 ? void 0 : data.length) === 0)) {
157
+ handlePickSuggestions();
158
+ }
159
+ else if (type === 'custom_search_select' && data && (data === null || data === void 0 ? void 0 : data.length) > 0) {
160
+ var filteredData_2 = value && value !== '*'
161
+ ? data.filter(function (item) {
162
+ return checkIncludes(item.name, value, item.param1, item.param2, item.param3);
163
+ })
164
+ : data;
165
+ setSuggestions(filteredData_2);
166
+ }
167
+ };
168
+ var handlePickSuggestions = function (value) { return __awaiter(void 0, void 0, void 0, function () {
169
+ var fetchedSuggestions, error_1;
170
+ return __generator(this, function (_a) {
171
+ switch (_a.label) {
172
+ case 0:
173
+ if (!getData) return [3 /*break*/, 4];
174
+ setIsLoading(true);
175
+ _a.label = 1;
176
+ case 1:
177
+ _a.trys.push([1, 3, , 4]);
178
+ return [4 /*yield*/, (getData === null || getData === void 0 ? void 0 : getData(value))];
179
+ case 2:
180
+ fetchedSuggestions = _a.sent();
181
+ setSuggestions(fetchedSuggestions);
182
+ setIsLoading(false);
183
+ return [3 /*break*/, 4];
184
+ case 3:
185
+ error_1 = _a.sent();
186
+ setIsLoading(false);
187
+ return [3 /*break*/, 4];
188
+ case 4: return [2 /*return*/];
189
+ }
190
+ });
191
+ }); };
192
+ var onLabelClick = function () {
193
+ var _a;
194
+ if (!isDisabled) {
195
+ (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
196
+ if (autoFilter && inputValue === '') {
197
+ handleValChange('*');
198
+ }
199
+ else if ((type === 'custom_select' || type === 'custom_search_select') &&
200
+ data &&
201
+ (data === null || data === void 0 ? void 0 : data.length) > 0) {
202
+ handleDropData();
203
+ setDropOpen(true);
204
+ }
205
+ }
206
+ };
207
+ var handleClickOutside = function (event) {
208
+ if (dropdownref.current &&
209
+ !dropdownref.current.contains(event.target)) {
210
+ setDropOpen(false);
211
+ }
212
+ };
213
+ var checkIsEmptyField = function () {
214
+ var _a;
215
+ if (inputValue === undefined)
216
+ return true;
217
+ else
218
+ return ((_a = inputValue === null || inputValue === void 0 ? void 0 : inputValue.toString().length) !== null && _a !== void 0 ? _a : 0) <= 0 ? true : false;
219
+ };
220
+ var loadStaticData = function () { return __awaiter(void 0, void 0, void 0, function () {
221
+ var fetchedSuggestions, error_2;
222
+ return __generator(this, function (_a) {
223
+ switch (_a.label) {
224
+ case 0:
225
+ if (!!data) return [3 /*break*/, 4];
226
+ data = [];
227
+ if (!getData) return [3 /*break*/, 4];
228
+ _a.label = 1;
229
+ case 1:
230
+ _a.trys.push([1, 3, , 4]);
231
+ setIsLoading(true);
232
+ return [4 /*yield*/, (getData === null || getData === void 0 ? void 0 : getData('*'))];
233
+ case 2:
234
+ fetchedSuggestions = _a.sent();
235
+ setSuggestions(fetchedSuggestions);
236
+ setIsLoading(false);
237
+ return [3 /*break*/, 4];
238
+ case 3:
239
+ error_2 = _a.sent();
240
+ setIsLoading(false);
241
+ return [3 /*break*/, 4];
242
+ case 4: return [2 /*return*/];
243
+ }
244
+ });
245
+ }); };
246
+ (0, react_1.useEffect)(function () {
247
+ document.addEventListener('click', handleClickOutside);
248
+ return function () {
249
+ document.removeEventListener('click', handleClickOutside);
250
+ };
251
+ }, []);
252
+ (0, react_1.useEffect)(function () {
253
+ if (autoFocus) {
254
+ onLabelClick();
255
+ }
256
+ }, [autoFocus]);
257
+ var onInputFocus = function () {
258
+ if (!isDisabled) {
259
+ if (autoFilter && inputValue === '') {
260
+ handleValChange('*');
261
+ }
262
+ else if ((type === 'custom_select' || type === 'custom_search_select') &&
263
+ data &&
264
+ (data === null || data === void 0 ? void 0 : data.length) > 0) {
265
+ handleDropData();
266
+ //if (insideOpen) setDropOpen(true) // commeted this code bcoz added onclick function inside
267
+ }
268
+ }
269
+ };
270
+ (0, react_1.useEffect)(function () {
271
+ setIsDisabled(disabled);
272
+ }, [disabled]);
273
+ var handleSuggestionClick = function (suggestion, index) {
274
+ onChange(__assign(__assign(__assign({}, suggestion), { id: suggestion === null || suggestion === void 0 ? void 0 : suggestion.id, name: suggestion.name }), ((suggestion === null || suggestion === void 0 ? void 0 : suggestion.label) ? { label: suggestion === null || suggestion === void 0 ? void 0 : suggestion.label } : {})));
275
+ if (type !== 'custom_select')
276
+ setInputValue(suggestion.name);
277
+ setDropOpen(false);
278
+ setSelectedIndex(index);
279
+ };
280
+ var handleOpen = function (e) {
281
+ if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0)
282
+ handleDropData();
283
+ if (!isLoading) {
284
+ setDropOpen(!dropOpen);
285
+ if (type !== 'custom_select')
286
+ setInputValue('');
287
+ }
288
+ };
289
+ var handleOpenDropdown = function (e) {
290
+ if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0) {
291
+ if (autoDropdown && (inputValue === '' || inputValue.trim() === '')) {
292
+ loadStaticData();
293
+ }
294
+ else {
295
+ handleDropData();
296
+ }
297
+ }
298
+ ;
299
+ if (!isLoading) {
300
+ setDropOpen(!dropOpen);
301
+ }
302
+ };
303
+ var handleScroll = function () {
304
+ setDropOpen(false);
305
+ };
306
+ (0, react_1.useEffect)(function () {
307
+ if (!insideOpen) {
308
+ setSelectedIndex(0);
309
+ window.addEventListener('scroll', handleScroll);
310
+ var mainElement = document.querySelector('main');
311
+ mainElement === null || mainElement === void 0 ? void 0 : mainElement.addEventListener('scroll', handleScroll);
312
+ var gridElements = document.querySelectorAll('.k-grid-content, .overflow-auto, .overflow-y-auto, .overflow-x-auto');
313
+ gridElements.forEach(function (gridElement) {
314
+ gridElement.addEventListener('scroll', handleScroll);
315
+ });
316
+ window.addEventListener('resize', getDropPosition);
317
+ getDropPosition();
318
+ return function () {
319
+ window.removeEventListener('scroll', handleScroll);
320
+ var mainElement = document.querySelector('main');
321
+ mainElement === null || mainElement === void 0 ? void 0 : mainElement.removeEventListener('scroll', handleScroll);
322
+ window.addEventListener('resize', getDropPosition);
323
+ var gridElements = document.querySelectorAll('.k-grid-content');
324
+ gridElements.forEach(function (gridElement) {
325
+ gridElement.removeEventListener('scroll', handleScroll);
326
+ });
327
+ };
328
+ }
329
+ }, [dropOpen]);
330
+ var handleClear = function () {
331
+ setDropOpen(false);
332
+ setInputValue('');
333
+ onChange({ id: undefined, name: '', from: 3 });
334
+ onLabelClick();
335
+ };
336
+ (0, react_1.useEffect)(function () {
337
+ var _a;
338
+ setInputValue((_a = value === null || value === void 0 ? void 0 : value.name) !== null && _a !== void 0 ? _a : '');
339
+ }, [value === null || value === void 0 ? void 0 : value.name]);
340
+ (0, react_1.useEffect)(function () {
341
+ setSuggestions(data);
342
+ }, [data]);
343
+ var getErrors = function (err) {
344
+ var _a, _b, _c, _d;
345
+ var errMsg = '';
346
+ if (err.message) {
347
+ errMsg = err === null || err === void 0 ? void 0 : err.message;
348
+ }
349
+ else if ((_a = err === null || err === void 0 ? void 0 : err.id) === null || _a === void 0 ? void 0 : _a.message) {
350
+ errMsg = (_b = err === null || err === void 0 ? void 0 : err.id) === null || _b === void 0 ? void 0 : _b.message;
351
+ }
352
+ else if ((_c = err === null || err === void 0 ? void 0 : err.name) === null || _c === void 0 ? void 0 : _c.message) {
353
+ errMsg = (_d = err === null || err === void 0 ? void 0 : err.name) === null || _d === void 0 ? void 0 : _d.message;
354
+ }
355
+ return errMsg;
356
+ };
357
+ var generateClassName = function (type) {
358
+ var className = propsClassName;
359
+ switch (type) {
360
+ case 'input':
361
+ className += "block text-common text-input-text font-normal px-3.5 w-full text-sm text-gray-900 bg-transparent border appearance-none peer h-10 rounded-[4px] disabled:text-input-disabled bg-white disabled:bg-disabled ".concat(label && isModern
362
+ ? 'placeholder-transparent'
363
+ : 'focus:placeholder-grey-secondary placeholder-input-label', " focus:placeholder-grey-secondary");
364
+ if (errors && errors[name]) {
365
+ className +=
366
+ ' border-[#FDA29B] focus:border-error-[#FDA29B] focus:ring-[#FDA29B] focus:ring-3 focus:outline-[#FDA29B] input-outline';
367
+ }
368
+ else {
369
+ className +=
370
+ ' text-grey-dark border-input-light focus:border-blue-navy focus:outline-none focus:ring-0';
371
+ }
372
+ break;
373
+ case 'label':
374
+ className += " flex modern-input-label-truncate peer-focus:modern-input-peer-focus-label-size \n ".concat(isDisabled
375
+ ? 'cursor-pointer'
376
+ : 'cursor-text peer-focus:cursor-pointer', " ").concat(isDisabled && !checkIsEmptyField()
377
+ ? 'disabled-input-label-bg'
378
+ : !isDisabled || !checkIsEmptyField()
379
+ ? 'active-input-label-bg'
380
+ : '', " absolute duration-300 transform -translate-y-4 top-2 z-1 origin-[0] px-0 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:-translate-y-4 start-[14px] rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto ").concat(isDisabled
381
+ ? 'cursor-pointer'
382
+ : 'cursor-text peer-focus:cursor-pointer', "\n ").concat(checkIsEmptyField()
383
+ ? 'modern-input-label-size'
384
+ : 'modern-input-peer-focus-label-size');
385
+ if (errors && errors[name]) {
386
+ className += ' text-error-light ';
387
+ }
388
+ else {
389
+ className += ' text-grey-dark peer-focus:text-blue-navy';
390
+ }
391
+ break;
392
+ case 'message':
393
+ className = ' text-error-icon ';
394
+ break;
395
+ case 'adorement':
396
+ className += ' absolute right-0 adorement gap-1 flex items-center ';
397
+ break;
398
+ default:
399
+ break;
400
+ }
401
+ return className;
402
+ };
403
+ var handleClose = function () {
404
+ setTimeout(function () {
405
+ setDropOpen(false);
406
+ }, 500);
407
+ };
408
+ var handleClearInputValue = function () {
409
+ // setInputValue(value?.name ?? '')
410
+ };
411
+ var getInnerWidth = function () {
412
+ var innerwidth = adorementRef.current
413
+ ? adorementRef.current.offsetWidth
414
+ : 0;
415
+ return innerwidth;
416
+ };
417
+ // const getPosition = () => {
418
+ // return 'bottom'
419
+ // }
420
+ var filteredData = inputValue !== '*' &&
421
+ inputValue !== '' &&
422
+ type !== 'custom_select' &&
423
+ !noLocalFilter
424
+ ? suggestions === null || suggestions === void 0 ? void 0 : suggestions.filter(function (item) {
425
+ var _a, _b, _c, _d;
426
+ return checkIncludes(item.name, inputValue, (_a = item.param1) !== null && _a !== void 0 ? _a : '', (_b = item.param2) !== null && _b !== void 0 ? _b : '', (_c = item.param3) !== null && _c !== void 0 ? _c : '', (_d = item.param4) !== null && _d !== void 0 ? _d : '');
427
+ })
428
+ : suggestions;
429
+ var handleError = function (data) {
430
+ var _a;
431
+ if (getErrors(data[name]) === 'required' ||
432
+ getErrors(data[name]) === 'Required') {
433
+ return "".concat(label !== null && label !== void 0 ? label : labelTitle, " is ").concat(getErrors(data[name]));
434
+ }
435
+ else {
436
+ return (_a = getErrors(data[name])) !== null && _a !== void 0 ? _a : '';
437
+ }
438
+ };
439
+ var getDropPosition = function () {
440
+ if (!insideOpen && (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)) {
441
+ var dropdownHeight = 200; // Assume the height of the dropdown is 200px, adjust as needed
442
+ var inputRect = inputRef.current.getBoundingClientRect();
443
+ var spaceBelow = window.innerHeight - (inputRect.bottom + window.scrollY);
444
+ var spaceAbove = inputRect.top + window.scrollY;
445
+ var top_1;
446
+ var bottom = void 0;
447
+ if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
448
+ bottom = spaceBelow + 43;
449
+ }
450
+ else {
451
+ top_1 = inputRect.top + window.scrollY + inputRect.height + 2;
452
+ }
453
+ setDropPosition({
454
+ left: inputRect.left + window.scrollX,
455
+ top: top_1,
456
+ bottom: bottom,
457
+ width: inputRect.width,
458
+ });
459
+ }
460
+ return undefined;
461
+ };
462
+ var _1 = (0, react_1.useState)(false), showNoResults = _1[0], setShowNoResults = _1[1];
463
+ (0, react_1.useEffect)(function () {
464
+ if (inputValue &&
465
+ (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) === 0 &&
466
+ !isLoading &&
467
+ timerRef.current === 1) {
468
+ var timer_1 = setTimeout(function () {
469
+ setShowNoResults(true);
470
+ }, 500); // Delay in milliseconds
471
+ return function () { return clearTimeout(timer_1); };
472
+ }
473
+ else {
474
+ setShowNoResults(false);
475
+ }
476
+ // Handle keyboard navigation
477
+ var handleKeyDown = function (e) {
478
+ var _a, _b;
479
+ if (!dropOpen)
480
+ return;
481
+ var atBottom = selectedIndex === filteredData.length - 1;
482
+ var atTop = selectedIndex === 0;
483
+ switch (e.key) {
484
+ case 'ArrowDown':
485
+ e.preventDefault();
486
+ if (itemRefs.current && scrollContainerRef.current) {
487
+ if (!atBottom) {
488
+ scrollContainerRef.current.scrollTop +=
489
+ ((_a = itemRefs.current[selectedIndex]) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 50;
490
+ }
491
+ else {
492
+ scrollContainerRef.current.scrollTop = 0;
493
+ }
494
+ }
495
+ setSelectedIndex(function (prev) { return (prev + 1) % (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length); });
496
+ break;
497
+ case 'ArrowUp':
498
+ e.preventDefault();
499
+ if (itemRefs.current && scrollContainerRef.current) {
500
+ if (!atTop) {
501
+ scrollContainerRef.current.scrollTop -=
502
+ ((_b = itemRefs.current[selectedIndex]) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 50;
503
+ }
504
+ else {
505
+ scrollContainerRef.current.scrollTop = 0;
506
+ }
507
+ }
508
+ setSelectedIndex(function (prev) { return (prev - 1 + (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length)) % (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length); });
509
+ break;
510
+ case 'Enter':
511
+ e.preventDefault();
512
+ handleSuggestionClick(filteredData[selectedIndex], selectedIndex);
513
+ break;
514
+ case 'Escape':
515
+ e.preventDefault();
516
+ setDropOpen(false);
517
+ break;
518
+ default:
519
+ break;
520
+ }
521
+ };
522
+ if ((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && !isLoading) {
523
+ window.addEventListener('keydown', handleKeyDown);
524
+ return function () {
525
+ window.removeEventListener('keydown', handleKeyDown);
526
+ };
527
+ }
528
+ }, [
529
+ inputValue,
530
+ filteredData,
531
+ isLoading,
532
+ timerRef.current,
533
+ selectedIndex,
534
+ dropOpen,
535
+ ]);
536
+ var setDropDown = function () {
537
+ return (((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 || showNoResults) && ((0, jsx_runtime_1.jsx)("ul", __assign({ className: "autocomplete-suggections absolute h-auto max-h-40 overflow-auto w-full bg-white shadow-gray-300 shadow-md border border-grey-light py-1.5 z-50 mt-9", style: dropPosition, ref: scrollContainerRef }, { children: (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredData.map(function (suggestion, index) { return ((0, jsx_runtime_1.jsxs)("li", __assign({ className: "".concat((value === null || value === void 0 ? void 0 : value.id) === (suggestion === null || suggestion === void 0 ? void 0 : suggestion.id)
538
+ ? 'bg-blue-navy text-white'
539
+ : "".concat(index === selectedIndex ? 'is-selected' : '', " hover:bg-table-hover"), " cursor-pointer p-1 text-xxs ps-3.5 pl-[10px] qbs-autocomplete-suggections-items"), "data-testid": suggestion.name, onClick: function () { return handleSuggestionClick(suggestion, index); }, tabIndex: index, ref: function (el) { return (itemRefs.current[index] = el); } }, { children: [(0, jsx_runtime_1.jsx)("span", { children: (suggestion === null || suggestion === void 0 ? void 0 : suggestion.label) ? suggestion === null || suggestion === void 0 ? void 0 : suggestion.label : suggestion.name }), shortCode && (suggestion === null || suggestion === void 0 ? void 0 : suggestion[shortCode]) && ((0, jsx_runtime_1.jsx)("span", __assign({ className: "short-code" }, { children: suggestion === null || suggestion === void 0 ? void 0 : suggestion[shortCode] })))] }), suggestion === null || suggestion === void 0 ? void 0 : suggestion.id)); }) })) : (showNoResults &&
540
+ !isLoading &&
541
+ timerRef.current === 1 && ((0, jsx_runtime_1.jsx)("li", __assign({ className: "$ cursor-pointer p-1 rounded-sm text-xxs", onClick: handleClose }, { children: "No Results Found" })))) }))));
542
+ };
543
+ var getBorderRight = function () {
544
+ if (fromPrefix) {
545
+ if ((hasParentError && Boolean(errors && errors[name])) ||
546
+ hasParentError) {
547
+ return 0;
548
+ }
549
+ else if (errors && errors[name]) {
550
+ return undefined;
551
+ }
552
+ }
553
+ return 0;
554
+ };
555
+ (0, react_1.useEffect)(function () {
556
+ (0, getPosition_1.applyPositionClass)(dropdownref, isHovered);
557
+ setDropOpen(false);
558
+ }, [isHovered]);
559
+ (0, react_1.useEffect)(function () {
560
+ var shouldShowClose = (value === null || value === void 0 ? void 0 : value.name) &&
561
+ ((value === null || value === void 0 ? void 0 : value.id) || String(value === null || value === void 0 ? void 0 : value.id) === '0') &&
562
+ !disabled &&
563
+ !readOnly &&
564
+ isClose;
565
+ if (showClose !== shouldShowClose) {
566
+ setShowClose(shouldShowClose);
567
+ }
568
+ }, [value, disabled, readOnly]);
569
+ (0, react_1.useEffect)(function () {
570
+ // Check if input content overflows
571
+ var checkOverflow = function () {
572
+ if (inputRef.current) {
573
+ var _a = inputRef.current, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth, value_1 = _a.value;
574
+ // Check for overflow only when there's content
575
+ if (value_1.trim() !== '') {
576
+ setShowTooltip(scrollWidth > clientWidth + 2);
577
+ }
578
+ else {
579
+ setShowTooltip(false); // No tooltip for empty input
580
+ }
581
+ }
582
+ };
583
+ if (inputRef.current) {
584
+ inputRef.current.addEventListener('input', checkOverflow);
585
+ checkOverflow(); // Initial check
586
+ }
587
+ return function () {
588
+ if (inputRef.current) {
589
+ inputRef.current.removeEventListener('input', checkOverflow);
590
+ }
591
+ };
592
+ }, [inputValue]);
593
+ var handleMouseEnter = function () {
594
+ setTooltipIsHovered(true);
595
+ };
596
+ var handleMouseLeave = function () {
597
+ setTooltipIsHovered(false);
598
+ };
599
+ return ((0, jsx_runtime_1.jsxs)("div", __assign({ id: id ? "autocomplete-container-".concat(id) : "autocomplete-container-".concat(name), className: " flex-grow ".concat(fullWidth ? 'w-full' : 'w-auto'), ref: dropdownref }, { children: [label && !isModern && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "mb-3" }, { children: (0, jsx_runtime_1.jsxs)("label", __assign({ className: "text-xs font-medium" }, { children: [label, required ? (0, jsx_runtime_1.jsx)("span", __assign({ className: "text-error" }, { children: " *" })) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] })) }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "tooltip-container" }, { children: [isHovered && errors && errors[name] && ((0, jsx_runtime_1.jsxs)("span", __assign({ className: "tooltip" }, { children: [handleError(errors), " "] }))), tooltipIsHovered && showToolTip && !dropOpen && inputValue && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "tooltip-info" }, { children: inputValue }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "flex relative ".concat(fullWidth ? 'w-full' : 'w-auto'), style: { width: width } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "relative w-full", onMouseEnter: function () { return handleMouseEnter(); }, onMouseLeave: function () { return handleMouseLeave(); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : type === 'custom_select', value: inputValue ? inputValue : '', onBlur: handleClearInputValue, autoComplete: "off", disabled: disabled, ref: inputRef, id: id ? "custom-autocomplete-".concat(id) : "custom-autocomplete-".concat(name), "data-testid": "custom-autocomplete", "aria-describedby": id, style: __assign({ paddingRight: getInnerWidth() }, (fromPrefix
600
+ ? {
601
+ borderRight: getBorderRight(),
602
+ borderTopRightRadius: 0,
603
+ borderBottomRightRadius: 0,
604
+ }
605
+ : {})), className: " ".concat(generateClassName('input')), onChange: handleChange, placeholder: type === 'auto_complete'
606
+ ? placeholder && isCustomPlaceholder
607
+ ? placeholder
608
+ : 'Type to search'
609
+ : placeholder !== null && placeholder !== void 0 ? placeholder : '--Select--', onFocus: onInputFocus, onClick: function (e) {
610
+ if (type === 'custom_select') {
611
+ setDropOpen(!dropOpen);
612
+ handleOpen(e);
613
+ }
614
+ else {
615
+ setDropOpen(!dropOpen);
616
+ }
617
+ } }), isModern && ((0, jsx_runtime_1.jsxs)("label", __assign({ htmlFor: id, onClick: function () { return onLabelClick(); }, className: generateClassName('label') }, { children: [label ? (0, jsx_runtime_1.jsx)("span", __assign({ className: "truncate" }, { children: label })) : '', required ? (0, jsx_runtime_1.jsx)("span", __assign({ className: "text-error" }, { children: " *" })) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] })))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "flex items-center justify-center " }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ ref: adorementRef, className: "".concat(generateClassName('adorement'), " qbs-autocomplete-adorement mr-[1px] ").concat(isLoading ? 'bg-white' : '') }, { children: [showClose && ((0, jsx_runtime_1.jsx)("button", __assign({ onClick: function () { return handleClear(); }, className: " text-table-bodyColor text-[#667085]", "aria-label": "close", type: "button", id: "autocomplete-close-icon" }, { children: (0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "close", type: "large-m" }) }))), isLoading && (0, jsx_runtime_1.jsx)(Spinner_1.default, {}), (type !== 'auto_complete' || autoDropdown) && !disabled && !readOnly && ((0, jsx_runtime_1.jsx)("button", __assign({ disabled: disabled !== null && disabled !== void 0 ? disabled : readOnly, onClick: function (e) { return handleOpenDropdown(e); }, onBlur: handleClose, className: " text-[#667085] focus-visible:outline-slate-100", "data-testid": "drop-arrow", type: "button", id: "autocomplete-drop-icon", ref: dropBtnRef }, { children: !dropOpen ? ((0, jsx_runtime_1.jsx)(icons_1.DropArrow, { uniqueDropArrowId: "drop-arrow-icon" })) : ((0, jsx_runtime_1.jsx)(icons_1.DropArrow, { className: "rotate-180", uniqueDropArrowId: "drop-arrow-icon" })) }))), errors && errors[name] && ((0, jsx_runtime_1.jsx)("div", __assign({ className: " text-error-label relative cursor-pointer ".concat(generateClassName('message')), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "alert", type: "medium" }) })))] })) })), dropOpen && (!isLoading || (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: insideOpen ? setDropDown() : (0, jsx_runtime_1.jsx)(portal_1.default, { children: setDropDown() }) }))] }))] }))] })));
618
+ };
619
+ exports.default = ModernAutoCompleteDropdown;
620
+ //# sourceMappingURL=ReactAutoCompleteDropdown.js.map