@jars-labs/jars-components 1.0.10 → 1.0.11

package/dist/{index-SJDXCSJk.js → index-COG80HZJ.js}

@@ -160,7 +160,7 @@ var Animation = function (_a) {
     var refVector = useRef(null);
     var _b = useState(null), lottie = _b[0], setLottie = _b[1];
     useEffect(function () {
-        import('./lottie-CMIUDj7j.js').then(function (n) { return n.l; }).then(function (Lottie) { return setLottie(Lottie.default); });
+        import('./lottie-BBj9Bhzx.js').then(function (n) { return n.l; }).then(function (Lottie) { return setLottie(Lottie.default); });
     }, []);
     useEffect(function () {
         if (lottie && refVector.current) {
@@ -1031,8 +1031,8 @@ var Umbrello = function (props) {
 };
 
 var NavBar = function (_a) {
-    var children = _a.children;
-    return (jsxs(Flex, { p: "24px 120px", bg: "var(--color-white)", align: "center", justify: "space-between", children: [jsx("a", { href: "/dashboard/management-companies", children: jsx(Umbrello, { fill: "var(--color-neutral-600)", width: "200", height: "40", viewBox: "0 0 200 40" }) }), children] }));
+    var children = _a.children, logo = _a.logo, homePath = _a.homePath, rest = __rest(_a, ["children", "logo", "homePath"]);
+    return (jsxs(Flex, __assign({ p: "24px 120px", bg: "var(--color-white)", align: "center", justify: "space-between", component: "nav" }, rest, { children: [jsx("a", { href: homePath || '/', children: logo || (jsx(Umbrello, { fill: "var(--color-neutral-600)", width: "200", height: "40", viewBox: "0 0 200 40" })) }), children] })));
 };
 
 var Pagination = function (_a) {
@@ -1293,7 +1293,7 @@ var Tooltip = function (_a) {
         }, offset: 4, children: children })));
 };
 
