bianic-ui 2.1.0-beta.4 → 2.2.0-beta.1

package/dist/cjs/index.js

@@ -384,7 +384,7 @@ Link.defaultProps = {
 };
 
 function Alert(_a) {
-    var _b = _a.title, title = _b === void 0 ? '' : _b, caption = _a.caption, _c = _a.variant, variant = _c === void 0 ? 'base' : _c, _d = _a.visible, visible = _d === void 0 ? true : _d, _e = _a.setVisible, setVisible = _e === void 0 ? function () { } : _e, _f = _a.visibleIcon, visibleIcon = _f === void 0 ? true : _f, _g = _a.visibleClose, visibleClose = _g === void 0 ? false : _g, children = _a.children;
+    var _b = _a.title, title = _b === void 0 ? '' : _b, caption = _a.caption, _c = _a.variant, variant = _c === void 0 ? 'base' : _c, _d = _a.visible, visible = _d === void 0 ? true : _d, _e = _a.setVisible, setVisible = _e === void 0 ? function () { } : _e, _f = _a.visibleIcon, visibleIcon = _f === void 0 ? true : _f, _g = _a.visibleClose, visibleClose = _g === void 0 ? false : _g, customIcon = _a.customIcon, customMiniIcon = _a.customMiniIcon, children = _a.children;
     var validateVariant = validUnion(variant, [
         'base',
         'info',
@@ -394,6 +394,9 @@ function Alert(_a) {
     ]);
     var IconComponent = AlertConfig[validateVariant].icon[visibleIcon ? 'true' : 'false'];
     var IconX = AlertConfig[visibleClose ? 'true' : 'false'];
+    var iconDisplay = visibleIcon
+        ? customIcon !== null && customIcon !== void 0 ? customIcon : React.createElement(IconComponent, { size: 20, color: "white" })
+        : null;
     var content = children || React.createElement(Text, { variant: "small-text" }, caption);
     return (visible && (React.createElement("div", { className: "alert-container flex w-full flex-col" },
         React.createElement("div", { className: "alert-body w-full ".concat(AlertConfig[validateVariant].bg, "  rounded-[5px]") },
@@ -401,13 +404,14 @@ function Alert(_a) {
                 React.createElement("div", { className: "alert-accent flex items-center py-[10px]" },
                     React.createElement("div", { className: "left-0 h-full w-[3px] ".concat(AlertConfig[validateVariant].vBar, "  rounded-r-[10px]") })),
                 React.createElement("div", { className: "alert-content flex w-full items-start py-[10px] pe-[10px]" },
-                    React.createElement("div", { className: "icon-area flex ps-[10px]" }, IconComponent && typeof IconComponent === 'function' && (React.createElement("div", { className: "flex p-[7px] ".concat(AlertConfig[validateVariant].ContainerIcon, " items-center justify-center rounded-radius-full") },
-                        React.createElement(IconComponent, { size: 20, color: "white" })))),
-                    React.createElement("div", { className: "content-area flex w-full justify-between" },
+                    React.createElement("div", { className: "icon-area flex ps-[10px]" }, IconComponent && typeof IconComponent === 'function' && (React.createElement("div", { className: "flex p-[7px] ".concat(AlertConfig[validateVariant].ContainerIcon, " items-center justify-center rounded-radius-full text-bia-white") }, iconDisplay))),
+                    React.createElement("div", { className: "content-area flex w-full justify-between text-bia-black" },
                         React.createElement("div", { className: "text-area text-area flex flex-col ps-[10px] font-segoe text-size-sm font-normal ".concat(visibleClose ? 'mr-[10px]' : '', " ").concat(visibleIcon ? '' : 'ml-[-10px]') },
                             React.createElement("div", { className: "flex justify-between" },
                                 React.createElement(Text, { variant: "normal-text-semibold" }, title)),
-                            content),
+                            React.createElement("div", { className: "flex flex-row items-start gap-[5px]" },
+                                customMiniIcon ? customMiniIcon : null,
+                                content)),
                         IconX && typeof IconX === 'function' && (React.createElement("div", { className: "closable-area flex " },
                             React.createElement(IconX, { className: "cursor-pointer ".concat(AlertConfig[validateVariant].hover, " ").concat(AlertConfig[validateVariant].active, " ").concat(AlertConfig[validateVariant].focus, " ").concat(AlertConfig[validateVariant].close), onClick: function () { return setVisible(false); }, tabIndex: 0 }))))))))));
 }
@@ -458,6 +462,12 @@ var iconOnlySizeConfig$1 = {
     sm: 'py-[8px] h-[30px] w-[30px] flex items-center justify-center gap-[5px] ',
     tn: 'py-[4px] h-[22px] w-[22px] flex items-center justify-center gap-[3px]',
 };
+var doubleIconSizeConfig = {
+    lg: 'py-[13px] h-[48px] flex items-center justify-center gap-[10px]',
+    md: 'py-[11px] h-[40px] flex items-center justify-center gap-[5px]',
+    sm: 'py-[8px] h-[30px] flex items-center justify-center gap-[5px] ',
+    tn: 'py-[4px] 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 = {
     default: "text-primary-black bg-bia-grey active:bg-bia-grey-dark-10  hover:bg-bia-grey-hover disabled:bg-bia-grey-disabled disabled:text-bia-grey-active focus-visible:outline focus-visible:outline-offset-0 focus-visible:outline-bia-blue-light-50 focus-visible:outline-[3px] focus-visible:rounded-md shadow-[0px_6px_18px_1px_#BCC7ED80] ".concat(shadow),
@@ -517,9 +527,15 @@ var Button = React.forwardRef(function (_a, ref) {
     else {
         sizingRules = "".concat(sizeConfig$d[validatedSize], " ").concat(sidePaddingConfig[validatedSize]);
     }
+    var hasDoubleIcon = iconRight && iconLeft;
+    var isVariantLink = variant.includes('link')
+        ? ''
+        : "".concat(sidePaddingConfig[validatedSize]);
     var sizeClass = label || variant === 'form-group'
         ? " ".concat(minWidthRules, " ").concat(sizingRules)
-        : "".concat(iconOnlySizeConfig$1[validatedSize], " ").concat(variant.includes('link') ? '' : "".concat(sidePaddingConfig[validatedSize]));
+        : hasDoubleIcon
+            ? "".concat(doubleIconSizeConfig[validatedSize], " ").concat(isVariantLink)
+            : "".concat(iconOnlySizeConfig$1[validatedSize], " ").concat(isVariantLink, " ").concat(isVariantLink);
     var classString = "\n    ".concat(variantConfig$2[validatedVariant], "\n    ").concat(sizeClass, "\n    ").concat(radiusConfig$1[validatedRadius][validatedSize], "\n    ").concat(className, "\n  ");
     return (React.createElement("button", __assign({ ref: ref, type: "button", className: "bianic-button bianic-fgc-target flex items-center justify-center font-semibold ".concat(classString), disabled: disabled }, props),
         childrenElement(iconLeft || left),
@@ -604,9 +620,9 @@ var typeConfig = {
 };
 
 function Badge(_a) {
-    var type = _a.type, children = _a.children, color = _a.color, isInverted = _a.isInverted, className = _a.className;
+    var _b = _a.type, type = _b === void 0 ? 'standart' : _b, children = _a.children, color = _a.color, isInverted = _a.isInverted, className = _a.className;
     var divRef = React.useRef(null);
-    var _b = React.useState(0), fontSize = _b[0], setFontSize = _b[1];
+    var _c = React.useState(0), fontSize = _c[0], setFontSize = _c[1];
     var typeClasses = typeConfig[type];
     var isStandart = type === 'standart';
     var bgColor = isInverted && isStandart ? '#ffffff' : color || '';
@@ -621,7 +637,7 @@ function Badge(_a) {
             setFontSize(fontSizeStyle);
         }
     }, []);
-    return (React.createElement("span", { className: "w-fit bg-bia-grey text-bia-coolgrey flex justify-center items-center font-segoe font-semibold leading-none ".concat(typeClasses, " ").concat(className), style: {
+    return (React.createElement("span", { className: "flex w-fit items-center justify-center bg-bia-grey font-segoe font-semibold leading-none text-bia-coolgrey ".concat(typeClasses, " ").concat(className), style: {
             backgroundColor: bgColor,
             color: textColor,
             paddingLeft: horizontalPadding,
@@ -632,6 +648,7 @@ function Badge(_a) {
         React.createElement("span", { ref: divRef, style: { marginTop: contentMarginTop } }, children)));
 }
 Badge.defaultProps = {
+    type: 'standart',
     isInverted: false,
     color: undefined,
 };
@@ -1864,24 +1881,40 @@ var MenuElement = React.forwardRef(function (_a, ref) {
     })));
 });
 var MenuContainer = function (props) {
-    var _a = props.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = props.children, _b = props.open, open = _b === void 0 ? true : _b, _c = props.onClose, onClose = _c === void 0 ? function () { } : _c, _d = props.className, className = _d === void 0 ? '' : _d, _e = props.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = props.zIndex, zIndex = _f === void 0 ? 100 : _f, _g = props.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, anchorRef = props.anchorRef, restProps = __rest(props, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex", "onClickItem", "anchorRef"]);
+    var _a = props.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = props.children, _b = props.open, open = _b === void 0 ? true : _b, _c = props.onClose, onClose = _c === void 0 ? function () { } : _c, _d = props.className, className = _d === void 0 ? '' : _d, _e = props.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = props.zIndex, zIndex = _f === void 0 ? 100 : _f, _g = props.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, anchorRef = props.anchorRef, matchAnchorWidth = props.matchAnchorWidth, restProps = __rest(props, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex", "onClickItem", "anchorRef", "matchAnchorWidth"]);
     if (!open)
         return null;
     var MenuContainerRef = React.useRef(null);
     var positionStyle = usePopupPosition(anchorRef, MenuContainerRef)[0];
     var newStyle = React.useMemo(function () {
-        var _a;
+        var _a, _b;
         if (!(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)) {
             return {};
         }
-        return __assign({ zIndex: zIndex + 10, minWidth: (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
-                ? (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth
-                : undefined }, positionStyle);
+        var widthStyle = {};
+        switch (matchAnchorWidth) {
+            case 'min':
+                widthStyle = {
+                    minWidth: "".concat((_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth, "px"),
+                };
+                break;
+            case 'exact':
+                widthStyle = {
+                    width: "".concat((_b = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth, "px"),
+                };
+                break;
+            default:
+                widthStyle = { minWidth: '120px' };
+                break;
+        }
+        return __assign(__assign({ zIndex: zIndex + 10 }, widthStyle), positionStyle);
     }, [positionStyle]);
     var menuElement = (React.createElement(MenuElement, __assign({ isTopFlat: isTopFlat, children: children, className: className, zIndex: zIndex, menuRef: MenuContainerRef, onClose: onClose, onClickItem: onClickItem, style: newStyle }, restProps)));
     return (React.createElement(React.Fragment, null,
         isWithOverlay && (React.createElement("div", { className: "bianic-menu-overlay fixed left-0 top-0 z-0 h-screen w-screen", onClick: function () { return onClose(); }, style: { zIndex: zIndex } })),
-        (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) ? reactDom.createPortal(menuElement, document.body) : menuElement));
+        (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
+            ? reactDom.createPortal(menuElement, document.body)
+            : menuElement));
 };
 MenuContainer.defaultProps = {
     isTopFlat: false,
@@ -1956,15 +1989,15 @@ MenuItem.defaultProps = {
 };
 
 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 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, _c = props.zIndex, zIndex = _c === void 0 ? 150 : _c, className = props.className, style = props.style;
     var timeout;
-    var _c = React.useState(false), active = _c[0], setActive = _c[1];
+    var _d = React.useState(false), active = _d[0], setActive = _d[1];
     var anchorRef = React.useRef(null);
     var tooltipContainerRef = React.useRef(null);
-    var _d = React.useState({
+    var _e = React.useState({
         maxWidth: maxWidth + 'px',
         whiteSpace: 'nowrap',
-    }), tooltipContainerStyle = _d[0], setTooltipContainerStyle = _d[1];
+    }), tooltipContainerStyle = _e[0], setTooltipContainerStyle = _e[1];
     var showTip = function () {
         timeout = setTimeout(function () {
             setActive(true);
@@ -2008,12 +2041,12 @@ function Tooltip(props) {
     }, [content, maxWidth, scrollWidth, offsetHeight]);
     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(TooltipItem, { anchorRef: anchorRef, direction: direction, content: content, tooltipContainerRef: tooltipContainerRef, tooltipContainerStyle: tooltipContainerStyle }))));
+        active && (React.createElement(TooltipItem, { anchorRef: anchorRef, direction: direction, content: content, tooltipContainerRef: tooltipContainerRef, tooltipContainerStyle: tooltipContainerStyle, zIndex: zIndex, className: className, style: style }))));
 }
 var TooltipItem = function (_a) {
-    var anchorRef = _a.anchorRef, direction = _a.direction, content = _a.content, tooltipContainerRef = _a.tooltipContainerRef, tooltipContainerStyle = _a.tooltipContainerStyle;
+    var anchorRef = _a.anchorRef, className = _a.className, content = _a.content, direction = _a.direction, style = _a.style, tooltipContainerRef = _a.tooltipContainerRef, tooltipContainerStyle = _a.tooltipContainerStyle, zIndex = _a.zIndex;
     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);
+    return reactDom.createPortal(React.createElement("div", { className: "tooltip-container break-word absolute inline-block break-all rounded-[4px] bg-primary-black px-[7px] py-[4px] text-size-sm text-primary-white ".concat(className), style: __assign(__assign(__assign({ zIndex: zIndex }, positionStyle), tooltipContainerStyle), style), ref: tooltipContainerRef }, content), document.body);
 };
 Tooltip.defaultProps = {
     delay: 400,
@@ -2361,84 +2394,13 @@ DefaultDropdownItem.defaultProps = {
     caption: '',
 };
 
-var containerSizeConfig = {
-    sm: 'min-w-[72px]',
-    md: 'min-w-[96px]',
-};
-var itemSizeConfig = {
-    sm: 'min-h-[30px] border-y-[2px] border-bia-white',
-    md: 'min-h-[40px] border-y-[3px] border-bia-white',
-};
-var fontConfig = {
-    sm: 'text-[12px] font-[400]',
-    md: 'text-[14px] font-[350]',
-};
-
-var DropdownContNoAnchor = React.forwardRef(function DropdownContNoAnchor(propsComp, ref) {
-    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, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex"]);
-    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);
-    var handleClickDrpdownItem = function (e, val) {
-        onClickItem(e, val);
-        onClose();
-    };
-    return (open && (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(); } })),
-        React.createElement("div", __assign({ style: {
-                zIndex: zIndex + 10, // Ensure dropdown is above overlay
-            }, ref: ref, className: "bianic-dropdown-container bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass) }, restProps), React.Children.map(children, function (child) {
-            return React.isValidElement(child)
-                ? // Kirimkan handleItemClick sebagai props onClick ke setiap DropdownItem
-                    React.cloneElement(child, {
-                        onClose: function () { return onClose(); },
-                        size: size,
-                        onClickItem: function (e, val) { return handleClickDrpdownItem(e, val); },
-                        zIndex: zIndex + 10,
-                    })
-                : child;
-        })))));
-});
-DropdownContNoAnchor.defaultProps = {
-    isTopFlat: false,
-};
-
 var sizeUnion$2 = ['md', 'sm'];
 function SelectInput(_a) {
     var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, _d = _a.isValid, isValid = _d === void 0 ? null : _d, label = _a.label, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.required, required = _f === void 0 ? false : _f, selected = _a.selected, setSelected = _a.setSelected, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, children = _a.children, _h = _a.dropContProps, _j = _h === void 0 ? {} : _h, _k = _j.className, dropContClassName = _k === void 0 ? '' : _k, restDropContProps = __rest(_j, ["className"]), props = __rest(_a, ["descText", "disabled", "size", "id", "isValid", "label", "options", "required", "selected", "setSelected", "onClickDropdown", "children", "dropContProps"]);
     var _l = React.useState(false), isOpen = _l[0], setIsOpen = _l[1];
-    var _m = React.useState(false), isDropUp = _m[0], setIsDropUp = _m[1];
     var validatedSize = validUnion(size, sizeUnion$2);
-    var _o = sizeConfig$8[validatedSize], searchSize = _o.searchSize, iconSize = _o.iconSize;
+    var _m = sizeConfig$8[validatedSize], searchSize = _m.searchSize, iconSize = _m.iconSize;
     var inputRef = React.useRef(null);
-    var dropdownContRef = React.useRef(null);
-    var handleOutsideClick = function (e) {
-        if (inputRef.current && !inputRef.current.contains(e.target)) {
-            setIsOpen(false);
-        }
-    };
-    React.useEffect(function () {
-        document.addEventListener('mousedown', handleOutsideClick);
-        return function () {
-            document.removeEventListener('mousedown', handleOutsideClick);
-        };
-    });
-    React.useEffect(function () {
-        var _a, _b;
-        if (inputRef.current) {
-            // Adjust dropdown position to prevent show up out of screen
-            var windowHeight = window.innerHeight;
-            var inputRect = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            var inputBottom = inputRect === null || inputRect === void 0 ? void 0 : inputRect.bottom;
-            var diff = windowHeight - inputBottom;
-            var dropdownRect = (_b = dropdownContRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-            var dropdownHeight = (dropdownRect === null || dropdownRect === void 0 ? void 0 : dropdownRect.height) || 0;
-            if (dropdownHeight >= diff)
-                setIsDropUp(true);
-            else
-                setIsDropUp(false);
-        }
-    }, [isOpen]);
     var isObjectOptionItem = false;
     if (options.every(function (item) { return typeof item === 'object' && item !== null; }))
         isObjectOptionItem = true;
@@ -2446,33 +2408,20 @@ function SelectInput(_a) {
         ? selected.label
         : selected;
     var optionsRef = React.useRef(null);
-    React.useEffect(function () {
-        if (isOpen && inputRef.current && optionsRef.current) {
-            var selectRect = inputRef.current.getBoundingClientRect();
-            var optionsElement = optionsRef.current;
-            var windowHeight = window.innerHeight;
-            // Cek ruang di bawah
-            var spaceBelow = windowHeight - selectRect.bottom;
-            var maxHeight = void 0;
-            maxHeight = spaceBelow - 10; // Beri margin
-            optionsElement.style.maxHeight = "".concat(Math.max(0, maxHeight), "px");
-        }
-    }, [isOpen]);
-    var dropdownPosition = isDropUp ? 'bottom-full' : 'top-full';
     var descColor = 'text-primary-cool';
     var isExistValidation = isValid !== null && isValid !== undefined;
     if (!disabled && isExistValidation && isValid)
         descColor = 'text-bia-green';
     if (!disabled && isExistValidation && !isValid)
         descColor = 'text-bia-red';
-    return (React.createElement("div", { className: "bianic-fgc-container bianic-text-input-container field-group flex w-full flex-col", ref: inputRef },
+    return (React.createElement("div", { className: "bianic-fgc-container bianic-text-input-container field-group flex w-full flex-col" },
         React.createElement("label", { htmlFor: id, className: "label pb-2 text-xs font-semibold" },
             childrenElement(label),
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
         React.createElement("div", { className: "group relative w-full" },
-            React.createElement("input", __assign({ className: "bianic-fgc-target field peer w-full  cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 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:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled }, props)),
+            React.createElement("input", __assign({ className: "bianic-fgc-target field peer w-full  cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 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:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled, ref: inputRef }, props)),
             React.createElement("div", { className: "pointer-events-none absolute inset-y-0 flex items-center pl-3 text-bia-coolgrey peer-disabled:text-bia-coolgrey-light-50 ".concat(iconSize) }, isOpen ? React.createElement(TbChevronUp, null) : React.createElement(TbChevronDown, null)),
-            children === undefined && isOpen && (React.createElement("div", { className: "absolute z-10 w-full rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg ".concat(dropdownPosition), ref: optionsRef, onClick: onClickDropdown }, options.map(function (option) {
+            children === undefined && isOpen && (React.createElement("div", { className: "absolute z-10 w-full rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg", ref: optionsRef, onClick: onClickDropdown }, options.map(function (option) {
                 var isSelected = JSON.stringify(option) === JSON.stringify(selected);
                 var optionLabel = isObjectOptionItem ? option.label : option;
                 var optionCaption = isObjectOptionItem ? option.caption : '';
@@ -2484,7 +2433,7 @@ function SelectInput(_a) {
                         setIsOpen(false);
                     } }));
             }))),
-            children && isOpen && (React.createElement(DropdownContNoAnchor, __assign({ open: isOpen, onClose: function () { return setIsOpen(false); }, size: size, isTopFlat: true, ref: dropdownContRef, className: "bianic-livesearch-dropdown absolute z-10 mt-1 w-full overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ".concat(dropdownPosition, " ").concat(dropContClassName) }, restDropContProps), React.Children.map(children, function (child) {
+            children && isOpen && (React.createElement(DropdownContainer, __assign({ open: isOpen, onClose: function () { return setIsOpen(false); }, size: size, isTopFlat: true, className: "bianic-livesearch-dropdown absolute z-10 mt-1 w-full overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ".concat(dropContClassName), anchorRef: inputRef, matchAnchorWidth: "min" }, restDropContProps), React.Children.map(children, function (child) {
                 if (React.isValidElement(child)) {
                     return React.cloneElement(child, {
                         isSelected: selected && selected.id === child.props.value.id,
@@ -2524,6 +2473,19 @@ var sizeConfig$6 = {
     },
 };
 
+var containerSizeConfig = {
+    sm: 'min-w-[72px]',
+    md: 'min-w-[96px]',
+};
+var itemSizeConfig = {
+    sm: 'min-h-[30px] border-y-[2px] border-bia-white',
+    md: 'min-h-[40px] border-y-[3px] border-bia-white',
+};
+var fontConfig = {
+    sm: 'text-[12px] font-[400]',
+    md: 'text-[14px] font-[350]',
+};
+
 var DropdownElement = React.forwardRef(function (_a, ref) {
     var isTopFlat = _a.isTopFlat, children = _a.children, className = _a.className, size = _a.size, zIndex = _a.zIndex, style = _a.style, onClose = _a.onClose, onClickItem = _a.onClickItem, restProps = __rest(_a, ["isTopFlat", "children", "className", "size", "zIndex", "style", "onClose", "onClickItem"]);
     var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
@@ -2545,19 +2507,34 @@ var DropdownElement = React.forwardRef(function (_a, ref) {
     })));
 });
 var DropdownContainer = function (propsComp) {
-    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"]);
+    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, matchAnchorWidth = propsComp.matchAnchorWidth, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex", "anchorRef", "matchAnchorWidth"]);
     if (!open)
         return null;
     var dropdownRef = React.useRef(null);
     var positionStyle = usePopupPosition(anchorRef, dropdownRef)[0];
     var newStyle = React.useMemo(function () {
-        var _a;
+        var _a, _b, _c;
         if (!(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)) {
             return {};
         }
-        return __assign({ zIndex: zIndex + 10, minWidth: (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
-                ? (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth
-                : undefined }, positionStyle);
+        var widthStyle = {};
+        switch (matchAnchorWidth) {
+            case 'min':
+                widthStyle = {
+                    minWidth: "".concat((_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth, "px"),
+                };
+                break;
+            case 'exact':
+                widthStyle = {
+                    width: "".concat((_b = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth, "px"),
+                    maxWidth: "".concat((_c = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _c === void 0 ? void 0 : _c.offsetWidth, "px"),
+                };
+                break;
+            default:
+                widthStyle = { width: 'fit-content' };
+                break;
+        }
+        return __assign(__assign({ zIndex: zIndex + 10 }, widthStyle), positionStyle);
     }, [positionStyle]);
     var dropdownElement = (React.createElement(DropdownElement, __assign({ ref: dropdownRef, isTopFlat: isTopFlat, children: children, className: className, size: size, zIndex: zIndex, onClose: onClose, onClickItem: onClickItem, style: newStyle }, restProps)));
     return (React.createElement(React.Fragment, null,
@@ -2570,6 +2547,35 @@ DropdownContainer.defaultProps = {
     isTopFlat: false,
 };
 
+var DropdownContNoAnchor = React.forwardRef(function DropdownContNoAnchor(propsComp, ref) {
+    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, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex"]);
+    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);
+    var handleClickDrpdownItem = function (e, val) {
+        onClickItem(e, val);
+        onClose();
+    };
+    return (open && (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(); } })),
+        React.createElement("div", __assign({ style: {
+                zIndex: zIndex + 10, // Ensure dropdown is above overlay
+            }, ref: ref, className: "bianic-dropdown-container bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass) }, restProps), React.Children.map(children, function (child) {
+            return React.isValidElement(child)
+                ? // Kirimkan handleItemClick sebagai props onClick ke setiap DropdownItem
+                    React.cloneElement(child, {
+                        onClose: function () { return onClose(); },
+                        size: size,
+                        onClickItem: function (e, val) { return handleClickDrpdownItem(e, val); },
+                        zIndex: zIndex + 10,
+                    })
+                : child;
+        })))));
+});
+DropdownContNoAnchor.defaultProps = {
+    isTopFlat: false,
+};
+
 function DropdownItem(_a) {
     var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.onClickItem, onClickItem = _c === void 0 ? function () { } : _c, _d = _a.onClose, onClose = _d === void 0 ? function () { } : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.value, value = _f === void 0 ? '' : _f, content = _a.content, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 100 : _h, props = __rest(_a, ["children", "className", "onClickItem", "onClose", "size", "value", "content", "disabled", "zIndex"]);
     var _j = React.useState(false), isHovered = _j[0], setIsHovered = _j[1];
@@ -2768,7 +2774,7 @@ function LiveSearch(_a) {
                         setIsOpen(false);
                     } }));
             }))),
-            children && (React.createElement(DropdownContainer, __assign({ open: isOpen, onClose: function () { return setIsOpen(false); }, size: size, isTopFlat: true, zIndex: 10, className: "bianic-livesearch-dropdown absolute w-full overflow-hidden bg-white shadow-lg ".concat(dropContClassName), anchorRef: inputRef }, restDropContProps), hasFilteredResults
+            children && (React.createElement(DropdownContainer, __assign({ open: isOpen, onClose: function () { return setIsOpen(false); }, size: size, isTopFlat: true, zIndex: 10, className: "bianic-livesearch-dropdown absolute w-full overflow-hidden bg-white shadow-lg ".concat(dropContClassName), anchorRef: inputRef, matchAnchorWidth: "min" }, restDropContProps), hasFilteredResults
                 ? renderedChildren
                 : // If no results and searchTerm is present
                     searchTerm.length > 0 && (React.createElement(DropdownItem, { content: React.createElement("div", { className: "px-4 py-2 text-gray-500" }, "Tidak ada hasil ditemukan.") }))))),
@@ -3703,20 +3709,19 @@ 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 className = _a.className, children = _a.children, content = _a.content, _b = _a.direction, direction = _b === void 0 ? 'bottom' : _b; _a.maxWidth; var _c = _a.title, title = _c === void 0 ? '' : _c, style = _a.style, zIndex = _a.zIndex;
     var wrapperRef = React.useRef(null);
-    React.useRef(null);
-    var _e = useDetectOutsideClick(wrapperRef, false), isOpen = _e[0], setIsOpen = _e[1];
+    var _d = useDetectOutsideClick(wrapperRef, false), isOpen = _d[0], setIsOpen = _d[1];
     return (React.createElement("div", { className: "Bianic-popover-Wrapper relative block h-fit w-fit", role: "button", ref: wrapperRef, onClick: function () { return setIsOpen(true); } },
         children,
-        isOpen && (React.createElement(PopoverItem, { title: title, content: content, anchorRef: wrapperRef, direction: direction }))));
+        isOpen && (React.createElement(PopoverItem, { title: title, content: content, anchorRef: wrapperRef, direction: direction, className: className, style: style, zIndex: zIndex }))));
 }
 var PopoverItem = function (_a) {
-    var title = _a.title, content = _a.content, anchorRef = _a.anchorRef, direction = _a.direction;
+    var title = _a.title, content = _a.content, anchorRef = _a.anchorRef, direction = _a.direction, className = _a.className, style = _a.style, zIndex = _a.zIndex;
     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" },
+    return reactDom.createPortal(React.createElement("div", { ref: popoverRef, style: __assign(__assign(__assign({}, positionStyle), style), { zIndex: zIndex }), 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(className) },
         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)),
@@ -3724,7 +3729,6 @@ var PopoverItem = function (_a) {
             React.createElement("div", { className: "h-0 w-0 ".concat(triangleShape) }))), document.body);
 };
 Popover.defaultProps = {
-    delay: 400,
     direction: 'top',
     title: '',
 };