bianic-ui 1.15.0-alpha.7 → 1.15.0-beta.0

package/dist/cjs/index.js

@@ -443,10 +443,10 @@ var minWidthConfig$1 = {
     tn: 'min-w-[64px]',
 };
 var iconOnlySizeConfig$1 = {
-    lg: 'py-[13px] flex items-center justify-center gap-[10px]',
-    md: 'py-[11px] flex items-center justify-center gap-[5px]',
-    sm: 'py-[8px] flex items-center justify-center gap-[5px] ',
-    tn: 'py-[4px] flex items-center justify-center gap-[3px]',
+    lg: 'py-[13px] h-[48px] h-[48px] flex items-center justify-center gap-[10px]',
+    md: 'py-[11px] h-[40px] w-[40px] flex items-center justify-center gap-[5px]',
+    sm: 'py-[8px] h-[30px] h-[30px] flex items-center justify-center gap-[5px] ',
+    tn: 'py-[4px] h-[22px] h-[22px] flex items-center justify-center gap-[3px]',
 };
 var shadow = 'shadow-[0px_6px_18px_1px_rgba(188,199,237,0.5)] disabled:shadow-none active:shadow-none';
 var variantConfig$2 = {
@@ -462,7 +462,7 @@ var variantConfig$2 = {
     'default-outlined': "text-primary-black bg-primary-white border-bia-coolgrey border-solid active:bg-bia-coolgrey-light-90 active:border-bia-coolgrey-active hover:border-bia-coolgrey-hover border disabled:bg-primary-white disabled:border-[1px]disabled:border-bia-coolgrey-disabled disabled:text-bia-coolgrey-disabled focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-coolgrey-light-50 focus-visible:border-none",
     'primary-outlined': "bg-primary-white border border-bia-blue active:text-bia-blue-active active:bg-bia-blue-pastel active:border-bia-blue-active hover:text-bia-blue-hover hover:border-bia-blue-hover disabled:border-[1px]disabled:border-bia-blue-disabled disabled:text-bia-blue-disabled focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-bia-blue-disabled focus-visible:outline-[3px] focus-visible:rounded-md text-bia-blue focus-visible:border-none",
     'info-outlined': "text-bia-teal border-bia-teal bg-primary-white border-solid border active:text-bia-teal-active active:bg-bia-teal-pastel active:border-bia-teal-active active:outline-none disabled:border-[1px]disabled:border-bia-teal-light-50  disabled:text-bia-teal-light-50 hover:text-bia-teal-hover hover:border-bia-teal-hover focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-teal-light-50 focus-visible:border-none",
-    'success-outlined': "text-bia-green bg-primary-white bg-primary-white border-solid border border-bia-greenactive:text-bia-green-active active:bg-bia-green-pastel active:border-bia-green-active hover:text-bia-green-hover hover:border-bia-green-hover  disabled:border-[1px] disabled:border-bia-green-light-50 disabled:text-bia-green-light-50 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-green-light-50 focus-visible:border-none ",
+    'success-outlined': "text-bia-green bg-primary-white bg-primary-white border-solid border border-bia-green active:text-bia-green-active active:bg-bia-green-pastel active:border-bia-green-active hover:text-bia-green-hover hover:border-bia-green-hover  disabled:border-[1px] disabled:border-bia-green-light-50 disabled:text-bia-green-light-50 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-green-light-50 focus-visible:border-none ",
     'warning-outlined': "text-bia-orange bg-primary-white border-solid border border-bia-orange active:text-bia-orange-dark-10 active:bg-bia-orange-light-90 active:border-bia-orange-active active:outline-none hover:text-bia-orange-hover hover:border-bia-orange-hover disabled:border-[1px]disabled:border-bia-orange-light-50 disabled:text-bia-orange-light-50 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-orange-light-50 focus-visible:border-none",
     'danger-outlined': "text-bia-red border-solid border border-bia-red bg-primary-white active:text-bia-red-dark-10 active:border-bia-red-active active:bg-bia-red-light-90 active:border-bia-red-disabled hover:text-bia-red-hover hover:border-bia-red-hover disabled:border-[1px]disabled:border-bia-red-light-50 disabled:text-bia-red-light-50 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-red-light-50 focus-visible:border-none \n  ",
     'form-group': "text-bia-black border-solid border border-bia-grey-dark-10 bg-bia-white active:bg-bia-grey-light-20 hover:bg-bia-grey-light-80 disabled:text-bia-grey-dark-10 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-grey-dark-10 focus-visible:border-none \n  ",
@@ -2421,6 +2421,10 @@ var DropdownContainer = function (propsComp) {
         onClickItem(e, val);
         onClose();
     };
+    // In projects where bianic-ui is installed, 
+    // there is a delay in rendering styles, 
+    // which causes dropdowns to lose their position and need to be re-rendered.
+    var _k = React.useState(0), repeateRender = _k[0], setRepeateRender = _k[1];
     React.useLayoutEffect(function () {
         if (!(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current))
             return;
@@ -2431,11 +2435,18 @@ var DropdownContainer = function (propsComp) {
         };
         window.addEventListener('scroll', handleScrollOrResize);
         window.addEventListener('resize', handleScrollOrResize);
+        setRepeateRender(0);
         return function () {
             window.removeEventListener('scroll', handleScrollOrResize);
             window.removeEventListener('resize', handleScrollOrResize);
         };
     }, [anchorRef]);
+    React.useEffect(function () {
+        if (repeateRender < 5 && (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)) {
+            setPositionStyle(getDropdownStyle(anchorRef, dropdownRef));
+            setRepeateRender(repeateRender + 1);
+        }
+    }, [repeateRender]);
     return (React.createElement(React.Fragment, null,
         isWithOverlay && (React.createElement("div", { className: "bianic-dropdown-overlay fixed left-0 top-0 h-screen w-screen", style: { zIndex: zIndex }, onClick: function () { return onClose(); } })),
         reactDom.createPortal(React.createElement("div", __assign({ ref: dropdownRef, className: "fixed max-w-fit bianic-dropdown-container bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass), style: __assign({ zIndex: zIndex + 10 }, positionStyle) }, restProps), React.Children.map(children, function (child) {
@@ -3271,9 +3282,9 @@ var Outlet = function (_a) {
 };
 
 var Inlet = function (_a) {
-    _a.className; var _b = _a.fill, fill = _b === void 0 ? 'currentColor' : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
+    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? 'currentColor' : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
     var numericSize = Number(size);
-    return (React.createElement("svg", { width: numericSize * 2, height: numericSize, viewBox: "0 0 48 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
+    return (React.createElement("svg", { className: className, width: numericSize * 2, height: numericSize, viewBox: "0 0 48 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { d: "M36 20C38.1217 20 40.1566 19.1571 41.6569 17.6569C43.1571 16.1566 44 14.1217 44 12C44 9.87827 43.1571 7.84344 41.6569 6.34315C40.1566 4.84285 38.1217 4 36 4C33.8783 4 31.8434 4.84285 30.3431 6.34315C28.8429 7.84344 28 9.87827 28 12C28 14.1217 28.8429 16.1566 30.3431 17.6569C31.8434 19.1571 33.8783 20 36 20ZM36 22C30.477 22 26 17.523 26 12C26 6.477 30.477 2 36 2C41.523 2 46 6.477 46 12C46 17.523 41.523 22 36 22Z", fill: "inherit" }),
         React.createElement("path", { d: "M15.586 10.657L11.636 6.707C11.4538 6.5184 11.353 6.26579 11.3553 6.0036C11.3576 5.7414 11.4628 5.49059 11.6482 5.30518C11.8336 5.11977 12.0844 5.0146 12.3466 5.01232C12.6088 5.01005 12.8614 5.11084 13.05 5.293L18.707 10.95C18.8002 11.0427 18.8741 11.1528 18.9246 11.2741C18.9751 11.3955 19.001 11.5256 19.001 11.657C19.001 11.7884 18.9751 11.9185 18.9246 12.0399C18.8741 12.1612 18.8002 12.2713 18.707 12.364L13.05 18.021C12.9578 18.1165 12.8474 18.1927 12.7254 18.2451C12.6034 18.2975 12.4722 18.3251 12.3394 18.3263C12.2066 18.3274 12.0749 18.3021 11.952 18.2518C11.8292 18.2015 11.7175 18.1273 11.6236 18.0334C11.5297 17.9395 11.4555 17.8279 11.4052 17.705C11.3549 17.5821 11.3296 17.4504 11.3308 17.3176C11.3319 17.1848 11.3595 17.0536 11.4119 16.9316C11.4643 16.8096 11.5405 16.6992 11.636 16.607L15.586 12.657H6C5.73478 12.657 5.48043 12.5516 5.29289 12.3641C5.10536 12.1766 5 11.9222 5 11.657C5 11.3918 5.10536 11.1374 5.29289 10.9499C5.48043 10.7624 5.73478 10.657 6 10.657H15.586Z", fill: "inherit" })));
 };
@@ -3282,8 +3293,8 @@ var Neutral = function (_a) {
     var className = _a.className, _b = _a.fill, fill = _b === void 0 ? 'currentColor' : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
     var numericSize = Number(size);
     return (React.createElement("svg", { className: className, width: numericSize * 2, height: numericSize, viewBox: "0 0 48 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M28 12C28 11.4477 28.4477 11 29 11H43C43.5523 11 44 11.4477 44 12C44 12.5523 43.5523 13 43 13H29C28.4477 13 28 12.5523 28 12Z", fill: "#2F2F2F" }),
-        React.createElement("path", { d: "M12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22Z", fill: "#2F2F2F" })));
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M28 12C28 11.4477 28.4477 11 29 11H43C43.5523 11 44 11.4477 44 12C44 12.5523 43.5523 13 43 13H29C28.4477 13 28 12.5523 28 12Z", fill: "inherit" }),
+        React.createElement("path", { d: "M12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22Z", fill: "inherit" })));
 };
 
 var colorConfig$1 = {