-var multiselectStyles = {"input":"Multiselect-module_input__lwmrJ","disabled":"Multiselect-module_disabled__DyqLt","pill":"Multiselect-module_pill__NwXcT"};
+var multiselectStyles = {"input":"Multiselect-module_input__lwmrJ","inputFocused":"Multiselect-module_inputFocused__rm-OP","disabled":"Multiselect-module_disabled__DyqLt","pill":"Multiselect-module_pill__NwXcT"};
 
 /**
  * MultiSelect component, use it to select multiple options from a list of options
@@ -1305,99 +1305,160 @@ var multiselectStyles = {"input":"Multiselect-module_input__lwmrJ","disabled":"M
  * @param {string} placeholder - The placeholder of the select
  * @param {string} error - The error message to display
  * @param {string} description - The description to display
+ * @param {boolean} disabled - Whether the select is disabled
+ * @param {number} maxPills - The maximum number of pills to display, the rest will be displayed as a single pill with the number of remaining items
  *
  * @returns {React.ReactElement} The MultiSelect component
  *
  */
 var Multiselect = function (_a) {
-    var data = _a.data, onApply = _a.onApply, error = _a.error, description = _a.description, label = _a.label, placeholder = _a.placeholder, onBlur = _a.onBlur, _b = _a.disabled, disabled = _b === undefined ? false : _b;
+    var data = _a.data, onApply = _a.onApply, error = _a.error, description = _a.description, label = _a.label, placeholder = _a.placeholder, onBlur = _a.onBlur, _b = _a.disabled, disabled = _b === undefined ? false : _b, _c = _a.maxPills, maxPills = _c === undefined ? 3 : _c;
     var dataKey = useMemo(function () { return data.map(function (o) { return o.value; }).join('_'); }, [data]);
-    return (jsx(MultiselectInternal, { data: data, onApply: onApply, error: error, description: description, label: label, placeholder: placeholder, onBlur: onBlur, disabled: disabled }, dataKey));
+    return (jsx(MultiselectInternal, { data: data, onApply: onApply, error: error, description: description, label: label, placeholder: placeholder, onBlur: onBlur, disabled: disabled, maxPills: maxPills }, dataKey));
 };
 /**
- * Private component that holds the local state (`temporaryOptions`)
+ * The internal component that maintains:
+ * - committedOptions (pills shown when dropdown is closed)
+ * - temporaryOptions (draft selection while dropdown is open)
+ * - searchTerm (to filter the dropdown’s list)
  */
 var MultiselectInternal = function (_a) {
-    var data = _a.data, onApply = _a.onApply, error = _a.error, description = _a.description, label = _a.label, placeholder = _a.placeholder, onBlur = _a.onBlur, disabled = _a.disabled;
-    var _b = useState(data), temporaryOptions = _b[0], setTemporaryOptions = _b[1];
-    var _c = useState(false), isFocused = _c[0], setIsFocused = _c[1];
-    var _d = useState(false), isHovered = _d[0], setIsHovered = _d[1];
-    var hasSelectedOptions = temporaryOptions.some(function (option) { return option.selected; });
-    // Handlers
-    var handleOptionClick = function (option) {
-        var newOptions = temporaryOptions.map(function (selectedOption) {
-            if (selectedOption.value === option.value) {
-                return __assign(__assign({}, selectedOption), { selected: !selectedOption.selected });
-            }
-            return selectedOption;
+    var data = _a.data, onApply = _a.onApply, error = _a.error, description = _a.description, label = _a.label, placeholder = _a.placeholder, onBlur = _a.onBlur, disabled = _a.disabled, maxPills = _a.maxPills;
+    // Final selection that shows up as pills when closed / after Apply
+    var _b = useState(data), committedOptions = _b[0], setCommittedOptions = _b[1];
+    // Draft selection while dropdown is open
+    var _c = useState(data), temporaryOptions = _c[0], setTemporaryOptions = _c[1];
+    var _d = useState(''), searchTerm = _d[0], setSearchTerm = _d[1];
+    var _e = useState(false), isFocused = _e[0], setIsFocused = _e[1];
+    var _f = useState(false), isHovered = _f[0], setIsHovered = _f[1];
+    var hasSelectedOptions = committedOptions.some(function (opt) { return opt.selected; });
+    /* -----------------------------------
+     * Handlers
+     * ----------------------------------- */
+    var handleBlur = function () {
+        setIsFocused(false);
+        onBlur === null || onBlur === undefined ? undefined : onBlur();
+    };
+    /** Toggle a checkbox in the *draft* list */
+    var handleDraftToggle = function (option) {
+        setTemporaryOptions(function (prev) {
+            return prev.map(function (o) {
+                return o.value === option.value ? __assign(__assign({}, o), { selected: !o.selected }) : o;
+            });
         });
-        setTemporaryOptions(newOptions);
     };
+    /** Click "Apply" => copy draft to pills (committed) and call onApply */
     var handleApply = function (closeDropdown) {
+        setCommittedOptions(temporaryOptions);
         onApply(temporaryOptions);
         closeDropdown();
     };
+    /** Click "Clear" => reset the *draft* selection (not pills yet) */
     var handleClear = function () {
-        var newOptions = data.map(function (option) { return (__assign(__assign({}, option), { selected: false })); });
-        setTemporaryOptions(newOptions);
+        var reset = data.map(function (o) { return (__assign(__assign({}, o), { selected: false })); });
+        setTemporaryOptions(reset);
     };
-    var handleBlur = function () {
-        setIsFocused(false);
-        if (onBlur) {
-            onBlur();
-        }
-    };
-    var handleDeselect = function (optionId) {
-        var newOptions = temporaryOptions.map(function (option) {
-            if (option.value === optionId) {
-                return __assign(__assign({}, option), { selected: false });
-            }
-            return option;
+    /** Clicking the "X" on a pill => remove from *committed* immediately */
+    var handleDeselectPill = function (optionId) {
+        var newCommitted = committedOptions.map(function (o) {
+            return o.value === optionId ? __assign(__assign({}, o), { selected: false }) : o;
         });
-        setTemporaryOptions(newOptions);
-        onApply(newOptions);
+        setCommittedOptions(newCommitted);
+        setTemporaryOptions(newCommitted);
+        onApply(newCommitted);
     };
-    // Sections
-    var PillListSection = function (_a) {
-        var store = _a.store;
-        var selected = temporaryOptions.filter(function (option) { return option.selected; });
-        return (jsx("div", { style: {
-                display: 'flex',
-                flexGrow: 1,
-                gap: 8,
-                alignItems: 'center',
-            }, children: selected.length === 0 ? (jsx(Text, { variant: "s", children: store.dropdownOpened ? placeholder : label })) : (jsxs(Flex, { gap: 8, align: "center", wrap: "wrap", children: [selected.slice(0, 3).map(function (option) { return (jsxs("span", { className: multiselectStyles.pill, onClick: function (e) {
-                            handleOptionClick(option);
-                            e.stopPropagation();
-                        }, children: [jsx(Text, { variant: "xs", children: option.label }), jsx(ActionIcon$1, { variant: "transparent", onClick: function (e) {
-                                    handleDeselect(option.value);
-                                    e.stopPropagation();
-                                }, children: jsx(Close, { height: "20px", width: "20px" }) })] }, option.value)); }), selected.length > 3 && (jsx(Tooltip, { label: selected
-                            .slice(3)
-                            .map(function (option) { return option.label; })
-                            .join(', '), children: jsx("span", { className: multiselectStyles.pill, children: jsxs(Text, { variant: "xs", children: ["+ ", selected.length - 3] }) }, selected.length) }))] })) }));
+    /* -----------------------------------
+     * Search / Filtering
+     * ----------------------------------- */
+    var filteredTempOptions = useMemo(function () {
+        if (!searchTerm.trim())
+            return temporaryOptions;
+        return temporaryOptions.filter(function (o) {
+            return o.label.toLowerCase().includes(searchTerm.toLowerCase());
+        });
+    }, [searchTerm, temporaryOptions]);
+    // Build the actual dropdown checkboxes from the filtered list
+    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"));
+        // 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 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];
+    }, [filteredTempOptions]);
+    /* -----------------------------------
+     * Sections
+     * ----------------------------------- */
+    /**
+     * The main "input" area, showing:
+     * - Pills (from committedOptions) if the dropdown is closed (or open),
+     *   but we specifically adjust layout if open.
+     * - If the dropdown is open, also show a search input alongside the pills.
+     */
+    var PillAndSearchSection = function (_a) {
+        var store = _a.store, _b = _a.maxPills, maxPills = _b === undefined ? 3 : _b;
+        var selected = committedOptions.filter(function (opt) { return opt.selected; });
+        var dropdownOpened = store.dropdownOpened;
+        var allSelected = selected.length === data.length;
+        var searchInputRef = useRef(null);
+        useEffect(function () {
+            var _a;
+            if (dropdownOpened) {
+                (_a = searchInputRef.current) === null || _a === undefined ? undefined : _a.focus();
+            }
+        }, [dropdownOpened]);
+        // If the dropdown is closed and everything is selected => single "All {placeholder}" pill
+        if (!dropdownOpened && allSelected) {
+            return (jsx(Flex, { gap: 8, align: "center", wrap: "wrap", style: { flexGrow: 1, minHeight: 32 }, children: jsxs("span", { className: multiselectStyles.pill, children: [jsxs(Text, { variant: "xs", children: ["All ", placeholder] }), jsx(ActionIcon$1, { variant: "transparent", onClick: function (e) {
+                                e.stopPropagation();
+                                var newCommitted = committedOptions.map(function (o) { return (__assign(__assign({}, o), { selected: false })); });
+                                setCommittedOptions(newCommitted);
+                                setTemporaryOptions(newCommitted);
+                                onApply(newCommitted);
+                            }, children: jsx(Close, { height: "20px", width: "20px", stroke: "var(--color-neutral-600)" }) })] }) }));
+        }
+        // Otherwise, render original logic:
+        return (jsxs(Flex, { gap: 8, align: "center", wrap: "wrap", style: { flexGrow: 1, minHeight: 32 }, children: [selected.length === 0 && !dropdownOpened && (jsx(Text, { variant: "s", children: label })), selected.slice(0, maxPills).map(function (option) { return (jsxs("span", { className: multiselectStyles.pill, children: [jsx(Text, { variant: "xs", children: option.label }), jsx(ActionIcon$1, { variant: "transparent", onClick: function (e) {
+                                e.stopPropagation();
+                                handleDeselectPill(option.value);
+                            }, children: jsx(Close, { height: "20px", width: "20px", stroke: "var(--color-neutral-600)" }) })] }, option.value)); }), selected.length > maxPills && (jsx(Tooltip, { label: selected
+                        .slice(maxPills, selected.length)
+                        .map(function (o) { return o.label; })
+                        .join(', '), position: "bottom", children: jsx("span", { className: multiselectStyles.pill, children: jsxs(Text, { variant: "xs", children: ["+", selected.length - maxPills] }) }, "more") })), dropdownOpened && (jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search ".concat(placeholder, "..."), value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); }, style: {
+                        flexGrow: 1,
+                        minWidth: 80,
+                        border: '1px solid var(--color-gray-200)',
+                        borderRadius: 4,
+                        padding: '4px 8px',
+                        outline: 'none',
+                    }, onClick: function (e) { return e.stopPropagation(); } }))] }));
     };
     var ErrorSection = (jsxs(Flex, { className: styles$k.error, gap: 4, ml: 16, mt: 8, 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$k.errorText), children: error })] }));
     var DescriptionSection = (jsx(Flex, { className: styles$k.description, gap: 4, ml: 16, mt: 8, style: { visibility: description ? 'visible' : 'hidden' }, children: jsx(Text, { variant: "xs", children: description }) }));
