@beweco/aurora-ui 0.6.41 → 0.6.43

package/dist/index.cjs.js

@@ -6973,7 +6973,7 @@ var DayMonthPicker = function (_a) {
     var currentYearDate = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2());
     var pickerValue = (value === null || value === void 0 ? void 0 : value.type) === "dayMonth" ? value.dayMonth : null;
     var rangeValue = (value === null || value === void 0 ? void 0 : value.type) === "dayMonthRange" ? value.dayMonthRange : null;
-    return (jsxRuntime.jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxRuntime.jsxs(react.RadioGroup, { color: "primary", orientation: "horizontal", size: "sm", value: mode, onValueChange: handleModeChange, children: [jsxRuntime.jsx(react.Radio, { value: "single", children: t.dayMonthSingleOption }), jsxRuntime.jsx(react.Radio, { value: "range", children: t.dayMonthRangeOption })] }), mode === "single" ? (pickerValue ? (jsxRuntime.jsx(DatePicker, { value: pickerValue, onChange: handleSingleChange, "aria-label": t.dayMonthAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-40 ".concat(NO_YEAR_CLASS) }, "dmp-c")) : (jsxRuntime.jsx(DatePicker, { defaultValue: currentYearDate, onChange: handleSingleChange, "aria-label": t.dayMonthAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-40 ".concat(NO_YEAR_CLASS) }, "dmp-u"))) : (rangeValue ? (jsxRuntime.jsx(DateRangePicker, { value: rangeValue, onChange: handleRangeChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-xs ".concat(NO_YEAR_CLASS) }, "dmpr-c")) : (jsxRuntime.jsx(DateRangePicker, { defaultValue: { start: currentYearDate, end: currentYearDate }, onChange: handleRangeChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-xs ".concat(NO_YEAR_CLASS) }, "dmpr-u")))] }));
+    return (jsxRuntime.jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxRuntime.jsxs(react.RadioGroup, { color: "primary", orientation: "horizontal", size: "sm", value: mode, onValueChange: handleModeChange, children: [jsxRuntime.jsx(react.Radio, { value: "single", children: t.dayMonthSingleOption }), jsxRuntime.jsx(react.Radio, { value: "range", children: t.dayMonthRangeOption })] }), mode === "single" ? (jsxRuntime.jsx(DatePicker, { value: pickerValue, placeholderValue: currentYearDate, onChange: handleSingleChange, "aria-label": t.dayMonthAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-40 ".concat(NO_YEAR_CLASS) })) : (jsxRuntime.jsx(DateRangePicker, { value: rangeValue, placeholderValue: currentYearDate, onChange: handleRangeChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-xs ".concat(NO_YEAR_CLASS) }))] }));
 };
 
 /**
@@ -8198,17 +8198,21 @@ var SegmentationBuilder = React.forwardRef(function (_a, ref) {
 });
 SegmentationBuilder.displayName = "SegmentationBuilder";
 
+var SENTINEL_KEY = "__tags-filter-sentinel__";
 var DEFAULT_TRANSLATIONS = {
     placeholder: "Nombre de la etiqueta",
     labelSelect: "Selecciona etiqueta",
     labelSelected: "Etiquetas actuales",
     emptySelectedMessage: "No hay etiquetas seleccionadas",
     errorLoadingPrefix: "Error al cargar etiquetas",
+    loadingMoreLabel: "Cargando más etiquetas…",
+    endOfListMessage: "",
 };
 function toggleArrayItem(array, item, compareFn) {
     var index = array.findIndex(function (existing) { return compareFn(existing, item); });
-    if (index >= 0)
+    if (index >= 0) {
         return array.filter(function (_, i) { return i !== index; });
+    }
     return __spreadArray(__spreadArray([], array, true), [item], false);
 }
 var defaultCompareTags = function (a, b) {
@@ -8223,28 +8227,56 @@ var defaultGetTagKey = function (tag) { var _a; return (_a = tag.id) !== null &&
  * Cumple con i18n mediante la prop `translations`.
  */
 function TagsFilter(_a) {
-    var items = _a.items, value = _a.value, onChange = _a.onChange, _b = _a.translations, translations = _b === void 0 ? {} : _b, error = _a.error, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, _d = _a.className, className = _d === void 0 ? "" : _d, ariaLabel = _a["aria-label"], _e = _a.required, required = _e === void 0 ? false : _e, _f = _a.compareTags, compareTags = _f === void 0 ? defaultCompareTags : _f, _g = _a.getTagKey, getTagKey = _g === void 0 ? defaultGetTagKey : _g;
+    var items = _a.items, value = _a.value, onChange = _a.onChange, _b = _a.translations, translations = _b === void 0 ? {} : _b, error = _a.error, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, _d = _a.className, className = _d === void 0 ? "" : _d, ariaLabel = _a["aria-label"], _e = _a.required, required = _e === void 0 ? false : _e, _f = _a.compareTags, compareTags = _f === void 0 ? defaultCompareTags : _f, _g = _a.getTagKey, getTagKey = _g === void 0 ? defaultGetTagKey : _g, onInputChange = _a.onInputChange, _h = _a.hasMore, hasMore = _h === void 0 ? false : _h, _j = _a.isLoadingMore, isLoadingMore = _j === void 0 ? false : _j, onLoadMore = _a.onLoadMore, _k = _a.loadMoreRootMargin, loadMoreRootMargin = _k === void 0 ? "0px" : _k;
     var t = __assign(__assign({}, DEFAULT_TRANSLATIONS), translations);
-    var _h = React.useState(""), inputValue = _h[0], setInputValue = _h[1];
-    var _j = React.useState(0), autocompleteKey = _j[0], setAutocompleteKey = _j[1];
+    var _l = React.useState(""), inputValue = _l[0], setInputValue = _l[1];
+    var _m = React.useState(0), autocompleteKey = _m[0], setAutocompleteKey = _m[1];
     var selectedList = value !== null && value !== void 0 ? value : [];
+    var _o = React.useState(null), sentinelNode = _o[0], setSentinelNode = _o[1];
+    React.useEffect(function () {
+        if (!onLoadMore || !sentinelNode || !hasMore) {
+            return;
+        }
+        var observer = new IntersectionObserver(function (entries) {
+            for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                var entry = entries_1[_i];
+                if (entry.isIntersecting && hasMore && !isLoadingMore) {
+                    onLoadMore();
+                }
+            }
+        }, {
+            root: sentinelNode.closest("ul"),
+            rootMargin: loadMoreRootMargin,
+            threshold: 0,
+        });
+        observer.observe(sentinelNode);
+        return function () { return observer.disconnect(); };
+    }, [onLoadMore, hasMore, isLoadingMore, loadMoreRootMargin, sentinelNode]);
     var handleTagToggle = React.useCallback(function (tag) {
         var next = toggleArrayItem(selectedList, tag, compareTags);
         onChange(next);
     }, [selectedList, compareTags, onChange]);
     var getFilteredAvailable = React.useCallback(function (selected) {
-        var search = inputValue.trim().toLowerCase();
         var available = items.filter(function (tag) { return !selected.some(function (s) { return compareTags(s, tag); }); });
+        // Si el padre escucha onInputChange, asumimos que él controla `items`
+        // según el query (filtrado server-side) y no aplicamos filtro local.
+        if (onInputChange)
+            return available;
+        var search = inputValue.trim().toLowerCase();
         if (!search)
             return available;
         return available.filter(function (tag) {
             return tag.value.toLowerCase().includes(search);
         });
-    }, [items, inputValue, compareTags]);
+    }, [items, inputValue, compareTags, onInputChange]);
     var filteredItems = getFilteredAvailable(selectedList);
