@beweco/aurora-ui 0.6.58 → 0.6.59

package/dist/index.cjs.js

@@ -1771,6 +1771,42 @@ var Chip = function (_a) {
     return (jsxRuntime.jsx(react.Chip, __assign({}, props, { onClose: props.onClose, classNames: __assign({ base: colorClasses }, props.classNames) })));
 };
 
+/**
+ * Cierra un dropdown/popover porteado cuando un ancestro hace scroll.
+ *
+ * Los componentes que portean su contenido a `document.body` y lo posicionan
+ * de forma absoluta con `getBoundingClientRect()` quedan "flotando" en la
+ * posición original cuando un contenedor con scroll se desplaza, porque la
+ * posición no se recalcula. En lugar de reposicionar en cada frame, se cierra
+ * el dropdown ante el scroll de un ancestro (mismo comportamiento que los
+ * overlays de React Aria/HeroUI).
+ */
+var useCloseOnAncestorScroll = function (_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, contentRef = _a.contentRef;
+    React.useEffect(function () {
+        if (!isOpen) {
+            return;
+        }
+        var handleAncestorScroll = function (event) {
+            var _a;
+            var target = event.target;
+            // Permitir el scroll interno del propio contenido (la lista).
+            if (target && ((_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
+                return;
+            }
+            onClose();
+        };
+        // `capture` para detectar el scroll de cualquier ancestro, no solo window.
+        window.addEventListener("scroll", handleAncestorScroll, {
+            capture: true,
+            passive: true,
+        });
+        return function () {
+            window.removeEventListener("scroll", handleAncestorScroll, true);
+        };
+    }, [isOpen, onClose, contentRef]);
+};
+
 // Lista de países con código telefónico y código ISO
 var countries = [
     { code: "+57", name: "Colombia", country: "CO" },
@@ -2426,6 +2462,13 @@ var Currency = function (_a) {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isDropdownOpen]);
+    // El dropdown se portea a `body` con posición absoluta fija; cerrarlo cuando
+    // un ancestro hace scroll para que no quede flotando fuera de lugar.
+    useCloseOnAncestorScroll({
+        isOpen: isDropdownOpen,
+        onClose: function () { return setIsDropdownOpen(false); },
+        contentRef: portalDropdownRef,
+    });
     var emitChange = function (opt, amount) {
         if (showInput) {
             onChange === null || onChange === void 0 ? void 0 : onChange({
@@ -4002,6 +4045,13 @@ var Phone = function (_a) {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isDropdownOpen]);
+    // El dropdown se portea a `body` con posición absoluta fija; cerrarlo cuando
+    // un ancestro hace scroll para que no quede flotando fuera de lugar.
+    useCloseOnAncestorScroll({
+        isOpen: isDropdownOpen,
+        onClose: function () { return setIsDropdownOpen(false); },
+        contentRef: portalDropdownRef,
+    });
     var handleCountrySelect = function (country) {
         setSelectedCountry(country);
         setIsDropdownOpen(false);
@@ -9083,6 +9133,7 @@ exports.removeCustomPrimaryColor = removeCustomPrimaryColor;
 exports.sizeMap = sizeMap;
 exports.themeColors = themeColors;
 exports.useAuraToast = useAuraToast;
+exports.useCloseOnAncestorScroll = useCloseOnAncestorScroll;
 exports.useMediaQuery = useMediaQuery;
 exports.useNavigationLoading = useNavigationLoading;
 exports.useThemeContext = useThemeContext;

package/dist/index.esm.js

@@ -1772,6 +1772,42 @@ var Chip = function (_a) {
     return (jsx(Chip$1, __assign({}, props, { onClose: props.onClose, classNames: __assign({ base: colorClasses }, props.classNames) })));
 };
 
+/**
+ * Cierra un dropdown/popover porteado cuando un ancestro hace scroll.
+ *
+ * Los componentes que portean su contenido a `document.body` y lo posicionan
+ * de forma absoluta con `getBoundingClientRect()` quedan "flotando" en la
+ * posición original cuando un contenedor con scroll se desplaza, porque la
+ * posición no se recalcula. En lugar de reposicionar en cada frame, se cierra
+ * el dropdown ante el scroll de un ancestro (mismo comportamiento que los
+ * overlays de React Aria/HeroUI).
+ */
+var useCloseOnAncestorScroll = function (_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, contentRef = _a.contentRef;
+    useEffect(function () {
+        if (!isOpen) {
+            return;
+        }
+        var handleAncestorScroll = function (event) {
+            var _a;
+            var target = event.target;
+            // Permitir el scroll interno del propio contenido (la lista).
+            if (target && ((_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
+                return;
+            }
+            onClose();
+        };
+        // `capture` para detectar el scroll de cualquier ancestro, no solo window.
+        window.addEventListener("scroll", handleAncestorScroll, {
+            capture: true,
+            passive: true,
+        });
+        return function () {
+            window.removeEventListener("scroll", handleAncestorScroll, true);
+        };
+    }, [isOpen, onClose, contentRef]);
+};
+
 // Lista de países con código telefónico y código ISO
 var countries = [
     { code: "+57", name: "Colombia", country: "CO" },
@@ -2427,6 +2463,13 @@ var Currency = function (_a) {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isDropdownOpen]);
+    // El dropdown se portea a `body` con posición absoluta fija; cerrarlo cuando
+    // un ancestro hace scroll para que no quede flotando fuera de lugar.
+    useCloseOnAncestorScroll({
+        isOpen: isDropdownOpen,
+        onClose: function () { return setIsDropdownOpen(false); },
+        contentRef: portalDropdownRef,
+    });
     var emitChange = function (opt, amount) {
         if (showInput) {
             onChange === null || onChange === void 0 ? void 0 : onChange({
@@ -4003,6 +4046,13 @@ var Phone = function (_a) {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isDropdownOpen]);
+    // El dropdown se portea a `body` con posición absoluta fija; cerrarlo cuando
+    // un ancestro hace scroll para que no quede flotando fuera de lugar.
+    useCloseOnAncestorScroll({
+        isOpen: isDropdownOpen,
+        onClose: function () { return setIsDropdownOpen(false); },
+        contentRef: portalDropdownRef,
+    });
     var handleCountrySelect = function (country) {
         setSelectedCountry(country);
         setIsDropdownOpen(false);
@@ -8972,4 +9022,4 @@ var NavigationLoadingProvider = function (_a) {
     return (jsxs(NavigationLoadingContext.Provider, { value: value, children: [children, jsx(NavigationLoadingOverlay, { isVisible: isVisible })] }));
 };
 
-export { ALL_THEMES, AURORA_THEME_FAMILIES, AURORA_THEME_REGISTRY, AccordionList, AddHolidayForm, AnalyticsCard, AreaLineChart, AuraAutocomplete, AuraTable, AuraToastProvider, BEWEOS_THEME_MODE_COOKIE_NAME, BreadcrumbsComponent, Button, Card, Chip, ColorPicker, ColorSelector, ContentCarousel, Currency, DEFAULT_PREDEFINED_COLORS, DatePicker, DateRangePicker, DateSelector, DrawerFilters, EmailPreview, EnumMenuNavListItem, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, ImagePreview, Input, InputPassword, Kanban, KanbanCard, KanbanColumn, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, REGISTERED_THEME_COLORS, RangeFilter, RowSteps, DEFAULT_TRANSLATIONS$1 as SEGMENTATION_DEFAULT_TRANSLATIONS, ScheduleRow, SearchInput, SegmentationBuilder, Select, SimpleLineChart, SocialMediaBar, SocialMediaCarousel, SocialMediaPreview, StepIndicator, Switch as SwitchComponent, THEME_COLOR_HEX_MAP, TagsFilter, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, Tooltip, TwoColumnLayoutAgent, UploadFile, VerticalSteps, WhatsAppPreview, Wizard, WizardNavigation, WizardSidebar, applyCustomPrimaryColor, createCurrencyFormatter, uniqueCountries as defaultCountries, defaultCurrencyOptions, defaultTranslations$4 as defaultTranslations, forceLightOnlyThemeBeforeReact, formatAuroraThemeTooltip, generateThemeColorScale, getContrastForeground, getRegisteredThemeColorBases, getSelectedKeyFromPath, hexToThemeColor, hslToCssValue, isAuroraFullThemeId, isExactThemeColor, isGroupState, isHexColor, isSegmentationGroup, removeCustomPrimaryColor, sizeMap, themeColors, useAuraToast, useMediaQuery, useNavigationLoading, useThemeContext };
+export { ALL_THEMES, AURORA_THEME_FAMILIES, AURORA_THEME_REGISTRY, AccordionList, AddHolidayForm, AnalyticsCard, AreaLineChart, AuraAutocomplete, AuraTable, AuraToastProvider, BEWEOS_THEME_MODE_COOKIE_NAME, BreadcrumbsComponent, Button, Card, Chip, ColorPicker, ColorSelector, ContentCarousel, Currency, DEFAULT_PREDEFINED_COLORS, DatePicker, DateRangePicker, DateSelector, DrawerFilters, EmailPreview, EnumMenuNavListItem, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, ImagePreview, Input, InputPassword, Kanban, KanbanCard, KanbanColumn, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, REGISTERED_THEME_COLORS, RangeFilter, RowSteps, DEFAULT_TRANSLATIONS$1 as SEGMENTATION_DEFAULT_TRANSLATIONS, ScheduleRow, SearchInput, SegmentationBuilder, Select, SimpleLineChart, SocialMediaBar, SocialMediaCarousel, SocialMediaPreview, StepIndicator, Switch as SwitchComponent, THEME_COLOR_HEX_MAP, TagsFilter, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, Tooltip, TwoColumnLayoutAgent, UploadFile, VerticalSteps, WhatsAppPreview, Wizard, WizardNavigation, WizardSidebar, applyCustomPrimaryColor, createCurrencyFormatter, uniqueCountries as defaultCountries, defaultCurrencyOptions, defaultTranslations$4 as defaultTranslations, forceLightOnlyThemeBeforeReact, formatAuroraThemeTooltip, generateThemeColorScale, getContrastForeground, getRegisteredThemeColorBases, getSelectedKeyFromPath, hexToThemeColor, hslToCssValue, isAuroraFullThemeId, isExactThemeColor, isGroupState, isHexColor, isSegmentationGroup, removeCustomPrimaryColor, sizeMap, themeColors, useAuraToast, useCloseOnAncestorScroll, useMediaQuery, useNavigationLoading, useThemeContext };

package/dist/types/components/currency/Currency.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Currency.d.ts","sourceRoot":"","sources":["../../../../src/components/currency/Currency.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,kBAAkB,EAAiC,MAAM,kBAAkB,CAAC;AAkD1F,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmSjD,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Currency.d.ts","sourceRoot":"","sources":["../../../../src/components/currency/Currency.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,kBAAkB,EAAiC,MAAM,kBAAkB,CAAC;AAkD1F,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2SjD,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/types/components/phone/Phone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Phone.d.ts","sourceRoot":"","sources":["../../../../src/components/phone/Phone.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAOrD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmP3C,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Phone.d.ts","sourceRoot":"","sources":["../../../../src/components/phone/Phone.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAOrD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2P3C,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/types/hooks/index.d.ts

@@ -1,2 +1,3 @@
+export { useCloseOnAncestorScroll } from "./useCloseOnAncestorScroll";
 export { useMediaQuery } from "./useMediaQuery";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/types/hooks/useCloseOnAncestorScroll.d.ts

@@ -0,0 +1,25 @@
+import { type RefObject } from "react";
+interface UseCloseOnAncestorScrollOptions {
+    /** Si el dropdown/popover está abierto. */
+    isOpen: boolean;
+    /** Callback para cerrar el dropdown/popover. */
+    onClose: () => void;
+    /**
+     * Ref al contenido porteado (la lista). Si el scroll ocurre dentro de este
+     * elemento (p. ej. desplazar la lista de opciones) no se cierra.
+     */
+    contentRef?: RefObject<HTMLElement | null>;
+}
+/**
+ * Cierra un dropdown/popover porteado cuando un ancestro hace scroll.
+ *
+ * Los componentes que portean su contenido a `document.body` y lo posicionan
+ * de forma absoluta con `getBoundingClientRect()` quedan "flotando" en la
+ * posición original cuando un contenedor con scroll se desplaza, porque la
+ * posición no se recalcula. En lugar de reposicionar en cada frame, se cierra
+ * el dropdown ante el scroll de un ancestro (mismo comportamiento que los
+ * overlays de React Aria/HeroUI).
+ */
+export declare const useCloseOnAncestorScroll: ({ isOpen, onClose, contentRef, }: UseCloseOnAncestorScrollOptions) => void;
+export {};
+//# sourceMappingURL=useCloseOnAncestorScroll.d.ts.map

package/dist/types/hooks/useCloseOnAncestorScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCloseOnAncestorScroll.d.ts","sourceRoot":"","sources":["../../../src/hooks/useCloseOnAncestorScroll.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;AAElD,UAAU,+BAA+B;IACxC,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAChB,gDAAgD;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC3C;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,wBAAwB,GAAI,kCAItC,+BAA+B,KAAG,IAwBpC,CAAC"}

package/package.json

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