@jars-labs/jars-components 1.0.56 → 1.0.58
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-BPg92wDN.js → index-BNZjZyyj.js} +27 -17
- package/dist/index-BNZjZyyj.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-Hh146ylX.js → lottie-DPfByjxI.js} +2 -2
- package/dist/{lottie-Hh146ylX.js.map → lottie-DPfByjxI.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/package.json +1 -1
- package/dist/index-BPg92wDN.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-DPfByjxI.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) {
|
|
@@ -438,7 +438,7 @@ var Input = function (_a) {
|
|
|
438
438
|
var showLabel = !hideLabel && (isFocused || value.trim());
|
|
439
439
|
var placeHolderValue = placeholder || label;
|
|
440
440
|
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) })] }));
|
|
441
|
+
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
442
|
}, [error]);
|
|
443
443
|
return (jsxs("div", { className: styles$m.container, children: [showLabel && (jsx("label", { className: classNames(styles$m.label, (_b = {},
|
|
444
444
|
_b[styles$m.labelError] = error && !isFocused,
|
|
@@ -483,13 +483,15 @@ var Autocomplete = function (_a) {
|
|
|
483
483
|
var options = _a.options, _b = _a.placeholder, placeholder = _b === undefined ? 'Search' : _b, onOptionSubmit = _a.onOptionSubmit, _c = _a.disabled, disabled = _c === undefined ? false : _c, onClear = _a.onClear, onSearchChange = _a.onSearchChange, searchValue = _a.searchValue, _d = _a.loading, loading = _d === undefined ? false : _d, _e = _a.minCharactersToShowDropdown, minCharactersToShowDropdown = _e === undefined ? 2 : _e, style = _a.style, initialValue = _a.initialValue;
|
|
484
484
|
var handleOptionSubmit = function (option) {
|
|
485
485
|
onOptionSubmit === null || onOptionSubmit === undefined ? undefined : onOptionSubmit(option);
|
|
486
|
-
onSearchChange((option === null || option === undefined ? undefined : option.label) || '');
|
|
487
486
|
};
|
|
487
|
+
var searchTrimmed = searchValue.trim();
|
|
488
488
|
var boldedOptions = options.map(function (option) {
|
|
489
|
-
var index = option.label
|
|
489
|
+
var index = option.label
|
|
490
|
+
.toLowerCase()
|
|
491
|
+
.indexOf(searchTrimmed.toLowerCase());
|
|
490
492
|
if (index === -1)
|
|
491
|
-
return (jsx(Dropdown.Option, { value: option.label, children: option.label }, option.id));
|
|
492
|
-
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 +
|
|
493
|
+
return (jsx(Dropdown.Option, { value: option.label, onClick: function () { return handleOptionSubmit(option); }, children: option.label }, option.id));
|
|
494
|
+
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));
|
|
493
495
|
});
|
|
494
496
|
var emptyOptions = (jsx(Dropdown.Option, { value: "No options found", style: { cursor: 'not-allowed', pointerEvents: 'none' }, children: "No matches found, try something else." }));
|
|
495
497
|
var loadingOptions = (jsx(Dropdown.Option, { value: "Loading...", disabled: true, style: { display: 'flex', justifyContent: 'center' }, children: jsx(Loader, {}) }));
|
|
@@ -522,13 +524,12 @@ var Autocomplete = function (_a) {
|
|
|
522
524
|
setHasClearedInitial(true);
|
|
523
525
|
setTouched(true);
|
|
524
526
|
onSearchChange('');
|
|
525
|
-
onClear === null || onClear === undefined ? undefined : onClear();
|
|
527
|
+
onClear === null || onClear === undefined ? undefined : onClear();
|
|
526
528
|
store.resetSelectedOption();
|
|
527
529
|
store.closeDropdown();
|
|
528
530
|
}, style: { visibility: inputValue ? 'visible' : 'hidden' }, children: jsx(Close, {}) }), onKeyDown: function (event) {
|
|
529
531
|
if (event.key !== 'Enter')
|
|
530
532
|
return;
|
|
531
|
-
// ENTER = free search, not a specific option
|
|
532
533
|
onOptionSubmit(null);
|
|
533
534
|
store.closeDropdown();
|
|
534
535
|
}, style: style })); } }));
|
|
@@ -810,7 +811,10 @@ var DateInput = function (_a) {
|
|
|
810
811
|
var showLabel = !hideLabel && (isFocused || value);
|
|
811
812
|
var placeHolderValue = showLabel ? placeholder : label;
|
|
812
813
|
var ErrorSection = useMemo(function () {
|
|
813
|
-
return holdSpace && (jsxs(Flex, { className: styles$m.error, gap: 4, ml:
|
|
814
|
+
return holdSpace && (jsxs(Flex, { className: styles$m.error, gap: 4, ml: 16, style: {
|
|
815
|
+
visibility: error ? 'visible' : 'hidden',
|
|
816
|
+
alignItems: 'flex-start',
|
|
817
|
+
}, 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 || '') })] }));
|
|
814
818
|
}, [error, holdSpace]);
|
|
815
819
|
var handleBlur = function (e) {
|
|
816
820
|
setIsFocused(false);
|
|
@@ -1043,6 +1047,8 @@ EyeShow.displayName = 'EyeShow';
|
|
|
1043
1047
|
* @param {function} onChange - The function to call when the input password value changes.
|
|
1044
1048
|
* @param {function} onBlur - The function to call when the input password loses focus.
|
|
1045
1049
|
* @param {string} error - The error message to display.
|
|
1050
|
+
* @param {boolean} disabled - Whether to disable the input password field.
|
|
1051
|
+
* @param {boolean} defaultVisible - Whether to show the password by default.
|
|
1046
1052
|
*
|
|
1047
1053
|
* @return Attaches PasswordInput to target element and displays options
|
|
1048
1054
|
*
|
|
@@ -1059,12 +1065,15 @@ EyeShow.displayName = 'EyeShow';
|
|
|
1059
1065
|
*
|
|
1060
1066
|
*/
|
|
1061
1067
|
var PasswordInput = function (_a) {
|
|
1062
|
-
var name = _a.name, label = _a.label, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, error = _a.error;
|
|
1063
|
-
var
|
|
1068
|
+
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;
|
|
1069
|
+
var _d = useState(defaultVisible), showPassword = _d[0], setShowPassword = _d[1];
|
|
1064
1070
|
var togglePasswordVisibility = function () {
|
|
1065
1071
|
setShowPassword(function (prevShowPassword) { return !prevShowPassword; });
|
|
1066
1072
|
};
|
|
1067
|
-
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: {
|
|
1073
|
+
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: {
|
|
1074
|
+
cursor: !disabled ? 'pointer' : 'default',
|
|
1075
|
+
opacity: disabled ? 0.5 : 1,
|
|
1076
|
+
}, children: showPassword ? (jsx(EyeShow, { width: "32px", height: "32px", stroke: "var(--color-neutral-600)" })) : (jsx(EyeHide, { width: "32px", height: "32px", stroke: "var(--color-neutral-600)" })) }) }));
|
|
1068
1077
|
};
|
|
1069
1078
|
PasswordInput.displayName = 'PasswordInput';
|
|
1070
1079
|
|
|
@@ -1330,10 +1339,11 @@ var styles$6 = {"container":"Select-module_container__T9nVd","input":"Select-mod
|
|
|
1330
1339
|
*/
|
|
1331
1340
|
var Select = function (_a) {
|
|
1332
1341
|
var _b, _c;
|
|
1333
|
-
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;
|
|
1342
|
+
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;
|
|
1334
1343
|
var _f = useState(false), isFocused = _f[0], setIsFocused = _f[1];
|
|
1335
1344
|
var _g = useState(false), isHovered = _g[0], setIsHovered = _g[1];
|
|
1336
1345
|
var _h = useState(false), isOpen = _h[0], setIsOpen = _h[1];
|
|
1346
|
+
var allowedValues = useMemo(function () { return data.map(function (option) { return option.value; }); }, [data]);
|
|
1337
1347
|
var showLabel = isFocused || value;
|
|
1338
1348
|
var placeHolderValue = showLabel ? placeholder : label;
|
|
1339
1349
|
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]);
|
|
@@ -1342,8 +1352,8 @@ var Select = function (_a) {
|
|
|
1342
1352
|
if (onBlur) {
|
|
1343
1353
|
onBlur();
|
|
1344
1354
|
}
|
|
1345
|
-
if (
|
|
1346
|
-
onChange(null);
|
|
1355
|
+
if (value && !allowedValues.includes(value)) {
|
|
1356
|
+
onChange === null || onChange === undefined ? undefined : onChange(null);
|
|
1347
1357
|
}
|
|
1348
1358
|
};
|
|
1349
1359
|
return (jsxs("div", { className: styles$6.container, children: [showLabel && (jsx("label", { className: classNames(styles$6.label, (_b = {},
|
|
@@ -1358,7 +1368,7 @@ var Select = function (_a) {
|
|
|
1358
1368
|
option: styles$6.option,
|
|
1359
1369
|
}, 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: {
|
|
1360
1370
|
className: styles$6.chevron,
|
|
1361
|
-
}, withCheckIcon: false, onDropdownOpen: function () { return setIsOpen(true); }, onDropdownClose: function () { return setIsOpen(false); }, disabled: disabled, searchable: searchable }) })] }));
|
|
1371
|
+
}, withCheckIcon: false, onDropdownOpen: function () { return setIsOpen(true); }, onDropdownClose: function () { return setIsOpen(false); }, disabled: disabled, searchable: searchable, allowDeselect: false, autoComplete: "new-password", renderOption: renderOption }) })] }));
|
|
1362
1372
|
};
|
|
1363
1373
|
Select.displayName = 'Select';
|
|
1364
1374
|
|
|
@@ -1987,4 +1997,4 @@ var Refresh = function (props) {
|
|
|
1987
1997
|
Refresh.displayName = 'Refresh';
|
|
1988
1998
|
|
|
1989
1999
|
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 };
|
|
1990
|
-
//# sourceMappingURL=index-
|
|
2000
|
+
//# sourceMappingURL=index-BNZjZyyj.js.map
|