+    var showSentinel = Boolean(onLoadMore) && (hasMore || Boolean(t.endOfListMessage));
+    var itemsWithSentinel = showSentinel
+        ? __spreadArray(__spreadArray([], filteredItems, true), [{ id: SENTINEL_KEY, value: "" }], false) : filteredItems;
     var handleAutocompleteSelection = React.useCallback(function (key) {
-        if (key == null)
+        if (key == null) {
             return;
+        }
         var tag = items.find(function (item) { return getTagKey(item) === key || item.value === key; });
         if (tag) {
             handleTagToggle(tag);
@@ -8255,7 +8287,10 @@ function TagsFilter(_a) {
     if (isLoading) {
         return (jsxRuntime.jsx("div", { className: "flex flex-col gap-4 ".concat(className), children: jsxRuntime.jsx("div", { className: "flex justify-center py-4", children: jsxRuntime.jsx(react.Spinner, { size: "sm" }) }) }));
     }
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 ".concat(className), children: [error && (jsxRuntime.jsxs("div", { className: "text-danger text-small py-2", children: [t.errorLoadingPrefix, ": ", error] })), !error && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [jsxRuntime.jsxs(H4, { className: "text-tiny text-left text-default-700", children: [t.labelSelect, required && jsxRuntime.jsx("span", { className: "text-danger ml-0.5", children: "*" })] }), jsxRuntime.jsx(AuraAutocomplete, { placeholder: t.placeholder, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t.placeholder, inputValue: inputValue, onInputChange: setInputValue, selectedKey: null, items: filteredItems, onSelectionChange: handleAutocompleteSelection, 
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 ".concat(className), children: [error && (jsxRuntime.jsxs("div", { className: "text-danger text-small py-2", children: [t.errorLoadingPrefix, ": ", error] })), !error && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [jsxRuntime.jsxs(H4, { className: "text-tiny text-left text-default-700", children: [t.labelSelect, required && jsxRuntime.jsx("span", { className: "text-danger ml-0.5", children: "*" })] }), jsxRuntime.jsx(AuraAutocomplete, { placeholder: t.placeholder, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t.placeholder, inputValue: inputValue, onInputChange: function (v) {
+                                    setInputValue(v);
+                                    onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(v);
+                                }, selectedKey: null, items: itemsWithSentinel, onSelectionChange: handleAutocompleteSelection, 
                                 // "focus" keeps the menu tied to focus; prefer opening when typing.
                                 menuTrigger: "input", 
                                 // When the filtered list is empty, avoid keeping an open overlay that blocks the modal.
@@ -8268,7 +8303,14 @@ function TagsFilter(_a) {
                                 }, listboxProps: {
                                     className: "max-h-[200px] overflow-y-auto",
                                 }, className: "w-full", children: function (item) {
-                                    var tag = item;
+                                    var candidate = item;
+                                    if (candidate.id === SENTINEL_KEY) {
+                                        return (jsxRuntime.jsx(react.AutocompleteItem, { textValue: "", isReadOnly: true, className: "opacity-100 cursor-default data-[hover=true]:bg-transparent", children: jsxRuntime.jsx("div", { ref: function (node) {
+                                                    var _a;
+                                                    setSentinelNode((_a = node === null || node === void 0 ? void 0 : node.closest("li")) !== null && _a !== void 0 ? _a : null);
+                                                }, className: "flex items-center justify-center py-1", children: isLoadingMore ? (jsxRuntime.jsx(react.Spinner, { size: "sm", "aria-label": t.loadingMoreLabel })) : !hasMore && t.endOfListMessage ? (jsxRuntime.jsx("span", { className: "text-tiny text-default-500", children: t.endOfListMessage })) : (jsxRuntime.jsx("span", { "aria-hidden": true, style: { height: 1, width: 1 } })) }) }, SENTINEL_KEY));
+                                    }
+                                    var tag = candidate;
                                     return (jsxRuntime.jsx(react.AutocompleteItem, { textValue: tag.value, children: tag.value }, getTagKey(tag)));
                                 } }, autocompleteKey)] }), jsxRuntime.jsx(react.Divider, {}), jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [jsxRuntime.jsx(H4, { className: "text-tiny text-left text-default-700", children: t.labelSelected }), selectedList.length > 0 ? (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 max-h-[80px] overflow-y-auto", children: __spreadArray([], selectedList, true).reverse().map(function (tag) { return (jsxRuntime.jsx(Chip, { variant: "flat", color: "primary", size: "sm", onClose: function () { return handleTagToggle(tag); }, children: tag.value }, getTagKey(tag))); }) })) : (jsxRuntime.jsx(P, { className: "text-tiny italic text-default-500", children: t.emptySelectedMessage }))] })] }))] }));
 }

package/dist/index.esm.js

@@ -6974,7 +6974,7 @@ var DayMonthPicker = function (_a) {
     var currentYearDate = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2());
     var pickerValue = (value === null || value === void 0 ? void 0 : value.type) === "dayMonth" ? value.dayMonth : null;
     var rangeValue = (value === null || value === void 0 ? void 0 : value.type) === "dayMonthRange" ? value.dayMonthRange : null;
-    return (jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxs(RadioGroup, { color: "primary", orientation: "horizontal", size: "sm", value: mode, onValueChange: handleModeChange, children: [jsx(Radio, { value: "single", children: t.dayMonthSingleOption }), jsx(Radio, { value: "range", children: t.dayMonthRangeOption })] }), mode === "single" ? (pickerValue ? (jsx(DatePicker, { value: pickerValue, onChange: handleSingleChange, "aria-label": t.dayMonthAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-40 ".concat(NO_YEAR_CLASS) }, "dmp-c")) : (jsx(DatePicker, { defaultValue: currentYearDate, onChange: handleSingleChange, "aria-label": t.dayMonthAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-40 ".concat(NO_YEAR_CLASS) }, "dmp-u"))) : (rangeValue ? (jsx(DateRangePicker, { value: rangeValue, onChange: handleRangeChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-xs ".concat(NO_YEAR_CLASS) }, "dmpr-c")) : (jsx(DateRangePicker, { defaultValue: { start: currentYearDate, end: currentYearDate }, onChange: handleRangeChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-xs ".concat(NO_YEAR_CLASS) }, "dmpr-u")))] }));
+    return (jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxs(RadioGroup, { color: "primary", orientation: "horizontal", size: "sm", value: mode, onValueChange: handleModeChange, children: [jsx(Radio, { value: "single", children: t.dayMonthSingleOption }), jsx(Radio, { value: "range", children: t.dayMonthRangeOption })] }), mode === "single" ? (jsx(DatePicker, { value: pickerValue, placeholderValue: currentYearDate, onChange: handleSingleChange, "aria-label": t.dayMonthAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-40 ".concat(NO_YEAR_CLASS) })) : (jsx(DateRangePicker, { value: rangeValue, placeholderValue: currentYearDate, onChange: handleRangeChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-xs ".concat(NO_YEAR_CLASS) }))] }));
 };
 
 /**
@@ -8199,17 +8199,21 @@ var SegmentationBuilder = forwardRef(function (_a, ref) {
 });
 SegmentationBuilder.displayName = "SegmentationBuilder";
 
+var SENTINEL_KEY = "__tags-filter-sentinel__";
 var DEFAULT_TRANSLATIONS = {
     placeholder: "Nombre de la etiqueta",
     labelSelect: "Selecciona etiqueta",
     labelSelected: "Etiquetas actuales",
     emptySelectedMessage: "No hay etiquetas seleccionadas",
     errorLoadingPrefix: "Error al cargar etiquetas",
+    loadingMoreLabel: "Cargando más etiquetas…",
+    endOfListMessage: "",
 };
 function toggleArrayItem(array, item, compareFn) {
     var index = array.findIndex(function (existing) { return compareFn(existing, item); });
-    if (index >= 0)
+    if (index >= 0) {
         return array.filter(function (_, i) { return i !== index; });
+    }
     return __spreadArray(__spreadArray([], array, true), [item], false);
 }
 var defaultCompareTags = function (a, b) {
@@ -8224,28 +8228,56 @@ var defaultGetTagKey = function (tag) { var _a; return (_a = tag.id) !== null &&
  * Cumple con i18n mediante la prop `translations`.
  */
 function TagsFilter(_a) {
-    var items = _a.items, value = _a.value, onChange = _a.onChange, _b = _a.translations, translations = _b === void 0 ? {} : _b, error = _a.error, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, _d = _a.className, className = _d === void 0 ? "" : _d, ariaLabel = _a["aria-label"], _e = _a.required, required = _e === void 0 ? false : _e, _f = _a.compareTags, compareTags = _f === void 0 ? defaultCompareTags : _f, _g = _a.getTagKey, getTagKey = _g === void 0 ? defaultGetTagKey : _g;
+    var items = _a.items, value = _a.value, onChange = _a.onChange, _b = _a.translations, translations = _b === void 0 ? {} : _b, error = _a.error, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, _d = _a.className, className = _d === void 0 ? "" : _d, ariaLabel = _a["aria-label"], _e = _a.required, required = _e === void 0 ? false : _e, _f = _a.compareTags, compareTags = _f === void 0 ? defaultCompareTags : _f, _g = _a.getTagKey, getTagKey = _g === void 0 ? defaultGetTagKey : _g, onInputChange = _a.onInputChange, _h = _a.hasMore, hasMore = _h === void 0 ? false : _h, _j = _a.isLoadingMore, isLoadingMore = _j === void 0 ? false : _j, onLoadMore = _a.onLoadMore, _k = _a.loadMoreRootMargin, loadMoreRootMargin = _k === void 0 ? "0px" : _k;
     var t = __assign(__assign({}, DEFAULT_TRANSLATIONS), translations);
-    var _h = useState(""), inputValue = _h[0], setInputValue = _h[1];
-    var _j = useState(0), autocompleteKey = _j[0], setAutocompleteKey = _j[1];
+    var _l = useState(""), inputValue = _l[0], setInputValue = _l[1];
+    var _m = useState(0), autocompleteKey = _m[0], setAutocompleteKey = _m[1];
     var selectedList = value !== null && value !== void 0 ? value : [];
+    var _o = useState(null), sentinelNode = _o[0], setSentinelNode = _o[1];
+    useEffect(function () {
+        if (!onLoadMore || !sentinelNode || !hasMore) {
+            return;
+        }
+        var observer = new IntersectionObserver(function (entries) {
+            for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                var entry = entries_1[_i];
+                if (entry.isIntersecting && hasMore && !isLoadingMore) {
+                    onLoadMore();
+                }
+            }
+        }, {
+            root: sentinelNode.closest("ul"),
+            rootMargin: loadMoreRootMargin,
+            threshold: 0,
+        });
+        observer.observe(sentinelNode);
+        return function () { return observer.disconnect(); };
+    }, [onLoadMore, hasMore, isLoadingMore, loadMoreRootMargin, sentinelNode]);
     var handleTagToggle = useCallback(function (tag) {
         var next = toggleArrayItem(selectedList, tag, compareTags);
         onChange(next);
     }, [selectedList, compareTags, onChange]);
     var getFilteredAvailable = useCallback(function (selected) {
-        var search = inputValue.trim().toLowerCase();
         var available = items.filter(function (tag) { return !selected.some(function (s) { return compareTags(s, tag); }); });
+        // Si el padre escucha onInputChange, asumimos que él controla `items`
+        // según el query (filtrado server-side) y no aplicamos filtro local.
+        if (onInputChange)
+            return available;
+        var search = inputValue.trim().toLowerCase();
         if (!search)
             return available;
         return available.filter(function (tag) {
             return tag.value.toLowerCase().includes(search);
         });
-    }, [items, inputValue, compareTags]);
+    }, [items, inputValue, compareTags, onInputChange]);
     var filteredItems = getFilteredAvailable(selectedList);
