@beweco/aurora-ui 0.6.76-qa.102 → 0.6.76-qa.103

package/dist/index.cjs.js

@@ -613,6 +613,139 @@ function AreaLineChart(_a) {
     return jsxRuntime.jsx("div", { className: className, children: content });
 }
 
+/**
+ * Interacciones que un popover no-modal NO debe tratar como "clic fuera".
+ *
+ * El problema que resuelve: `useOverlay` de react-aria trata cualquier
+ * pulsación fuera del popover como interacción externa y, cuando el popover es
+ * el overlay visible más reciente, hace `stopPropagation()` + `preventDefault()`
+ * sobre el `pointerdown` **y** sobre el `click`
+ * (`@react-aria/overlays/useOverlay`). El evento nunca llega a su destino, así
+ * que `usePress` no registra la pulsación y `onPress` no se dispara: el primer
+ * clic solo cierra el desplegable.
+ *
+ * Para un clic en la página de fondo eso es lo correcto: descartar el
+ * desplegable sin activar nada por debajo. Dentro del mismo diálogo no: ahí el
+ * usuario está rellenando un formulario y espera que su clic llegue. Y como los
+ * buscadores se reabren al recuperar el foco, el clic siguiente se volvía a
+ * tragar — un callejón sin salida del que solo se salía vaciando el campo.
+ *
+ * La única palanca es `shouldCloseOnInteractOutside`: es el guardián de esos dos
+ * `preventDefault`. Devolviendo `false` para lo que no es realmente "fuera", la
+ * pulsación llega intacta. El desplegable sigue cerrándose igual, pero por
+ * pérdida de foco (`shouldCloseOnBlur`) en vez de por interacción externa.
+ */
+var _a, _b;
+/**
+ * Marca un botón como control de cierre de su contenedor. Los popovers de Aura
+ * no lo cuentan como interacción externa, así que su pulsación no se pierde.
+ */
+var DISMISS_CONTROL_ATTRIBUTE = "data-aura-dismiss";
+/** Props a esparcir en un control de cierre: `<Button {...dismissControlProps} />`. */
+var dismissControlProps = (_a = {},
+    _a[DISMISS_CONTROL_ATTRIBUTE] = "true",
+    _a);
+/**
+ * Marca el contenedor de una superficie modal propia (wizard, panel a medida).
+ * No hace falta en `Modal` ni `Drawer`: los diálogos de HeroUI ya traen
+ * `role="dialog"`, que cuenta igual.
+ */
+var CONTAINER_ATTRIBUTE = "data-aura-container";
+/** Props a esparcir en el contenedor: `<div {...containerProps}>`. */
+var containerProps = (_b = {},
+    _b[CONTAINER_ATTRIBUTE] = "true",
+    _b);
+/**
+ * Selector de controles de cierre. Incluye `[aria-label="Close"]` para cubrir
+ * los botones de cerrar internos de HeroUI (Modal, Drawer), que no admiten
+ * atributos propios.
+ */
+var DISMISS_CONTROL_SELECTOR = "[".concat(DISMISS_CONTROL_ATTRIBUTE, "],[aria-label=\"Close\"]");
+/** Selector del contenedor modal: el marcado de Aura o un diálogo estándar. */
+var CONTAINER_SELECTOR = "[".concat(CONTAINER_ATTRIBUTE, "],[role=\"dialog\"],[role=\"alertdialog\"]");
+var matchesAncestor = function (element, selector) {
+    if (!element || typeof element.closest !== "function") {
+        return false;
+    }
+    return element.closest(selector) != null;
+};
+/** `true` si el elemento es un control de cierre (o está dentro de uno). */
+var isDismissControl = function (element) { return matchesAncestor(element, DISMISS_CONTROL_SELECTOR); };
+/**
+ * `true` si el elemento vive dentro de una superficie modal: un diálogo estándar
+ * o un contenedor marcado con `containerProps`.
+ *
+ * Es la condición que decide si un componente con popover no-modal necesita el
+ * predicado de más abajo. Fuera de una superficie así, HeroUI ya resuelve el
+ * caso por su cuenta (`ariaShouldCloseOnInteractOutside` cierra el desplegable
+ * y devuelve `false`, de modo que la pulsación llega a su destino); solo falla
+ * cuando hay un diálogo de por medio, y ahí entra el nuestro.
+ */
+var isInsideDismissContainer = function (element) { return matchesAncestor(element, CONTAINER_SELECTOR); };
+/**
+ * Predicado listo para `popoverProps.shouldCloseOnInteractOutside` de un
+ * componente con popover no-modal.
+ *
+ * Devuelve `false` —no es interacción externa— en tres casos:
+ *
+ * 1. Dentro del propio componente: el popover vive en un portal, así que el
+ *    campo de búsqueda queda fuera de él y una pulsación sobre el texto se
+ *    contaba como externa.
+ * 2. Sobre un control de cierre del contenedor propio.
+ * 3. Dentro del mismo diálogo/contenedor que el componente: seguir rellenando
+ *    el formulario no es descartar el desplegable.
+ *
+ * Las exenciones 2 y 3 se limitan al contenedor del propio componente. Un
+ * control de cierre suelto en la página —la X de un toast, la de un banner— no
+ * tiene nada que ver con este desplegable, así que sigue contando como externo
+ * y lo cierra.
+ *
+ * @param element Elemento donde ha empezado la interacción.
+ * @param root    Raíz del componente.
+ */
+var shouldClosePopoverOnInteractOutside = function (element, root) {
+    var _a;
+    if (root === null || root === void 0 ? void 0 : root.contains(element)) {
+        return false;
+    }
+    var container = (_a = root === null || root === void 0 ? void 0 : root.closest) === null || _a === void 0 ? void 0 : _a.call(root, CONTAINER_SELECTOR);
+    if (isDismissControl(element)) {
+        // Sin contenedor propio no hay a quién eximir: el control de cierre es
+        // de otra cosa y su pulsación descarta el desplegable como cualquier otra.
+        return container ? !container.contains(element) : true;
+    }
+    if (!matchesAncestor(element, CONTAINER_SELECTOR)) {
+        return true;
+    }
+    // Solo exime el contenedor propio: un diálogo distinto sigue siendo externo.
+    return !(container === null || container === void 0 ? void 0 : container.contains(element));
+};
+/**
+ * Mezcla las `popoverProps` de un consumidor con el predicado por defecto, para
+ * que un componente con popover no-modal no trate como "clic fuera" lo que no lo
+ * es (ver `shouldClosePopoverOnInteractOutside`).
+ *
+ * Llamar solo cuando el componente está dentro de una superficie modal
+ * (`isInsideDismissContainer`). Fuera de ella HeroUI trae su propio default y
+ * hay que dejárselo: instalar cualquier predicado lo desactiva, porque su mezcla
+ * es por truthiness (`@heroui/autocomplete` → `use-autocomplete`).
+ *
+ * El consumidor puede sustituir el predicado pasando el suyo — es la salida para
+ * casos a medida, no la puerta a `() => true`. Pasar `shouldCloseOnInteractOutside:
+ * undefined` NO desactiva el default: para eso hay que pasar un predicado propio.
+ *
+ * @param popoverProps Las que llegan del consumidor, si las hay.
+ * @param getRoot      Lector de la raíz del componente. Es una función y no un
+ *                     valor porque el `ref` todavía es `null` en el primer
+ *                     render: hay que leerlo cuando ocurre la interacción.
+ */
+var withPopoverDismissDefaults = function (popoverProps, getRoot) {
+    var _a;
+    return (__assign(__assign({}, popoverProps), { shouldCloseOnInteractOutside: (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.shouldCloseOnInteractOutside) !== null && _a !== void 0 ? _a : (function (element) {
+            return shouldClosePopoverOnInteractOutside(element, getRoot());
+        }) }));
+};
+
 /** Clases del wrapper del icono: margen derecho y alineación igual para lupa e iconos custom */
 var ICON_WRAPPER_CLASSNAME = "mr-2 flex shrink-0 items-center [&_svg]:shrink-0";
 var DEFAULT_ICON = (jsxRuntime.jsx(IconComponent, { icon: "solar:magnifer-outline", className: "text-default-400 pointer-events-none shrink-0", size: "sm", "aria-hidden": true }));
