digitinary-ui 1.0.254 → 1.0.256
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.
|
@@ -14,19 +14,19 @@ const Input = forwardRef(({ type = 'text', value = '', onChange, placeholder, la
|
|
|
14
14
|
const lastSearchRef = useRef(value);
|
|
15
15
|
const inputRef = useRef(null);
|
|
16
16
|
const arabicRegex = /^[\u0600-\u06FF0-9 _-]+$/;
|
|
17
|
+
const language = document.documentElement.lang || 'en';
|
|
18
|
+
const isRTL = language === 'ar' || document.documentElement.dir === 'rtl';
|
|
17
19
|
const toggleShowPassword = (event) => {
|
|
18
20
|
event && event.stopPropagation();
|
|
19
21
|
setShowPassword(!showPassword);
|
|
20
22
|
};
|
|
21
23
|
const handleChange = (event) => {
|
|
22
24
|
const value = event.target.value;
|
|
23
|
-
// Ensure restrictedCharactersRegex is always a valid RegExp
|
|
24
25
|
const pattern = typeof restrictedCharactersRegex === 'string' && restrictedCharactersRegex !== ''
|
|
25
26
|
? new RegExp(restrictedCharactersRegex.slice(1, -1))
|
|
26
27
|
: restrictedCharactersRegex instanceof RegExp
|
|
27
28
|
? restrictedCharactersRegex
|
|
28
29
|
: null;
|
|
29
|
-
// Apply restrictions for Arabic text and custom regex
|
|
30
30
|
if (onlyArabic && value !== '' && !arabicRegex.test(value))
|
|
31
31
|
return;
|
|
32
32
|
if (pattern && pattern.test(value))
|
|
@@ -34,20 +34,17 @@ const Input = forwardRef(({ type = 'text', value = '', onChange, placeholder, la
|
|
|
34
34
|
onChange(value);
|
|
35
35
|
};
|
|
36
36
|
const handleClear = () => {
|
|
37
|
-
if (clearable)
|
|
37
|
+
if (clearable)
|
|
38
38
|
onChange('');
|
|
39
|
-
}
|
|
40
39
|
onClear && onClear();
|
|
41
40
|
};
|
|
42
41
|
const handleIconKeyDown = (event, action) => {
|
|
43
|
-
if (event.key === 'Enter')
|
|
42
|
+
if (event.key === 'Enter')
|
|
44
43
|
action();
|
|
45
|
-
}
|
|
46
44
|
};
|
|
47
45
|
const getInputType = () => {
|
|
48
|
-
if (type === 'password')
|
|
46
|
+
if (type === 'password')
|
|
49
47
|
return showPassword ? 'text' : 'password';
|
|
50
|
-
}
|
|
51
48
|
return type;
|
|
52
49
|
};
|
|
53
50
|
useEffect(() => {
|
|
@@ -56,32 +53,26 @@ const Input = forwardRef(({ type = 'text', value = '', onChange, placeholder, la
|
|
|
56
53
|
onSearchDebounce(search);
|
|
57
54
|
lastSearchRef.current = search;
|
|
58
55
|
}, 500);
|
|
59
|
-
return () =>
|
|
60
|
-
clearTimeout(handler);
|
|
61
|
-
};
|
|
56
|
+
return () => clearTimeout(handler);
|
|
62
57
|
}
|
|
63
58
|
}, [search, onSearchDebounce]);
|
|
64
59
|
useEffect(() => {
|
|
65
60
|
const handleWheelEvent = (e) => {
|
|
66
|
-
if (inputRef.current && inputRef.current.type === 'number')
|
|
61
|
+
if (inputRef.current && inputRef.current.type === 'number')
|
|
67
62
|
e.preventDefault();
|
|
68
|
-
}
|
|
69
63
|
onWheel && onWheel(e);
|
|
70
64
|
};
|
|
71
65
|
inputRef.current?.addEventListener('wheel', handleWheelEvent, { passive: false });
|
|
72
|
-
return () =>
|
|
73
|
-
inputRef.current?.removeEventListener('wheel', handleWheelEvent);
|
|
74
|
-
};
|
|
66
|
+
return () => inputRef.current?.removeEventListener('wheel', handleWheelEvent);
|
|
75
67
|
}, [onWheel]);
|
|
76
|
-
return (_jsxs("div", { className: `inputContainer ${fullWidth ? 'fullWidth' : 'partialWidth'} ${size} ${className}`, children: [label && _jsx(Label, { required: required, label: label }), _jsxs("div", { className: `inputWrapper ${errorMsg ? 'error' : ''} ${disabled ? 'inputWrapperDisabled' : ''}`, dir: direction, children: [_jsxs("div", { className: `innerInputContainer ${disabled ? 'disabledInnerInput' : ''}`, children: [startAdornment && _jsx("div", { className: "adornment", children: startAdornment }), _jsx("input", { ref: ref || inputRef, type: getInputType(), "data-id": `${String(label)?.toUpperCase()?.replaceAll(' ', '_')}_INPUT_ID`, value: value ?? '', onChange: handleChange, placeholder: placeholder, disabled: disabled, className: `input ${errorMsg ? 'inputError' : ''} ${blurText && value ? 'blurredInput' : ''} ${disabled ? 'disabled' : ''}`, "aria-invalid": !!errorMsg, defaultValue: defaultValue, onKeyDown: onKeyDown, onPaste: (e) => {
|
|
68
|
+
return (_jsxs("div", { className: `inputContainer ${fullWidth ? 'fullWidth' : 'partialWidth'} ${size} ${className}`, children: [label && _jsx(Label, { required: required, label: label }), _jsxs("div", { className: `inputWrapper ${errorMsg ? 'error' : ''} ${disabled ? 'inputWrapperDisabled' : ''}`, dir: direction, children: [_jsxs("div", { className: `innerInputContainer ${disabled ? 'disabledInnerInput' : ''}`, children: [startAdornment && _jsx("div", { className: "adornment", children: startAdornment }), _jsx("input", { ref: ref || inputRef, dir: direction, type: getInputType(), "data-id": `${String(label)?.toUpperCase()?.replaceAll(' ', '_')}_INPUT_ID`, value: value ?? '', onChange: handleChange, placeholder: placeholder, disabled: disabled, className: `input ${errorMsg ? 'inputError' : ''} ${blurText && value ? 'blurredInput' : ''} ${disabled ? 'disabled' : ''} ${isRTL ? 'rtlInput' : ''}`, "aria-invalid": !!errorMsg, defaultValue: defaultValue, onKeyDown: onKeyDown, onPaste: (e) => {
|
|
77
69
|
const pastedText = e.clipboardData.getData('text');
|
|
78
70
|
const pattern = typeof restrictedCharactersRegex === 'string' && restrictedCharactersRegex !== ''
|
|
79
71
|
? new RegExp(restrictedCharactersRegex.slice(1, -1))
|
|
80
72
|
: restrictedCharactersRegex || '';
|
|
81
|
-
if (pattern && pattern
|
|
73
|
+
if (pattern && pattern.test(pastedText))
|
|
82
74
|
return e.preventDefault();
|
|
83
|
-
}
|
|
84
75
|
onPaste && onPaste(e);
|
|
85
|
-
}, onWheel: onWheel, autoComplete: autoComplete, required: required, maxLength: maxLength, ...props })] }), _jsxs("div", { className: `endIconsContainer ${
|
|
76
|
+
}, onWheel: onWheel, autoComplete: autoComplete, required: required, maxLength: maxLength, ...props })] }), _jsxs("div", { className: `endIconsContainer ${isRTL ? 'rtl' : ''}`, children: [clearable && value && !disabled && (_jsx("div", { className: "clearIconContainer", onClick: handleClear, tabIndex: 0, onKeyDown: (event) => handleIconKeyDown(event, handleClear), "aria-label": "Clear text", children: _jsx(ClearField, { width: "1rem", height: "1rem", className: "clearIcon", "data-id": "CLEAR_ICON_INPUT_FIELD" }) })), type === 'search' && endAdornment === undefined ? (_jsx("div", { className: "adornment", children: _jsx(SearchIcon, { className: "searchIcon", width: "1.5rem", height: "1.5rem", "data-id": "SEARCH_ICON_ID" }) })) : (endAdornment && _jsx("div", { className: "adornment", children: endAdornment })), type === 'password' && !disabled && (_jsx("div", { className: "adornment", onClick: toggleShowPassword, tabIndex: 0, onKeyDown: (event) => handleIconKeyDown(event, toggleShowPassword), "aria-label": showPassword ? 'Hide password' : 'Show password', "data-testid": showPassword ? 'Hide Password Icon' : 'Show Password Icon', children: showPassword ? (_jsx(ShowPasswordIcon, { className: `icon ${disabled ? 'disabled' : 'enabled'}`, width: "1.125rem", height: "1.125rem", "data-id": "EYE_ICON_ID" })) : (_jsx(HidePasswordIcon, { className: `icon ${disabled ? 'disabled' : 'enabled'}`, width: "1.125rem", height: "1.125rem", "data-id": "EYE_ICON_ID" })) }))] })] }), (helperText || errorMsg) && (_jsx(HelperText, { type: errorMsg ? 'error' : 'default', text: errorMsg || helperText || '' }))] }));
|
|
86
77
|
});
|
|
87
78
|
export default Input;
|
|
@@ -29,6 +29,13 @@ const PhoneNumber = ({ placeholder = 'Phone Number', defaultCountry = 'jo', requ
|
|
|
29
29
|
useEffect(() => {
|
|
30
30
|
setPhoneNumber(value);
|
|
31
31
|
}, [value, defaultCountry]);
|
|
32
|
-
return (_jsxs("div", { className: `phone-number ${errorMsg ? 'error-mode' : ''} ${disabled ? 'disabled' : ''}`, children: [label && (_jsxs("label", { className: "phone-label", children: [label, " ", required && _jsx("span", { className: "required", children: "*" })] })), _jsxs("div", { className: `phone-container ${disabled ? 'phone-disabled' : ''} ${className} ${size}`, children: [_jsx(PhoneInput, { country: !countryCode ? defaultCountry : countryCode.replace('+', '').toLowerCase(), value: phoneNumber, onChange: handlePhoneChange, placeholder: placeholder, enableAreaCodes: true, enableSearch: true, disabled: disabled, excludeCountries: ['il', ...excludeCountries], preferredCountries: preferredCountries, onlyCountries: onlyCountries, countryCodeEditable: false, inputClass: `${size}
|
|
32
|
+
return (_jsxs("div", { className: `phone-number ${errorMsg ? 'error-mode' : ''} ${disabled ? 'disabled' : ''}`, children: [label && (_jsxs("label", { className: "phone-label", children: [label, " ", required && _jsx("span", { className: "required", children: "*" })] })), _jsxs("div", { className: `phone-container ${disabled ? 'phone-disabled' : ''} ${className} ${size}`, children: [_jsx(PhoneInput, { country: !countryCode ? defaultCountry : countryCode.replace('+', '').toLowerCase(), value: phoneNumber, onChange: handlePhoneChange, placeholder: placeholder, enableAreaCodes: true, enableSearch: true, disabled: disabled, excludeCountries: ['il', ...excludeCountries], preferredCountries: preferredCountries, onlyCountries: onlyCountries, countryCodeEditable: false, inputClass: `${size}`, inputProps: {
|
|
33
|
+
style: {
|
|
34
|
+
direction: 'ltr',
|
|
35
|
+
textAlign: 'left',
|
|
36
|
+
},
|
|
37
|
+
}, containerStyle: {
|
|
38
|
+
direction: 'ltr',
|
|
39
|
+
} }), (phoneNumber || countryCode) && !disabled && (_jsx("div", { className: "clear-icon-container", onClick: resetData, children: _jsx(ClearIcon, { width: "1rem", height: "1rem" }) }))] }), errorMsg && _jsx("div", { className: "error-message", children: errorMsg })] }));
|
|
33
40
|
};
|
|
34
41
|
export default PhoneNumber;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "digitinary-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.256",
|
|
4
4
|
"description": "Digitinary UI Library",
|
|
5
5
|
"author": "Digitinary Company",
|
|
6
6
|
"repository": {
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"sync:types:meta": "node ./scripts/sync-types.js --meta",
|
|
42
42
|
"sync:auto": "npm run build:types && npm run sync:types",
|
|
43
43
|
"prepublishOnly": "npm run sync:auto",
|
|
44
|
-
"publish:types": "npm run sync:types:meta && (cd digitinary-ui-types && npm publish
|
|
44
|
+
"publish:types": "npm run sync:types:meta && (cd digitinary-ui-types && npm publish)",
|
|
45
45
|
"test:watch": "jest --watch",
|
|
46
46
|
"test:ci": "jest --runInBand"
|
|
47
47
|
},
|