@beweco/aurora-ui 0.6.22 → 0.6.23

package/dist/index.cjs.js

@@ -3718,6 +3718,8 @@ var Pagination = function (_a) {
     return jsxRuntime.jsx(react.Pagination, __assign({ showControls: true, isCompact: true }, props));
 };
 
+/** Encima de overlays a pantalla completa (p. ej. `z-50`) y toasts; evita clics "fantasma" en el buscador del portal. */
+var COUNTRY_DROPDOWN_Z = 10000;
 var Phone = function (_a) {
     var id = _a.id, label = _a.label, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.errorText, errorText = _d === void 0 ? "" : _d, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.name, name = _f === void 0 ? "phone" : _f, _g = _a.translations, translations = _g === void 0 ? {} : _g;
     var _h = React.useState(false), isDropdownOpen = _h[0], setIsDropdownOpen = _h[1];
@@ -3752,7 +3754,7 @@ var Phone = function (_a) {
                 top: "".concat(rect.bottom + window.scrollY + 4, "px"),
                 left: "".concat(rect.left + window.scrollX, "px"),
                 width: "15rem",
-                zIndex: 50,
+                zIndex: COUNTRY_DROPDOWN_Z,
             });
         }
     }, [isDropdownOpen]);
@@ -3795,7 +3797,7 @@ var Phone = function (_a) {
         }
     };
     return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 w-full relative", id: id, children: [finalLabel && (jsxRuntime.jsxs("label", { htmlFor: "phone-input-".concat(name), className: "text-tiny text-default-500 mb-1 text-left", children: [finalLabel, " ", required && jsxRuntime.jsx("span", { className: "text-danger-500", children: "*" })] })), jsxRuntime.jsxs("div", { className: "flex items-center w-full min-h-[56px]  transition-colors shadow-sm border-medium border-default-200 rounded-xl focus-within:border-primary-500  ".concat(error ? "!border-danger-500 " : "border-default-200").concat(disabled ? "opacity-60" : ""), children: [jsxRuntime.jsx("div", { className: "relative ml-2", ref: dropdownRef, children: jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-1 px-4 h-10 rounded-xl  bg-default-100  focus:outline-none transition-colors", onClick: function () { return setIsDropdownOpen(function (v) { return !v; }); }, disabled: disabled, tabIndex: 0, "aria-label": t.selectCountryAriaLabel, children: [jsxRuntime.jsx(FlagIcon, { countryCode: selectedCountry.country, size: "md" }), jsxRuntime.jsx("span", { className: "text-xs text-default-500", children: selectedCountry.code }), jsxRuntime.jsxs("svg", { className: "w-4 h-4 text-default-500 ml-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": t.expandListAriaLabel, children: [jsxRuntime.jsx("title", { children: t.expandListAriaLabel }), jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })] })] }) }), jsxRuntime.jsx(react.Input, { type: "tel", className: "flex-1 border-none bg-transparent text-default-500  placeholder-default-500 px-2", placeholder: t.placeholder, value: inputValue, onChange: handleInputChange, onBlur: onBlur, disabled: disabled, name: name, autoComplete: "tel", id: "phone-input-".concat(name) })] }), error && errorText && (jsxRuntime.jsx("span", { className: " text-left text-xs text-danger-500 mt-1", children: errorText })), isDropdownOpen &&