@@ -625,15 +758,39 @@ var DEFAULT_ICON = (jsxRuntime.jsx(IconComponent, { icon: "solar:magnifer-outlin
  * - labelPlacement: Outside
  * - Size: sm, md, lg (configurable)
  * - Icono: lupa por defecto; acepta prop icon para personalizar u ocultar (null).
+ *
+ * **Dentro de un modal, drawer o contenedor marcado con `containerProps`**, el
+ * desplegable deja de contar como "clic fuera" lo que ocurre dentro del propio
+ * componente, sobre un control de cierre del contenedor o dentro de ese mismo
+ * contenedor: react-aria hace `preventDefault()` sobre esas pulsaciones y el
+ * control de destino nunca llegaba a recibir su `onPress` (ver
+ * `shouldClosePopoverOnInteractOutside`). Sigue cerrándose, por la vía del
+ * `shouldCloseOnBlur` del combobox de HeroUI — no por `onBlurWithin` del
+ * overlay, que está gateado por el mismo predicado.
+ *
+ * **Fuera de un contenedor así no se instala nada**: HeroUI ya resuelve ese caso
+ * con `ariaShouldCloseOnInteractOutside`, y como su mezcla es por truthiness,
+ * poner un predicado propio lo desactivaría y volvería a tragarse la pulsación.
+ *
+ * Un consumidor puede sustituir el predicado con su propio
+ * `popoverProps.shouldCloseOnInteractOutside`; entonces manda el suyo siempre.
  */
 var AuraAutocomplete = function (_a) {
-    var label = _a.label, id = _a.id, icon = _a.icon, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "bordered" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, props = __rest(_a, ["label", "id", "icon", "size", "variant", "radius"]);
+    var label = _a.label, id = _a.id, icon = _a.icon, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "bordered" : _c, _d = _a.radius, radius = _d === void 0 ? "md" : _d, popoverProps = _a.popoverProps, props = __rest(_a, ["label", "id", "icon", "size", "variant", "radius", "popoverProps"]);
     var generatedId = React.useId();
+    // El desplegable se renderiza en un portal, así que el campo de búsqueda
+    // queda fuera de él. Sin esta raíz el predicado no puede distinguir lo que
+    // pasa dentro del componente de un clic real de fuera. Se guarda en estado
+    // —y no en un ref— porque de ella depende SI se instala el predicado, y eso
+    // hay que decidirlo en render: un ref no dispara el re-render que hace falta.
+    var _e = React.useState(null), root = _e[0], setRoot = _e[1];
     var autoId = id || generatedId;
     var resolvedIcon = icon === undefined ? DEFAULT_ICON : icon;
     var hasIcon = resolvedIcon != null;
     var endContent = hasIcon ? (jsxRuntime.jsx("span", { className: ICON_WRAPPER_CLASSNAME, children: resolvedIcon })) : null;
-    return (jsxRuntime.jsxs("div", { children: [label && (jsxRuntime.jsx("label", { htmlFor: autoId, className: "block mb-2 text-tiny text-default-600", children: label })), jsxRuntime.jsx(react.Autocomplete, __assign({}, props, { id: autoId, label: undefined, labelPlacement: "outside", variant: variant, size: size, radius: radius, endContent: endContent, classNames: __assign({ base: "[&_[data-slot=input-wrapper][data-focus=true]]:!border-primary-500", popoverContent: "aura-popover-content [&_li[data-hover=true]]:!bg-primary-50 [&_li[data-hover=true]]:!text-default-600 [&_li]:!text-default-500" }, (hasIcon && { selectorButton: "!hidden" })) }))] }));
+    return (jsxRuntime.jsxs("div", { ref: setRoot, children: [label && (jsxRuntime.jsx("label", { htmlFor: autoId, className: "block mb-2 text-tiny text-default-600", children: label })), jsxRuntime.jsx(react.Autocomplete, __assign({}, props, { id: autoId, label: undefined, labelPlacement: "outside", variant: variant, size: size, radius: radius, endContent: endContent, popoverProps: isInsideDismissContainer(root)
+                    ? withPopoverDismissDefaults(popoverProps, function () { return root; })
+                    : popoverProps, classNames: __assign({ base: "[&_[data-slot=input-wrapper][data-focus=true]]:!border-primary-500", popoverContent: "aura-popover-content [&_li[data-hover=true]]:!bg-primary-50 [&_li[data-hover=true]]:!text-default-600 [&_li]:!text-default-500" }, (hasIcon && { selectorButton: "!hidden" })) }))] }));
 };
 
 /**
@@ -4053,96 +4210,6 @@ var MenuClaw = React.memo(function MenuClaw(_a) {
                             }) }), helpSection ? (jsxRuntime.jsx("div", { className: "mt-auto flex flex-col items-center justify-center", children: jsxRuntime.jsx(react.Button, { fullWidth: true, className: "text-default-500 data-[hover=true]:text-default-600", startContent: jsxRuntime.jsx(IconComponent, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: collapsed, children: !collapsed ? (jsxRuntime.jsx("span", { className: "menu-claw-collapsible truncate", children: helpSection.title })) : null }) })) : null] }) })] }));
 });
 
-/**
- * Interacciones que un popover no-modal NO debe tratar como "clic fuera".
- *
- * El problema que resuelve: `useOverlay` de react-aria trata cualquier
- * pulsación fuera del popover como interacción externa y, cuando el popover es
- * el overlay visible más reciente, hace `stopPropagation()` + `preventDefault()`
- * sobre el `pointerdown` **y** sobre el `click`
- * (`@react-aria/overlays/useOverlay`). El evento nunca llega a su destino, así
- * que `usePress` no registra la pulsación y `onPress` no se dispara: el primer
- * clic solo cierra el desplegable.
- *
- * Para un clic en la página de fondo eso es lo correcto: descartar el
- * desplegable sin activar nada por debajo. Dentro del mismo diálogo no: ahí el
- * usuario está rellenando un formulario y espera que su clic llegue. Y como los
- * buscadores se reabren al recuperar el foco, el clic siguiente se volvía a
- * tragar — un callejón sin salida del que solo se salía vaciando el campo.
- *
- * La única palanca es `shouldCloseOnInteractOutside`: es el guardián de esos dos
- * `preventDefault`. Devolviendo `false` para lo que no es realmente "fuera", la
- * pulsación llega intacta. El desplegable sigue cerrándose igual, pero por
- * pérdida de foco (`shouldCloseOnBlur`) en vez de por interacción externa.
- */
-var _a, _b;
-/**
- * Marca un botón como control de cierre de su contenedor. Los popovers de Aura
- * no lo cuentan como interacción externa, así que su pulsación no se pierde.
- */
-var DISMISS_CONTROL_ATTRIBUTE = "data-aura-dismiss";
-/** Props a esparcir en un control de cierre: `<Button {...dismissControlProps} />`. */
-var dismissControlProps = (_a = {},
-    _a[DISMISS_CONTROL_ATTRIBUTE] = "true",
-    _a);
-/**
- * Marca el contenedor de una superficie modal propia (wizard, panel a medida).
- * No hace falta en `Modal` ni `Drawer`: los diálogos de HeroUI ya traen
- * `role="dialog"`, que cuenta igual.
- */
-var CONTAINER_ATTRIBUTE = "data-aura-container";
-/** Props a esparcir en el contenedor: `<div {...containerProps}>`. */
-var containerProps = (_b = {},
-    _b[CONTAINER_ATTRIBUTE] = "true",
-    _b);
-/**
- * Selector de controles de cierre. Incluye `[aria-label="Close"]` para cubrir
- * los botones de cerrar internos de HeroUI (Modal, Drawer), que no admiten
- * atributos propios.
- */
-var DISMISS_CONTROL_SELECTOR = "[".concat(DISMISS_CONTROL_ATTRIBUTE, "],[aria-label=\"Close\"]");
-/** Selector del contenedor modal: el marcado de Aura o un diálogo estándar. */
-var CONTAINER_SELECTOR = "[".concat(CONTAINER_ATTRIBUTE, "],[role=\"dialog\"],[role=\"alertdialog\"]");
-var matchesAncestor = function (element, selector) {
-    if (!element || typeof element.closest !== "function") {
-        return false;
-    }
-    return element.closest(selector) != null;
-};
-/** `true` si el elemento es un control de cierre (o está dentro de uno). */
-var isDismissControl = function (element) { return matchesAncestor(element, DISMISS_CONTROL_SELECTOR); };
-/**
- * Predicado listo para `popoverProps.shouldCloseOnInteractOutside` de un
- * componente con popover no-modal.
- *
- * Devuelve `false` —no es interacción externa— en tres casos:
- *
- * 1. Dentro del propio componente: el popover vive en un portal, así que el
- *    campo de búsqueda queda fuera de él y una pulsación sobre el texto se
- *    contaba como externa.
- * 2. Sobre un control de cierre del contenedor.
- * 3. Dentro del mismo diálogo/contenedor que el componente: seguir rellenando
- *    el formulario no es descartar el desplegable.
- *
- * @param element Elemento donde ha empezado la interacción.
- * @param root    Raíz del componente.
- */
-var shouldClosePopoverOnInteractOutside = function (element, root) {
-    var _a;
-    if (root === null || root === void 0 ? void 0 : root.contains(element)) {
-        return false;
-    }
-    if (isDismissControl(element)) {
-        return false;
-    }
-    if (!matchesAncestor(element, CONTAINER_SELECTOR)) {
-        return true;
-    }
-    // Solo exime el contenedor propio: un diálogo distinto sigue siendo externo.
-    var container = (_a = root === null || root === void 0 ? void 0 : root.closest) === null || _a === void 0 ? void 0 : _a.call(root, CONTAINER_SELECTOR);
-    return !(container === null || container === void 0 ? void 0 : container.contains(element));
-};
-
 var StepIndicator = function (_a) {
     var currentStep = _a.currentStep, totalSteps = _a.totalSteps, _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.showStepText, showStepText = _c === void 0 ? true : _c, stepTextFormatter = _a.stepTextFormatter, className = _a.className, props = __rest(_a, ["currentStep", "totalSteps", "color", "showStepText", "stepTextFormatter", "className"]);
     var progressPercentage = Math.min((currentStep / totalSteps) * 100, 100);
@@ -8984,7 +9051,9 @@ function TagsFilter(_a) {
     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];
-    var rootRef = React.useRef(null);
+    // En estado y no en un ref: de la raíz depende SI se instala el predicado
+    // (solo dentro de una superficie modal), y eso se decide en render.
+    var _p = React.useState(null), root = _p[0], setRoot = _p[1];
     React.useEffect(function () {
         if (!onLoadMore || !sentinelNode || !hasMore) {
             return;
@@ -9056,7 +9125,7 @@ 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", { ref: rootRef, 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) {
+    return (jsxRuntime.jsxs("div", { ref: setRoot, 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, 
@@ -9090,9 +9159,16 @@ function TagsFilter(_a) {
                                     // click de toda interacción externa, así que su `onPress` no se
                                     // disparaba y el contenedor no se podía cerrar mientras el
                                     // desplegable estuviera abierto (ver `shouldClosePopoverOnInteractOutside`).
-                                    shouldCloseOnInteractOutside: function (element) {
-                                        return shouldClosePopoverOnInteractOutside(element, rootRef.current);
-                                    },
+                                    //
+                                    // Solo dentro de una superficie modal: fuera de ella HeroUI ya
+                                    // resuelve el caso por su cuenta, y como su mezcla es por
+                                    // truthiness, instalar cualquier predicado lo desactivaría y la
+                                    // pulsación volvería a perderse.
+                                    shouldCloseOnInteractOutside: isInsideDismissContainer(root)
+                                        ? function (element) {
+                                            return shouldClosePopoverOnInteractOutside(element, root);
+                                        }
+                                        : undefined,
                                 }, listboxProps: {
                                     className: "max-h-[200px] overflow-y-auto",
                                 }, className: "w-full", children: function (item) {
@@ -10110,6 +10186,7 @@ exports.isDonutEmpty = isDonutEmpty;
 exports.isExactThemeColor = isExactThemeColor;
 exports.isGroupState = isGroupState;
 exports.isHexColor = isHexColor;
+exports.isInsideDismissContainer = isInsideDismissContainer;
 exports.isRankedBarListEmpty = isRankedBarListEmpty;
 exports.isSegmentationGroup = isSegmentationGroup;
 exports.parseHslTriplet = parseHslTriplet;
@@ -10123,6 +10200,7 @@ exports.useCloseOnAncestorScroll = useCloseOnAncestorScroll;
 exports.useMediaQuery = useMediaQuery;
 exports.useNavigationLoading = useNavigationLoading;
 exports.useThemeContext = useThemeContext;
+exports.withPopoverDismissDefaults = withPopoverDismissDefaults;
 Object.keys(react).forEach(function (k) {
     if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
         enumerable: true,