@jars-labs/jars-components 1.2.0 → 1.3.0

package/dist/{index-CAIOxTa3.js → index-B6PiHvyN.js}

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Accordion as Accordion$1, AccordionItem as AccordionItem$1, AccordionControl as AccordionControl$1, AccordionPanel as AccordionPanel$1, ActionIcon as ActionIcon$1, Group, Combobox, useCombobox, Flex, TextInput, Loader as Loader$1, Avatar as Avatar$1, Checkbox as Checkbox$1, Menu as Menu$1, Divider, Modal as Modal$1, Tooltip as Tooltip$1, Box, Tabs as Tabs$1, Pagination as Pagination$1, Radio, SegmentedControl as SegmentedControl$1, Select as Select$1, Stepper as Stepper$1, StepperStep, Progress, Table as Table$1, Textarea as Textarea$1 } from '@mantine/core';
+import { Accordion as Accordion$1, AccordionItem as AccordionItem$1, AccordionControl as AccordionControl$1, AccordionPanel as AccordionPanel$1, ActionIcon as ActionIcon$1, Group, Loader as Loader$1, Combobox, useCombobox, Flex, TextInput, Avatar as Avatar$1, Checkbox as Checkbox$1, Menu as Menu$1, Divider, Modal as Modal$1, Tooltip as Tooltip$1, Box, Tabs as Tabs$1, Pagination as Pagination$1, Radio, SegmentedControl as SegmentedControl$1, Select as Select$1, Stepper as Stepper$1, StepperStep, Progress, Table as Table$1, Textarea as Textarea$1 } from '@mantine/core';
 import React, { useRef, useState, useEffect, forwardRef, useMemo, useId, useLayoutEffect } from 'react';
 import { DateInput as DateInput$1 } from '@mantine/dates';
 import { ToastContainer as ToastContainer$1 } from 'react-toastify';
