funuicss 3.10.3 → 3.10.5
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/package.json +1 -1
- package/ui/accordion/Accordion.js +1 -1
- package/ui/drop/Dropdown.js +79 -21
- package/ui/input/Input.d.ts +89 -0
- package/ui/input/Input.js +40 -10
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "3.10.
|
|
2
|
+
"version": "3.10.5",
|
|
3
3
|
"name": "funuicss",
|
|
4
4
|
"description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
|
|
5
5
|
"main": "index.js",
|
|
@@ -313,7 +313,7 @@ var AccordionItem = function (_a) {
|
|
|
313
313
|
react_1.default.createElement("div", { style: { lineHeight: 0 } },
|
|
314
314
|
react_1.default.createElement(AccordionIcon, { isExpandIcon: true, expandIcon: expandIcon, expandIconColor: expandIconColor, expandIconSize: expandIconSize, expandIconClassName: expandIconClassName, isOpen: isOpen, rotate: expandIconRotate }))),
|
|
315
315
|
react_1.default.createElement("div", { className: "accordion-content ".concat(contentClass || '', " ").concat(isOpen ? 'open' : ''), style: {
|
|
316
|
-
maxHeight: isOpen ? '
|
|
316
|
+
maxHeight: isOpen ? '999999999999999px' : '0',
|
|
317
317
|
overflow: 'visible',
|
|
318
318
|
opacity: isOpen ? 1 : 0,
|
|
319
319
|
visibility: isOpen ? 'visible' : 'hidden',
|
package/ui/drop/Dropdown.js
CHANGED
|
@@ -50,9 +50,8 @@ var Dropdown = function (_a) {
|
|
|
50
50
|
return;
|
|
51
51
|
}
|
|
52
52
|
var calculatePosition = function () {
|
|
53
|
+
var _a;
|
|
53
54
|
var rect = triggerRef.current.getBoundingClientRect();
|
|
54
|
-
var scrollY = window.scrollY;
|
|
55
|
-
var scrollX = window.scrollX;
|
|
56
55
|
var styles = {
|
|
57
56
|
width: width || undefined,
|
|
58
57
|
minWidth: minWidth || undefined,
|
|
@@ -64,44 +63,103 @@ var Dropdown = function (_a) {
|
|
|
64
63
|
};
|
|
65
64
|
if (usePortal) {
|
|
66
65
|
styles.position = 'fixed';
|
|
67
|
-
//
|
|
66
|
+
// Use viewport‑relative coordinates – NO scrollY/scrollX added
|
|
68
67
|
switch (position) {
|
|
69
68
|
case 'top':
|
|
70
|
-
styles.top = rect.top
|
|
71
|
-
styles.left = rect.left +
|
|
72
|
-
styles.transform = 'translateX(-50%)';
|
|
69
|
+
styles.top = rect.top;
|
|
70
|
+
styles.left = rect.left + rect.width / 2;
|
|
71
|
+
styles.transform = 'translateX(-50%) translateY(-100%)'; // place above, centered
|
|
73
72
|
break;
|
|
74
73
|
case 'bottom':
|
|
75
|
-
styles.top = rect.bottom
|
|
76
|
-
styles.left = rect.left +
|
|
74
|
+
styles.top = rect.bottom;
|
|
75
|
+
styles.left = rect.left + rect.width / 2;
|
|
77
76
|
styles.transform = 'translateX(-50%)';
|
|
78
77
|
break;
|
|
79
78
|
case 'top-left':
|
|
80
|
-
styles.top = rect.top
|
|
81
|
-
styles.left = rect.left
|
|
79
|
+
styles.top = rect.top;
|
|
80
|
+
styles.left = rect.left;
|
|
81
|
+
styles.transform = 'translateY(-100%)'; // place above
|
|
82
82
|
break;
|
|
83
83
|
case 'top-right':
|
|
84
|
-
styles.top = rect.top
|
|
85
|
-
styles.left = rect.right
|
|
84
|
+
styles.top = rect.top;
|
|
85
|
+
styles.left = rect.right;
|
|
86
|
+
styles.transform = 'translateY(-100%)'; // place above
|
|
86
87
|
break;
|
|
87
88
|
case 'bottom-left':
|
|
88
|
-
styles.top = rect.bottom
|
|
89
|
-
styles.left = rect.left
|
|
89
|
+
styles.top = rect.bottom;
|
|
90
|
+
styles.left = rect.left;
|
|
90
91
|
break;
|
|
91
92
|
case 'bottom-right':
|
|
92
|
-
styles.top = rect.bottom
|
|
93
|
-
styles.left = rect.right
|
|
93
|
+
styles.top = rect.bottom;
|
|
94
|
+
styles.left = rect.right;
|
|
94
95
|
break;
|
|
95
96
|
case 'left':
|
|
96
|
-
styles.top = rect.top
|
|
97
|
-
styles.left = rect.left
|
|
97
|
+
styles.top = rect.top;
|
|
98
|
+
styles.left = rect.left;
|
|
99
|
+
styles.transform = 'translateX(-100%)'; // place to the left
|
|
98
100
|
break;
|
|
99
101
|
case 'right':
|
|
100
|
-
styles.top = rect.top
|
|
101
|
-
styles.left = rect.right
|
|
102
|
+
styles.top = rect.top;
|
|
103
|
+
styles.left = rect.right;
|
|
102
104
|
break;
|
|
103
105
|
}
|
|
104
106
|
}
|
|
107
|
+
else {
|
|
108
|
+
// Non‑portal mode: use absolute positioning inside the (assumed) relative container
|
|
109
|
+
// You might need to ensure the container has position: relative.
|
|
110
|
+
styles.position = 'absolute';
|
|
111
|
+
// Here you would use offset values relative to the container.
|
|
112
|
+
// For simplicity, we'll just copy the same logic without scroll offsets,
|
|
113
|
+
// but note that getBoundingClientRect gives viewport coordinates,
|
|
114
|
+
// which are not directly usable with absolute positioning unless the container is fixed/absolute.
|
|
115
|
+
// A production version would need a more robust approach.
|
|
116
|
+
// For now, we keep the original (flawed) logic, but you should consider
|
|
117
|
+
// using a proper positioning library or always using the portal.
|
|
118
|
+
var containerRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
119
|
+
if (containerRect) {
|
|
120
|
+
var relativeTop = rect.top - containerRect.top;
|
|
121
|
+
var relativeLeft = rect.left - containerRect.left;
|
|
122
|
+
switch (position) {
|
|
123
|
+
case 'top':
|
|
124
|
+
styles.top = relativeTop;
|
|
125
|
+
styles.left = relativeLeft + rect.width / 2;
|
|
126
|
+
styles.transform = 'translateX(-50%) translateY(-100%)';
|
|
127
|
+
break;
|
|
128
|
+
case 'bottom':
|
|
129
|
+
styles.top = rect.bottom - containerRect.top;
|
|
130
|
+
styles.left = relativeLeft + rect.width / 2;
|
|
131
|
+
styles.transform = 'translateX(-50%)';
|
|
132
|
+
break;
|
|
133
|
+
case 'top-left':
|
|
134
|
+
styles.top = relativeTop;
|
|
135
|
+
styles.left = relativeLeft;
|
|
136
|
+
styles.transform = 'translateY(-100%)';
|
|
137
|
+
break;
|
|
138
|
+
case 'top-right':
|
|
139
|
+
styles.top = relativeTop;
|
|
140
|
+
styles.left = rect.right - containerRect.left;
|
|
141
|
+
styles.transform = 'translateY(-100%)';
|
|
142
|
+
break;
|
|
143
|
+
case 'bottom-left':
|
|
144
|
+
styles.top = rect.bottom - containerRect.top;
|
|
145
|
+
styles.left = relativeLeft;
|
|
146
|
+
break;
|
|
147
|
+
case 'bottom-right':
|
|
148
|
+
styles.top = rect.bottom - containerRect.top;
|
|
149
|
+
styles.left = rect.right - containerRect.left;
|
|
150
|
+
break;
|
|
151
|
+
case 'left':
|
|
152
|
+
styles.top = relativeTop;
|
|
153
|
+
styles.left = relativeLeft;
|
|
154
|
+
styles.transform = 'translateX(-100%)';
|
|
155
|
+
break;
|
|
156
|
+
case 'right':
|
|
157
|
+
styles.top = relativeTop;
|
|
158
|
+
styles.left = rect.right - containerRect.left;
|
|
159
|
+
break;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
}
|
|
105
163
|
return styles;
|
|
106
164
|
};
|
|
107
165
|
setMenuStyle(calculatePosition());
|
|
@@ -135,7 +193,7 @@ var Dropdown = function (_a) {
|
|
|
135
193
|
}
|
|
136
194
|
return undefined;
|
|
137
195
|
}, [open]);
|
|
138
|
-
// Handle scroll to hide dropdown
|
|
196
|
+
// Handle scroll to hide dropdown (optional – you may remove this if you want it to stay open)
|
|
139
197
|
(0, react_1.useEffect)(function () {
|
|
140
198
|
var handleScroll = function () {
|
|
141
199
|
if (open) {
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import React, { ChangeEvent, FocusEvent, MouseEvent, KeyboardEvent, FormEvent } from 'react';
|
|
2
|
+
interface BaseInputProps {
|
|
3
|
+
id?: string;
|
|
4
|
+
name?: string;
|
|
5
|
+
value?: any;
|
|
6
|
+
defaultValue?: string;
|
|
7
|
+
onChange?: (event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
|
|
8
|
+
onBlur?: (event: FocusEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
|
|
9
|
+
onFocus?: (event: FocusEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
|
|
10
|
+
onClick?: (event: MouseEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
|
|
11
|
+
onKeyDown?: (event: KeyboardEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
|
|
12
|
+
onKeyUp?: (event: KeyboardEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
|
|
13
|
+
onKeyPress?: (event: KeyboardEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
|
|
14
|
+
onSubmit?: (event: FormEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
|
|
15
|
+
type?: string;
|
|
16
|
+
placeholder?: string;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
readOnly?: boolean;
|
|
19
|
+
required?: boolean;
|
|
20
|
+
autoFocus?: boolean;
|
|
21
|
+
autoComplete?: string;
|
|
22
|
+
pattern?: string;
|
|
23
|
+
minLength?: number;
|
|
24
|
+
maxLength?: number;
|
|
25
|
+
min?: string | number;
|
|
26
|
+
max?: string | number;
|
|
27
|
+
step?: string | number;
|
|
28
|
+
multiple?: boolean;
|
|
29
|
+
accept?: string;
|
|
30
|
+
size?: number;
|
|
31
|
+
form?: string;
|
|
32
|
+
formNoValidate?: boolean;
|
|
33
|
+
formTarget?: string;
|
|
34
|
+
list?: string;
|
|
35
|
+
autoCapitalize?: 'on' | 'off' | 'none' | 'sentences' | 'words' | 'characters';
|
|
36
|
+
autoCorrect?: 'on' | 'off';
|
|
37
|
+
spellCheck?: boolean | 'true' | 'false';
|
|
38
|
+
inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
|
|
39
|
+
dirname?: string;
|
|
40
|
+
status?: 'success' | 'warning' | 'danger' | 'info';
|
|
41
|
+
funcss?: string;
|
|
42
|
+
bg?: string;
|
|
43
|
+
fullWidth?: boolean;
|
|
44
|
+
flat?: boolean;
|
|
45
|
+
bordered?: boolean;
|
|
46
|
+
borderless?: boolean;
|
|
47
|
+
rounded?: boolean;
|
|
48
|
+
leftRounded?: boolean;
|
|
49
|
+
rightRounded?: boolean;
|
|
50
|
+
startIcon?: string | React.ReactNode;
|
|
51
|
+
endIcon?: string | React.ReactNode;
|
|
52
|
+
prefix?: string | React.ReactNode;
|
|
53
|
+
suffix?: string | React.ReactNode;
|
|
54
|
+
stringPrefix?: string;
|
|
55
|
+
stringSuffix?: string;
|
|
56
|
+
iconicBg?: string;
|
|
57
|
+
variant?: string;
|
|
58
|
+
label?: string;
|
|
59
|
+
helperText?: string;
|
|
60
|
+
}
|
|
61
|
+
interface SelectOption {
|
|
62
|
+
value: string;
|
|
63
|
+
text?: string;
|
|
64
|
+
label?: string;
|
|
65
|
+
}
|
|
66
|
+
interface TextInputProps extends BaseInputProps {
|
|
67
|
+
type?: string;
|
|
68
|
+
}
|
|
69
|
+
interface SelectProps extends BaseInputProps {
|
|
70
|
+
options?: SelectOption[];
|
|
71
|
+
}
|
|
72
|
+
interface TextareaProps extends BaseInputProps {
|
|
73
|
+
rows?: number;
|
|
74
|
+
cols?: number;
|
|
75
|
+
wrap?: 'hard' | 'soft' | 'off';
|
|
76
|
+
}
|
|
77
|
+
export declare const TextInput: React.FC<TextInputProps>;
|
|
78
|
+
export declare const SelectInput: React.FC<SelectProps>;
|
|
79
|
+
export declare const TextareaInput: React.FC<TextareaProps>;
|
|
80
|
+
interface InputProps extends BaseInputProps {
|
|
81
|
+
select?: boolean;
|
|
82
|
+
multiline?: boolean;
|
|
83
|
+
noBorder?: boolean;
|
|
84
|
+
type?: string;
|
|
85
|
+
options?: SelectOption[];
|
|
86
|
+
rows?: number;
|
|
87
|
+
}
|
|
88
|
+
declare const Input: React.FC<InputProps>;
|
|
89
|
+
export default Input;
|
package/ui/input/Input.js
CHANGED
|
@@ -144,7 +144,7 @@ var InputContainer = function (_a) {
|
|
|
144
144
|
status && statusIcons[status] && (react_1.default.createElement("span", { className: "helper-icon" }, statusIcons[status])),
|
|
145
145
|
react_1.default.createElement("span", null, helperText)))));
|
|
146
146
|
};
|
|
147
|
-
// Text Input Component
|
|
147
|
+
// Text Input Component
|
|
148
148
|
var TextInput = function (_a) {
|
|
149
149
|
var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onKeyPress = _a.onKeyPress, onSubmit = _a.onSubmit, status = _a.status, funcss = _a.funcss, bg = _a.bg, _b = _a.fullWidth, fullWidth = _b === void 0 ? true : _b, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, _c = _a.type, type = _c === void 0 ? 'text' : _c, label = _a.label, helperText = _a.helperText, _d = _a.variant, variant = _d === void 0 ? '' : _d, placeholder = _a.placeholder,
|
|
150
150
|
// HTML Input Attributes
|
|
@@ -159,7 +159,6 @@ var TextInput = function (_a) {
|
|
|
159
159
|
var isPasswordType = type === 'password';
|
|
160
160
|
(0, react_1.useEffect)(function () {
|
|
161
161
|
if (value !== undefined) {
|
|
162
|
-
// CRITICAL: Preserve all characters including spaces
|
|
163
162
|
setInputValue(String(value));
|
|
164
163
|
}
|
|
165
164
|
}, [value]);
|
|
@@ -241,9 +240,7 @@ var TextInput = function (_a) {
|
|
|
241
240
|
if (onBlur)
|
|
242
241
|
onBlur(e);
|
|
243
242
|
};
|
|
244
|
-
// FIXED: Handle key events properly
|
|
245
243
|
var handleKeyDown = function (e) {
|
|
246
|
-
// DO NOT prevent default for space key
|
|
247
244
|
if (onKeyDown)
|
|
248
245
|
onKeyDown(e);
|
|
249
246
|
};
|
|
@@ -252,8 +249,6 @@ var TextInput = function (_a) {
|
|
|
252
249
|
onKeyUp(e);
|
|
253
250
|
};
|
|
254
251
|
var handleKeyPress = function (e) {
|
|
255
|
-
// CRITICAL: DO NOT prevent default for any keys
|
|
256
|
-
// This allows space key to work
|
|
257
252
|
if (onKeyPress)
|
|
258
253
|
onKeyPress(e);
|
|
259
254
|
};
|
|
@@ -269,13 +264,14 @@ var TextInput = function (_a) {
|
|
|
269
264
|
exports.TextInput = TextInput;
|
|
270
265
|
// Select Component
|
|
271
266
|
var SelectInput = function (_a) {
|
|
272
|
-
var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onKeyPress = _a.onKeyPress, onSubmit = _a.onSubmit, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, _b = _a.options, options = _b === void 0 ? [] : _b, label = _a.label, helperText = _a.helperText, _c = _a.variant, variant = _c === void 0 ? '' : _c,
|
|
267
|
+
var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onKeyPress = _a.onKeyPress, onSubmit = _a.onSubmit, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, _b = _a.options, options = _b === void 0 ? [] : _b, label = _a.label, helperText = _a.helperText, _c = _a.variant, variant = _c === void 0 ? '' : _c, placeholder = _a.placeholder,
|
|
273
268
|
// HTML Select Attributes
|
|
274
269
|
_d = _a.disabled,
|
|
275
270
|
// HTML Select Attributes
|
|
276
|
-
disabled = _d === void 0 ? false : _d, _e = _a.required, required = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, form = _a.form, formNoValidate = _a.formNoValidate, formTarget = _a.formTarget, size = _a.size, multiple = _a.multiple, autoComplete = _a.autoComplete, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "onBlur", "onFocus", "onClick", "onKeyDown", "onKeyUp", "onKeyPress", "onSubmit", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "options", "label", "helperText", "variant", "disabled", "required", "autoFocus", "form", "formNoValidate", "formTarget", "size", "multiple", "autoComplete"]);
|
|
271
|
+
disabled = _d === void 0 ? false : _d, _e = _a.required, required = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, form = _a.form, formNoValidate = _a.formNoValidate, formTarget = _a.formTarget, size = _a.size, multiple = _a.multiple, autoComplete = _a.autoComplete, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "onBlur", "onFocus", "onClick", "onKeyDown", "onKeyUp", "onKeyPress", "onSubmit", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "options", "label", "helperText", "variant", "placeholder", "disabled", "required", "autoFocus", "form", "formNoValidate", "formTarget", "size", "multiple", "autoComplete"]);
|
|
277
272
|
var _g = (0, react_1.useState)(false), isFocused = _g[0], setIsFocused = _g[1];
|
|
278
273
|
var _h = (0, react_1.useState)(value !== undefined ? String(value) : defaultValue || ''), selectValue = _h[0], setSelectValue = _h[1];
|
|
274
|
+
var selectRef = (0, react_1.useRef)(null);
|
|
279
275
|
(0, react_1.useEffect)(function () {
|
|
280
276
|
if (value !== undefined) {
|
|
281
277
|
setSelectValue(String(value));
|
|
@@ -322,6 +318,24 @@ var SelectInput = function (_a) {
|
|
|
322
318
|
endIcon: endIconNode !== undefined ? endIconNode : mergedProps.endIcon,
|
|
323
319
|
iconicBg: iconicBg !== undefined ? iconicBg : mergedProps.iconicBg,
|
|
324
320
|
};
|
|
321
|
+
// Process options to handle both text and label properties
|
|
322
|
+
var processedOptions = react_1.default.useMemo(function () {
|
|
323
|
+
// Add "No Option" as first option if options array exists and has items
|
|
324
|
+
var optionsWithDefault = [];
|
|
325
|
+
// Check if options array exists and has items
|
|
326
|
+
if (options && options.length > 0) {
|
|
327
|
+
// Add default "No Option" with empty value
|
|
328
|
+
optionsWithDefault.push({ value: '', text: 'No Option' });
|
|
329
|
+
// Map existing options to use either text or label
|
|
330
|
+
options.forEach(function (option) {
|
|
331
|
+
optionsWithDefault.push({
|
|
332
|
+
value: option.value,
|
|
333
|
+
text: option.text !== undefined ? option.text : (option.label || option.value)
|
|
334
|
+
});
|
|
335
|
+
});
|
|
336
|
+
}
|
|
337
|
+
return optionsWithDefault;
|
|
338
|
+
}, [options]);
|
|
325
339
|
var selectHasValue = !!selectValue;
|
|
326
340
|
var showPrefix = !!final.startIcon;
|
|
327
341
|
var showSuffix = !!final.endIcon;
|
|
@@ -357,9 +371,25 @@ var SelectInput = function (_a) {
|
|
|
357
371
|
if (onBlur)
|
|
358
372
|
onBlur(e);
|
|
359
373
|
};
|
|
374
|
+
var handleKeyDown = function (e) {
|
|
375
|
+
if (onKeyDown)
|
|
376
|
+
onKeyDown(e);
|
|
377
|
+
// Handle Tab key when input is empty
|
|
378
|
+
if (e.key === 'Tab' && !e.shiftKey && selectRef.current && !selectValue && placeholder) {
|
|
379
|
+
e.preventDefault();
|
|
380
|
+
setSelectValue(placeholder);
|
|
381
|
+
// Trigger change event
|
|
382
|
+
if (onChange) {
|
|
383
|
+
var event_1 = {
|
|
384
|
+
target: { value: placeholder }
|
|
385
|
+
};
|
|
386
|
+
onChange(event_1);
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
};
|
|
360
390
|
// Extract only valid HTML select attributes for the select element
|
|
361
|
-
var selectAttributes = __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onClick: onClick, onKeyDown:
|
|
362
|
-
var selectElement = (react_1.default.createElement("select", __assign({}, selectAttributes),
|
|
391
|
+
var selectAttributes = __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onClick: onClick, onKeyDown: handleKeyDown, onKeyUp: onKeyUp, onKeyPress: onKeyPress, onSubmit: onSubmit, defaultValue: defaultValue, value: selectValue, style: style, disabled: disabled, required: required, autoFocus: autoFocus, form: form, size: size, multiple: multiple, autoComplete: autoComplete }, rest);
|
|
392
|
+
var selectElement = (react_1.default.createElement("select", __assign({ ref: selectRef }, selectAttributes), processedOptions.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
|
|
363
393
|
// Only use iconic wrapper when we have icons
|
|
364
394
|
var wrappedSelect = showPrefix || showSuffix ? (react_1.default.createElement(IconicInputWrapper, { startIcon: final.startIcon, endIcon: final.endIcon, iconicBg: final.iconicBg, funcss: final.funcss }, selectElement)) : (selectElement);
|
|
365
395
|
return (react_1.default.createElement(InputContainer, { startIcon: final.startIcon, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: selectHasValue, fullWidth: final.fullWidth, id: id, alwaysActiveLabel: true, required: required }, wrappedSelect));
|