@jars-labs/jars-components 1.0.57 → 1.0.59
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/dist/{index-BA-eBbTW.js → index-Dc304jQE.js} +32 -18
- package/dist/index-Dc304jQE.js.map +1 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.js +1 -1
- package/dist/{lottie-D45kmDuF.js → lottie-DPp0f6_W.js} +2 -2
- package/dist/{lottie-D45kmDuF.js.map → lottie-DPp0f6_W.js.map} +1 -1
- package/dist/types/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/dist/types/DateInput/DateInput.d.ts.map +1 -1
- package/dist/types/Input/Input.d.ts.map +1 -1
- package/dist/types/PasswordInput/PasswordInput.d.ts +4 -1
- package/dist/types/PasswordInput/PasswordInput.d.ts.map +1 -1
- package/dist/types/Select/Select.d.ts +4 -1
- package/dist/types/Select/Select.d.ts.map +1 -1
- package/dist/types/utils/stringUtils.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/index-BA-eBbTW.js.map +0 -1
|
@@ -183,7 +183,7 @@ var Animation = function (_a) {
|
|
|
183
183
|
var refVector = useRef(null);
|
|
184
184
|
var _b = useState(null), lottie = _b[0], setLottie = _b[1];
|
|
185
185
|
useEffect(function () {
|
|
186
|
-
import('./lottie-
|
|
186
|
+
import('./lottie-DPp0f6_W.js').then(function (n) { return n.l; }).then(function (Lottie) { return setLottie(Lottie.default); });
|
|
187
187
|
}, []);
|
|
188
188
|
useEffect(function () {
|
|
189
189
|
if (lottie && refVector.current) {
|
|
@@ -396,8 +396,10 @@ function capitalizeFirstSentenceLetter(input) {
|
|
|
396
396
|
else {
|
|
397
397
|
str = input;
|
|
398
398
|
}
|
|
399
|
-
|
|
400
|
-
|
|
399
|
+
return str
|
|
400
|
+
.replace(/_/g, ' ')
|
|
401
|
+
.toLowerCase()
|
|
402
|
+
.replace(/(^\s*[a-z])|([.!?]\s*[a-z])/g, function (match) { return match.toUpperCase(); });
|
|
401
403
|
}
|
|
402
404
|
|
|
403
405
|
/**
|
|
@@ -438,7 +440,7 @@ var Input = function (_a) {
|
|
|
438
440
|
var showLabel = !hideLabel && (isFocused || value.trim());
|
|
439
441
|
var placeHolderValue = placeholder || label;
|
|
440
442
|
var ErrorSection = useMemo(function () {
|
|
441
|
-
return holdSpace && (jsxs(Flex, { className: classNames(styles$m.error, error ? styles$m.errorVisible : styles$m.errorHidden), gap: 4, ml: 0, children: [jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsx(Text, { variant: "xs", className: classNames(styles$m.errorText), as: "span", children: capitalizeFirstSentenceLetter(error) })] }));
|
|
443
|
+
return holdSpace && (jsxs(Flex, { className: classNames(styles$m.error, error ? styles$m.errorVisible : styles$m.errorHidden), gap: 4, ml: 0, style: { alignItems: 'flex-start' }, children: [jsx(Flex, { style: { flexShrink: 0 }, children: jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }) }), jsx(Text, { variant: "xs", className: classNames(styles$m.errorText), as: "span", children: capitalizeFirstSentenceLetter(error) })] }));
|
|
442
444
|
}, [error]);
|
|
443
445
|
return (jsxs("div", { className: styles$m.container, children: [showLabel && (jsx("label", { className: classNames(styles$m.label, (_b = {},
|
|
444
446
|
_b[styles$m.labelError] = error && !isFocused,
|
|
@@ -484,11 +486,14 @@ var Autocomplete = function (_a) {
|
|
|
484
486
|
var handleOptionSubmit = function (option) {
|
|
485
487
|
onOptionSubmit === null || onOptionSubmit === undefined ? undefined : onOptionSubmit(option);
|
|
486
488
|
};
|
|
489
|
+
var searchTrimmed = searchValue.trim();
|
|
487
490
|
var boldedOptions = options.map(function (option) {
|
|
488
|
-
var index = option.label
|
|
491
|
+
var index = option.label
|
|
492
|
+
.toLowerCase()
|
|
493
|
+
.indexOf(searchTrimmed.toLowerCase());
|
|
489
494
|
if (index === -1)
|
|
490
|
-
return (jsx(Dropdown.Option, { value: option.label, children: option.label }, option.id));
|
|
491
|
-
return (jsxs(Dropdown.Option, { value: option.label, onClick: function () { return handleOptionSubmit(option); }, children: [option.label.slice(0, index), jsx("strong", { children: option.label.slice(index, index +
|
|
495
|
+
return (jsx(Dropdown.Option, { value: option.label, onClick: function () { return handleOptionSubmit(option); }, children: option.label }, option.id));
|
|
496
|
+
return (jsxs(Dropdown.Option, { value: option.label, onClick: function () { return handleOptionSubmit(option); }, children: [option.label.slice(0, index), jsx("strong", { children: option.label.slice(index, index + searchTrimmed.length) }), option.label.slice(index + searchTrimmed.length)] }, option.id));
|
|
492
497
|
});
|
|
493
498
|
var emptyOptions = (jsx(Dropdown.Option, { value: "No options found", style: { cursor: 'not-allowed', pointerEvents: 'none' }, children: "No matches found, try something else." }));
|
|
494
499
|
var loadingOptions = (jsx(Dropdown.Option, { value: "Loading...", disabled: true, style: { display: 'flex', justifyContent: 'center' }, children: jsx(Loader, {}) }));
|
|
@@ -808,7 +813,10 @@ var DateInput = function (_a) {
|
|
|
808
813
|
var showLabel = !hideLabel && (isFocused || value);
|
|
809
814
|
var placeHolderValue = showLabel ? placeholder : label;
|
|
810
815
|
var ErrorSection = useMemo(function () {
|
|
811
|
-
return holdSpace && (jsxs(Flex, { className: styles$m.error, gap: 4, ml:
|
|
816
|
+
return holdSpace && (jsxs(Flex, { className: styles$m.error, gap: 4, ml: 16, style: {
|
|
817
|
+
visibility: error ? 'visible' : 'hidden',
|
|
818
|
+
alignItems: 'flex-start',
|
|
819
|
+
}, children: [jsx(Flex, { style: { flexShrink: 0 }, children: jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }) }), jsx(Text, { variant: "xs", className: classNames(styles$m.errorText), children: capitalizeFirstSentenceLetter(error || '') })] }));
|
|
812
820
|
}, [error, holdSpace]);
|
|
813
821
|
var handleBlur = function (e) {
|
|
814
822
|
setIsFocused(false);
|
|
@@ -1041,6 +1049,8 @@ EyeShow.displayName = 'EyeShow';
|
|
|
1041
1049
|
* @param {function} onChange - The function to call when the input password value changes.
|
|
1042
1050
|
* @param {function} onBlur - The function to call when the input password loses focus.
|
|
1043
1051
|
* @param {string} error - The error message to display.
|
|
1052
|
+
* @param {boolean} disabled - Whether to disable the input password field.
|
|
1053
|
+
* @param {boolean} defaultVisible - Whether to show the password by default.
|
|
1044
1054
|
*
|
|
1045
1055
|
* @return Attaches PasswordInput to target element and displays options
|
|
1046
1056
|
*
|
|
@@ -1057,12 +1067,15 @@ EyeShow.displayName = 'EyeShow';
|
|
|
1057
1067
|
*
|
|
1058
1068
|
*/
|
|
1059
1069
|
var PasswordInput = function (_a) {
|
|
1060
|
-
var name = _a.name, label = _a.label, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, error = _a.error;
|
|
1061
|
-
var
|
|
1070
|
+
var name = _a.name, label = _a.label, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, error = _a.error, _b = _a.disabled, disabled = _b === undefined ? false : _b, _c = _a.defaultVisible, defaultVisible = _c === undefined ? false : _c;
|
|
1071
|
+
var _d = useState(defaultVisible), showPassword = _d[0], setShowPassword = _d[1];
|
|
1062
1072
|
var togglePasswordVisibility = function () {
|
|
1063
1073
|
setShowPassword(function (prevShowPassword) { return !prevShowPassword; });
|
|
1064
1074
|
};
|
|
1065
|
-
return (jsx(Input, { "data-testid": name, name: name, label: label, placeholder: placeholder, type: showPassword ? 'text' : 'password', value: value, onChange: onChange, onBlur: onBlur, error: error, rightSection: jsx(Flex, { onClick: togglePasswordVisibility, align: 'center', style: {
|
|
1075
|
+
return (jsx(Input, { "data-testid": name, name: name, label: label, disabled: disabled, placeholder: placeholder, type: showPassword ? 'text' : 'password', value: value, onChange: onChange, onBlur: onBlur, error: error, rightSection: jsx(Flex, { onClick: !disabled ? togglePasswordVisibility : undefined, align: 'center', style: {
|
|
1076
|
+
cursor: !disabled ? 'pointer' : 'default',
|
|
1077
|
+
opacity: disabled ? 0.5 : 1,
|
|
1078
|
+
}, children: showPassword ? (jsx(EyeShow, { width: "32px", height: "32px", stroke: "var(--color-neutral-600)" })) : (jsx(EyeHide, { width: "32px", height: "32px", stroke: "var(--color-neutral-600)" })) }) }));
|
|
1066
1079
|
};
|
|
1067
1080
|
PasswordInput.displayName = 'PasswordInput';
|
|
1068
1081
|
|
|
@@ -1328,10 +1341,11 @@ var styles$6 = {"container":"Select-module_container__T9nVd","input":"Select-mod
|
|
|
1328
1341
|
*/
|
|
1329
1342
|
var Select = function (_a) {
|
|
1330
1343
|
var _b, _c;
|
|
1331
|
-
var error = _a.error, description = _a.description, label = _a.label, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, name = _a.name, data = _a.data, _d = _a.disabled, disabled = _d === undefined ? false : _d, _e = _a.searchable, searchable = _e === undefined ? true : _e;
|
|
1344
|
+
var error = _a.error, description = _a.description, label = _a.label, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, name = _a.name, data = _a.data, _d = _a.disabled, disabled = _d === undefined ? false : _d, _e = _a.searchable, searchable = _e === undefined ? true : _e, renderOption = _a.renderOption;
|
|
1332
1345
|
var _f = useState(false), isFocused = _f[0], setIsFocused = _f[1];
|
|
1333
1346
|
var _g = useState(false), isHovered = _g[0], setIsHovered = _g[1];
|
|
1334
1347
|
var _h = useState(false), isOpen = _h[0], setIsOpen = _h[1];
|
|
1348
|
+
var allowedValues = useMemo(function () { return data.map(function (option) { return option.value; }); }, [data]);
|
|
1335
1349
|
var showLabel = isFocused || value;
|
|
1336
1350
|
var placeHolderValue = showLabel ? placeholder : label;
|
|
1337
1351
|
var ErrorSection = useMemo(function () { return (jsxs(Flex, { className: styles$6.error, gap: 4, ml: 0, style: { visibility: error ? 'visible' : 'hidden' }, children: [jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsx(Text, { variant: "xs", className: classNames(styles$6.errorText), children: error })] })); }, [error]);
|
|
@@ -1340,23 +1354,23 @@ var Select = function (_a) {
|
|
|
1340
1354
|
if (onBlur) {
|
|
1341
1355
|
onBlur();
|
|
1342
1356
|
}
|
|
1343
|
-
if (
|
|
1344
|
-
onChange(null);
|
|
1357
|
+
if (value && !allowedValues.includes(value)) {
|
|
1358
|
+
onChange === null || onChange === undefined ? undefined : onChange(null);
|
|
1345
1359
|
}
|
|
1346
1360
|
};
|
|
1347
1361
|
return (jsxs("div", { className: styles$6.container, children: [showLabel && (jsx("label", { className: classNames(styles$6.label, (_b = {},
|
|
1348
1362
|
_b[styles$6.labelError] = error && !isFocused,
|
|
1349
1363
|
_b[styles$6.labelFocused] = isFocused || isHovered,
|
|
1350
|
-
_b)), children: label })), jsx("div", { onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); },
|
|
1364
|
+
_b)), children: label })), jsx("div", { onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, children: jsx(Select$1, { classNames: {
|
|
1351
1365
|
input: classNames(styles$6.input, (_c = {},
|
|
1352
1366
|
_c[styles$6.inputError] = error,
|
|
1353
1367
|
_c)),
|
|
1354
1368
|
label: styles$6['default-label'],
|
|
1355
1369
|
dropdown: styles$6.dropdown,
|
|
1356
1370
|
option: styles$6.option,
|
|
1357
|
-
}, data: data, placeholder: placeHolderValue, value: value, name: name || '', onChange: onChange, comboboxProps: { zIndex: 1000 }, error: ErrorSection, onFocus: function () { return setIsFocused(true); }, onBlur: handleBlur, inputWrapperOrder: ['label', 'input', 'description', 'error'], description: !error && description && jsx(Text, { variant: "xs", children: description }), descriptionProps: { className: styles$6.description }, errorProps: { className: styles$6.error }, rightSection: jsx(Chevron, { rotate: isOpen ? 90 : 270 }), rightSectionProps: {
|
|
1371
|
+
}, data: data, placeholder: placeHolderValue, value: value, name: name || '', onChange: onChange, comboboxProps: { zIndex: 1000 }, error: ErrorSection, onFocus: function () { return setIsFocused(true); }, onBlur: handleBlur, inputWrapperOrder: ['label', 'input', 'description', 'error'], description: !error && description && jsx(Text, { variant: "xs", children: description }), descriptionProps: { className: styles$6.description }, errorProps: { className: styles$6.error }, rightSection: jsx(Chevron, { rotate: isOpen ? 90 : 270 }), rightSectionPointerEvents: "none", rightSectionProps: {
|
|
1358
1372
|
className: styles$6.chevron,
|
|
1359
|
-
}, withCheckIcon: false, onDropdownOpen: function () { return setIsOpen(true); }, onDropdownClose: function () { return setIsOpen(false); }, disabled: disabled, searchable: searchable }) })] }));
|
|
1373
|
+
}, withCheckIcon: false, onDropdownOpen: function () { return setIsOpen(true); }, onDropdownClose: function () { return setIsOpen(false); }, disabled: disabled, searchable: searchable, allowDeselect: false, autoComplete: "new-password", renderOption: renderOption }) })] }));
|
|
1360
1374
|
};
|
|
1361
1375
|
Select.displayName = 'Select';
|
|
1362
1376
|
|
|
@@ -1985,4 +1999,4 @@ var Refresh = function (props) {
|
|
|
1985
1999
|
Refresh.displayName = 'Refresh';
|
|
1986
2000
|
|
|
1987
2001
|
export { ChevronCollapse as $, Accordion as A, Badge as B, Card as C, DateInput as D, EnterCodeInput as E, FileInput as F, ToastContainer as G, Tooltip as H, IncrementNumber as I, Multiselect as J, NavBarSide as K, Link as L, Message as M, NavBar as N, Alert as O, PasswordInput as P, Arrow as Q, RadioButton as R, SegmentedControl as S, Table as T, Attachment as U, AvatarPlaceholder as V, Bell as W, Calendar as X, Cat as Y, Chat as Z, Chevron as _, AccordionItem as a, Clock as a0, Close as a1, Cloud as a2, Delete as a3, Document as a4, Dog as a5, EyeHide as a6, EyeShow as a7, Fingerprint as a8, Google as a9, Visa as aA, Warning as aB, World as aC, AISearch as aD, AIGenerate as aE, AIPrompt as aF, AIRedo as aG, Refresh as aH, capitalizeFirstSentenceLetter as aI, Grid as aa, Hamburger as ab, HappyFace as ac, House as ad, HouseTime as ae, Identification as af, Info as ag, Location as ah, Mail as ai, Menu as aj, MenuTouched as ak, Notification as al, Open as am, Pets as an, Phone as ao, Plaid as ap, Plus as aq, Remove as ar, Search as as, Shield as at, StepIndicator as au, ThreeDots as av, ThumbsDown as aw, Tick as ax, Umbrello as ay, Upload as az, AccordionControl as b, AccordionPanel as c, ActionIcon as d, Animation as e, Autocomplete as f, getDefaultExportFromCjs as g, badgeVariantMap as h, Button as i, cardStatusVariantMap as j, CardStatus as k, Checkbox as l, Chip as m, Dropdown as n, FileUpload as o, Input as p, LinkModal as q, Loader as r, Modal as s, Pagination as t, Select as u, StatusBadge as v, Stepper as w, Tabs as x, Text as y, Textarea as z };
|
|
1988
|
-
//# sourceMappingURL=index-
|
|
2002
|
+
//# sourceMappingURL=index-Dc304jQE.js.map
|