react-core-ts 2.1.30 → 2.1.32
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/README.md +59 -0
- package/dist/ReactAutoCompleteTableView.d.ts +23 -0
- package/dist/ReactAutoCompleteTableView.js +184 -71
- package/dist/ReactAutoCompleteTableView.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/styles/components/autocomplete.css +69 -0
- package/dist/styles/components/tooltip.css +4 -6
- package/dist/styles/styles/components/autocomplete.css +69 -0
- package/dist/styles/styles/components/tooltip.css +4 -6
- package/docs/App.tsx +61 -0
- package/package.json +1 -1
- package/src/ReactAutoCompleteTableView.tsx +322 -94
- package/src/index.tsx +5 -0
- package/src/styles/components/autocomplete.css +69 -0
- package/src/styles/components/tooltip.css +4 -6
package/README.md
CHANGED
|
@@ -8,6 +8,7 @@ The `AutoComplete` component offers a user-friendly input experience by presenti
|
|
|
8
8
|
- [Table of Contents](#table-of-contents)
|
|
9
9
|
- [Features](#features)
|
|
10
10
|
- [Installation](#installation)
|
|
11
|
+
- [ModernAutoCompleteTableView](#modernautocompletetableview)
|
|
11
12
|
- [Props](#props)
|
|
12
13
|
- [Contribution](#contribution)
|
|
13
14
|
|
|
@@ -110,6 +111,64 @@ function ExampleSelectedListWithTabComponent() {
|
|
|
110
111
|
|
|
111
112
|
|
|
112
113
|
```
|
|
114
|
+
|
|
115
|
+
## ModernAutoCompleteTableView
|
|
116
|
+
|
|
117
|
+
`ModernAutoCompleteTableView` is exported from `react-core-ts` for table-style dropdown rows (multiple columns or a **split-detail** layout). Import it like other components:
|
|
118
|
+
|
|
119
|
+
```jsx
|
|
120
|
+
import {
|
|
121
|
+
ModernAutoCompleteTableView,
|
|
122
|
+
type DropdownThemeConfig,
|
|
123
|
+
type DropdownThemeId,
|
|
124
|
+
type SplitDetailThemeConfig,
|
|
125
|
+
} from 'react-core-ts';
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Split-detail dropdown theme
|
|
129
|
+
|
|
130
|
+
Use `dropdownTheme="splitDetail"` with `dropdownThemeConfig.splitDetail` to show a primary title (`name` / `label`), an optional subtitle line, and an optional right-hand badge (e.g. account number).
|
|
131
|
+
|
|
132
|
+
| Config field | Description |
|
|
133
|
+
|--------------|-------------|
|
|
134
|
+
| `subtitleKey` | Suggestion object key for the gray subtitle under the title (e.g. address). |
|
|
135
|
+
| `badgeKey` | Suggestion object key for the pill on the right. |
|
|
136
|
+
| `badgePrefix` | Optional text before the badge value (e.g. `"Acc. No.: "`). |
|
|
137
|
+
|
|
138
|
+
With **split detail**, local filtering matches the query against **title** (`name` / existing param rules), **`label`**, **`subtitleKey`**, and **`badgeKey`** (case-insensitive substring), not only the main title field.
|
|
139
|
+
|
|
140
|
+
```jsx
|
|
141
|
+
<ModernAutoCompleteTableView
|
|
142
|
+
name="bank"
|
|
143
|
+
type="custom_search_select"
|
|
144
|
+
data={banks}
|
|
145
|
+
tableView
|
|
146
|
+
dropdownTheme="splitDetail"
|
|
147
|
+
dropdownThemeConfig={{
|
|
148
|
+
splitDetail: {
|
|
149
|
+
subtitleKey: 'address',
|
|
150
|
+
badgeKey: 'accountNo',
|
|
151
|
+
badgePrefix: 'Acc. No.: ',
|
|
152
|
+
},
|
|
153
|
+
}}
|
|
154
|
+
onChange={handleChange}
|
|
155
|
+
/>
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
### Search on button only
|
|
159
|
+
|
|
160
|
+
Set **`searchOnButtonOnly={true}`** (default `false`) so typing only updates the input; suggestions load when the user clicks the **search** icon or presses **Enter**. Intended for `auto_complete` and `custom_search_select`. While loading, the spinner appears in the search control. The dropdown chevron only toggles visibility when suggestions already exist.
|
|
161
|
+
|
|
162
|
+
```jsx
|
|
163
|
+
<ModernAutoCompleteTableView
|
|
164
|
+
name="search"
|
|
165
|
+
type="auto_complete"
|
|
166
|
+
getData={fetchSuggestions}
|
|
167
|
+
searchOnButtonOnly
|
|
168
|
+
onChange={handleChange}
|
|
169
|
+
/>
|
|
170
|
+
```
|
|
171
|
+
|
|
113
172
|
## Props
|
|
114
173
|
|
|
115
174
|
You can pass the following props to the `AutoComplete` component:
|
|
@@ -10,6 +10,22 @@ type valueProps = {
|
|
|
10
10
|
param4?: string | number | null;
|
|
11
11
|
from?: number;
|
|
12
12
|
};
|
|
13
|
+
/** Add new theme ids here when introducing layouts */
|
|
14
|
+
export type DropdownThemeId = 'default' | 'splitDetail';
|
|
15
|
+
/** Options for `dropdownTheme: 'splitDetail'` (title + subtitle + optional badge pill) */
|
|
16
|
+
export type SplitDetailThemeConfig = {
|
|
17
|
+
subtitleKey?: string;
|
|
18
|
+
badgeKey?: string;
|
|
19
|
+
/** Shown before badge value, e.g. "Acc. No.: " */
|
|
20
|
+
badgePrefix?: string;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* Per-theme configuration. Extend this type with new keys when adding themes
|
|
24
|
+
* (e.g. `compact?: CompactThemeConfig`).
|
|
25
|
+
*/
|
|
26
|
+
export type DropdownThemeConfig = {
|
|
27
|
+
splitDetail?: SplitDetailThemeConfig;
|
|
28
|
+
};
|
|
13
29
|
interface AutoSuggestionInputProps {
|
|
14
30
|
id?: string;
|
|
15
31
|
label?: string;
|
|
@@ -53,6 +69,13 @@ interface AutoSuggestionInputProps {
|
|
|
53
69
|
key: string;
|
|
54
70
|
label: string;
|
|
55
71
|
}>;
|
|
72
|
+
dropdownTheme?: DropdownThemeId;
|
|
73
|
+
/** Theme-specific field mapping and options; see `DropdownThemeConfig` */
|
|
74
|
+
dropdownThemeConfig?: DropdownThemeConfig;
|
|
75
|
+
/**
|
|
76
|
+
* When true, typing updates the input only; fetching/opening the list runs from the search control (and Enter), not while typing.
|
|
77
|
+
*/
|
|
78
|
+
searchOnButtonOnly?: boolean;
|
|
56
79
|
}
|
|
57
80
|
declare const ReactAutoCompleteTableView: React.FC<AutoSuggestionInputProps>;
|
|
58
81
|
export default ReactAutoCompleteTableView;
|
|
@@ -68,19 +68,24 @@ var debounce_1 = require("./utilities/debounce");
|
|
|
68
68
|
var getPosition_1 = require("./utilities/getPosition");
|
|
69
69
|
var icons_1 = require("./utilities/icons");
|
|
70
70
|
var ReactAutoCompleteTableView = function (_a) {
|
|
71
|
-
var _b
|
|
72
|
-
var label = _a.label, onChange = _a.onChange, getData = _a.getData, data = _a.data, errors = _a.errors,
|
|
73
|
-
var
|
|
74
|
-
var
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
var
|
|
79
|
-
var
|
|
80
|
-
var
|
|
81
|
-
var
|
|
82
|
-
var
|
|
83
|
-
var
|
|
71
|
+
var _b;
|
|
72
|
+
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, fullWidth = _a.fullWidth, placeholder = _a.placeholder, id = _a.id, propsClassName = _a.className, _d = _a.type, type = _d === void 0 ? 'custom_select' : _d, readOnly = _a.readOnly, _e = _a.disabled, disabled = _e === void 0 ? false : _e, value = _a.value, _f = _a.autoFilter, autoFilter = _f === void 0 ? false : _f, _g = _a.autoDropdown, autoDropdown = _g === void 0 ? true : _g, _h = _a.insideOpen, insideOpen = _h === void 0 ? false : _h, _j = _a.isClose, isClose = _j === void 0 ? true : _j, _k = _a.noLocalFilter, noLocalFilter = _k === void 0 ? false : _k, _l = _a.isStaticList, isStaticList = _l === void 0 ? false : _l, _m = _a.isCustomPlaceholder, isCustomPlaceholder = _m === void 0 ? false : _m, checkParams = _a.checkParams, width = _a.width, hasParentError = _a.hasParentError, fromPrefix = _a.fromPrefix, labelTitle = _a.labelTitle, _o = _a.isModern, isModern = _o === void 0 ? true : _o, _p = _a.size, size = _p === void 0 ? "md" : _p, _q = _a.dropdownMinWidth, dropdownMinWidth = _q === void 0 ? 200 : _q, _r = _a.tableView, tableView = _r === void 0 ? false : _r, _s = _a.additionalColumns, additionalColumns = _s === void 0 ? [] : _s, _t = _a.columnHeader, columnHeader = _t === void 0 ? [] : _t, _u = _a.dropdownTheme, dropdownTheme = _u === void 0 ? 'default' : _u, dropdownThemeConfig = _a.dropdownThemeConfig, _v = _a.searchOnButtonOnly, searchOnButtonOnly = _v === void 0 ? false : _v;
|
|
73
|
+
var splitDetailOptions = dropdownThemeConfig === null || dropdownThemeConfig === void 0 ? void 0 : dropdownThemeConfig.splitDetail;
|
|
74
|
+
var showSearchOnButtonChrome = searchOnButtonOnly &&
|
|
75
|
+
(type === 'auto_complete' || type === 'custom_search_select') &&
|
|
76
|
+
!disabled &&
|
|
77
|
+
!readOnly;
|
|
78
|
+
var _w = (0, react_1.useState)((_b = value === null || value === void 0 ? void 0 : value.name) !== null && _b !== void 0 ? _b : ""), inputValue = _w[0], setInputValue = _w[1];
|
|
79
|
+
var _x = (0, react_1.useState)(false), isHovered = _x[0], setIsHovered = _x[1];
|
|
80
|
+
var _y = (0, react_1.useState)(false), isLoading = _y[0], setIsLoading = _y[1];
|
|
81
|
+
var _z = (0, react_1.useState)(false), dropOpen = _z[0], setDropOpen = _z[1];
|
|
82
|
+
var _0 = (0, react_1.useState)(disabled), isDisabled = _0[0], setIsDisabled = _0[1];
|
|
83
|
+
var _1 = (0, react_1.useState)(false), showClose = _1[0], setShowClose = _1[1];
|
|
84
|
+
var _2 = (0, react_1.useState)(false), showToolTip = _2[0], setShowTooltip = _2[1];
|
|
85
|
+
var _3 = (0, react_1.useState)(false), tooltipIsHovered = _3[0], setTooltipIsHovered = _3[1];
|
|
86
|
+
var _4 = (0, react_1.useState)(null), tooltipPosition = _4[0], setTooltipPosition = _4[1];
|
|
87
|
+
var _5 = (0, react_1.useState)(null), errorTooltipPosition = _5[0], setErrorTooltipPosition = _5[1];
|
|
88
|
+
var _6 = (0, react_1.useState)([]), suggestions = _6[0], setSuggestions = _6[1];
|
|
84
89
|
var inputRef = (0, react_1.useRef)(null);
|
|
85
90
|
var adorementRef = (0, react_1.useRef)(null);
|
|
86
91
|
var dropdownref = (0, react_1.useRef)(null);
|
|
@@ -88,17 +93,17 @@ var ReactAutoCompleteTableView = function (_a) {
|
|
|
88
93
|
var dropBtnRef = (0, react_1.useRef)(null);
|
|
89
94
|
var errorIconRef = (0, react_1.useRef)(null);
|
|
90
95
|
var timerRef = (0, react_1.useRef)(0); // To fix the no results found issue on second type
|
|
91
|
-
var
|
|
96
|
+
var _7 = (0, react_1.useState)(0), selectedIndex = _7[0], setSelectedIndex = _7[1];
|
|
92
97
|
var itemRefs = (0, react_1.useRef)([]);
|
|
93
98
|
var scrollContainerRef = (0, react_1.useRef)(null);
|
|
94
|
-
var
|
|
95
|
-
var
|
|
99
|
+
var _8 = (0, react_1.useState)(false), refetchData = _8[0], setRefetchData = _8[1];
|
|
100
|
+
var _9 = (0, react_1.useState)({
|
|
96
101
|
top: 0,
|
|
97
102
|
left: 0,
|
|
98
103
|
bottom: 0,
|
|
99
104
|
right: 0,
|
|
100
105
|
maxHeight: '60vh',
|
|
101
|
-
}), dropPosition =
|
|
106
|
+
}), dropPosition = _9[0], setDropPosition = _9[1];
|
|
102
107
|
var checkIncludes = function (mainString, subString, param1, param2, param3, param4) {
|
|
103
108
|
var checkIncludesIfExists = function (mainString, substring) {
|
|
104
109
|
return substring &&
|
|
@@ -135,12 +140,54 @@ var ReactAutoCompleteTableView = function (_a) {
|
|
|
135
140
|
var value = event.target.value;
|
|
136
141
|
timerRef.current = 0;
|
|
137
142
|
setInputValue(value);
|
|
138
|
-
|
|
143
|
+
if (!searchOnButtonOnly) {
|
|
144
|
+
handleValChange(value);
|
|
145
|
+
}
|
|
139
146
|
if (!value) {
|
|
140
147
|
setInputValue('');
|
|
141
148
|
onChange({ id: undefined, name: '', from: 2 });
|
|
142
149
|
}
|
|
143
150
|
};
|
|
151
|
+
var runSearchFromInput = function (value) {
|
|
152
|
+
setDropOpen(true);
|
|
153
|
+
onChange({ id: undefined, name: '', from: 1 });
|
|
154
|
+
if (value.trim() === '' && type === 'auto_complete') {
|
|
155
|
+
setSuggestions([]);
|
|
156
|
+
if (autoFilter) {
|
|
157
|
+
handleDropData('*');
|
|
158
|
+
}
|
|
159
|
+
else {
|
|
160
|
+
setDropOpen(false);
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
else {
|
|
164
|
+
handleDropData(value);
|
|
165
|
+
}
|
|
166
|
+
setTimeout(function () {
|
|
167
|
+
timerRef.current = 1;
|
|
168
|
+
}, 200);
|
|
169
|
+
};
|
|
170
|
+
var handleSearchButtonClick = function (e) {
|
|
171
|
+
var _a, _b, _c;
|
|
172
|
+
e.preventDefault();
|
|
173
|
+
e.stopPropagation();
|
|
174
|
+
if (disabled || readOnly)
|
|
175
|
+
return;
|
|
176
|
+
timerRef.current = 0;
|
|
177
|
+
var q = (_c = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : inputValue) !== null && _c !== void 0 ? _c : '';
|
|
178
|
+
runSearchFromInput(q);
|
|
179
|
+
};
|
|
180
|
+
var handleSearchInputKeyDown = function (e) {
|
|
181
|
+
var _a, _b, _c;
|
|
182
|
+
if (!searchOnButtonOnly || disabled || readOnly)
|
|
183
|
+
return;
|
|
184
|
+
if (e.key === 'Enter') {
|
|
185
|
+
e.preventDefault();
|
|
186
|
+
timerRef.current = 0;
|
|
187
|
+
var q = (_c = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : inputValue) !== null && _c !== void 0 ? _c : '';
|
|
188
|
+
runSearchFromInput(q);
|
|
189
|
+
}
|
|
190
|
+
};
|
|
144
191
|
var handleValChange = (0, react_1.useCallback)((0, debounce_1.debounce)(function (value) {
|
|
145
192
|
setDropOpen(true);
|
|
146
193
|
onChange({ id: undefined, name: '', from: 1 });
|
|
@@ -219,6 +266,9 @@ var ReactAutoCompleteTableView = function (_a) {
|
|
|
219
266
|
var _a;
|
|
220
267
|
if (!isDisabled) {
|
|
221
268
|
(_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
269
|
+
if (searchOnButtonOnly) {
|
|
270
|
+
return;
|
|
271
|
+
}
|
|
222
272
|
if (autoFilter && inputValue === '') {
|
|
223
273
|
handleValChange('*');
|
|
224
274
|
}
|
|
@@ -289,6 +339,9 @@ var ReactAutoCompleteTableView = function (_a) {
|
|
|
289
339
|
}, [autoFocus]);
|
|
290
340
|
var onInputFocus = function () {
|
|
291
341
|
if (!isDisabled) {
|
|
342
|
+
if (searchOnButtonOnly) {
|
|
343
|
+
return;
|
|
344
|
+
}
|
|
292
345
|
if (autoFilter && inputValue === '') {
|
|
293
346
|
handleValChange('*');
|
|
294
347
|
}
|
|
@@ -320,6 +373,12 @@ var ReactAutoCompleteTableView = function (_a) {
|
|
|
320
373
|
}
|
|
321
374
|
};
|
|
322
375
|
var handleOpenDropdown = function (e) {
|
|
376
|
+
if (searchOnButtonOnly) {
|
|
377
|
+
if (suggestions && suggestions.length > 0 && !isLoading) {
|
|
378
|
+
setDropOpen(function (open) { return !open; });
|
|
379
|
+
}
|
|
380
|
+
return;
|
|
381
|
+
}
|
|
323
382
|
if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0 || refetchData) {
|
|
324
383
|
if (autoDropdown && (inputValue === '' || inputValue.trim() === '')) {
|
|
325
384
|
setSuggestions([]);
|
|
@@ -465,14 +524,37 @@ var ReactAutoCompleteTableView = function (_a) {
|
|
|
465
524
|
// const getPosition = () => {
|
|
466
525
|
// return 'bottom'
|
|
467
526
|
// }
|
|
527
|
+
var itemMatchesLocalFilter = function (item) {
|
|
528
|
+
var _a, _b, _c, _d;
|
|
529
|
+
var baseMatch = 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 : '');
|
|
530
|
+
if (dropdownTheme !== 'splitDetail' ||
|
|
531
|
+
!splitDetailOptions ||
|
|
532
|
+
!inputValue) {
|
|
533
|
+
return baseMatch;
|
|
534
|
+
}
|
|
535
|
+
var q = inputValue.trim().toLowerCase();
|
|
536
|
+
if (!q)
|
|
537
|
+
return baseMatch;
|
|
538
|
+
var hay = function (v) {
|
|
539
|
+
return v != null && String(v).toLowerCase().includes(q);
|
|
540
|
+
};
|
|
541
|
+
if (item.label != null && hay(item.label))
|
|
542
|
+
return true;
|
|
543
|
+
if (splitDetailOptions.subtitleKey &&
|
|
544
|
+
hay(item[splitDetailOptions.subtitleKey])) {
|
|
545
|
+
return true;
|
|
546
|
+
}
|
|
547
|
+
if (splitDetailOptions.badgeKey &&
|
|
548
|
+
hay(item[splitDetailOptions.badgeKey])) {
|
|
549
|
+
return true;
|
|
550
|
+
}
|
|
551
|
+
return baseMatch;
|
|
552
|
+
};
|
|
468
553
|
var filteredData = inputValue !== '*' &&
|
|
469
554
|
inputValue !== '' &&
|
|
470
555
|
type !== 'custom_select' &&
|
|
471
556
|
!noLocalFilter
|
|
472
|
-
? suggestions === null || suggestions === void 0 ? void 0 : suggestions.filter(function (item) {
|
|
473
|
-
var _a, _b, _c, _d;
|
|
474
|
-
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 : '');
|
|
475
|
-
})
|
|
557
|
+
? suggestions === null || suggestions === void 0 ? void 0 : suggestions.filter(function (item) { return itemMatchesLocalFilter(item); })
|
|
476
558
|
: suggestions;
|
|
477
559
|
var handleError = function (data) {
|
|
478
560
|
var _a;
|
|
@@ -560,7 +642,7 @@ var ReactAutoCompleteTableView = function (_a) {
|
|
|
560
642
|
}
|
|
561
643
|
return undefined;
|
|
562
644
|
};
|
|
563
|
-
var
|
|
645
|
+
var _10 = (0, react_1.useState)(false), showNoResults = _10[0], setShowNoResults = _10[1];
|
|
564
646
|
(0, react_1.useEffect)(function () {
|
|
565
647
|
if ((inputValue || autoDropdown) &&
|
|
566
648
|
(filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) === 0 &&
|
|
@@ -634,7 +716,11 @@ var ReactAutoCompleteTableView = function (_a) {
|
|
|
634
716
|
dropOpen,
|
|
635
717
|
]);
|
|
636
718
|
var setDropDown = function () {
|
|
637
|
-
return (((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 || showNoResults) && ((0, jsx_runtime_1.jsx)("div", __assign({ ref: dropdownContentRef, style: __assign(__assign({}, dropPosition), { overflow: 'hidden' }), className: "autocomplete-suggections autocomplete-suggections-tableview absolute bg-white shadow-gray-300 shadow-md border border-grey-light z-50 mt-9"
|
|
719
|
+
return (((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 || showNoResults) && ((0, jsx_runtime_1.jsx)("div", __assign({ ref: dropdownContentRef, style: __assign(__assign({}, dropPosition), { overflow: 'hidden' }), className: "autocomplete-suggections autocomplete-suggections-tableview absolute bg-white shadow-gray-300 shadow-md border border-grey-light z-50 mt-9".concat(dropdownTheme === 'splitDetail'
|
|
720
|
+
? ' autocomplete-suggections--split-detail'
|
|
721
|
+
: '') }, { children: (0, jsx_runtime_1.jsx)("ul", __assign({ className: "h-auto overflow-auto w-full ".concat(tableView ? '' : 'py-1.5'), ref: scrollContainerRef, style: { maxHeight: dropPosition.maxHeight ? "calc(".concat(dropPosition.maxHeight, " - 2rem)") : undefined } }, { children: (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [dropdownTheme === 'default' &&
|
|
722
|
+
columnHeader &&
|
|
723
|
+
columnHeader.length > 0 && ((0, jsx_runtime_1.jsx)("li", __assign({ className: "sticky top-0 auto-suggections-tableview-header z-10 bg-gray-100 border-b border-grey-light" }, { children: (0, jsx_runtime_1.jsx)("ul", __assign({ className: "flex items-stretch w-full list-none p-0 m-0" }, { children: (function () {
|
|
638
724
|
// Sort columns by order if specified, otherwise maintain array order
|
|
639
725
|
var sortedColumns = additionalColumns
|
|
640
726
|
? __spreadArray([], additionalColumns, true).sort(function (a, b) {
|
|
@@ -659,34 +745,56 @@ var ReactAutoCompleteTableView = function (_a) {
|
|
|
659
745
|
var isLastColumn = colIndex === columnsAfter.length - 1;
|
|
660
746
|
return header ? ((0, jsx_runtime_1.jsx)("li", __assign({ className: "".concat(column.width ? 'flex-shrink-0' : 'flex-1', " min-w-0 px-3 py-2 ").concat(!isLastColumn ? 'border-r border-grey-light' : '', " break-words flex flex-col"), style: column.width ? { width: "".concat(column.width, "px") } : undefined }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: "block whitespace-normal text-xs font-semibold text-gray-700" }, { children: header.label })) }), column.key)) : null;
|
|
661
747
|
})] }));
|
|
662
|
-
})() })) }))), filteredData.map(function (suggestion, index) {
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
748
|
+
})() })) }))), filteredData.map(function (suggestion, index) {
|
|
749
|
+
var _a;
|
|
750
|
+
return ((0, jsx_runtime_1.jsx)("li", __assign({ className: "".concat((value === null || value === void 0 ? void 0 : value.id) === (suggestion === null || suggestion === void 0 ? void 0 : suggestion.id)
|
|
751
|
+
? 'bg-blue-navy text-white'
|
|
752
|
+
: "".concat(index === selectedIndex ? 'is-selected' : '', " hover:bg-table-hover"), " cursor-pointer text-xxs qbs-autocomplete-suggections-items ").concat(dropdownTheme === 'splitDetail' || tableView
|
|
753
|
+
? 'border-b border-grey-light last:border-b-0'
|
|
754
|
+
: 'p-1 ps-3.5 pl-[10px]'), "data-testid": suggestion.name, onClick: function () { return handleSuggestionClick(suggestion, index); }, tabIndex: index, ref: function (el) { return (itemRefs.current[index] = el); } }, { children: dropdownTheme === 'splitDetail' ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "qbs-split-detail-row" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "qbs-split-detail-main" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-split-detail-title" }, { children: (suggestion === null || suggestion === void 0 ? void 0 : suggestion.label) ? suggestion === null || suggestion === void 0 ? void 0 : suggestion.label : suggestion.name })), (splitDetailOptions === null || splitDetailOptions === void 0 ? void 0 : splitDetailOptions.subtitleKey) &&
|
|
755
|
+
(suggestion === null || suggestion === void 0 ? void 0 : suggestion[splitDetailOptions.subtitleKey]) != null &&
|
|
756
|
+
String(suggestion[splitDetailOptions.subtitleKey]).trim() !== '' && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-split-detail-subtitle" }, { children: String(suggestion[splitDetailOptions.subtitleKey]) })))] })), (splitDetailOptions === null || splitDetailOptions === void 0 ? void 0 : splitDetailOptions.badgeKey) &&
|
|
757
|
+
(suggestion === null || suggestion === void 0 ? void 0 : suggestion[splitDetailOptions.badgeKey]) != null &&
|
|
758
|
+
String(suggestion[splitDetailOptions.badgeKey]).trim() !==
|
|
759
|
+
'' && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "qbs-split-detail-badge-wrap" }, { children: (0, jsx_runtime_1.jsxs)("span", __assign({ className: "qbs-split-detail-badge" }, { children: [(_a = splitDetailOptions.badgePrefix) !== null && _a !== void 0 ? _a : '', String(suggestion[splitDetailOptions.badgeKey])] })) })))] }))) : ((0, jsx_runtime_1.jsx)("ul", __assign({ className: "flex items-stretch w-full list-none p-0 m-0" }, { children: (function () {
|
|
760
|
+
// Sort columns by order if specified, otherwise maintain array order
|
|
761
|
+
var sortedColumns = additionalColumns
|
|
762
|
+
? __spreadArray([], additionalColumns, true).sort(function (a, b) {
|
|
763
|
+
var orderA = a.order !== undefined ? a.order : Infinity;
|
|
764
|
+
var orderB = b.order !== undefined ? b.order : Infinity;
|
|
765
|
+
return orderA - orderB;
|
|
766
|
+
})
|
|
767
|
+
: [];
|
|
768
|
+
// Separate columns before first column (order < 0) and after (order >= 0 or undefined)
|
|
769
|
+
var columnsBefore = sortedColumns.filter(function (col) { return col.order !== undefined && col.order < 0; });
|
|
770
|
+
var columnsAfter = sortedColumns.filter(function (col) {
|
|
771
|
+
return col.order === undefined || col.order >= 0;
|
|
772
|
+
});
|
|
773
|
+
// Determine if first column needs a separator
|
|
774
|
+
var hasColumnsAfter = columnsAfter.length > 0;
|
|
775
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [columnsBefore.map(function (column, colIndex) {
|
|
776
|
+
var hasValue = suggestion === null || suggestion === void 0 ? void 0 : suggestion[column.key];
|
|
777
|
+
var isLastBefore = false;
|
|
778
|
+
return hasValue ? ((0, jsx_runtime_1.jsx)("li", __assign({ className: "".concat(column.width ? 'flex-shrink-0' : 'flex-1', " min-w-0 px-3 ").concat(tableView ? 'py-2' : '', " ").concat(!isLastBefore
|
|
779
|
+
? 'border-r border-grey-light'
|
|
780
|
+
: '', " break-words flex flex-col"), style: column.width
|
|
781
|
+
? { width: "".concat(column.width, "px") }
|
|
782
|
+
: undefined }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: "block whitespace-normal" }, { children: suggestion === null || suggestion === void 0 ? void 0 : suggestion[column.key] })) }), column.key)) : null;
|
|
783
|
+
}), (0, jsx_runtime_1.jsx)("li", __assign({ className: "flex-1 min-w-0 px-3 ".concat(tableView ? 'py-2' : '', " ").concat(hasColumnsAfter
|
|
784
|
+
? 'border-r border-grey-light'
|
|
785
|
+
: '', " break-words flex flex-col") }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: "block whitespace-normal" }, { children: (suggestion === null || suggestion === void 0 ? void 0 : suggestion.label)
|
|
786
|
+
? suggestion === null || suggestion === void 0 ? void 0 : suggestion.label
|
|
787
|
+
: suggestion.name })) })), columnsAfter.map(function (column, colIndex) {
|
|
788
|
+
var hasValue = suggestion === null || suggestion === void 0 ? void 0 : suggestion[column.key];
|
|
789
|
+
var isLastColumn = colIndex === columnsAfter.length - 1;
|
|
790
|
+
return hasValue ? ((0, jsx_runtime_1.jsx)("li", __assign({ className: "".concat(column.width ? 'flex-shrink-0' : 'flex-1', " min-w-0 px-3 ").concat(tableView ? 'py-2' : '', " ").concat(!isLastColumn
|
|
791
|
+
? 'border-r border-grey-light'
|
|
792
|
+
: '', " break-words flex flex-col"), style: column.width
|
|
793
|
+
? { width: "".concat(column.width, "px") }
|
|
794
|
+
: undefined }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: "block whitespace-normal" }, { children: suggestion === null || suggestion === void 0 ? void 0 : suggestion[column.key] })) }), column.key)) : null;
|
|
795
|
+
})] }));
|
|
796
|
+
})() }))) }), suggestion === null || suggestion === void 0 ? void 0 : suggestion.id));
|
|
797
|
+
})] })) : (showNoResults &&
|
|
690
798
|
!isLoading &&
|
|
691
799
|
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" })))) })) }))));
|
|
692
800
|
};
|
|
@@ -765,9 +873,11 @@ var ReactAutoCompleteTableView = function (_a) {
|
|
|
765
873
|
return next;
|
|
766
874
|
});
|
|
767
875
|
}, []);
|
|
768
|
-
(0, react_1.
|
|
769
|
-
if (!(tooltipIsHovered && showToolTip && !dropOpen && inputValue))
|
|
876
|
+
(0, react_1.useLayoutEffect)(function () {
|
|
877
|
+
if (!(tooltipIsHovered && showToolTip && !dropOpen && inputValue)) {
|
|
878
|
+
setTooltipPosition(null);
|
|
770
879
|
return;
|
|
880
|
+
}
|
|
771
881
|
updateTooltipPosition();
|
|
772
882
|
window.addEventListener('scroll', updateTooltipPosition, true);
|
|
773
883
|
window.addEventListener('resize', updateTooltipPosition);
|
|
@@ -791,9 +901,11 @@ var ReactAutoCompleteTableView = function (_a) {
|
|
|
791
901
|
return next;
|
|
792
902
|
});
|
|
793
903
|
}, []);
|
|
794
|
-
(0, react_1.
|
|
795
|
-
if (!(isHovered && errors && errors[name]))
|
|
904
|
+
(0, react_1.useLayoutEffect)(function () {
|
|
905
|
+
if (!(isHovered && errors && errors[name])) {
|
|
906
|
+
setErrorTooltipPosition(null);
|
|
796
907
|
return;
|
|
908
|
+
}
|
|
797
909
|
updateErrorTooltipPosition();
|
|
798
910
|
window.addEventListener('scroll', updateErrorTooltipPosition, true);
|
|
799
911
|
window.addEventListener('resize', updateErrorTooltipPosition);
|
|
@@ -802,26 +914,24 @@ var ReactAutoCompleteTableView = function (_a) {
|
|
|
802
914
|
window.removeEventListener('resize', updateErrorTooltipPosition);
|
|
803
915
|
};
|
|
804
916
|
}, [isHovered, errors, name, updateErrorTooltipPosition]);
|
|
805
|
-
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.jsx)(portal_1.default, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: "tooltip tooltip-portal-error", style: {
|
|
917
|
+
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] && errorTooltipPosition && ((0, jsx_runtime_1.jsx)(portal_1.default, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: "tooltip tooltip-portal-error", style: {
|
|
806
918
|
position: 'fixed',
|
|
807
|
-
top:
|
|
808
|
-
left:
|
|
919
|
+
top: errorTooltipPosition.top,
|
|
920
|
+
left: errorTooltipPosition.left,
|
|
809
921
|
transform: 'translateX(-100%)',
|
|
810
922
|
zIndex: 9999,
|
|
811
|
-
visibility: errorTooltipPosition ? 'visible' : 'hidden',
|
|
812
923
|
} }, { children: handleError(errors) })) })), tooltipIsHovered &&
|
|
813
924
|
showToolTip &&
|
|
814
925
|
!dropOpen &&
|
|
815
926
|
inputValue &&
|
|
816
|
-
((0, jsx_runtime_1.jsx)(portal_1.default, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "tooltip-info tooltip-info-portal", style: {
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
} }, { 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
|
|
927
|
+
tooltipPosition && ((0, jsx_runtime_1.jsx)(portal_1.default, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "tooltip-info tooltip-info-portal", style: {
|
|
928
|
+
position: 'fixed',
|
|
929
|
+
top: tooltipPosition.top,
|
|
930
|
+
left: tooltipPosition.left,
|
|
931
|
+
maxWidth: tooltipPosition.width,
|
|
932
|
+
transform: 'translateX(-100%)',
|
|
933
|
+
zIndex: 9999,
|
|
934
|
+
} }, { 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
|
|
825
935
|
? {
|
|
826
936
|
borderRight: getBorderRight(),
|
|
827
937
|
borderTopRightRadius: 0,
|
|
@@ -831,16 +941,19 @@ var ReactAutoCompleteTableView = function (_a) {
|
|
|
831
941
|
? placeholder && isCustomPlaceholder
|
|
832
942
|
? placeholder
|
|
833
943
|
: 'Type to search'
|
|
834
|
-
: placeholder !== null && placeholder !== void 0 ? placeholder : '--Select--', onFocus: onInputFocus, onClick: function (e) {
|
|
944
|
+
: placeholder !== null && placeholder !== void 0 ? placeholder : '--Select--', onFocus: onInputFocus, onKeyDown: handleSearchInputKeyDown, onClick: function (e) {
|
|
835
945
|
if (type === 'custom_select') {
|
|
836
946
|
setDropOpen(!dropOpen);
|
|
837
947
|
handleOpen(e);
|
|
838
948
|
}
|
|
949
|
+
else if (searchOnButtonOnly) {
|
|
950
|
+
return;
|
|
951
|
+
}
|
|
839
952
|
else {
|
|
840
953
|
if (dropOpen || (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0)
|
|
841
954
|
setDropOpen(!dropOpen);
|
|
842
955
|
}
|
|
843
|
-
} }), 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 autocomplete-adorement-wrapper" }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ ref: adorementRef, className: "".concat(generateClassName('adorement'), " qbs-autocomplete-adorement auto-dorpdown-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) &&
|
|
956
|
+
} }), 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 autocomplete-adorement-wrapper" }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ ref: adorementRef, className: "".concat(generateClassName('adorement'), " qbs-autocomplete-adorement auto-dorpdown-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" }) }))), showSearchOnButtonChrome && ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", "aria-label": isLoading ? 'Loading' : 'Search', "aria-busy": isLoading, "data-testid": "autocomplete-search-button", onClick: handleSearchButtonClick, disabled: isLoading, className: "text-table-bodyColor text-[#667085] focus-visible:outline-slate-100 p-0.5 inline-flex items-center justify-center min-w-[28px] min-h-[28px] disabled:opacity-70" }, { children: isLoading ? ((0, jsx_runtime_1.jsx)("span", __assign({ className: "inline-flex items-center justify-center [&_svg]:mr-0 [&_svg]:h-5 [&_svg]:w-5" }, { children: (0, jsx_runtime_1.jsx)(Spinner_1.default, {}) }))) : ((0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "search", type: "medium" })) }))), isLoading && !showSearchOnButtonChrome && (0, jsx_runtime_1.jsx)(Spinner_1.default, {}), (type !== 'auto_complete' || autoDropdown) &&
|
|
844
957
|
!disabled &&
|
|
845
958
|
!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 ? (autoDropdown ? ((0, jsx_runtime_1.jsx)(icons_1.AllDropArrow, { type: "down", uniqueId: "all-dropdow-arrow-icon", className: "all-dropdow-arrow-icon" })) : ((0, jsx_runtime_1.jsx)(icons_1.DropArrow, { uniqueDropArrowId: "drop-arrow-icon" }))) : autoDropdown ? ((0, jsx_runtime_1.jsx)(icons_1.AllDropArrow, { type: "up", uniqueId: "all-dropdow-arrow-icon", className: "all-dropdow-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({ ref: errorIconRef, 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() }) }))] }))] }))] })));
|
|
846
959
|
};
|