@@ -44,6 +44,44 @@ function __rest(s, e) {
     return t;
 }
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : undefined, done: true };
+    }
+}
+
 function __spreadArray(to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -183,7 +221,7 @@ var Animation = function (_a) {
     var refVector = useRef(null);
     var _b = useState(null), lottie = _b[0], setLottie = _b[1];
     useEffect(function () {
-        import('./lottie-B049-AA6.js').then(function (n) { return n.l; }).then(function (Lottie) { return setLottie(Lottie.default); });
+        import('./lottie-Dk1oKm_F.js').then(function (n) { return n.l; }).then(function (Lottie) { return setLottie(Lottie.default); });
     }, []);
     useEffect(function () {
         if (lottie && refVector.current) {
@@ -203,6 +241,11 @@ Animation.displayName = 'Animation';
 
 var styles$q = {"dropdown":"Dropdown-module_dropdown__Pf3Aj","option":"Dropdown-module_option__5-7L7"};
 
+var Loader = function (props) {
+    return jsx(Loader$1, __assign({ color: "var(--color-primary-300)" }, props));
+};
+Loader.displayName = 'Loader';
+
 /**
  *
  * Dropdown component
@@ -215,6 +258,9 @@ var styles$q = {"dropdown":"Dropdown-module_dropdown__Pf3Aj","option":"Dropdown-
  * @param storeOptions - useCombobox options
  * @param maxHeight - max height of dropdown
  * @param closeOnSelect - close dropdown on option select
+ * @param dropdownRef - ref to the scrollable options container (e.g. to detect scroll end)
+ * @param onOptionsScroll - called when the options container scrolls (e.g. to load more)
+ * @param loadingOptions - show a loader below the options (e.g. while loading the next page)
  * @param rest - rest of the props to pass to Combobox component
  *
  * @return Attaches dropdown to target element and displays options
@@ -229,7 +275,7 @@ var styles$q = {"dropdown":"Dropdown-module_dropdown__Pf3Aj","option":"Dropdown-
  *
  */
 var Dropdown = function (_a) {
-    var options = _a.options, children = _a.children, footer = _a.footer, storeOptions = _a.storeOptions, onOptionSubmit = _a.onOptionSubmit, maxHeight = _a.maxHeight, _b = _a.closeOnSelect, closeOnSelect = _b === undefined ? false : _b, rest = __rest(_a, ["options", "children", "footer", "storeOptions", "onOptionSubmit", "maxHeight", "closeOnSelect"]);
+    var options = _a.options, children = _a.children, footer = _a.footer, storeOptions = _a.storeOptions, onOptionSubmit = _a.onOptionSubmit, maxHeight = _a.maxHeight, _b = _a.closeOnSelect, closeOnSelect = _b === undefined ? false : _b, dropdownRef = _a.dropdownRef, onOptionsScroll = _a.onOptionsScroll, _c = _a.loadingOptions, loadingOptions = _c === undefined ? false : _c, _d = _a.positionDependencies, positionDependencies = _d === undefined ? [] : _d, rest = __rest(_a, ["options", "children", "footer", "storeOptions", "onOptionSubmit", "maxHeight", "closeOnSelect", "dropdownRef", "onOptionsScroll", "loadingOptions", "positionDependencies"]);
     var store = useCombobox(__assign({}, storeOptions));
     var renderOptions = function (options, onOptionSubmit) {
         if (!Array.isArray(options)) {
@@ -249,7 +295,7 @@ var Dropdown = function (_a) {
     return (jsxs(Combobox, __assign({ store: store, onOptionSubmit: function (value) {
             onOptionSubmit === null || onOptionSubmit === undefined ? undefined : onOptionSubmit(value);
             closeOnSelect && store.closeDropdown();
-        } }, rest, { children: [jsx(Combobox.Target, { children: jsx(Flex, { w: "100%", children: typeof children === 'function' ? children(store) : children }) }), jsxs(Combobox.Dropdown, { classNames: { dropdown: styles$q.dropdown }, children: [jsx(Combobox.Options, { mah: maxHeight, style: { overflow: maxHeight ? 'auto' : 'unset' }, children: renderOptions(options, onOptionSubmit) }), footer && (jsx(Combobox.Footer, { children: typeof footer === 'function' ? footer(store) : footer }))] })] })));
+        }, positionDependencies: positionDependencies }, rest, { children: [jsx(Combobox.Target, { children: jsx(Flex, { w: "100%", children: typeof children === 'function' ? children(store) : children }) }), jsxs(Combobox.Dropdown, { classNames: { dropdown: styles$q.dropdown }, children: [jsxs(Combobox.Options, { ref: dropdownRef, onScroll: onOptionsScroll, mah: maxHeight, style: { overflow: maxHeight ? 'auto' : 'unset' }, children: [renderOptions(options, onOptionSubmit), loadingOptions && (jsx(Flex, { justify: "center", align: "center", py: 8, children: jsx(Loader, { size: "sm" }) }))] }), footer && (jsx(Combobox.Footer, { children: typeof footer === 'function' ? footer(store) : footer }))] })] })));
 };
 Dropdown.displayName = 'Dropdown';
 Dropdown.Option = Combobox.Option;
@@ -467,11 +513,6 @@ var Input = function (_a) {
 };
 Input.displayName = 'Input';
 
-var Loader = function (props) {
-    return jsx(Loader$1, __assign({ color: "var(--color-primary-300)" }, props));
-};
-Loader.displayName = 'Loader';
-
 /**
  *
  * Autocomplete component
@@ -1127,10 +1168,10 @@ var Link = function (_a) {
 };
 Link.displayName = 'Link';
 
-var styles$c = {"modal":"Modal-module_modal__gMPgi","body":"Modal-module_body__OhLb0","header":"Modal-module_header__5sBzU"};
+var styles$c = {"modal":"Modal-module_modal__gMPgi","body":"Modal-module_body__OhLb0","body--sm":"Modal-module_body--sm__PDhpT","body--md":"Modal-module_body--md__n3n3a","header":"Modal-module_header__5sBzU","actions":"Modal-module_actions__SzSYl","root":"Modal-module_root__8jbgq","inner":"Modal-module_inner__hm2ft","slide-up":"Modal-module_slide-up__mghqt"};
 
 var Modal = function (_a) {
-    var isOpen = _a.isOpen, onClose = _a.onClose, noLabel = _a.noLabel, yesLabel = _a.yesLabel, invertColors = _a.invertColors, underButton = _a.underButton, no = _a.no, yes = _a.yes, _b = _a.size, size = _b === undefined ? 'sm' : _b, _c = _a.padding, padding = _c === undefined ? 'sm' : _c, _d = _a.customRadius, customRadius = _d === undefined ? 16 : _d, children = _a.children, _e = _a.disabled, disabled = _e === undefined ? false : _e;
+    var isOpen = _a.isOpen, onClose = _a.onClose, noLabel = _a.noLabel, yesLabel = _a.yesLabel, invertColors = _a.invertColors, underButton = _a.underButton, no = _a.no, yes = _a.yes, _b = _a.size, size = _b === undefined ? 'sm' : _b, _c = _a.padding, padding = _c === undefined ? 'sm' : _c, _d = _a.customRadius, customRadius = _d === undefined ? 16 : _d, children = _a.children, _e = _a.disabled, disabled = _e === undefined ? false : _e, ariaLabel = _a.ariaLabel, _f = _a.closeButtonAriaLabel, closeButtonAriaLabel = _f === undefined ? 'Close dialog' : _f;
     var handleClose = function () {
         if (onClose) {
             onClose();
@@ -1143,23 +1184,13 @@ var Modal = function (_a) {
         xl: '900px',
         full: '100%',
     };
-    var paddingMap = {
-        sm: '4px 24px 32px 24px',
-        md: '4px 64px 64px 64px',
-    };
-    return (jsxs(Modal$1, { opened: isOpen, onClose: handleClose, withCloseButton: onClose !== undefined, size: sizeMap[size], fullScreen: size === 'full', radius: customRadius, closeButtonProps: {
-            'aria-label': 'Close modal',
-            title: 'Close modal',
-            icon: jsx(Close, { fill: "var(--color-neutral-200)" }),
-        }, classNames: {
+    return (jsxs(Modal$1.Root, { opened: isOpen, onClose: handleClose, size: sizeMap[size], fullScreen: size === 'full', radius: customRadius, classNames: {
+            root: styles$c.root,
+            inner: styles$c.inner,
             content: styles$c.modal,
-            body: styles$c.body,
+            body: classNames(styles$c.body, styles$c["body--".concat(padding)]),
             header: styles$c.header,
-        }, styles: {
-            body: {
-                padding: paddingMap[padding],
-            },
-        }, centered: true, children: [children, jsxs(Flex, { direction: 'column', gap: 16, w: 312, children: [noLabel && (jsx(Button, { disabled: disabled, variant: invertColors ? 'filled' : 'outlined', onClick: no, label: noLabel })), yesLabel && (jsx(Button, { disabled: disabled, variant: invertColors ? 'outlined' : 'filled', onClick: yes, label: yesLabel }))] }), underButton] }));
+        }, centered: true, children: [jsx(Modal$1.Overlay, {}), jsxs(Modal$1.Content, { radius: customRadius, "aria-label": ariaLabel, children: [onClose !== undefined && (jsx(Modal$1.Header, { children: jsx(Modal$1.CloseButton, { "aria-label": closeButtonAriaLabel, title: closeButtonAriaLabel, icon: jsx(Close, { fill: "var(--color-neutral-200)" }) }) })), jsxs(Modal$1.Body, { children: [children, jsxs(Flex, { className: styles$c.actions, children: [noLabel && (jsx(Button, { disabled: disabled, variant: invertColors ? 'filled' : 'outlined', onClick: no, label: noLabel })), yesLabel && (jsx(Button, { disabled: disabled, variant: invertColors ? 'outlined' : 'filled', onClick: yes, label: yesLabel }))] }), underButton] })] })] }));
 };
 Modal.displayName = 'Modal';
 
@@ -1551,6 +1582,382 @@ var NavBarSide = function (_a) {
 };
 NavBarSide.displayName = 'NavBarSide';
 
+var optionPickerStyles = {"input":"OptionPicker-module_input__ODn4n","inputFocused":"OptionPicker-module_inputFocused__g-UfG","disabled":"OptionPicker-module_disabled__pSxSQ","pill":"OptionPicker-module_pill__9nUrh","pillText":"OptionPicker-module_pillText__R3FyC","pillsAndSearch":"OptionPicker-module_pillsAndSearch__E0cfZ","measurer":"OptionPicker-module_measurer__gVU50","searchInput":"OptionPicker-module_searchInput__2ox0d","option":"OptionPicker-module_option__ME1j1","optionLabel":"OptionPicker-module_optionLabel__iORv0","floatingLabel":"OptionPicker-module_floatingLabel__Z6Laa","label":"OptionPicker-module_label__7RYWe","labelTooltip":"OptionPicker-module_labelTooltip__jLwn4","statusOption":"OptionPicker-module_statusOption__CReh3"};
+
+var SELECT_ALL_VALUE = '__select_all__';
+/**
+ * OptionPicker component, use it to select multiple options from a list of options
+ * For selecting a single option, use the Select component
+ *
+ * @param {OptionPickerOptionsType[]} data - The data to display in the select
+ * @param {(options: OptionPickerOptionsType[]) => void} onChange - The function to call every time an option, or Select All, is clicked
+ * @param {(searchTerm: string) => void} onSearch - Called when the search term changes. When provided, the parent filters `data` (e.g. on the server) and no local filtering is applied
+ * @param {string} selectAllLabel - The label of the Select All option
+ * @param {string} label - The label of the select
+ * @param {string} placeholder - The placeholder of the search input, defaults to "Search"
+ * @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 (on top of maxLines), the rest will be displayed as a single pill with the number of remaining items
+ * @param {number} maxLines - The maximum number of lines of pills, defaults to 2. The rest are shown as a single pill with the count
+ * @param {() => Promise<OptionPickerOptionsType[]>} onSelectAll - With pagination (hasMore), called by Select All to get every option (matching the current search, if any), since only the loaded pages are known. If it rejects, the selection is left unchanged
+ *
+ * @returns {React.ReactElement} The OptionPicker component
+ *
+ */
+var OptionPicker = function (_a) {
+    var data = _a.data, _b = _a.defaultValue, defaultValue = _b === undefined ? [] : _b, description = _a.description, disabled = _a.disabled, error = _a.error, extraOption = _a.extraOption, label = _a.label, maxPills = _a.maxPills, maxLines = _a.maxLines, onBlur = _a.onBlur, onChange = _a.onChange, onSearch = _a.onSearch, _c = _a.placeholder, placeholder = _c === undefined ? 'Search' : _c, _d = _a.selectAllLabel, selectAllLabel = _d === undefined ? 'Select All' : _d, singleValue = _a.singleValue, value = _a.value, _e = _a.hasMore, hasMore = _e === undefined ? false : _e, onLoadMore = _a.onLoadMore, _f = _a.isLoadingNextPage, isLoadingNextPage = _f === undefined ? false : _f, _g = _a.isLoading, isLoading = _g === undefined ? false : _g, onSelectAll = _a.onSelectAll;
+    var isControlled = value !== undefined;
+    var _h = useState(function () { var _a; return (_a = value !== null && value !== undefined ? value : defaultValue) !== null && _a !== undefined ? _a : []; }), internalValue = _h[0], _setInternalValue = _h[1];
+    var _j = useState(''), searchTerm = _j[0], setSearchTerm = _j[1];
+    var _k = useState(false), isFocused = _k[0], setIsFocused = _k[1];
+    var selected = isControlled ? value : internalValue;
+    // Latest selection, read after awaiting onSelectAll so changes made
+    // while it loads aren't lost
+    var selectedRef = useRef(selected);
+    selectedRef.current = selected;
+    var _l = useState(false), isSelectingAll = _l[0], setIsSelectingAll = _l[1];
+    var hasSelectedOptions = selected.length > 0;
+    var dropdownContentRef = useRef(null);
+    // Set when onLoadMore is called, so scroll events don't call it again
+    // before the parent responds (with new data or isLoadingNextPage)
+    var loadMoreRequestedRef = useRef(false);
+    /**
+     * Loads the next page when the options list is scrolled to the bottom,
+     * or when it doesn't fill its height (so there's nothing to scroll).
+     * Defined on every render, so it always calls the current onLoadMore.
+     */
+    var loadMoreIfNeeded = function () {
+        var el = dropdownContentRef.current;
+        if (!el || !hasMore || !onLoadMore || isLoadingNextPage)
+            return;
+        if (loadMoreRequestedRef.current)
+            return;
+        // The list stays mounted while closed, with no height
+        if (el.clientHeight === 0)
+            return;
+        if (el.scrollTop + el.clientHeight + 1 >= el.scrollHeight) {
+            loadMoreRequestedRef.current = true;
+            onLoadMore();
+        }
+    };
+    // New data or a finished load: allow the next request, and keep loading
+    // while the list still doesn't fill its height
+    useEffect(function () {
+        loadMoreRequestedRef.current = false;
+        loadMoreIfNeeded();
+    }, [data, hasMore, isLoadingNextPage]);
+    var setInternalValue = function (newValue) {
+        if (isControlled) {
+            return;
+        }
+        _setInternalValue(newValue);
+    };
+    var updateSelected = function (newSelected) {
+        setInternalValue(newSelected);
+        onChange === null || onChange === undefined ? undefined : onChange(newSelected);
+    };
+    /* -----------------------------------
+     * Handlers
+     * ----------------------------------- */
+    var handleBlur = function (e) {
+        // Focus moving into the search input (or anything else inside) isn't a blur
+        if (e.currentTarget.contains(e.relatedTarget)) {
+            return;
+        }
+        setIsFocused(false);
+        onBlur === null || onBlur === undefined ? undefined : onBlur();
+    };
+    var inputRef = useRef(null);
+    /**
+     * Closing the dropdown with Escape removes the focused search input, and
+     * browsers don't fire a blur for that, so focus is lost silently.
+     * Return it to the input so the next Tab or click outside fires onBlur.
+     * Only for keyboard closes: a click outside is the user leaving the field.
+     */
+    var handleDropdownClose = function (eventSource) {
+        if (eventSource !== 'keyboard') {
+            return;
+        }
+        requestAnimationFrame(function () {
+            var _a;
+            var active = document.activeElement;
+            if (!active || active === document.body) {
+                (_a = inputRef.current) === null || _a === undefined ? undefined : _a.focus();
+            }
+        });
+    };
+    var handleSearch = function (term) {
+        setSearchTerm(term);
+        onSearch === null || onSearch === undefined ? undefined : onSearch(term);
+    };
+    /** Toggle a single option */
+    var handleToggle = function (option) {
+        var newSelected = selected.some(function (o) { return o.value === option.value; })
+            ? selected.filter(function (o) { return o.value !== option.value; })
+            : __spreadArray(__spreadArray([], selected, true), [option], false);
+        if (singleValue) {
+            newSelected = newSelected.slice(-1);
+        }
+        updateSelected(newSelected);
+        // The user found what they searched for, so clear the search
+        if (searchTerm) {
+            handleSearch('');
+        }
+    };
+    /** Toggle every visible, enabled option at once */
+    var handleSelectAll = function () { return __awaiter(undefined, undefined, undefined, function () {
+        var selectableOptions, isSelected, allSelected, allOptions, current_1, newSelected;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    selectableOptions = filteredOptions.filter(function (o) { return !o.disabled; });
+                    isSelected = function (option) {
+                        return selected.some(function (o) { return o.value === option.value; });
+                    };
+                    allSelected = selectableOptions.every(isSelected);
+                    if (!(hasMore && onSelectAll)) return [3 /*break*/, 6];
+                    if (allSelected) {
+                        handleClearAll();
+                        return [2 /*return*/];
+                    }
+                    setIsSelectingAll(true);
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, onSelectAll()];
+                case 2:
+                    allOptions = _b.sent();
+                    current_1 = selectedRef.current;
+                    updateSelected(__spreadArray(__spreadArray([], current_1, true), allOptions.filter(function (option) {
+                        return !option.disabled && !current_1.some(function (o) { return o.value === option.value; });
+                    }), true));
+                    return [3 /*break*/, 5];
+                case 3:
+                    _b.sent();
+                    return [3 /*break*/, 5];
+                case 4:
+                    setIsSelectingAll(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+                case 6:
+                    newSelected = allSelected
+                        ? selected.filter(function (o) { return !selectableOptions.some(function (option) { return option.value === o.value; }); })
+                        : __spreadArray(__spreadArray([], selected, true), selectableOptions.filter(function (option) { return !isSelected(option); }), true);
+                    updateSelected(newSelected);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    /** Clicking the "X" on a pill => remove it immediately */
+    var handleDeselectPill = function (optionId) {
+        updateSelected(selected.filter(function (o) { return o.value !== optionId; }));
+    };
+    /** Clicking the "X" on the "Select All" pill => keep only disabled options */
+    var handleClearAll = function () {
+        updateSelected(selected.filter(function (o) { return o.disabled; }));
+    };
+    // Every option is loaded and selected => show a single "Select All" pill.
+    // Only when `data` is known to be the full list: with onSearch it may hold
+    // the results of a search (even right after the term is cleared, until the
+    // parent responds), and with hasMore some pages aren't loaded yet.
+    // Never in singleValue mode, which has no Select All
+    var enabledDataOptions = data.filter(function (o) { return !o.disabled; });
+    var allOptionsSelected = !singleValue &&
+        !onSearch &&
+        !hasMore &&
+        enabledDataOptions.length > 0 &&
+        enabledDataOptions.every(function (option) {
+            return selected.some(function (o) { return o.value === option.value; });
+        });
+    /* -----------------------------------
+     * Search / Filtering
+     * ----------------------------------- */
+    // With onSearch the parent filters (e.g. on the server, by fields other than
+    // the label), so `data` already holds the results and is shown as is
+    var filteredOptions = useMemo(function () {
+        if (onSearch || !searchTerm.trim()) {
+            return data;
+        }
+        return data.filter(function (o) {
+            return o.label.toLowerCase().includes(searchTerm.toLowerCase());
+        });
+    }, [searchTerm, data, onSearch]);
+    // Build the actual dropdown checkboxes from the filtered list.
+    // Not memoized on purpose: the handlers close over onChange and the current
+    // selection, so a memo would keep calling a stale onChange.
+    var renderDropdownOptions = function () {
+        var selectableOptions = filteredOptions.filter(function (o) { return !o.disabled; });
+        var allSelected = selectableOptions.length > 0 &&
+            selectableOptions.every(function (option) {
+                return selected.some(function (o) { return o.value === option.value; });
+            });
+        var selectAllOption = !singleValue && selectableOptions.length > 0 ? (jsxs(React.Fragment, { children: [jsx(Option, { checked: allSelected, onChange: handleSelectAll, option: {
+                        value: SELECT_ALL_VALUE,
+                        label: selectAllLabel,
+                        // Blocked, with a loader, while onSelectAll is loading
+                        disabled: isSelectingAll,
+                        labelIcon: isSelectingAll ? jsx(Loader, { size: "xs" }) : undefined,
+                    } }), jsx(Divider, {})] }, "select_all")) : null;
+        var fixedOption = extraOption ? (jsxs(React.Fragment, { children: [jsx(Option, { checked: (extraOption.disabled && extraOption.selected) ||
+                        selected.some(function (o) { return o.value === extraOption.value; }), onChange: handleToggle, option: extraOption }), jsx(Divider, {})] }, "extra_option")) : null;
+        // Now build the rest of the normal checkboxes
+        var normalOptions = filteredOptions.map(function (option) { return (jsx(Option, { checked: (option.disabled && option.selected) ||
+                selected.some(function (o) { return o.value === option.value; }), onChange: handleToggle, option: option }, option.value)); });
+        var loadingOption = (jsx(Dropdown.Option, { value: "Loading...", disabled: true, className: optionPickerStyles.statusOption, children: jsx(Flex, { justify: "center", align: "center", py: 8, children: jsx(Loader, { size: "sm" }) }) }, "loading"));
+        var emptyOption = (jsx(Dropdown.Option, { value: "No options found", disabled: true, className: optionPickerStyles.statusOption, children: "No matches found, try something else." }, "no_options"));
+        if (isLoading) {
+            return fixedOption ? [fixedOption, loadingOption] : [loadingOption];
+        }
+        var options = normalOptions.length > 0
+            ? selectAllOption
+                ? __spreadArray([selectAllOption], normalOptions, true) : normalOptions
+            : [emptyOption];
+        return fixedOption ? __spreadArray([fixedOption], options, true) : options;
+    };
+    return (jsx(Dropdown, { options: renderDropdownOptions(), maxHeight: 300, dropdownRef: dropdownContentRef, onOptionsScroll: loadMoreIfNeeded, loadingOptions: isLoadingNextPage, 
+        // Pills change the input height, so the dropdown needs repositioning
+        positionDependencies: [hasSelectedOptions], disabled: disabled, storeOptions: {
+            onDropdownClose: handleDropdownClose,
+            // Wait for the list to be visible before checking if it needs more
+            onDropdownOpen: function () { return requestAnimationFrame(loadMoreIfNeeded); },
+        }, children: function (store) {
+            var _a, _b;
+            var floatLabel = store.dropdownOpened || hasSelectedOptions;
+            return (jsxs("div", { className: styles$p.container, children: [floatLabel && (jsx(FloatingLabel, { label: label, className: classNames((_a = {},
+                            _a[styles$p.labelError] = error && !isFocused,
+                            _a[styles$p.labelFocused] = isFocused,
+                            _a)), onClick: function () { return !disabled && store.toggleDropdown(); } })), jsxs(Box, { ref: inputRef, className: classNames(styles$p.input, optionPickerStyles.input, (_b = {},
+                            _b[styles$p.inputError] = error,
+                            _b[optionPickerStyles.inputFocused] = store.dropdownOpened,
+                            _b[optionPickerStyles.disabled] = disabled,
+                            _b)), onClick: function () { return !disabled && store.toggleDropdown(); }, onFocus: function () { return setIsFocused(true); }, onBlur: handleBlur, tabIndex: disabled ? -1 : 0, children: [jsx(PillAndSearchSection, { allSelected: allOptionsSelected, clearAll: handleClearAll, selectAllLabel: selectAllLabel, label: label, placeholder: placeholder, searchTerm: searchTerm, onSearch: handleSearch, value: selected, removeOption: handleDeselectPill, store: store, maxPills: maxPills, maxLines: maxLines }), jsx(Chevron, { rotate: store.dropdownOpened ? 90 : 270 })] }), error ? (jsx(ErrorSection, { error: error })) : description ? (jsx(DescriptionSection, { description: description })) : null] }));
+        } }));
+};
+/**
+ * The label floating over the input border, cut with an ellipsis when too long.
+ * Only when it's cut, hovering it shows the full label in a tooltip.
+ */
+var FloatingLabel = function (_a) {
+    var label = _a.label, className = _a.className, onClick = _a.onClick;
+    var labelRef = useRef(null);
+    var _b = useState(false), isTruncated = _b[0], setIsTruncated = _b[1];
+    var checkTruncated = function () {
+        var el = labelRef.current;
+        setIsTruncated(!!el && el.scrollWidth > el.clientWidth);
+    };
+    return (jsx(Tooltip, { label: label, position: "top-start", disabled: !isTruncated, className: optionPickerStyles.labelTooltip, children: jsx("label", { ref: labelRef, className: classNames(styles$p.label, optionPickerStyles.floatingLabel, className), onMouseEnter: checkTruncated, onClick: onClick, children: label }) }));
+};
+var ErrorSection = function (_a) {
+    var error = _a.error;
+    return (jsxs(Flex, { className: styles$p.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$p.errorText), children: error })] }));
+};
+var DescriptionSection = function (_a) {
+    var description = _a.description;
+    return (jsx(Flex, { className: styles$p.description, gap: 4, ml: 16, mt: 8, style: { visibility: description ? 'visible' : 'hidden' }, children: jsx(Text, { variant: "xs", children: description }) }));
+};
+var Option = function (_a) {
+    var checked = _a.checked, onChange = _a.onChange, option = _a.option;
+    return (jsx(Dropdown.Option, { value: option.value, py: 12, disabled: option.disabled, className: optionPickerStyles.option, 
+        // Toggle from anywhere in the row, and don't close on click
+        onClick: function (e) {
+            e.stopPropagation();
+            if (!option.disabled) {
+                onChange(option);
+            }
+        }, children: jsx(Group, { children: jsxs("div", { className: optionPickerStyles.optionLabel, children: [jsx(Checkbox, { label: jsxs(Flex, { gap: 4, children: [option.label, option.labelIcon ? jsx(Fragment, { children: option.labelIcon }) : null] }), checked: checked, disabled: option.disabled, readOnly: true, tabIndex: -1, flex: 1 }, option.value), option.suffix && jsx(Text, { as: "span", children: option.suffix })] }) }) }));
+};
+var PILLS_GAP = 8;
+var SEARCH_INPUT_MIN_WIDTH = 40;
+/**
+ * Simulates the flex-wrap layout to check whether the given widths fit
+ * in `maxLines` lines of `containerWidth`
+ */
+var fitsInLines = function (widths, containerWidth, maxLines) {
+    var lines = 1;
+    var lineWidth = 0;
+    for (var _i = 0, widths_1 = widths; _i < widths_1.length; _i++) {
+        var width = widths_1[_i];
+        if (lineWidth === 0) {
+            lineWidth = width;
+        }
+        else if (lineWidth + PILLS_GAP + width <= containerWidth) {
+            lineWidth += PILLS_GAP + width;
+        }
+        else {
+            lines++;
+            lineWidth = width;
+        }
+    }
+    return lines <= maxLines;
+};
+var Pill$1 = function (_a) {
+    var label = _a.label, onRemove = _a.onRemove, _b = _a.removeAriaLabel, removeAriaLabel = _b === undefined ? "Remove ".concat(label) : _b;
+    return (jsxs("span", { className: optionPickerStyles.pill, title: label, "data-pill": true, children: [jsx(Text, { variant: "xs", className: optionPickerStyles.pillText, children: label }), jsx(ActionIcon$1, { variant: "transparent", "aria-label": removeAriaLabel, onClick: function (e) {
+                    e.stopPropagation();
+                    onRemove();
+                }, children: jsx(Close, { height: "20px", width: "20px", stroke: "var(--color-neutral-600)" }) })] }));
+};
+var PillAndSearchSection = function (_a) {
+    var allSelected = _a.allSelected, clearAll = _a.clearAll, label = _a.label, _b = _a.maxPills, maxPills = _b === undefined ? Infinity : _b, _c = _a.maxLines, maxLines = _c === undefined ? 2 : _c, selectAllLabel = _a.selectAllLabel, onSearch = _a.onSearch, placeholder = _a.placeholder, searchTerm = _a.searchTerm, removeOption = _a.removeOption, store = _a.store, _d = _a.value, value = _d === undefined ? [] : _d;
+    var dropdownOpened = store.dropdownOpened;
+    var searchInputRef = useRef(null);
+    var measurerRef = useRef(null);
+    useEffect(function () {
+        var _a;
+        if (dropdownOpened) {
+            (_a = searchInputRef.current) === null || _a === undefined ? undefined : _a.focus();
+        }
+    }, [dropdownOpened]);
+    var enabledOptions = value.filter(function (option) { return !option.disabled; });
+    var enabledKey = enabledOptions.map(function (o) { return o.value; }).join('_');
+    var _e = useState(0), containerWidth = _e[0], setContainerWidth = _e[1];
+    var _f = useState(enabledOptions.length), visibleCount = _f[0], setVisibleCount = _f[1];
+    // Track the available width, the pills are re-measured when it changes
+    useEffect(function () {
+        var el = measurerRef.current;
+        if (!el)
+            return;
+        var observer = new ResizeObserver(function () { return setContainerWidth(el.clientWidth); });
+        observer.observe(el);
+        return function () { return observer.disconnect(); };
+    }, [allSelected]);
+    // Show as many pills as fit in `maxLines`, leaving room for the "+N" pill
+    // and the search input (when open)
+    useLayoutEffect(function () {
+        var _a, _b;
+        var el = measurerRef.current;
+        if (!el || !containerWidth)
+            return;
+        var pillWidths = Array.from(el.querySelectorAll('[data-pill]'), function (pill) { return pill.offsetWidth; });
+        var moreWidth = (_b = (_a = el.querySelector('[data-more]')) === null || _a === undefined ? undefined : _a.offsetWidth) !== null && _b !== undefined ? _b : 0;
+        var total = pillWidths.length;
+        var fits = function (count) {
+            return fitsInLines(__spreadArray(__spreadArray(__spreadArray([], pillWidths.slice(0, count), true), (count < total ? [moreWidth] : []), true), (dropdownOpened ? [SEARCH_INPUT_MIN_WIDTH] : []), true), containerWidth, maxLines);
+        };
+        var count = Math.min(total, maxPills);
+        while (count > 0 && !fits(count)) {
+            count--;
+        }
+        setVisibleCount(count);
+    }, [enabledKey, containerWidth, dropdownOpened, maxLines, maxPills]);
+    var searchInput = dropdownOpened && (jsx("input", { ref: searchInputRef, type: "text", placeholder: placeholder, "aria-label": placeholder, value: searchTerm, onChange: function (e) { return onSearch(e.target.value); }, onClick: function (e) { return e.stopPropagation(); }, className: optionPickerStyles.searchInput }));
+    // Everything is selected => a single "Select All" pill instead of one per option
+    if (allSelected) {
+        return (jsxs(Flex, { gap: PILLS_GAP, align: "center", wrap: "wrap", className: optionPickerStyles.pillsAndSearch, children: [jsx(Pill$1, { label: selectAllLabel, onRemove: clearAll, removeAriaLabel: "Clear all" }), searchInput] }));
+    }
+    var visibleOptions = enabledOptions.slice(0, visibleCount);
+    var hiddenOptions = enabledOptions.slice(visibleCount);
+    return (jsxs(Flex, { gap: PILLS_GAP, align: "center", wrap: "wrap", className: optionPickerStyles.pillsAndSearch, children: [jsxs("div", { ref: measurerRef, className: optionPickerStyles.measurer, "aria-hidden": true, children: [enabledOptions.map(function (option) { return (jsx(Pill$1, { label: option.label, onRemove: function () { } }, option.value)); }), jsx("span", { className: optionPickerStyles.pill, "data-more": true, children: jsxs(Text, { variant: "xs", children: ["+", enabledOptions.length] }) })] }), enabledOptions.length === 0 && !dropdownOpened && (jsx(Text, { variant: "s", className: optionPickerStyles.label, title: label, children: label })), visibleOptions.map(function (option) { return (jsx(Pill$1, { label: option.label, onRemove: function () { return removeOption(option.value); } }, option.value)); }), hiddenOptions.length > 0 && (jsx(Tooltip, { label: hiddenOptions.map(function (o) { return o.label; }).join(', '), position: "bottom", children: jsx("span", { className: optionPickerStyles.pill, children: jsxs(Text, { variant: "xs", children: ["+", hiddenOptions.length] }) }, "more") })), searchInput] }));
+};
+OptionPicker.displayName = 'OptionPicker';
+FloatingLabel.displayName = 'FloatingLabel';
+ErrorSection.displayName = 'ErrorSection';
+DescriptionSection.displayName = 'DescriptionSection';
+Option.displayName = 'Option';
+Pill$1.displayName = 'Pill';
+PillAndSearchSection.displayName = 'PillAndSearchSection';
+
 var Pagination = function (_a) {
     var onChange = _a.onChange, value = _a.value, total = _a.total, disabled = _a.disabled;
     return (jsx(Pagination$1, { radius: "xl", previousIcon: function () { return jsx(Chevron, {}); }, nextIcon: function () { return jsx(Chevron, { rotate: 180 }); }, onChange: onChange, value: value, total: total, styles: { control: { border: 'none', color: 'black' } }, color: "var(--color-neutral-300)", disabled: disabled }));
@@ -2258,5 +2665,5 @@ var World = function (_a) {
 };
 World.displayName = 'World';
 
-export { Arrow as $, Accordion as A, Badge as B, Card as C, DateInput as D, EnterCodeInput as E, FileInput as F, StatusBadge as G, Stepper as H, IncrementNumber as I, Tabs as J, Text as K, Link as L, Message as M, NavBar as N, Textarea as O, Pagination as P, ToastContainer as Q, RadioButton as R, SegmentedControl as S, Table as T, Tooltip as U, AIGenerate as V, AIPrompt as W, AIRedo as X, AISearch as Y, Alert as Z, Archive as _, AccordionItem as a, Attachment as a0, AvatarPlaceholder as a1, Bell as a2, Calendar as a3, Camera as a4, Cat as a5, Chat as a6, Check as a7, CheckSquare as a8, Chevron as a9, MenuTouched as aA, Notification as aB, Open as aC, Pets as aD, Phone as aE, Plaid as aF, Plus as aG, Refresh as aH, Remove as aI, Search as aJ, Shield as aK, StepIndicator as aL, ThreeDots as aM, ThumbsDown as aN, Tick as aO, Umbrello as aP, Upload as aQ, Visa as aR, Warning as aS, World as aT, capitalizeFirstSentenceLetter as aU, ChevronCollapse as aa, Clock as ab, Close as ac, Cloud as ad, CloudUpload as ae, CreditCard as af, Curriculum as ag, Delete as ah, Document as ai, Dog as aj, EyeHide as ak, EyeShow as al, Fingerprint as am, Flash as an, Google as ao, Grid as ap, Hamburger as aq, HappyFace as ar, House as as, HouseCheck as at, HouseTime as au, Identification as av, Info as aw, Location as ax, Mail as ay, Menu 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, ProgressStepper as y, Select as z };
-//# sourceMappingURL=index-CAIOxTa3.js.map
+export { Archive as $, Accordion as A, Badge as B, Card as C, DateInput as D, EnterCodeInput as E, FileInput as F, StatusBadge as G, Stepper as H, IncrementNumber as I, Tabs as J, Text as K, Link as L, Message as M, NavBar as N, OptionPicker as O, Pagination as P, Textarea as Q, RadioButton as R, SegmentedControl as S, Table as T, ToastContainer as U, Tooltip as V, AIGenerate as W, AIPrompt as X, AIRedo as Y, AISearch as Z, Alert as _, AccordionItem as a, Arrow as a0, Attachment as a1, AvatarPlaceholder as a2, Bell as a3, Calendar as a4, Camera as a5, Cat as a6, Chat as a7, Check as a8, CheckSquare as a9, Menu as aA, MenuTouched as aB, Notification as aC, Open as aD, Pets as aE, Phone as aF, Plaid as aG, Plus as aH, Refresh as aI, Remove as aJ, Search as aK, Shield as aL, StepIndicator 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, Chevron as aa, ChevronCollapse as ab, Clock as ac, Close as ad, Cloud as ae, CloudUpload as af, CreditCard as ag, Curriculum as ah, Delete as ai, Document as aj, Dog as ak, EyeHide as al, EyeShow as am, Fingerprint as an, Flash as ao, Google as ap, Grid as aq, Hamburger as ar, HappyFace as as, House as at, HouseCheck as au, HouseTime as av, Identification as aw, Info as ax, Location as ay, Mail 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, ProgressStepper as y, Select as z };
+//# sourceMappingURL=index-B6PiHvyN.js.map