@beweco/aurora-ui 0.6.16 → 0.6.19

package/dist/index.cjs.js

@@ -6001,7 +6001,7 @@ var RangeFilter = function (_a) {
 // BASE FILTER SECTION COMPONENT
 // =========================================================================
 var FilterSection = function (_a) {
-    var filter = _a.filter, value = _a.value, onChange = _a.onChange, _b = _a.isExpanded, isExpanded = _b === void 0 ? false : _b, onToggleExpanded = _a.onToggleExpanded;
+    var filter = _a.filter, translations = _a.translations, value = _a.value, onChange = _a.onChange, _b = _a.isExpanded, isExpanded = _b === void 0 ? false : _b, onToggleExpanded = _a.onToggleExpanded;
     var _c = React.useState(isExpanded), internalExpanded = _c[0], setInternalExpanded = _c[1];
     var handleToggleExpanded = function () {
         var newExpanded = !internalExpanded;
@@ -6037,7 +6037,10 @@ var FilterSection = function (_a) {
             case "text":
                 return value && "value" in value && value.value !== "";
             case "number":
-                return value && "value" in value && value.value !== null && value.value !== undefined;
+                return (value &&
+                    "value" in value &&
+                    value.value !== null &&
+                    value.value !== undefined);
             default:
                 return false;
         }
@@ -6074,7 +6077,12 @@ var FilterSection = function (_a) {
             case "text":
                 return value && "value" in value && value.value !== "" ? 1 : 0;
             case "number":
-                return value && "value" in value && value.value !== null && value.value !== undefined ? 1 : 0;
+                return value &&
+                    "value" in value &&
+                    value.value !== null &&
+                    value.value !== undefined
+                    ? 1
+                    : 0;
             default:
                 return 0;
         }
@@ -6084,7 +6092,7 @@ var FilterSection = function (_a) {
             case "select":
                 return (jsxRuntime.jsx(SelectFilter, { filter: filter, value: value, onChange: onChange }));
             case "multiselect":
-                return (jsxRuntime.jsx(MultiSelectFilter, { filter: filter, value: value, onChange: onChange }));
+                return (jsxRuntime.jsx(MultiSelectFilter, { filter: filter, value: value, onChange: onChange, translations: translations }));
             case "range":
                 return (jsxRuntime.jsx(RangeFilterComponent, { filter: filter, value: value, onChange: onChange }));
             case "date":
@@ -6123,12 +6131,123 @@ var SelectFilter = function (_a) {
 // MULTISELECT FILTER
 // =========================================================================
 var MultiSelectFilter = function (_a) {
-    var filter = _a.filter, value = _a.value, onChange = _a.onChange;
+    var _b, _c, _d, _e;
+    var filter = _a.filter, value = _a.value, onChange = _a.onChange, translations = _a.translations;
+    var triggerRef = React.useRef(null);
+    var _f = React.useState(null), triggerWidthPx = _f[0], setTriggerWidthPx = _f[1];
+    var _g = React.useState(false), isOpen = _g[0], setIsOpen = _g[1];
+    var _h = React.useState(""), searchQuery = _h[0], setSearchQuery = _h[1];
     var currentValues = (value === null || value === void 0 ? void 0 : value.values) || [];
-    return (jsxRuntime.jsx(Select, { placeholder: "Seleccionar ".concat(filter.title.toLowerCase()), selectedKeys: currentValues, onSelectionChange: function (keys) {
-            var selectedKeys = Array.from(keys);
-            onChange({ values: selectedKeys });
-        }, selectionMode: "multiple", className: "w-full", children: filter.data.map(function (item) { return (jsxRuntime.jsx(react.SelectItem, { children: item.label }, item.value)); }) }));
+    var searchable = filter.searchable === true;
+    var searchPlaceholder = (_b = translations === null || translations === void 0 ? void 0 : translations.multiselectSearchPlaceholder) !== null && _b !== void 0 ? _b : "Buscar opciones...";
+    var moreLabelTemplate = (_c = translations === null || translations === void 0 ? void 0 : translations.multiselectMoreLabel) !== null && _c !== void 0 ? _c : "+{more} más";
+    var noResultsText = (_d = translations === null || translations === void 0 ? void 0 : translations.multiselectNoResults) !== null && _d !== void 0 ? _d : "Sin coincidencias";
+    var triggerPlaceholder = "Seleccionar ".concat(filter.title.toLowerCase());
+    var filteredData = React.useMemo(function () {
+        if (!searchable) {
+            return filter.data;
+        }
+        var q = searchQuery.trim().toLowerCase();
+        if (!q) {
+            return filter.data;
+        }
+        return filter.data.filter(function (item) {
+            return currentValues.includes(item.value) ||
+                item.label.toLowerCase().includes(q) ||
+                item.value.toLowerCase().includes(q);
+        });
+    }, [filter.data, searchQuery, currentValues, searchable]);
+    var syncPopoverWidthToTrigger = React.useCallback(function () {
+        var _a;
+        var w = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+        if (w != null && w > 0) {
+            setTriggerWidthPx(w);
+        }
+    }, []);
+    React.useLayoutEffect(function () {
+        var el = triggerRef.current;
+        if (!el || typeof ResizeObserver === "undefined") {
+            return;
+        }
+        var ro = new ResizeObserver(function () {
+            syncPopoverWidthToTrigger();
+        });
+        ro.observe(el);
+        return function () {
+            ro.disconnect();
+        };
+    }, [syncPopoverWidthToTrigger]);
+    var handleOpenChange = React.useCallback(function (open) {
+        setIsOpen(open);
+        if (!open) {
+            setSearchQuery("");
+            return;
+        }
+        requestAnimationFrame(function () {
+            syncPopoverWidthToTrigger();
+        });
+    }, [syncPopoverWidthToTrigger]);
+    var selectedKeys = React.useMemo(function () { return new Set(currentValues); }, [currentValues]);
+    var handleListboxSelectionChange = React.useCallback(function (keys) {
+        if (keys === "all") {
+            onChange({
+                values: filteredData.map(function (item) { return item.value; }),
+            });
+            return;
+        }
+        onChange({ values: Array.from(keys) });
+    }, [filteredData, onChange]);
+    var maxVisibleChips = Math.min(Math.max((_e = filter.maxVisibleChips) !== null && _e !== void 0 ? _e : 5, 1), 24);
+    var triggerSelection = React.useMemo(function () {
+        if (currentValues.length === 0) {
+            return { visible: [], overflow: 0 };
+        }
+        var ordered = currentValues.map(function (val) {
+            var _a;
+            var meta = filter.data.find(function (d) { return d.value === val; });
+            return { value: val, label: (_a = meta === null || meta === void 0 ? void 0 : meta.label) !== null && _a !== void 0 ? _a : val };
+        });
+        var visible = ordered.slice(0, maxVisibleChips);
+        var overflow = Math.max(0, ordered.length - visible.length);
+        return { visible: visible, overflow: overflow };
+    }, [currentValues, filter.data, maxVisibleChips]);
+    var triggerSelectionTitle = React.useMemo(function () {
+        if (currentValues.length === 0) {
+            return undefined;
+        }
+        return currentValues
+            .map(function (val) {
+            var _a;
+            var meta = filter.data.find(function (d) { return d.value === val; });
+            return (_a = meta === null || meta === void 0 ? void 0 : meta.label) !== null && _a !== void 0 ? _a : val;
+        })
+            .join(", ");
+    }, [currentValues, filter.data]);
+    var popoverWidthStyle = triggerWidthPx != null
+        ? {
+            width: triggerWidthPx,
+            minWidth: triggerWidthPx,
+            maxWidth: triggerWidthPx,
+        }
+        : undefined;
+    return (jsxRuntime.jsxs(react.Popover, { isOpen: isOpen, onOpenChange: handleOpenChange, placement: "bottom-start", offset: 6, 
+        // Dentro de Drawer (modal + focus scope), blur al portal del popover cerraba el panel antes de poder usar el buscador.
+        shouldCloseOnBlur: false, updatePositionDeps: [triggerWidthPx !== null && triggerWidthPx !== void 0 ? triggerWidthPx : 0], classNames: {
+            base: "w-full min-w-0 max-w-none box-border",
+            content: "w-full min-w-0 !max-w-none",
+        }, style: popoverWidthStyle, children: [jsxRuntime.jsx(react.PopoverTrigger, { children: jsxRuntime.jsxs("button", { ref: triggerRef, type: "button", className: react.cn("flex w-full min-h-12 items-center justify-between gap-2 rounded-medium border border-default-200 bg-background px-3 py-2.5 text-left text-small transition-colors", "hover:border-default-300 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background", isOpen && "border-primary"), "aria-expanded": isOpen, "aria-haspopup": "dialog", children: [jsxRuntime.jsx("span", { className: "line-clamp-2 min-w-0 flex-1 text-small font-medium leading-snug text-foreground", title: triggerSelectionTitle, children: triggerSelection.visible.length > 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [triggerSelection.visible.map(function (item, index) { return (jsxRuntime.jsxs(React.Fragment, { children: [index > 0 ? (jsxRuntime.jsx("span", { className: "font-normal text-default-400", children: ", " })) : null, jsxRuntime.jsx("span", { children: item.label })] }, item.value)); }), triggerSelection.overflow > 0 ? (jsxRuntime.jsxs("span", { className: "font-normal text-default-500", children: [" ", moreLabelTemplate.replace("{more}", String(triggerSelection.overflow))] })) : null] })) : (jsxRuntime.jsx("span", { className: "font-normal text-default-400", children: triggerPlaceholder })) }), jsxRuntime.jsx(IconComponent, { icon: isOpen
+                                ? "solar:alt-arrow-up-outline"
+                                : "solar:alt-arrow-down-outline", className: "shrink-0 text-default-400", size: "sm", "aria-hidden": true })] }) }), jsxRuntime.jsx(react.PopoverContent, { className: "border border-default-200 bg-content1 p-0 shadow-medium", children: jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-0 p-2", children: [searchable && (jsxRuntime.jsx("div", { className: "border-b border-default-100 px-1 pb-2", children: jsxRuntime.jsx(Input, { type: "search", placeholder: searchPlaceholder, value: searchQuery, onValueChange: setSearchQuery, className: "w-full", size: "sm", variant: "flat", radius: "full", classNames: {
+                                    base: "w-full",
+                                    inputWrapper: "bg-default-100 shadow-none border-0 min-h-9 h-9",
+                                    input: "text-small",
+                                }, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:magnifer-outline", className: "pointer-events-none shrink-0 text-default-400", size: "sm", "aria-hidden": true }), "aria-label": searchPlaceholder }) })), jsxRuntime.jsx("div", { className: "max-h-60 overflow-y-auto px-1 py-1", children: filteredData.length === 0 ? (jsxRuntime.jsx("p", { className: "px-2 py-3 text-center text-tiny text-default-400", children: noResultsText })) : (jsxRuntime.jsx(react.Listbox, { "aria-label": filter.title, variant: "flat", selectionMode: "multiple", selectionBehavior: "toggle", selectedKeys: selectedKeys, onSelectionChange: handleListboxSelectionChange, disallowEmptySelection: false, hideSelectedIcon: true, classNames: {
+                                    base: "w-full gap-0.5 p-0",
+                                    list: "gap-0.5",
+                                }, itemClasses: {
+                                    base: "rounded-medium px-2 py-2.5 data-[hover=true]:bg-default-100 data-[selectable=true]:focus:bg-default-100 data-[selected=true]:bg-primary-50/80",
+                                    title: "text-small font-normal text-default-600 data-[selected=true]:font-medium data-[selected=true]:text-primary",
+                                }, children: filteredData.map(function (item) { return (jsxRuntime.jsx(react.ListboxItem, { textValue: item.label, children: item.label }, item.value)); }) })) })] }) })] }));
 };
 // =========================================================================
 // RANGE FILTER