-    var options = useMemo(function () {
-        return temporaryOptions.map(function (option) {
-            return (jsx(Dropdown.Option, { value: option.value, py: 12, disabled: option.disabled, onClick: function (e) {
-                    e.stopPropagation();
-                }, children: jsx(Checkbox, { label: option.label, checked: option.selected, disabled: option.disabled, onChange: function (e) {
-                        handleOptionClick(option);
-                        e.stopPropagation();
-                    }, w: "100%" }, option.value) }, option.value));
-        });
-    }, [temporaryOptions]);
-    return (jsx(Dropdown, { options: options, maxHeight: 300, footer: function (store) { return (jsxs(Flex, { justify: "flex-end", py: 8, gap: 8, children: [jsx(Button, { variant: "outlined", label: "Clear", size: "small", onClick: handleClear }), jsx(Button, { variant: "filled", label: "Apply", size: "small", onClick: function () { return handleApply(store.closeDropdown); } })] })); }, children: function (store) {
+    var dropdownFooter = function (store) { return (jsxs(Flex, { justify: "flex-end", py: 8, gap: 8, children: [jsx(Button, { variant: "outlined", label: "Clear", size: "small", onClick: handleClear }), jsx(Button, { variant: "filled", label: "Apply", size: "small", onClick: function () { return handleApply(store.closeDropdown); } })] })); };
+    return (jsx(Dropdown, { options: dropdownOptions, maxHeight: 300, footer: dropdownFooter, children: function (store) {
             var _a, _b;
-            return (jsxs("div", { className: styles$k.container, children: [(store.dropdownOpened || hasSelectedOptions) && (jsx("label", { className: classNames(styles$k.label, (_a = {},
+            var floatLabel = store.dropdownOpened || hasSelectedOptions;
+            return (jsxs("div", { className: styles$k.container, children: [floatLabel && (jsx("label", { className: classNames(styles$k.label, (_a = {},
                             _a[styles$k.labelError] = error && !isFocused,
                             _a[styles$k.labelFocused] = isFocused || isHovered,
                             _a)), children: label })), jsxs(Box, { className: classNames(styles$k.input, multiselectStyles.input, (_b = {},
                             _b[styles$k.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(PillListSection, { store: store }), 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, tabIndex: 0, children: [jsx(PillAndSearchSection, { store: store, maxPills: maxPills }), jsx(Chevron, { rotate: store.dropdownOpened ? 90 : 270 })] }), error ? ErrorSection : DescriptionSection] }));
         } }));
 };
 
@@ -1537,4 +1598,4 @@ var World = function (_a) {
 };
 
 export { Document as $, Accordion as A, Badge as B, Card as C, DateInput as D, EnterCodeInput as E, FileInput as F, Multiselect as G, Alert as H, IncrementNumber as I, Arrow as J, Attachment as K, Link as L, Message as M, NavBar as N, AvatarPlaceholder as O, PasswordInput as P, Bell as Q, RadioButton as R, SegmentedControl as S, Table as T, Calendar as U, Cat as V, Chevron as W, Clock as X, Close as Y, Cloud as Z, Delete as _, AccordionItem as a, Dog as a0, EyeHide as a1, EyeShow as a2, Fingerprint as a3, Google as a4, Grid as a5, HappyFace as a6, House as a7, HouseTime as a8, Identification as a9, Info as aa, Location as ab, Mail as ac, Menu as ad, MenuTouched as ae, Notification as af, Open as ag, Pets as ah, Phone as ai, Plaid as aj, Plus as ak, Remove as al, Search as am, ThreeDots as an, ThumbsDown as ao, Tick as ap, Umbrello as aq, Upload as ar, Visa as as, Warning as at, World as au, capitalizeFirstSentenceLetter as av, 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, Dropdown as m, FileUpload as n, Input as o, LinkModal as p, Loader as q, Modal as r, Pagination as s, Select as t, StatusBadge as u, Tabs as v, Text as w, Textarea as x, ToastContainer as y, Tooltip as z };
-//# sourceMappingURL=index-SJDXCSJk.js.map
+//# sourceMappingURL=index-COG80HZJ.js.map