-                reactDom.createPortal(jsxRuntime.jsxs("div", { ref: portalDropdownRef, style: dropdownPosition, className: "bg-content1 border border-default-200 rounded-lg shadow-lg z-50", children: [jsxRuntime.jsx("div", { className: "p-2", children: jsxRuntime.jsx("input", { type: "text", className: "w-full px-3 py-2 text-sm bg-default-100 border-medium border-default-200 text-default-500 rounded-lg focus:outline-none focus:border-primary-500", placeholder: t.searchPlaceholder, onChange: function (e) {
+                reactDom.createPortal(jsxRuntime.jsxs("div", { ref: portalDropdownRef, style: dropdownPosition, className: "bg-content1 border border-default-200 rounded-lg shadow-lg", "data-react-aria-top-layer": "true", children: [jsxRuntime.jsx("div", { className: "p-2", children: jsxRuntime.jsx("input", { type: "text", className: "w-full px-3 py-2 text-sm bg-default-100 border-medium border-default-200 text-default-500 rounded-lg focus:outline-none focus:border-primary-500", placeholder: t.searchPlaceholder, onChange: function (e) {
                                     var searchTerm = e.target.value.toLowerCase();
                                     var filtered = uniqueCountries.filter(function (country) {
                                         return getCountryName(country).toLowerCase().includes(searchTerm) ||

package/dist/index.esm.js

@@ -3719,6 +3719,8 @@ var Pagination = function (_a) {
     return jsx(Pagination$1, __assign({ showControls: true, isCompact: true }, props));
 };
 
+/** Encima de overlays a pantalla completa (p. ej. `z-50`) y toasts; evita clics "fantasma" en el buscador del portal. */
+var COUNTRY_DROPDOWN_Z = 10000;
 var Phone = function (_a) {
     var id = _a.id, label = _a.label, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.errorText, errorText = _d === void 0 ? "" : _d, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.name, name = _f === void 0 ? "phone" : _f, _g = _a.translations, translations = _g === void 0 ? {} : _g;
     var _h = useState(false), isDropdownOpen = _h[0], setIsDropdownOpen = _h[1];
@@ -3753,7 +3755,7 @@ var Phone = function (_a) {
                 top: "".concat(rect.bottom + window.scrollY + 4, "px"),
                 left: "".concat(rect.left + window.scrollX, "px"),
                 width: "15rem",
-                zIndex: 50,
+                zIndex: COUNTRY_DROPDOWN_Z,
             });
         }
     }, [isDropdownOpen]);
@@ -3796,7 +3798,7 @@ var Phone = function (_a) {
         }
     };
     return (jsxs("div", { className: "flex flex-col gap-1 w-full relative", id: id, children: [finalLabel && (jsxs("label", { htmlFor: "phone-input-".concat(name), className: "text-tiny text-default-500 mb-1 text-left", children: [finalLabel, " ", required && jsx("span", { className: "text-danger-500", children: "*" })] })), jsxs("div", { className: "flex items-center w-full min-h-[56px]  transition-colors shadow-sm border-medium border-default-200 rounded-xl focus-within:border-primary-500  ".concat(error ? "!border-danger-500 " : "border-default-200").concat(disabled ? "opacity-60" : ""), children: [jsx("div", { className: "relative ml-2", ref: dropdownRef, children: jsxs("button", { type: "button", className: "flex items-center gap-1 px-4 h-10 rounded-xl  bg-default-100  focus:outline-none transition-colors", onClick: function () { return setIsDropdownOpen(function (v) { return !v; }); }, disabled: disabled, tabIndex: 0, "aria-label": t.selectCountryAriaLabel, children: [jsx(FlagIcon, { countryCode: selectedCountry.country, size: "md" }), jsx("span", { className: "text-xs text-default-500", children: selectedCountry.code }), jsxs("svg", { className: "w-4 h-4 text-default-500 ml-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": t.expandListAriaLabel, children: [jsx("title", { children: t.expandListAriaLabel }), jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })] })] }) }), jsx(Input$1, { type: "tel", className: "flex-1 border-none bg-transparent text-default-500  placeholder-default-500 px-2", placeholder: t.placeholder, value: inputValue, onChange: handleInputChange, onBlur: onBlur, disabled: disabled, name: name, autoComplete: "tel", id: "phone-input-".concat(name) })] }), error && errorText && (jsx("span", { className: " text-left text-xs text-danger-500 mt-1", children: errorText })), isDropdownOpen &&
-                createPortal(jsxs("div", { ref: portalDropdownRef, style: dropdownPosition, className: "bg-content1 border border-default-200 rounded-lg shadow-lg z-50", children: [jsx("div", { className: "p-2", children: jsx("input", { type: "text", className: "w-full px-3 py-2 text-sm bg-default-100 border-medium border-default-200 text-default-500 rounded-lg focus:outline-none focus:border-primary-500", placeholder: t.searchPlaceholder, onChange: function (e) {
+                createPortal(jsxs("div", { ref: portalDropdownRef, style: dropdownPosition, className: "bg-content1 border border-default-200 rounded-lg shadow-lg", "data-react-aria-top-layer": "true", children: [jsx("div", { className: "p-2", children: jsx("input", { type: "text", className: "w-full px-3 py-2 text-sm bg-default-100 border-medium border-default-200 text-default-500 rounded-lg focus:outline-none focus:border-primary-500", placeholder: t.searchPlaceholder, onChange: function (e) {
                                     var searchTerm = e.target.value.toLowerCase();
                                     var filtered = uniqueCountries.filter(function (country) {
                                         return getCountryName(country).toLowerCase().includes(searchTerm) ||

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;AAIrD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkO3C,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;AAI/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAOrD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoO3C,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/package.json

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