@@ -6215,7 +6334,7 @@ var NumberFilter = function (_a) {
  *
  * Características:
  * - Dynamic header with title and description
- * - Body with configurable filters (select, multiselect, range, date)
+ * - Body with configurable filters (select, multiselect con panel; buscador si `searchable: true`, range, date)
  * - Footer with action buttons (clear, cancel, apply)
  * - Internal state management of filters
  * - Callback for applying filters with processed values
@@ -6296,7 +6415,10 @@ var DrawerFilters = function (_a) {
                     }
                     break;
                 case "number":
-                    if (value && "value" in value && value.value !== null && value.value !== undefined) {
+                    if (value &&
+                        "value" in value &&
+                        value.value !== null &&
+                        value.value !== undefined) {
                         processedFilters[key] = String(value.value);
                     }
                     break;
@@ -6311,7 +6433,7 @@ var DrawerFilters = function (_a) {
         onOpenChange(false);
     }, [filterValues, config.data, onApplyFilters, onOpenChange]);
     return (jsxRuntime.jsx(react.Drawer, { isOpen: isOpen, onOpenChange: handleOpenChange, placement: "right", size: "md", className: react.cn("drawer-filters", className), isDismissable: false, hideCloseButton: false, children: jsxRuntime.jsxs(react.DrawerContent, { children: [jsxRuntime.jsx(DrawerFiltersHeader, { title: config.title, description: config.description }), jsxRuntime.jsx(react.DrawerBody, { className: "px-6 py-10", children: jsxRuntime.jsx("div", { className: "space-y-3", children: config.data.map(function (filter) {
-                            return (jsxRuntime.jsx(FilterSection, { filter: filter, value: filterValues[filter.key], onChange: function (value) { return handleFilterChange(filter.key, value); } }, filter.key));
+                            return (jsxRuntime.jsx(FilterSection, { filter: filter, translations: translations, value: filterValues[filter.key], onChange: function (value) { return handleFilterChange(filter.key, value); } }, filter.key));
                         }) }) }), jsxRuntime.jsx(DrawerFiltersFooter, { onClearFilters: handleClearFilters, onCancel: handleCancel, onApplyFilters: handleApplyFilters, translations: translations })] }) }));
 };
 DrawerFilters.displayName = "DrawerFilters";