+    var showSentinel = Boolean(onLoadMore) && (hasMore || Boolean(t.endOfListMessage));
+    var itemsWithSentinel = showSentinel
+        ? __spreadArray(__spreadArray([], filteredItems, true), [{ id: SENTINEL_KEY, value: "" }], false) : filteredItems;
     var handleAutocompleteSelection = useCallback(function (key) {
-        if (key == null)
+        if (key == null) {
             return;
+        }
         var tag = items.find(function (item) { return getTagKey(item) === key || item.value === key; });
         if (tag) {
             handleTagToggle(tag);
@@ -8256,7 +8288,10 @@ function TagsFilter(_a) {
     if (isLoading) {
         return (jsx("div", { className: "flex flex-col gap-4 ".concat(className), children: jsx("div", { className: "flex justify-center py-4", children: jsx(Spinner, { size: "sm" }) }) }));
     }
-    return (jsxs("div", { className: "flex flex-col gap-4 ".concat(className), children: [error && (jsxs("div", { className: "text-danger text-small py-2", children: [t.errorLoadingPrefix, ": ", error] })), !error && (jsxs(Fragment, { children: [jsxs("div", { className: "flex flex-col gap-3", children: [jsxs(H4, { className: "text-tiny text-left text-default-700", children: [t.labelSelect, required && jsx("span", { className: "text-danger ml-0.5", children: "*" })] }), jsx(AuraAutocomplete, { placeholder: t.placeholder, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t.placeholder, inputValue: inputValue, onInputChange: setInputValue, selectedKey: null, items: filteredItems, onSelectionChange: handleAutocompleteSelection, 
+    return (jsxs("div", { className: "flex flex-col gap-4 ".concat(className), children: [error && (jsxs("div", { className: "text-danger text-small py-2", children: [t.errorLoadingPrefix, ": ", error] })), !error && (jsxs(Fragment, { children: [jsxs("div", { className: "flex flex-col gap-3", children: [jsxs(H4, { className: "text-tiny text-left text-default-700", children: [t.labelSelect, required && jsx("span", { className: "text-danger ml-0.5", children: "*" })] }), jsx(AuraAutocomplete, { placeholder: t.placeholder, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t.placeholder, inputValue: inputValue, onInputChange: function (v) {
+                                    setInputValue(v);
+                                    onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(v);
+                                }, selectedKey: null, items: itemsWithSentinel, onSelectionChange: handleAutocompleteSelection, 
                                 // "focus" keeps the menu tied to focus; prefer opening when typing.
                                 menuTrigger: "input", 
                                 // When the filtered list is empty, avoid keeping an open overlay that blocks the modal.
@@ -8269,7 +8304,14 @@ function TagsFilter(_a) {
                                 }, listboxProps: {
                                     className: "max-h-[200px] overflow-y-auto",
                                 }, className: "w-full", children: function (item) {
-                                    var tag = item;
+                                    var candidate = item;
+                                    if (candidate.id === SENTINEL_KEY) {
+                                        return (jsx(AutocompleteItem, { textValue: "", isReadOnly: true, className: "opacity-100 cursor-default data-[hover=true]:bg-transparent", children: jsx("div", { ref: function (node) {
+                                                    var _a;
+                                                    setSentinelNode((_a = node === null || node === void 0 ? void 0 : node.closest("li")) !== null && _a !== void 0 ? _a : null);
+                                                }, className: "flex items-center justify-center py-1", children: isLoadingMore ? (jsx(Spinner, { size: "sm", "aria-label": t.loadingMoreLabel })) : !hasMore && t.endOfListMessage ? (jsx("span", { className: "text-tiny text-default-500", children: t.endOfListMessage })) : (jsx("span", { "aria-hidden": true, style: { height: 1, width: 1 } })) }) }, SENTINEL_KEY));
+                                    }
+                                    var tag = candidate;
                                     return (jsx(AutocompleteItem, { textValue: tag.value, children: tag.value }, getTagKey(tag)));
                                 } }, autocompleteKey)] }), jsx(Divider, {}), jsxs("div", { className: "flex flex-col gap-3", children: [jsx(H4, { className: "text-tiny text-left text-default-700", children: t.labelSelected }), selectedList.length > 0 ? (jsx("div", { className: "flex flex-wrap gap-2 max-h-[80px] overflow-y-auto", children: __spreadArray([], selectedList, true).reverse().map(function (tag) { return (jsx(Chip, { variant: "flat", color: "primary", size: "sm", onClose: function () { return handleTagToggle(tag); }, children: tag.value }, getTagKey(tag))); }) })) : (jsx(P, { className: "text-tiny italic text-default-500", children: t.emptySelectedMessage }))] })] }))] }));
 }

package/dist/types/components/drawer-filters/_internal/DayMonthPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DayMonthPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer-filters/_internal/DayMonthPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAKxE,UAAU,mBAAmB;IAC5B,IAAI,EAAE,UAAU,GAAG,eAAe,CAAC;IACnC,QAAQ,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B,aAAa,EAAE,UAAU,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;CAC5C;AAED,UAAU,mBAAmB;IAC5B,KAAK,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC/C,YAAY,CAAC,EAAE,yBAAyB,CAAC;CACzC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2GxD,CAAC"}
+{"version":3,"file":"DayMonthPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer-filters/_internal/DayMonthPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAKxE,UAAU,mBAAmB;IAC5B,IAAI,EAAE,UAAU,GAAG,eAAe,CAAC;IACnC,QAAQ,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B,aAAa,EAAE,UAAU,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;CAC5C;AAED,UAAU,mBAAmB;IAC5B,KAAK,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC/C,YAAY,CAAC,EAAE,yBAAyB,CAAC;CACzC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqFxD,CAAC"}

package/dist/types/components/tags-filter/TagsFilter.d.ts

@@ -9,7 +9,7 @@ import type { TagsFilterProps } from "./TagsFilter.types";
 export declare function TagsFilter<T extends {
     id?: string;
     value: string;
-}>({ items, value, onChange, translations, error, isLoading, className, "aria-label": ariaLabel, required, compareTags, getTagKey, }: TagsFilterProps<T>): React.ReactElement;
+}>({ items, value, onChange, translations, error, isLoading, className, "aria-label": ariaLabel, required, compareTags, getTagKey, onInputChange, hasMore, isLoadingMore, onLoadMore, loadMoreRootMargin, }: TagsFilterProps<T>): React.ReactElement;
 export declare namespace TagsFilter {
     var displayName: string;
 }

package/dist/types/components/tags-filter/TagsFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagsFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/tags-filter/TagsFilter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,eAAe,EAA0B,MAAM,oBAAoB,CAAC;AA+BlF;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS;IAAE,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,EACpE,KAAK,EACL,KAAK,EACL,QAAQ,EACR,YAAiB,EACjB,KAAK,EACL,SAAiB,EACjB,SAAc,EACd,YAAY,EAAE,SAAS,EACvB,QAAgB,EAChB,WAA2D,EAC3D,SAAkD,GAClD,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAyIzC;yBArJe,UAAU"}
+{"version":3,"file":"TagsFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/tags-filter/TagsFilter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EACX,eAAe,EAEf,MAAM,oBAAoB,CAAC;AAqC5B;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS;IAAE,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,EACpE,KAAK,EACL,KAAK,EACL,QAAQ,EACR,YAAiB,EACjB,KAAK,EACL,SAAiB,EACjB,SAAc,EACd,YAAY,EAAE,SAAS,EACvB,QAAgB,EAChB,WAA2D,EAC3D,SAAkD,EAClD,aAAa,EACb,OAAe,EACf,aAAqB,EACrB,UAAU,EACV,kBAA0B,GAC1B,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CA0MzC;yBA3Ne,UAAU"}

package/dist/types/components/tags-filter/TagsFilter.types.d.ts

@@ -22,6 +22,10 @@ export type TagsFilterTranslations = {
     emptySelectedMessage?: string;
     /** Prefijo del mensaje de error (ej. "Error al cargar etiquetas") */
     errorLoadingPrefix?: string;
+    /** Texto sr-only del spinner inline mientras se cargan más páginas. */
+    loadingMoreLabel?: string;
+    /** Texto opcional al final de la lista cuando ya no hay más. Default: "" (oculto). */
+    endOfListMessage?: string;
 };
 export interface TagsFilterProps<T extends TagItem = TagItem> {
     /** Lista de etiquetas disponibles (ej. desde API) */
@@ -46,5 +50,23 @@ export interface TagsFilterProps<T extends TagItem = TagItem> {
     compareTags?: (a: T, b: T) => boolean;
     /** Función para obtener clave única de una etiqueta (por defecto: id ?? value) */
     getTagKey?: (tag: T) => string;
+    /**
+     * Se invoca cada vez que el usuario escribe en el input de búsqueda.
+     * Útil para filtrado server-side: el padre puede llamar a un endpoint con el valor
+     * y actualizar `items` con los resultados.
+     *
+     * Importante: cuando este callback está definido, el componente desactiva su
+     * filtro client-side sobre `items` (solo excluye los ya seleccionados). Se asume
+     * que el padre controla qué items se muestran según el query.
+     */
+    onInputChange?: (value: string) => void;
+    /** Hay más páginas disponibles. Si false, no se intenta cargar más. */
+    hasMore?: boolean;
+    /** Se está cargando la siguiente página (muestra spinner inline al final). */
+    isLoadingMore?: boolean;
+    /** Callback que se invoca cuando el componente necesita cargar la siguiente página. Solo se llama si hasMore && !isLoadingMore. */
+    onLoadMore?: () => void;
+    /** Margen para precarga del IntersectionObserver. Default: "0px". */
+    loadMoreRootMargin?: string;
 }
 //# sourceMappingURL=TagsFilter.types.d.ts.map

package/dist/types/components/tags-filter/TagsFilter.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagsFilter.types.d.ts","sourceRoot":"","sources":["../../../../src/components/tags-filter/TagsFilter.types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,OAAO;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACpC,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,qEAAqE;IACrE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO;IAC3D,qDAAqD;IACrD,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,0CAA0C;IAC1C,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,2DAA2D;IAC3D,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAClC,uFAAuF;IACvF,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2GAA2G;IAC3G,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;IACtC,kFAAkF;IAClF,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;CAC/B"}
+{"version":3,"file":"TagsFilter.types.d.ts","sourceRoot":"","sources":["../../../../src/components/tags-filter/TagsFilter.types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,OAAO;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACpC,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,qEAAqE;IACrE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sFAAsF;IACtF,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO;IAC3D,qDAAqD;IACrD,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,0CAA0C;IAC1C,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,2DAA2D;IAC3D,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAClC,uFAAuF;IACvF,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2GAA2G;IAC3G,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;IACtC,kFAAkF;IAClF,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mIAAmI;IACnI,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,qEAAqE;IACrE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC5B"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@beweco/aurora-ui",
-	"version": "0.6.41",
+	"version": "0.6.43",
 	"description": "Bewe Aurora UI Component Library",
 	"main": "./dist/index.cjs.js",
 	"module": "./dist/index.esm.js",