bianic-ui 1.16.0-alpha.0 → 1.16.0-alpha.1

package/dist/cjs/index.js

@@ -1724,6 +1724,51 @@ var TreeItem = function (_a) {
         })))));
 };
 
+var getContextualPopupStyle = function (anchorRef, popupRef, position) {
+    if (!anchorRef.current || !popupRef.current) {
+        return {};
+    }
+    var style = {};
+    var anchorRect = anchorRef.current.getBoundingClientRect();
+    var popupRect = popupRef.current.getBoundingClientRect();
+    var popupHeight = popupRect.height;
+    var popupWidth = popupRect.width;
+    switch (position) {
+        case 'top':
+            style.top = "".concat(anchorRect.top - popupHeight + window.scrollY - 10, "px");
+            style.left = "".concat(anchorRect.left - 0.5 * popupWidth + 0.5 * anchorRect.width + window.scrollX, "px");
+            break;
+        case 'bottom':
+            style.top = "".concat(anchorRect.top + anchorRect.height + window.scrollY + 10, "px");
+            style.left = "".concat(anchorRect.left - 0.5 * popupWidth + 0.5 * anchorRect.width + window.scrollX, "px");
+            break;
+        case 'left':
+            style.top = "".concat(anchorRect.top - 0.5 * popupHeight + window.scrollY + 0.5 * anchorRect.height, "px");
+            style.left = "".concat(anchorRect.left - popupWidth - 10 + window.scrollX, "px");
+            break;
+        case 'right':
+            style.top = "".concat(anchorRect.top - 0.5 * popupHeight + window.scrollY + 0.5 * anchorRect.height, "px");
+            style.left = "".concat(anchorRect.right + 10 + window.scrollX, "px");
+            break;
+        case 'top-left':
+            style.top = "".concat(anchorRect.top - popupHeight + window.scrollY - 10, "px");
+            style.left = "".concat(anchorRect.left + window.scrollX, "px");
+            break;
+        case 'top-right':
+            style.top = "".concat(anchorRect.top - popupHeight + window.scrollY - 10, "px");
+            style.left = "".concat(anchorRect.left + anchorRect.width - popupWidth + window.scrollX, "px");
+            break;
+        case 'bottom-left':
+            style.top = "".concat(anchorRect.top + anchorRect.height + window.scrollY + 10, "px");
+            style.left = "".concat(anchorRect.left + window.scrollX, "px");
+            break;
+        case 'bottom-right':
+            style.top = "".concat(anchorRect.top + anchorRect.height + window.scrollY + 10, "px");
+            style.left = "".concat(anchorRect.left + anchorRect.width - popupWidth + window.scrollX, "px");
+            break;
+    }
+    return style;
+};
 var getDropdownStyle = function (anchorRef, popupRef) {
     if (!anchorRef.current || !popupRef.current) {
         return {};
@@ -1733,48 +1778,50 @@ var getDropdownStyle = function (anchorRef, popupRef) {
     var spaceToBottom = window.innerHeight - anchorRect.bottom;
     var spaceToTop = anchorRect.top;
     var style = {
-        left: "".concat(anchorRect.left, "px"),
+        left: "".concat(anchorRect.left + window.scrollX, "px"),
     };
     // If space below is less than popup height,
     // AND space above is more than space below
     // then flip up
     if (spaceToBottom < popupHeight && spaceToTop > spaceToBottom) {
-        style.bottom = "".concat(window.innerHeight - anchorRect.top, "px");
+        style.top = "".concat(anchorRect.top - popupHeight + window.scrollY, "px");
     }
     else {
-        style.top = "".concat(anchorRect.bottom, "px");
+        style.top = "".concat(anchorRect.bottom + window.scrollY, "px");
     }
     return style;
 };
-var usePopupPosition = function (anchorRef, popupRef) {
+var usePopupPosition = function (anchorRef, popupRef, position) {
     // In projects where bianic-ui is installed,
     // there is a delay in rendering styles,
     // which causes popups to lose their position and need to be re-rendered.
     var _a = React.useState(0), repeateRender = _a[0], setRepeateRender = _a[1];
     var _b = React.useState({}), positionStyle = _b[0], setPositionStyle = _b[1];
+    var calcPosition = function () {
+        var newStyle = position !== undefined
+            ? getContextualPopupStyle(anchorRef, popupRef, position)
+            : getDropdownStyle(anchorRef, popupRef);
+        setPositionStyle(newStyle);
+    };
     React.useLayoutEffect(function () {
         if (!(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current))
             return;
-        var newStyle = getDropdownStyle(anchorRef, popupRef);
-        setPositionStyle(newStyle);
-        var handleScrollOrResize = function () {
-            setPositionStyle(getDropdownStyle(anchorRef, popupRef));
-        };
-        window.addEventListener('scroll', handleScrollOrResize);
-        window.addEventListener('resize', handleScrollOrResize);
+        calcPosition();
+        window.addEventListener('scroll', calcPosition);
+        window.addEventListener('resize', calcPosition);
         setRepeateRender(0);
         return function () {
-            window.removeEventListener('scroll', handleScrollOrResize);
-            window.removeEventListener('resize', handleScrollOrResize);
+            window.removeEventListener('scroll', calcPosition);
+            window.removeEventListener('resize', calcPosition);
         };
     }, [anchorRef]);
     React.useEffect(function () {
         if (repeateRender < 5 && (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)) {
-            setPositionStyle(getDropdownStyle(anchorRef, popupRef));
+            calcPosition();
             setRepeateRender(repeateRender + 1);
         }
     }, [repeateRender]);
-    return [positionStyle];
+    return [positionStyle, calcPosition];
 };
 
 var MenuContainer = function (props) {
@@ -1869,53 +1916,16 @@ MenuItem.defaultProps = {
     onClick: function () { },
 };
 
-var classConfig$1 = {
-    top: {
-        tooltipContainer: 'bottom-[calc(100%+5px)]  left-1/2  -translate-x-1/2',
-        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
-    },
-    right: {
-        tooltipContainer: 'left-[calc(100%+5px)] top-1/2 -translate-y-1/2',
-        triangleContainer: '-left-[4px] bottom-0 flex items-center w-auto h-full',
-        triangleShape: 'border-t-[8px] border-t-transparent border-r-[5px] border-r-primary-black border-b-[8px] border-b-transparent',
-    },
-    bottom: {
-        tooltipContainer: 'top-[calc(100%+5px)]  left-1/2  -translate-x-1/2',
-        triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
-    },
-    left: {
-        tooltipContainer: 'right-[calc(100%+5px)] top-1/2 -translate-y-1/2',
-        triangleContainer: '-right-[4px] bottom-0 flex items-center w-auto h-full',
-        triangleShape: 'border-t-[8px] border-t-transparent border-l-[5px] border-l-primary-black border-b-[8px] border-b-transparent',
-    },
-    'top-right': {
-        tooltipContainer: 'bottom-[calc(100%+5px)] right-0',
-        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
-    },
-    'top-left': {
-        tooltipContainer: 'bottom-[calc(100%+5px)] left-0',
-        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
-    },
-    'bottom-right': {
-        tooltipContainer: 'top-[calc(100%+5px)]  right-0',
-        triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
-    },
-    'bottom-left': {
-        tooltipContainer: 'top-[calc(100%+5px)]  left-0',
-        triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
-        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
-    },
-};
-
 function Tooltip(props) {
     var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? undefined : _b;
     var timeout;
     var _c = React.useState(false), active = _c[0], setActive = _c[1];
+    var anchorRef = React.useRef(null);
+    var tooltipContainerRef = React.useRef(null);
+    var _d = React.useState({
+        maxWidth: maxWidth + 'px',
+        whiteSpace: 'nowrap',
+    }), tooltipContainerStyle = _d[0], setTooltipContainerStyle = _d[1];
     var showTip = function () {
         timeout = setTimeout(function () {
             setActive(true);
@@ -1925,12 +1935,6 @@ function Tooltip(props) {
         clearInterval(timeout);
         setActive(false);
     };
-    var _d = classConfig$1[direction], tooltipContainer = _d.tooltipContainer; _d.triangleContainer; _d.triangleShape;
-    var tooltipContainerRef = React.useRef(null);
-    var _e = React.useState({
-        maxWidth: maxWidth + 'px',
-        whiteSpace: 'nowrap',
-    }), tooltipContainerStyle = _e[0], setTooltipContainerStyle = _e[1];
     var tooltipContainerElement = tooltipContainerRef === null || tooltipContainerRef === void 0 ? void 0 : tooltipContainerRef.current;
     var scrollWidth = tooltipContainerElement === null || tooltipContainerElement === void 0 ? void 0 : tooltipContainerElement.scrollWidth; // Mendapatkan lebar konten aktual
     var offsetWidth = tooltipContainerElement === null || tooltipContainerElement === void 0 ? void 0 : tooltipContainerElement.offsetWidth;
@@ -1963,10 +1967,15 @@ function Tooltip(props) {
             setTooltipContainerStyle(function (prev) { return (__assign(__assign({}, prev), { width: newWidth_1, whiteSpace: newWhiteSpace_1 })); });
         }
     }, [content, maxWidth, scrollWidth, offsetHeight]);
-    return (React.createElement("div", { className: "tooltip-wrapper relative inline-flex h-fit w-fit flex-col", onMouseEnter: showTip, onMouseLeave: hideTip },
+    return (React.createElement("div", { className: "tooltip-wrapper relative inline-flex h-fit w-fit flex-col", onMouseEnter: showTip, onMouseLeave: hideTip, ref: anchorRef },
         children,
-        active && (React.createElement("div", { className: "tooltip-container break-word absolute z-50 inline-block break-all rounded-[4px] bg-primary-black px-[7px] py-[4px] text-size-sm text-primary-white ".concat(tooltipContainer), style: tooltipContainerStyle, ref: tooltipContainerRef }, content))));
+        active && (React.createElement(TooltipItem, { anchorRef: anchorRef, direction: direction, content: content, tooltipContainerRef: tooltipContainerRef, tooltipContainerStyle: tooltipContainerStyle }))));
 }
+var TooltipItem = function (_a) {
+    var anchorRef = _a.anchorRef, direction = _a.direction, content = _a.content, tooltipContainerRef = _a.tooltipContainerRef, tooltipContainerStyle = _a.tooltipContainerStyle;
+    var positionStyle = usePopupPosition(anchorRef, tooltipContainerRef, direction)[0];
+    return reactDom.createPortal(React.createElement("div", { className: "tooltip-container break-word absolute z-50 inline-block break-all rounded-[4px] bg-primary-black px-[7px] py-[4px] text-size-sm text-primary-white", style: __assign(__assign({}, positionStyle), tooltipContainerStyle), ref: tooltipContainerRef }, content), document.body);
+};
 Tooltip.defaultProps = {
     delay: 400,
     direction: 'top',
@@ -2478,7 +2487,9 @@ var DropdownContainer = function (propsComp) {
     };
     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({ minWidth: anchorRef.current ? anchorRef.current.offsetWidth : undefined, zIndex: zIndex + 10 }, positionStyle) }, restProps), React.Children.map(children, function (child) {
+        reactDom.createPortal(React.createElement("div", __assign({ ref: dropdownRef, className: "bianic-dropdown-container absolute max-w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass), style: __assign({ minWidth: anchorRef.current
+                    ? anchorRef.current.offsetWidth
+                    : undefined, zIndex: zIndex + 10 }, positionStyle) }, restProps), React.Children.map(children, function (child) {
             return React.isValidElement(child)
                 ? // Kirimkan handleItemClick sebagai props onClick ke setiap DropdownItem
                     React.cloneElement(child, {
@@ -2668,9 +2679,7 @@ function LiveSearch(_a) {
     var filteredOptions = filterOptions(options || [], value.label);
     var _p = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _p.renderedChildren, hasFilteredResults = _p.hasFilteredResults;
     return (React.createElement("div", { className: "bianic-livesearch field-group group/form flex w-full flex-col gap-y-2 " },
-        label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly },
-            label,
-            " Test")),
+        label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
         React.createElement("div", { className: "group relative w-full" },
             React.createElement("input", { className: "bianic-livesearch-input field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white read-only:pointer-events-none read-only:border-bia-grey-disabled focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-10 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, ref: inputRef, onChange: function (e) {
                     onChangeText(e);
@@ -3573,17 +3582,24 @@ var classConfig = {
 function Popover(_a) {
     var children = _a.children, content = _a.content; _a.delay; var _c = _a.direction, direction = _c === void 0 ? 'bottom' : _c, _d = _a.title, title = _d === void 0 ? '' : _d; _a.maxWidth;
     var wrapperRef = React.useRef(null);
+    React.useRef(null);
     var _e = useDetectOutsideClick(wrapperRef, false), isOpen = _e[0], setIsOpen = _e[1];
-    var _f = classConfig[direction], tooltipContainer = _f.tooltipContainer, triangleContainer = _f.triangleContainer, triangleShape = _f.triangleShape;
-    return (React.createElement("div", { className: "Bianic-popover-Wrapper relative block h-fit w-fit", role: "button", ref: wrapperRef, onClick: function () { return setIsOpen(true); } },
+    return (React.createElement("div", { className: "Bianic-popover-Wrapper relative block h-fit w-fit bg-bia-blue", role: "button", ref: wrapperRef, onClick: function () { return setIsOpen(true); } },
         children,
-        isOpen && (React.createElement("div", { className: "Bianic-popover-Tip text-bia-sm absolute z-50 w-[245px] space-y-[5px] rounded-[4px] bg-primary-black px-[20px] py-[17.5px] text-primary-white ".concat(tooltipContainer) },
-            React.createElement("div", { className: "flex flex-col" },
-                React.createElement("div", { className: "mb-[5px] font-humnst777 text-[16px] font-bold leading-[19.42px]" }, title),
-                React.createElement("div", { className: "break-words font-segoe text-[12px] font-normal" }, content)),
-            React.createElement("div", { className: "triangle absolute ".concat(triangleContainer) },
-                React.createElement("div", { className: "h-0 w-0 ".concat(triangleShape) }))))));
+        isOpen && (React.createElement(PopoverItem, { title: title, content: content, anchorRef: wrapperRef, direction: direction }))));
 }
+var PopoverItem = function (_a) {
+    var title = _a.title, content = _a.content, anchorRef = _a.anchorRef, direction = _a.direction;
+    var popoverRef = React.useRef(null);
+    var positionStyle = usePopupPosition(anchorRef, popoverRef, direction)[0];
+    var _b = classConfig[direction], triangleContainer = _b.triangleContainer, triangleShape = _b.triangleShape;
+    return reactDom.createPortal(React.createElement("div", { ref: popoverRef, style: positionStyle, className: "Bianic-popover-Tip text-bia-sm absolute z-50 w-[245px] space-y-[5px] rounded-[4px] bg-primary-black px-[20px] py-[17.5px] text-primary-white" },
+        React.createElement("div", { className: "flex flex-col" },
+            React.createElement("div", { className: "mb-[5px] font-humnst777 text-[16px] font-bold leading-[19.42px]" }, title),
+            React.createElement("div", { className: "break-words font-segoe text-[12px] font-normal" }, content)),
+        React.createElement("div", { className: "triangle absolute ".concat(triangleContainer) },
+            React.createElement("div", { className: "h-0 w-0 ".concat(triangleShape) }))), document.body);
+};
 Popover.defaultProps = {
     delay: 400,
     direction: 'top',