@jars-labs/jars-components 1.0.55 → 1.0.57

package/dist/{index-BzZLWAGH.js → index-BA-eBbTW.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-Ds7FsI6P.js').then(function (n) { return n.l; }).then(function (Lottie) { return setLottie(Lottie.default); });
+        import('./lottie-D45kmDuF.js').then(function (n) { return n.l; }).then(function (Lottie) { return setLottie(Lottie.default); });
     }, []);
     useEffect(function () {
         if (lottie && refVector.current) {
@@ -464,31 +464,31 @@ Loader.displayName = 'Loader';
  * Autocomplete component
  * Autocomplete user input with any list of options
  *
- * @param options - list of options to display in dropdown
+ * @param options - list of options to display in dropdown (array of AutocompleteOption)
  * @param label - input label
  * @param placeholder - input placeholder
- * @param onOptionSubmit - function to call when option is selected by click or enter
+ * @param onOptionSubmit - function to call when option is selected by click or enter (option: AutocompleteOption | null)
+ * @param onClear - function to call when clear button is clicked
  * @param disabled - disable input
  * @param onSearchChange - function to call when search value changes
  * @param searchValue - search value
  * @param loading - show loading spinner
  * @param minCharactersToShowDropdown - minimum characters to show dropdown options
  * @param style - custom styles for the input
- * @param initialValue - default value for the input
+ * @param initialValue - default value for the input (AutocompleteOption)
  *
  * @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, 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 handleOptionSubmit = function (value) {
-        onOptionSubmit === null || onOptionSubmit === undefined ? undefined : onOptionSubmit(value);
-        onSearchChange(value);
+    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 handleOptionSubmit = function (option) {
+        onOptionSubmit === null || onOptionSubmit === undefined ? undefined : onOptionSubmit(option);
     };
     var boldedOptions = options.map(function (option) {
-        var index = option.toLowerCase().indexOf(searchValue.toLowerCase());
+        var index = option.label.toLowerCase().indexOf(searchValue.toLowerCase());
         if (index === -1)
-            return (jsx(Dropdown.Option, { value: option, children: option }, option));
-        return (jsxs(Dropdown.Option, { value: option, onClick: function () { return handleOptionSubmit(option); }, children: [option.slice(0, index), jsx("strong", { children: option.slice(index, index + searchValue.length) }), option.slice(index + searchValue.length)] }, option));
+            return (jsx(Dropdown.Option, { value: option.label, 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 + searchValue.length) }), option.label.slice(index + searchValue.length)] }, 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, {}) }));
@@ -498,12 +498,15 @@ var Autocomplete = function (_a) {
         return boldedOptions.length > 0 ? boldedOptions : emptyOptions;
     };
     var _f = useState(false), touched = _f[0], setTouched = _f[1];
-    return (jsx(Dropdown, { options: renderOptions(), onOptionSubmit: handleOptionSubmit, maxHeight: 250, closeOnSelect: true, children: function (store) { return (jsx(Input, { hideLabel: true, label: "Search", placeholder: placeholder, onClick: function () {
+    var _g = useState(false), hasClearedInitial = _g[0], setHasClearedInitial = _g[1];
+    var inputValue = touched || hasClearedInitial ? searchValue : initialValue || '';
+    return (jsx(Dropdown, { options: renderOptions(), maxHeight: 250, closeOnSelect: true, children: function (store) { return (jsx(Input, { hideLabel: true, label: "Search", placeholder: placeholder, onClick: function () {
                 return !disabled &&
                     searchValue.length >= minCharactersToShowDropdown &&
                     store.toggleDropdown();
-            }, onChange: function (event) {
+            }, value: inputValue, onChange: function (event) {
                 setTouched(true);
+                setHasClearedInitial(true);
                 var value = event.currentTarget.value;
                 onSearchChange(value);
                 if (!store.dropdownOpened &&
@@ -514,20 +517,18 @@ var Autocomplete = function (_a) {
                     store.resetSelectedOption();
                     store.closeDropdown();
                 }
-            }, value: touched ? searchValue : initialValue || '', holdSpace: false, leftSection: jsx(Search, {}), rightSection: jsx(ActionIcon, { radius: "sm", variant: "light", onClick: function () {
+            }, holdSpace: false, leftSection: jsx(Search, {}), rightSection: jsx(ActionIcon, { radius: "sm", variant: "light", onClick: function () {
+                    setHasClearedInitial(true);
+                    setTouched(true);
                     onSearchChange('');
-                    onOptionSubmit === null || onOptionSubmit === undefined ? undefined : onOptionSubmit('');
+                    onClear === null || onClear === undefined ? undefined : onClear();
                     store.resetSelectedOption();
                     store.closeDropdown();
-                }, style: { visibility: searchValue ? 'visible' : 'hidden' }, children: jsx(Close, {}) }), onKeyDown: function (event) {
-                if (event.key === 'Enter' && options.length !== 1) {
-                    handleOptionSubmit(searchValue);
-                    store.toggleDropdown();
-                }
-                else if (event.key === 'Enter' && !loading) {
-                    handleOptionSubmit(options[0]);
-                    store.toggleDropdown();
-                }
+                }, style: { visibility: inputValue ? 'visible' : 'hidden' }, children: jsx(Close, {}) }), onKeyDown: function (event) {
+                if (event.key !== 'Enter')
+                    return;
+                onOptionSubmit(null);
+                store.closeDropdown();
             }, style: style })); } }));
 };
 Autocomplete.displayName = 'Autocomplete';
@@ -1979,9 +1980,9 @@ var AIRedo = function (props) {
 AIRedo.displayName = 'AI Redo';
 
 var Refresh = function (props) {
-    return (jsxs(Icon, __assign({}, props, { children: [jsx("path", { d: "M20.3846 16.5176L24.077 15.5945L25 19.2869", stroke: props.stroke, 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: props.stroke, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M5.61538 9.133L1.92308 10.0561L1 6.36377", stroke: props.stroke, 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: props.stroke, 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: "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" })] })));
 };
 Refresh.displayName = 'Refresh';
 
 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 };
-//# sourceMappingURL=index-BzZLWAGH.js.map
+//# sourceMappingURL=index-BA-eBbTW.js.map