@jars-labs/jars-components 1.1.2 → 1.1.4

package/dist/{index-CYIjT38s.js → index-pzIR0dAA.js}

@@ -183,7 +183,7 @@ var Animation = function (_a) {
     var refVector = useRef(null);
     var _b = useState(null), lottie = _b[0], setLottie = _b[1];
     useEffect(function () {
-        import('./lottie-DsKwcNMJ.js').then(function (n) { return n.l; }).then(function (Lottie) { return setLottie(Lottie.default); });
+        import('./lottie-CTM27qrd.js').then(function (n) { return n.l; }).then(function (Lottie) { return setLottie(Lottie.default); });
     }, []);
     useEffect(function () {
         if (lottie && refVector.current) {
@@ -488,22 +488,30 @@ Loader.displayName = 'Loader';
  * @param minCharactersToShowDropdown - minimum characters to show dropdown options
  * @param style - custom styles for the input
  * @param initialValue - default value for the input (AutocompleteOption)
+ * @param renderOption - function to render the option (option: AutocompleteOption, highlightedLabel: React.ReactNode)
  *
  * @return Autocomplete component with dropdown
  */
 var Autocomplete = function (_a) {
-    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;
+    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, renderOption = _a.renderOption;
     var handleOptionSubmit = function (option) {
         onOptionSubmit === null || onOptionSubmit === undefined ? undefined : onOptionSubmit(option);
     };
-    var searchTrimmed = searchValue.trim();
-    var boldedOptions = options.map(function (option) {
+    var getHighlightedLabel = function (option) {
         var index = option.label
             .toLowerCase()
             .indexOf(searchTrimmed.toLowerCase());
-        if (index === -1)
-            return (jsx(Dropdown.Option, { value: option.label, onClick: function () { return handleOptionSubmit(option); }, children: option.label }, option.id));
-        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));
+        if (index === -1) {
+            return option.label;
+        }
+        return (jsxs(Fragment, { children: [option.label.slice(0, index), jsx("strong", { children: option.label.slice(index, index + searchTrimmed.length) }), option.label.slice(index + searchTrimmed.length)] }));
+    };
+    var searchTrimmed = searchValue.trim();
+    var boldedOptions = options.map(function (option) {
+        var highlightedLabel = getHighlightedLabel(option);
+        return (jsx(Dropdown.Option, { value: option.label, onClick: function () { return handleOptionSubmit(option); }, children: renderOption
+                ? renderOption(option, highlightedLabel)
+                : highlightedLabel }, option.id));
     });
     var emptyOptions = (jsx(Dropdown.Option, { value: "No options found", style: { cursor: 'not-allowed', pointerEvents: 'none' }, children: "No matches found, try something else." }));
     var loadingOptions = (jsx(Dropdown.Option, { value: "Loading...", disabled: true, style: { display: 'flex', justifyContent: 'center' }, children: jsx(Loader, {}) }));
@@ -648,7 +656,7 @@ var Badge = forwardRef(function (_a, ref) {
 });
 Badge.displayName = 'Badge';
 
-var styles$l = {"button":"Button-module_button__7BLGt","label":"Button-module_label__447Ll","button-flex":"Button-module_button-flex__bzVRB","button--filled":"Button-module_button--filled__BKGu2","label-color--filled":"Button-module_label-color--filled__wJHlw","label-color--filled--disabled":"Button-module_label-color--filled--disabled__BbMbV","button--outlined":"Button-module_button--outlined__QZysw","label-color--outlined":"Button-module_label-color--outlined__seGi5","label-color--outlined--disabled":"Button-module_label-color--outlined--disabled__qXPjI","button--underlined":"Button-module_button--underlined__BsY5s","label-color--underlined":"Button-module_label-color--underlined__ymMfq","label-color--underlined--disabled":"Button-module_label-color--underlined--disabled__TBDd8","button--underlined-neutral":"Button-module_button--underlined-neutral__30A91","label-color--underlined-neutral":"Button-module_label-color--underlined-neutral__1xWMY","label-color--underlined-neutral--disabled":"Button-module_label-color--underlined-neutral--disabled__RQKW7","button--delete":"Button-module_button--delete__Xqpbl","label-color--delete":"Button-module_label-color--delete__iPB3X","label-color--delete--disabled":"Button-module_label-color--delete--disabled__lJkM6","button--small":"Button-module_button--small__3npYU","button--medium":"Button-module_button--medium__WRSIQ","button--large":"Button-module_button--large__bGVS1"};
+var styles$l = {"button":"Button-module_button__7BLGt","label":"Button-module_label__447Ll","button-flex":"Button-module_button-flex__bzVRB","button--filled":"Button-module_button--filled__BKGu2","label-color--filled":"Button-module_label-color--filled__wJHlw","label-color--filled--disabled":"Button-module_label-color--filled--disabled__BbMbV","button--outlined":"Button-module_button--outlined__QZysw","label-color--outlined":"Button-module_label-color--outlined__seGi5","label-color--outlined--disabled":"Button-module_label-color--outlined--disabled__qXPjI","button--outlined-error":"Button-module_button--outlined-error__xR07R","label-color--outlined-error":"Button-module_label-color--outlined-error__-2cf9","label-color--outlined-error--disabled":"Button-module_label-color--outlined-error--disabled__LZB7z","button--underlined":"Button-module_button--underlined__BsY5s","label-color--underlined":"Button-module_label-color--underlined__ymMfq","label-color--underlined--disabled":"Button-module_label-color--underlined--disabled__TBDd8","button--underlined-neutral":"Button-module_button--underlined-neutral__30A91","label-color--underlined-neutral":"Button-module_label-color--underlined-neutral__1xWMY","label-color--underlined-neutral--disabled":"Button-module_label-color--underlined-neutral--disabled__RQKW7","button--delete":"Button-module_button--delete__Xqpbl","label-color--delete":"Button-module_label-color--delete__iPB3X","label-color--delete--disabled":"Button-module_label-color--delete--disabled__lJkM6","button--small":"Button-module_button--small__3npYU","button--medium":"Button-module_button--medium__WRSIQ","button--large":"Button-module_button--large__bGVS1"};
 
 var Button = forwardRef(function (_a, ref) {
     var _b;
@@ -915,7 +923,7 @@ var Clock = function (_a) {
 Clock.displayName = 'Clock';
 
 var Document = function (props) {
-    return (jsxs(Icon, __assign({}, props, { children: [jsx("path", { fillRule: "evenodd", stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M24.885 8.552l-3.77-3.77c-.5-.5-1.179-.782-1.886-.782H9.667A2.666 2.666 0 007 6.667v18.666A2.666 2.666 0 009.667 28H23a2.666 2.666 0 002.667-2.667V10.437c0-.706-.282-1.385-.782-1.885v0z", clipRule: "evenodd" }), jsx("path", { stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M25.667 10.667h-5.334A1.334 1.334 0 0119 9.333V4" })] })));
+    return (jsxs(Icon, __assign({}, props, { children: [jsx("path", { fillRule: "evenodd", stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: props.strokeWidth || '1.5', d: "M24.885 8.552l-3.77-3.77c-.5-.5-1.179-.782-1.886-.782H9.667A2.666 2.666 0 007 6.667v18.666A2.666 2.666 0 009.667 28H23a2.666 2.666 0 002.667-2.667V10.437c0-.706-.282-1.385-.782-1.885v0z", clipRule: "evenodd" }), jsx("path", { stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: props.strokeWidth || '1.5', d: "M25.667 10.667h-5.334A1.334 1.334 0 0119 9.333V4" })] })));
 };
 Document.displayName = 'Document';
 
@@ -1305,19 +1313,13 @@ var MultiselectInternal = function (_a) {
     var dropdownOptions = useMemo(function () {
         var allSelected = filteredTempOptions.length > 0 &&
             filteredTempOptions.every(function (o) { return o.selected; });
-        var selectAllOption = (jsx(Dropdown.Option, { value: "select_all", py: 12, onClick: function (e) { return e.stopPropagation(); }, children: jsx(Checkbox, { label: "Select All", checked: allSelected, onChange: function (e) {
-                    e.stopPropagation();
-                    setTemporaryOptions(function (prev) {
-                        return prev.map(function (item) { return (__assign(__assign({}, item), { selected: !allSelected })); });
-                    });
-                }, w: "100%" }) }, "select_all"));
+        var selectAllOption = (jsx(Dropdown.Option, { value: "select_all", py: 12, onClick: function () {
+                return setTemporaryOptions(function (prev) {
+                    return prev.map(function (item) { return (__assign(__assign({}, item), { selected: !allSelected })); });
+                });
+            }, children: jsx(Box, { style: { pointerEvents: 'none' }, children: jsx(Checkbox, { label: "Select All", checked: allSelected, w: "100%" }) }) }, "select_all"));
         // Now build the rest of the normal checkboxes
-        var normalOptions = filteredTempOptions.map(function (option) { return (jsx(Dropdown.Option, { value: option.value, py: 12, disabled: option.disabled, 
-            // Don’t close on click
-            onClick: function (e) { return e.stopPropagation(); }, children: jsx(Checkbox, { label: option.label, checked: option.selected, disabled: option.disabled, onChange: function (e) {
-                    e.stopPropagation();
-                    handleDraftToggle(option);
-                }, w: "100%" }, option.value) }, option.value)); });
+        var normalOptions = filteredTempOptions.map(function (option) { return (jsx(Dropdown.Option, { value: option.value, py: 12, disabled: option.disabled, onClick: function () { return handleDraftToggle(option); }, children: jsx(Box, { style: { pointerEvents: 'none' }, children: jsx(Checkbox, { label: option.label, checked: option.selected, disabled: option.disabled, w: "100%" }, option.value) }) }, option.value)); });
         var emptyOptions = (jsx(Dropdown.Option, { value: "No options found", style: { cursor: 'not-allowed', pointerEvents: 'none' }, children: "No matches found, try something else." }));
         return normalOptions.length > 0
             ? __spreadArray([selectAllOption], normalOptions, true) : [emptyOptions];
@@ -1383,7 +1385,7 @@ var MultiselectInternal = function (_a) {
                             _b[styles$o.inputError] = error && !isFocused,
                             _b[multiselectStyles.inputFocused] = isFocused || store.dropdownOpened,
                             _b[multiselectStyles.disabled] = disabled,
-                            _b)), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: function () { return store.toggleDropdown(); }, onFocus: function () { return setIsFocused(true); }, onBlur: handleBlur, tabIndex: 0, children: [jsx(PillAndSearchSection, { store: store, maxPills: maxPills }), jsx(Chevron, { rotate: store.dropdownOpened ? 90 : 270 })] }), error ? ErrorSection : DescriptionSection] }));
+                            _b)), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: function () { return store.toggleDropdown(); }, onFocus: function () { return setIsFocused(true); }, onBlur: handleBlur, children: [jsx(PillAndSearchSection, { store: store, maxPills: maxPills }), jsx(Chevron, { rotate: store.dropdownOpened ? 90 : 270 })] }), error ? ErrorSection : DescriptionSection] }));
         } }));
 };
 MultiselectInternal.displayName = 'MultiselectInternal';
