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

package/dist/cjs/types/components/Alert/Alert.d.ts

@@ -6,9 +6,12 @@ export interface AlertProps extends ComponentPropsWithoutRef<'div'> {
     visible?: boolean;
     setVisible?: (arg0: boolean) => void;
     visibleIcon?: boolean;
+    visibleMiniIcon?: boolean;
+    customIcon?: React.ReactNode;
+    customMiniIcon?: React.ReactNode;
     visibleClose?: boolean;
 }
-declare function Alert({ title, caption, variant, visible, setVisible, visibleIcon, visibleClose, children, }: AlertProps): false | React.JSX.Element;
+declare function Alert({ title, caption, variant, visible, setVisible, visibleIcon, visibleClose, customIcon, customMiniIcon, children, }: AlertProps): false | React.JSX.Element;
 declare namespace Alert {
     var defaultProps: {
         title: string;

package/dist/cjs/types/components/Badge/Badge.d.ts

@@ -7,6 +7,7 @@ interface BadgeProps extends ComponentPropsWithoutRef<'span'> {
 declare function Badge({ type, children, color, isInverted, className, }: BadgeProps): React.JSX.Element;
 declare namespace Badge {
     var defaultProps: {
+        type: string;
         isInverted: boolean;
         color: undefined;
     };

package/dist/cjs/types/components/Button/buttonConfigs.d.ts

@@ -36,6 +36,12 @@ export declare const iconOnlySizeConfig: {
     sm: string;
     tn: string;
 };
+export declare const doubleIconSizeConfig: {
+    lg: string;
+    md: string;
+    sm: string;
+    tn: string;
+};
 export declare const variantConfig: {
     default: string;
     primary: string;

package/dist/cjs/types/components/Forms/Dropdown/DropdownContainer.d.ts

@@ -9,6 +9,7 @@ export interface DropdownContainerProps extends ComponentPropsWithRef<'div'> {
     size?: 'sm' | 'md';
     zIndex?: number;
     anchorRef?: React.RefObject<HTMLElement>;
+    matchAnchorWidth?: undefined | 'min' | 'exact';
     onClickItem?: (event: React.MouseEvent<HTMLDivElement>, val: string | number | object) => void;
 }
 declare const DropdownContainer: {

package/dist/cjs/types/components/Menu/MenuContainer.d.ts

@@ -8,6 +8,7 @@ interface MenuContainerProps extends ComponentPropsWithRef<'div'> {
     zIndex?: number;
     onClickItem?: () => void;
     anchorRef?: React.RefObject<HTMLElement>;
+    matchAnchorWidth?: undefined | 'min' | 'exact';
 }
 import React, { ComponentPropsWithRef } from 'react';
 declare const MenuContainer: {

package/dist/cjs/types/stories/Alert/Alert.stories.d.ts

@@ -12,3 +12,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Demo: Story;
+export declare const MiniIconDemo: Story;

package/dist/cjs/types/stories/Button/Button.stories.d.ts

@@ -28,5 +28,6 @@ export declare const WarningOutlined: Story;
 export declare const DemoWithIconLeft: Story;
 export declare const DemoWithIconRight: Story;
 export declare const DemoWithIconBoth: Story;
+export declare const DemoWithIconOnlyBoth: Story;
 export declare const DemoWithIconOnly: Story;
 export declare const DemoWithMovingIcon: Story;

package/dist/esm/index.js

@@ -382,7 +382,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',
@@ -392,6 +392,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]") },
@@ -399,13 +402,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 }))))))))));
 }
@@ -456,6 +460,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),
@@ -515,9 +525,15 @@ var Button = 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),
@@ -602,9 +618,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 = useRef(null);
-    var _b = useState(0), fontSize = _b[0], setFontSize = _b[1];
+    var _c = useState(0), fontSize = _c[0], setFontSize = _c[1];
     var typeClasses = typeConfig[type];
     var isStandart = type === 'standart';
     var bgColor = isInverted && isStandart ? '#ffffff' : color || '';
@@ -619,7 +635,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,
@@ -630,6 +646,7 @@ function Badge(_a) {
         React.createElement("span", { ref: divRef, style: { marginTop: contentMarginTop } }, children)));
 }
 Badge.defaultProps = {
+    type: 'standart',
     isInverted: false,
     color: undefined,
 };
@@ -1862,24 +1879,40 @@ var MenuElement = 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 = useRef(null);
     var positionStyle = usePopupPosition(anchorRef, MenuContainerRef)[0];
     var newStyle = 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) ? createPortal(menuElement, document.body) : menuElement));
+        (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
+            ? createPortal(menuElement, document.body)
+            : menuElement));
 };
 MenuContainer.defaultProps = {
     isTopFlat: false,
@@ -2359,84 +2392,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 = 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), Children.map(children, function (child) {
-            return React.isValidElement(child)
-                ? // Kirimkan handleItemClick sebagai props onClick ke setiap DropdownItem
-                    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 = useState(false), isOpen = _l[0], setIsOpen = _l[1];
-    var _m = 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 = useRef(null);
-    var dropdownContRef = useRef(null);
-    var handleOutsideClick = function (e) {
-        if (inputRef.current && !inputRef.current.contains(e.target)) {
-            setIsOpen(false);
-        }
-    };
-    useEffect(function () {
-        document.addEventListener('mousedown', handleOutsideClick);
-        return function () {
-            document.removeEventListener('mousedown', handleOutsideClick);
-        };
-    });
-    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;
@@ -2444,33 +2406,20 @@ function SelectInput(_a) {
         ? selected.label
         : selected;
     var optionsRef = useRef(null);
-    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 : '';
@@ -2482,7 +2431,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,
@@ -2522,6 +2471,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 = 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');
@@ -2543,19 +2505,34 @@ var DropdownElement = 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 = useRef(null);
     var positionStyle = usePopupPosition(anchorRef, dropdownRef)[0];
     var newStyle = 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,
@@ -2568,6 +2545,35 @@ DropdownContainer.defaultProps = {
     isTopFlat: false,
 };
 
+var DropdownContNoAnchor = 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), Children.map(children, function (child) {
+            return React.isValidElement(child)
+                ? // Kirimkan handleItemClick sebagai props onClick ke setiap DropdownItem
+                    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 = useState(false), isHovered = _j[0], setIsHovered = _j[1];
@@ -2766,7 +2772,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.") }))))),