@@ -7013,7 +7135,157 @@ var ModalContent = react.ModalContent;
 
 var ModalHeader = react.ModalHeader;
 
-var ModalBody = react.ModalBody;
+var ModalBody = React.forwardRef(function (props, forwardedRef) {
+    var nodeRef = React.useRef(null);
+    var callbackRef = React.useCallback(function (node) {
+        nodeRef.current = node;
+        if (forwardedRef) {
+            if (typeof forwardedRef === "function")
+                forwardedRef(node);
+            else
+                forwardedRef.current = node;
+        }
+    }, [forwardedRef]);
+    React.useEffect(function () {
+        var node = nodeRef.current;
+        if (!node)
+            return;
+        var parent = node.parentElement;
+        if (!parent)
+            return;
+        // Hide native scrollbar
+        node.style.scrollbarWidth = "none";
+        // Parent needs relative positioning for the track
+        var parentPos = window.getComputedStyle(parent).position;
+        if (parentPos === "static") {
+            parent.style.position = "relative";
+        }
+        // Create track — placed on the PARENT so it doesn't scroll
+        var track = document.createElement("div");
+        track.setAttribute("data-auraui-scrollbar", "track");
+        Object.assign(track.style, {
+            position: "absolute",
+            right: "20px",
+            width: "6px",
+            zIndex: "10",
+            cursor: "pointer",
+        });
+        // Create thumb
+        var thumb = document.createElement("div");
+        thumb.setAttribute("data-auraui-scrollbar", "thumb");
+        Object.assign(thumb.style, {
+            width: "6px",
+            borderRadius: "3px",
+            backgroundColor: "rgba(255,255,255,0.28)",
+            cursor: "grab",
+        });
+        track.appendChild(thumb);
+        parent.appendChild(track);
+        // --- Scroll position update ---
+        var trackHeight = 0;
+        var thumbH = 0;
+        var update = function () {
+            var scrollTop = node.scrollTop, scrollHeight = node.scrollHeight, clientHeight = node.clientHeight;
+            var hasOverflow = scrollHeight > clientHeight;
+            if (!hasOverflow) {
+                track.style.display = "none";
+                return;
+            }
+            track.style.display = "block";
+            var nodeRect = node.getBoundingClientRect();
+            var parentRect = parent.getBoundingClientRect();
+            var trackTop = nodeRect.top - parentRect.top;
+            trackHeight = nodeRect.height;
+            track.style.top = "".concat(trackTop, "px");
+            track.style.height = "".concat(trackHeight, "px");
+            var ratio = clientHeight / scrollHeight;
+            thumbH = Math.max(ratio * trackHeight, 30);
+            var maxScroll = scrollHeight - clientHeight;
+            var thumbTop = maxScroll > 0
+                ? (scrollTop / maxScroll) * (trackHeight - thumbH)
+                : 0;
+            thumb.style.height = "".concat(thumbH, "px");
+            thumb.style.marginTop = "".concat(thumbTop, "px");
+        };
+        node.addEventListener("scroll", update, { passive: true });
+        var ro = new ResizeObserver(update);
+        ro.observe(node);
+        requestAnimationFrame(update);
+        // --- Drag support ---
+        var isDragging = false;
+        var startY = 0;
+        var startScrollTop = 0;
+        var getIsDark = function () {
+            return document.documentElement.classList.contains("dark") ||
+                document.documentElement.getAttribute("data-theme") === "dark" ||
+                document.body.classList.contains("dark");
+        };
+        var onMouseDown = function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            isDragging = true;
+            startY = e.clientY;
+            startScrollTop = node.scrollTop;
+            thumb.style.cursor = "grabbing";
+            thumb.style.backgroundColor = getIsDark()
+                ? "rgba(255,255,255,0.45)"
+                : "rgba(0,0,0,0.55)";
+            document.addEventListener("mousemove", onMouseMove);
+            document.addEventListener("mouseup", onMouseUp);
+        };
+        var onMouseMove = function (e) {
+            if (!isDragging)
+                return;
+            e.preventDefault();
+            var deltaY = e.clientY - startY;
+            var maxScroll = node.scrollHeight - node.clientHeight;
+            var scrollDelta = (deltaY / (trackHeight - thumbH)) * maxScroll;
+            node.scrollTop = startScrollTop + scrollDelta;
+        };
+        var onMouseUp = function () {
+            isDragging = false;
+            thumb.style.cursor = "grab";
+            detectTheme(); // Reset thumb color
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+        };
+        // Click on track to jump
+        var onTrackClick = function (e) {
+            if (e.target === thumb)
+                return;
+            var trackRect = track.getBoundingClientRect();
+            var clickRatio = (e.clientY - trackRect.top) / trackHeight;
+            node.scrollTop =
+                clickRatio * (node.scrollHeight - node.clientHeight);
+        };
+        thumb.addEventListener("mousedown", onMouseDown);
+        track.addEventListener("click", onTrackClick);
+        // --- Theme detection ---
+        var detectTheme = function () {
+            if (isDragging)
+                return;
+            thumb.style.backgroundColor = getIsDark()
+                ? "rgba(255,255,255,0.28)"
+                : "rgba(0,0,0,0.4)";
+        };
+        detectTheme();
+        var mo = new MutationObserver(detectTheme);
+        mo.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class", "data-theme", "style"],
+        });
+        return function () {
+            node.removeEventListener("scroll", update);
+            ro.disconnect();
+            mo.disconnect();
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+            track.remove();
+        };
+    }, []);
+    return (jsxRuntime.jsx(react.ModalBody, __assign({ ref: callbackRef }, props)));
+});
+ModalBody.displayName = "ModalBody";
 
 var ModalFooter = react.ModalFooter;