@@ -1473,12 +1475,12 @@ var Pagination = function (_a) {
 Pagination.displayName = 'Pagination';
 
 var EyeHide = function (props) {
-    return (jsx(Icon, __assign({}, props, { children: jsx("path", { stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M16 25.333c-1.123 0-2.247-.237-3.339-.66M16 25.333c4.66 0 9.32-4.044 11.843-8.709.209-.388.209-.859 0-1.247a20.174 20.174 0 00-2.404-3.482M6.667 25.333L25.333 6.667M13.031 18.969a4.2 4.2 0 015.94-5.94m3.754-3.754C20.663 7.679 18.331 6.667 16 6.667c-4.66 0-9.32 4.044-11.843 8.71-.209.388-.209.859 0 1.247 1.262 2.332 3.056 4.508 5.118 6.103" }) })));
+    return (jsx(Icon, __assign({}, props, { children: jsx("path", { stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: props.strokeWidth || '1.5', d: "M16 25.333c-1.123 0-2.247-.237-3.339-.66M16 25.333c4.66 0 9.32-4.044 11.843-8.709.209-.388.209-.859 0-1.247a20.174 20.174 0 00-2.404-3.482M6.667 25.333L25.333 6.667M13.031 18.969a4.2 4.2 0 015.94-5.94m3.754-3.754C20.663 7.679 18.331 6.667 16 6.667c-4.66 0-9.32 4.044-11.843 8.71-.209.388-.209.859 0 1.247 1.262 2.332 3.056 4.508 5.118 6.103" }) })));
 };
 EyeHide.displayName = 'EyeHide';
 
 var EyeShow = function (props) {
-    return (jsxs(Icon, __assign({}, props, { children: [jsx("path", { fillRule: "evenodd", stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M18.83 13.173a4.005 4.005 0 010 5.66 4.005 4.005 0 01-5.66 0 4.005 4.005 0 010-5.66 4 4 0 015.66 0z", clipRule: "evenodd" }), jsx("path", { fillRule: "evenodd", stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M4 16c0-.879.203-1.748.595-2.55C6.615 9.322 11.079 6.668 16 6.668c4.921 0 9.385 2.654 11.405 6.784.392.801.595 1.67.595 2.549s-.203 1.748-.595 2.55c-2.02 4.129-6.484 6.783-11.405 6.783-4.921 0-9.385-2.654-11.405-6.784A5.795 5.795 0 014 16z", clipRule: "evenodd" })] })));
+    return (jsxs(Icon, __assign({}, props, { children: [jsx("path", { fillRule: "evenodd", stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: props.strokeWidth || '1.5', d: "M18.83 13.173a4.005 4.005 0 010 5.66 4.005 4.005 0 01-5.66 0 4.005 4.005 0 010-5.66 4 4 0 015.66 0z", clipRule: "evenodd" }), jsx("path", { fillRule: "evenodd", stroke: props.stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: props.strokeWidth || '1.5', d: "M4 16c0-.879.203-1.748.595-2.55C6.615 9.322 11.079 6.668 16 6.668c4.921 0 9.385 2.654 11.405 6.784.392.801.595 1.67.595 2.549s-.203 1.748-.595 2.55c-2.02 4.129-6.484 6.783-11.405 6.783-4.921 0-9.385-2.654-11.405-6.784A5.795 5.795 0 014 16z", clipRule: "evenodd" })] })));
 };
 EyeShow.displayName = 'EyeShow';
 
@@ -2084,7 +2086,7 @@ var Plus = function (_a) {
 Plus.displayName = 'Plus';
 
 var Refresh = function (props) {
-    return (jsxs(Icon, __assign({}, props, { children: [jsx("path", { d: "M20.3846 16.5176L24.077 15.5945L25 19.2869", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M24.077 15.5945C23.292 17.9399 21.8117 19.9908 19.8332 21.4747C17.8546 22.9587 15.4713 23.8053 13 23.9022C10.7258 23.9026 8.5065 23.2031 6.64367 21.8984C4.78085 20.5937 3.36474 18.7474 2.58771 16.6099", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M5.61538 9.133L1.92308 10.0561L1 6.36377", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M1.92303 10.0561C2.74932 7.73647 4.24047 5.71157 6.21039 4.23411C8.18031 2.75667 10.5417 1.89214 13 1.74841C15.2853 1.75484 17.5127 2.46797 19.3768 3.79004C21.241 5.11211 22.6505 6.97838 23.4123 9.13303", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
+    return (jsxs(Icon, __assign({}, props, { children: [jsx("path", { d: "M20.3846 16.5176L24.077 15.5945L25 19.2869", stroke: "black", strokeWidth: props.strokeWidth || '1.5', strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M24.077 15.5945C23.292 17.9399 21.8117 19.9908 19.8332 21.4747C17.8546 22.9587 15.4713 23.8053 13 23.9022C10.7258 23.9026 8.5065 23.2031 6.64367 21.8984C4.78085 20.5937 3.36474 18.7474 2.58771 16.6099", stroke: "black", strokeWidth: props.strokeWidth || '1.5', strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M5.61538 9.133L1.92308 10.0561L1 6.36377", stroke: "black", strokeWidth: props.strokeWidth || '1.5', strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M1.92303 10.0561C2.74932 7.73647 4.24047 5.71157 6.21039 4.23411C8.18031 2.75667 10.5417 1.89214 13 1.74841C15.2853 1.75484 17.5127 2.46797 19.3768 3.79004C21.241 5.11211 22.6505 6.97838 23.4123 9.13303", stroke: "black", strokeWidth: props.strokeWidth || '1.5', strokeLinecap: "round", strokeLinejoin: "round" })] })));
 };
 Refresh.displayName = 'Refresh';
 
@@ -2122,4 +2124,4 @@ var World = function (_a) {
 World.displayName = 'World';
 
 export { Attachment as $, Accordion as A, Badge as B, Card as C, DateInput as D, EnterCodeInput as E, FileInput as F, Stepper as G, Tabs as H, IncrementNumber as I, Text as J, Textarea as K, Link as L, Message as M, NavBar as N, ToastContainer as O, Pagination as P, Tooltip as Q, RadioButton as R, SegmentedControl as S, Table as T, AIGenerate as U, AIPrompt as V, AIRedo as W, AISearch as X, Alert as Y, Archive as Z, Arrow as _, AccordionItem as a, AvatarPlaceholder as a0, Bell as a1, Calendar as a2, Camera as a3, Cat as a4, Chat as a5, Check as a6, Chevron as a7, ChevronCollapse as a8, Clock as a9, Plaid as aA, Plus as aB, Refresh as aC, Remove as aD, Search as aE, Shield as aF, StepIndicator as aG, ThreeDots as aH, ThumbsDown as aI, Tick as aJ, Umbrello as aK, Upload as aL, Visa as aM, Warning as aN, World as aO, capitalizeFirstSentenceLetter as aP, Close as aa, Cloud as ab, CloudUpload as ac, CreditCard as ad, Delete as ae, Document as af, Dog as ag, EyeHide as ah, EyeShow as ai, Fingerprint as aj, Google as ak, Grid as al, Hamburger as am, HappyFace as an, House as ao, HouseTime as ap, Identification as aq, Info as ar, Location as as, Mail as at, Menu as au, MenuTouched as av, Notification as aw, Open as ax, Pets as ay, Phone as az, AccordionControl as b, AccordionPanel as c, ActionIcon as d, Animation as e, Autocomplete as f, getDefaultExportFromCjs as g, Avatar as h, badgeVariantMap as i, Button as j, cardStatusVariantMap as k, CardStatus as l, Checkbox as m, Chip as n, Dropdown as o, FileUpload as p, Input as q, LinkModal as r, Loader as s, Modal as t, Multiselect as u, NavBarSide as v, PasswordInput as w, Pill as x, Select as y, StatusBadge as z };
-//# sourceMappingURL=index-CYIjT38s.js.map
+//# sourceMappingURL=index-pzIR0dAA.js.map