bianic-ui 1.15.0-alpha.3 → 1.15.0-alpha.5

package/dist/cjs/index.js

@@ -2391,8 +2391,6 @@ var getDropdownStyle = function (anchorRef, dropdownRef) {
     }
     var anchorRect = anchorRef.current.getBoundingClientRect();
     var dropdownHeight = dropdownRef.current.offsetHeight;
-    console.log('window.scrollY', window.scrollY);
-    console.log('window.scrollX', window.scrollX);
     var spaceToBottom = window.innerHeight - anchorRect.bottom;
     var spaceToTop = anchorRect.top;
     var style = {
@@ -2411,11 +2409,10 @@ var getDropdownStyle = function (anchorRef, dropdownRef) {
     return style;
 };
 var DropdownContainer = function (propsComp) {
-    var _a;
-    var _b = propsComp.isTopFlat, isTopFlat = _b === void 0 ? false : _b, children = propsComp.children, _c = propsComp.open, open = _c === void 0 ? true : _c, _d = propsComp.onClose, onClose = _d === void 0 ? function () { } : _d, _e = propsComp.className, className = _e === void 0 ? '' : _e, _f = propsComp.isWithOverlay, isWithOverlay = _f === void 0 ? true : _f, _g = propsComp.size, size = _g === void 0 ? 'md' : _g, _h = propsComp.onClickItem, onClickItem = _h === void 0 ? function () { } : _h, _j = propsComp.zIndex, zIndex = _j === void 0 ? 100 : _j, anchorRef = propsComp.anchorRef, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex", "anchorRef"]);
+    var _a = propsComp.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = propsComp.children, _b = propsComp.open, open = _b === void 0 ? true : _b, _c = propsComp.onClose, onClose = _c === void 0 ? function () { } : _c, _d = propsComp.className, className = _d === void 0 ? '' : _d, _e = propsComp.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = propsComp.size, size = _f === void 0 ? 'md' : _f, _g = propsComp.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, _h = propsComp.zIndex, zIndex = _h === void 0 ? 100 : _h, anchorRef = propsComp.anchorRef, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex", "anchorRef"]);
     if (!open)
         return null;
-    var _k = React.useState({ minWidth: 'auto' }), positionStyle = _k[0], setPositionStyle = _k[1];
+    var _j = React.useState({ minWidth: 'auto' }), positionStyle = _j[0], setPositionStyle = _j[1];
     var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
     var sizeClass = containerSizeConfig[size] || containerSizeConfig['md'];
     var containerClass = "".concat(sizeClass, " ").concat(radiusClass, " ").concat(className);
@@ -2439,13 +2436,16 @@ var DropdownContainer = function (propsComp) {
             window.removeEventListener('resize', handleScrollOrResize);
         };
     }, [anchorRef]);
-    var rect = (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    var rect = React.useMemo(function () {
+        var _a;
+        return (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    }, [anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current]);
     React.useEffect(function () {
         if (!anchorRef || !anchorRef.current || !rect)
             return;
         setPositionStyle(getDropdownStyle(anchorRef, dropdownRef));
         console.log('rect changed', rect);
-    }, [rect]);
+    }, [rect === null || rect === void 0 ? void 0 : rect.left, rect === null || rect === void 0 ? void 0 : rect.top, rect === null || rect === void 0 ? void 0 : rect.width, rect === null || rect === void 0 ? void 0 : rect.height]);
     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: "absolute 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) {

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, forwardRef, useRef, cloneElement, Children, useLayoutEffect, useCallback, isValidElement } from 'react';
+import React, { useState, useEffect, forwardRef, useRef, cloneElement, Children, useLayoutEffect, useMemo, useCallback, isValidElement } from 'react';
 import { createPortal } from 'react-dom';
 
 function Accordions(_a) {
@@ -2389,8 +2389,6 @@ var getDropdownStyle = function (anchorRef, dropdownRef) {
     }
     var anchorRect = anchorRef.current.getBoundingClientRect();
     var dropdownHeight = dropdownRef.current.offsetHeight;
-    console.log('window.scrollY', window.scrollY);
-    console.log('window.scrollX', window.scrollX);
     var spaceToBottom = window.innerHeight - anchorRect.bottom;
     var spaceToTop = anchorRect.top;
     var style = {
@@ -2409,11 +2407,10 @@ var getDropdownStyle = function (anchorRef, dropdownRef) {
     return style;
 };
 var DropdownContainer = function (propsComp) {
-    var _a;
-    var _b = propsComp.isTopFlat, isTopFlat = _b === void 0 ? false : _b, children = propsComp.children, _c = propsComp.open, open = _c === void 0 ? true : _c, _d = propsComp.onClose, onClose = _d === void 0 ? function () { } : _d, _e = propsComp.className, className = _e === void 0 ? '' : _e, _f = propsComp.isWithOverlay, isWithOverlay = _f === void 0 ? true : _f, _g = propsComp.size, size = _g === void 0 ? 'md' : _g, _h = propsComp.onClickItem, onClickItem = _h === void 0 ? function () { } : _h, _j = propsComp.zIndex, zIndex = _j === void 0 ? 100 : _j, anchorRef = propsComp.anchorRef, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex", "anchorRef"]);
+    var _a = propsComp.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = propsComp.children, _b = propsComp.open, open = _b === void 0 ? true : _b, _c = propsComp.onClose, onClose = _c === void 0 ? function () { } : _c, _d = propsComp.className, className = _d === void 0 ? '' : _d, _e = propsComp.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = propsComp.size, size = _f === void 0 ? 'md' : _f, _g = propsComp.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, _h = propsComp.zIndex, zIndex = _h === void 0 ? 100 : _h, anchorRef = propsComp.anchorRef, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex", "anchorRef"]);
     if (!open)
         return null;
-    var _k = useState({ minWidth: 'auto' }), positionStyle = _k[0], setPositionStyle = _k[1];
+    var _j = useState({ minWidth: 'auto' }), positionStyle = _j[0], setPositionStyle = _j[1];
     var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
     var sizeClass = containerSizeConfig[size] || containerSizeConfig['md'];
     var containerClass = "".concat(sizeClass, " ").concat(radiusClass, " ").concat(className);
@@ -2437,13 +2434,16 @@ var DropdownContainer = function (propsComp) {
             window.removeEventListener('resize', handleScrollOrResize);
         };
     }, [anchorRef]);
-    var rect = (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    var rect = useMemo(function () {
+        var _a;
+        return (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    }, [anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current]);
     useEffect(function () {
         if (!anchorRef || !anchorRef.current || !rect)
             return;
         setPositionStyle(getDropdownStyle(anchorRef, dropdownRef));
         console.log('rect changed', rect);
-    }, [rect]);
+    }, [rect === null || rect === void 0 ? void 0 : rect.left, rect === null || rect === void 0 ? void 0 : rect.top, rect === null || rect === void 0 ? void 0 : rect.width, rect === null || rect === void 0 ? void 0 : rect.height]);
     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(); } })),
         createPortal(React.createElement("div", __assign({ ref: dropdownRef, className: "absolute 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), Children.map(children, function (child) {

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "@biaenergi:registry": "https://gitlab.com/api/v4/projects/50905269/packages/npm/"
   },
-  "version": "1.15.0-alpha.3",
+  "version": "1.15.0-alpha.5",
   "description": "Design Language System develop by BIAENERGI",
   "scripts": {
     "rollup": "rollup -c",