bianic-ui 1.9.0-beta.1 → 1.9.0-beta.2

package/dist/cjs/index.js

@@ -412,7 +412,7 @@ var radiusConfig$1 = {
         tn: 'rounded-radius-full focus-visible:rounded-radius-full',
     },
 };
-var sizeConfig$c = {
+var sizeConfig$d = {
     lg: 'py-[10.5px] h-[48px] flex items-center justify-center gap-[10px] text-size-md ',
     md: 'py-[9px] h-[40px] flex items-center justify-center gap-[5px] text-size-base ',
     sm: 'py-[6px] h-[30px] flex items-center justify-center gap-[5px] text-size-sm ',
@@ -490,10 +490,10 @@ function Button(_a) {
     }
     var sizingRules;
     if (variant.includes('link')) {
-        sizingRules = "".concat(sizeConfig$c[validatedSize]);
+        sizingRules = "".concat(sizeConfig$d[validatedSize]);
     }
     else {
-        sizingRules = "".concat(sizeConfig$c[validatedSize], " ").concat(sidePaddingConfig[validatedSize]);
+        sizingRules = "".concat(sizeConfig$d[validatedSize], " ").concat(sidePaddingConfig[validatedSize]);
     }
     var sizeClass = label || variant === 'form-group'
         ? " ".concat(minWidthRules, " ").concat(sizingRules)
@@ -1481,15 +1481,15 @@ var colorConfig$1 = {
         active: 'bg-bia-verdantgreen-dark-40 text-primary-white',
     },
     blue: {
-        default: 'bg-bia-olympicblue hover:bg-bia-olympicblue-dark-10 active:bg-bia-olympicblue-dark-40 text-primary-white disabled:bg-bia-olympicblue disabled:text-primary-white/50 disabled:cursor-default',
-        active: 'bg-bia-olympicblue-dark-40 text-primary-white',
+        default: 'bg-bia-olympicblue hover:bg-bia-olympicblue-light-10 active:bg-bia-olympicblue-dark-10 text-primary-white disabled:bg-bia-olympicblue-dark-20 disabled:text-primary-white/50 disabled:cursor-default',
+        active: 'bg-bia-olympicblue-dark-10 text-primary-white',
     },
 };
 
 var ButtonApp = function (_a) {
     _a.icon; _a.isNotified; var _c = _a.isActive, isActive = _c === void 0 ? false : _c, disabled = _a.disabled, _d = _a.color, color = _d === void 0 ? 'green' : _d, label = _a.label, extended = _a.extended, rest = __rest(_a, ["icon", "isNotified", "isActive", "disabled", "color", "label", "extended"]);
     var buttonState = isActive ? 'active' : 'default';
-    return (React.createElement("button", __assign({ className: "button-app px-[10px] pb-[8.8px] pt-[8px] font-arial text-size-tiny ".concat(colorConfig$1[color][buttonState], " ").concat(extended), type: "button", disabled: disabled }, rest), label));
+    return (React.createElement("button", __assign({ className: "button-app flex items-center justify-center px-[10px] pb-[8.3px] pt-[8.5px] font-arial text-size-tiny ".concat(colorConfig$1[color][buttonState], " ").concat(extended), type: "button", disabled: disabled }, rest), label));
 };
 
 var textColorConfig = {
@@ -1718,46 +1718,72 @@ var TreeItem = function (_a) {
         })))));
 };
 
-function MenuContainer(_a) {
-    var _b = _a.isTopFlat, isTopFlat = _b === void 0 ? false : _b, children = _a.children, _c = _a.open, open = _c === void 0 ? true : _c, _d = _a.onClose, onClose = _d === void 0 ? function () { } : _d, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.isWithOverlay, isWithOverlay = _f === void 0 ? true : _f;
+var MenuContainer = React.forwardRef(function MenuContainer(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.zIndex, zIndex = _f === void 0 ? 0 : _f, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex"]);
     var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
     return (open && (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(); } })),
-        React.createElement("div", { className: "w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(radiusClass, " ").concat(className) }, React.Children.map(children, function (child) {
+        React.createElement("div", __assign({ className: "w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(radiusClass, " ").concat(className), ref: ref, style: {
+                zIndex: zIndex,
+            } }, restProps), React.Children.map(children, function (child) {
             return React.isValidElement(child)
                 ? // Kirimkan handleItemClick sebagai props onClick ke setiap MenuItem
-                    React.cloneElement(child, { onClose: function () { return onClose(); } })
+                    React.cloneElement(child, {
+                        onClose: function () { return onClose(); },
+                        zIndex: zIndex,
+                    })
                 : child;
         })))));
-}
+});
 MenuContainer.defaultProps = {
     isTopFlat: false,
 };
 
 function MenuItem(_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, label = _a.label, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.caption, caption = _d === void 0 ? undefined : _d, _e = _a.isChecked, isChecked = _e === void 0 ? undefined : _e, _f = _a.onClose, onClose = _f === void 0 ? function () { } : _f, children = _a.children, props = __rest(_a, ["className", "label", "onClick", "caption", "isChecked", "onClose", "children"]);
-    var _g = React.useState(false), isHovered = _g[0], setIsHovered = _g[1];
+    var _b = _a.className, className = _b === void 0 ? '' : _b, label = _a.label, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.caption, caption = _d === void 0 ? undefined : _d, _e = _a.isChecked, isChecked = _e === void 0 ? undefined : _e, _f = _a.onClose, onClose = _f === void 0 ? function () { } : _f, children = _a.children, _g = _a.zIndex, zIndex = _g === void 0 ? 0 : _g, props = __rest(_a, ["className", "label", "onClick", "caption", "isChecked", "onClose", "children", "zIndex"]);
+    var _h = React.useState(false), isHovered = _h[0], setIsHovered = _h[1];
+    var _j = React.useState(false), isLeft = _j[0], setIsLeft = _j[1];
     var isWithChecked = isChecked !== undefined;
     var leftPadding = isWithChecked ? 'pl-[5px]' : 'pl-[10px]';
     var rightPadding = caption || children ? 'pr-[5px]' : 'pr-[10px]';
     var itemClass = "".concat(leftPadding, " ").concat(rightPadding, " ").concat(className);
-    return (React.createElement("div", { className: "group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[6px] last:rounded-b-radius-sm last:pb-[6px] ".concat(!isHovered && 'z-10'), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
-        React.createElement("div", __assign({ className: "relative z-10 flex items-center py-[5px] hover:bg-bia-blue-pastel ".concat(itemClass), role: "button", tabIndex: 0, onClick: function (e) {
+    var MenuContRef = React.useRef(null);
+    React.useEffect(function () {
+        var _a;
+        if (MenuContRef.current) {
+            // Adjust dropdown position to prevent overflow on the right.
+            var MenuContRect = (_a = MenuContRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            var RectRight = MenuContRect === null || MenuContRect === void 0 ? void 0 : MenuContRect.right;
+            var innerWindow = window.innerWidth;
+            if (RectRight > innerWindow)
+                setIsLeft(true);
+            else
+                setIsLeft(false);
+        }
+    }, [isHovered]);
+    var translateClass = isLeft
+        ? 'left-0 -translate-x-full'
+        : 'right-0 translate-x-full';
+    var currentZIndex = zIndex + 10;
+    return (React.createElement("div", { className: "group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[6px] last:rounded-b-radius-sm last:pb-[6px]", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
+        React.createElement("div", __assign({ className: "relative flex items-center py-[5px] hover:bg-bia-blue-pastel ".concat(itemClass), role: "button", tabIndex: 0, onClick: function (e) {
                 onClick(e);
-            }, onKeyDown: function () { } }, props),
+            }, onKeyDown: function () { }, style: {
+                zIndex: isHovered ? currentZIndex : 0,
+            } }, props),
             isWithChecked && (React.createElement("div", { className: "mr-[5px] aspect-square w-[14px]" }, isChecked && React.createElement(TbCheck, { className: "text-primary-black", size: 14 }))),
             React.createElement("span", { className: "whitespace-nowrap font-arial text-[11px] text-bia-black" }, label),
             React.createElement("div", { className: "ml-auto flex items-center" },
                 children && (React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-coolgrey" })),
                 children === undefined && caption && (React.createElement("span", { className: "ml-[30px] whitespace-nowrap text-[11px] text-bia-coolgrey" }, caption)))),
-        children && (React.createElement(MenuContainer, { open: isHovered, onClose: onClose, className: "absolute right-0 top-0 translate-x-full bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px]" }, children))));
+        children && (React.createElement(MenuContainer, { open: isHovered, onClose: onClose, className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), ref: MenuContRef, zIndex: currentZIndex }, children))));
 }
 MenuItem.defaultProps = {
     className: '',
     onClick: function () { },
 };
 
-var sizeConfig$b = {
+var sizeConfig$c = {
     md: {
         fieldSize: 'text-size-base p-2.5 font-[350] h-10',
         iconPosition: 'right-[10px]',
@@ -1818,8 +1844,8 @@ function TextInput(_a) {
     var _r = React.useState(false), isShow = _r[0], setIsShow = _r[1];
     var _s = styleConfig[variant], fieldStyle = _s.fieldStyle, iconStyle = _s.iconStyle;
     var _t = isTransparent
-        ? __assign(__assign({}, sizeConfig$b[size]), { iconPosition: "right-0 ", fieldSize: sizeConfig$b[size].fieldSize +
-                " pe-[".concat(9 + sizeConfig$b[size].iconSize, "px]") }) : sizeConfig$b[size], iconSize = _t.iconSize, fieldSize = _t.fieldSize, iconPosition = _t.iconPosition;
+        ? __assign(__assign({}, sizeConfig$c[size]), { iconPosition: "right-0 ", fieldSize: sizeConfig$c[size].fieldSize +
+                " pe-[".concat(9 + sizeConfig$c[size].iconSize, "px]") }) : sizeConfig$c[size], iconSize = _t.iconSize, fieldSize = _t.fieldSize, iconPosition = _t.iconPosition;
     var borderStyle = isTransparent
         ? 'border-transparent bg-transparent' // customize border rule for transparent variant
         : 'border border-bia-grey-dark-10 bg-primary-white';
@@ -1883,7 +1909,7 @@ TextInput.defaultProps = {
 };
 
 // Desc: Radio button size configuration
-var sizeConfig$a = {
+var sizeConfig$b = {
     md: {
         checkSize: 'w-[22px] h-[22px]',
         labelSize: 'text-size-base',
@@ -1898,7 +1924,7 @@ var sizeUnion$4 = ['md', 'sm'];
 function Radio(_a) {
     var label = _a.label, _b = _a.size, size = _b === void 0 ? 'md' : _b, id = _a.id, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.checked, checked = _e === void 0 ? false : _e;
     var validatedSize = validUnion(size, sizeUnion$4);
-    var _f = sizeConfig$a[validatedSize], checkSize = _f.checkSize, labelSize = _f.labelSize;
+    var _f = sizeConfig$b[validatedSize], checkSize = _f.checkSize, labelSize = _f.labelSize;
     return (React.createElement("div", { className: "flex items-center" },
         React.createElement("div", { className: "bg-white rounded-full flex flex-shrink-0 justify-center items-center relative ".concat(checkSize) },
             React.createElement("input", { id: id, "aria-labelledby": "label1", type: "radio", className: "peer checkbox box-content appearance-none focus:opacity-100 focus:ring-1 focus:ring-offset-2 checked:disabled:border-bia-blue-disabled focus:ring-bia-blue focus:outline-none rounded-full border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover disabled:border-bia-grey-dark-10 border-2 absolute cursor-pointer w-full h-full", onClick: function (e) { return onClick(e); }, checked: checked, disabled: disabled }),
@@ -1914,7 +1940,7 @@ Radio.defaultProps = {
     checked: false,
 };
 
-var sizeConfig$9 = {
+var sizeConfig$a = {
     md: {
         inputClass: 'text-size-base font-[350] min-h-10',
     },
@@ -1937,7 +1963,7 @@ var ResizeIcon = function (_a) {
 function TextArea(_a) {
     var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, _d = _a.placeholder, placeholder = _d === void 0 ? '' : _d, required = _a.required, rows = _a.rows, _e = _a.maxLength, maxLength = _e === void 0 ? undefined : _e, value = _a.value, _f = _a.readOnly, readOnly = _f === void 0 ? false : _f, _g = _a.autoComplete, autoComplete = _g === void 0 ? 'off' : _g, props = __rest(_a, ["descText", "disabled", "id", "size", "label", "placeholder", "required", "rows", "maxLength", "value", "readOnly", "autoComplete"]);
     var inputRow = rows !== null && rows !== void 0 ? rows : 4;
-    var inputClass = sizeConfig$9[size].inputClass;
+    var inputClass = sizeConfig$a[size].inputClass;
     var remainWords = maxLength ? maxLength - (value ? value.length : 0) : 0;
     return (React.createElement("div", { className: "field-group flex w-full flex-col" },
         React.createElement("label", { htmlFor: id, className: "label pb-2 text-xs font-semibold read-only:pointer-events-none" },
@@ -1967,7 +1993,7 @@ TextArea.defaultProps = {
     value: '',
 };
 
-var sizeConfig$8 = {
+var sizeConfig$9 = {
     md: {
         checkClass: 'w-[22px] h-[22px]',
         labelClass: 'text-size-base font-[350]',
@@ -1981,7 +2007,7 @@ var sizeConfig$8 = {
 var sizeUnion$3 = ['md', 'sm'];
 function Checkbox(_a) {
     var _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, props = __rest(_a, ["disabled", "id", "size", "label", "onChange"]);
-    var _e = sizeConfig$8[validUnion(size, sizeUnion$3)], checkClass = _e.checkClass, labelClass = _e.labelClass;
+    var _e = sizeConfig$9[validUnion(size, sizeUnion$3)], checkClass = _e.checkClass, labelClass = _e.labelClass;
     return (React.createElement("div", { className: "flex items-center" },
         React.createElement("div", { className: "relative flex flex-shrink-0 items-center justify-center rounded-full bg-white ".concat(checkClass) },
             React.createElement("input", __assign({ id: id, type: "checkbox", className: "checkbox peer absolute box-content h-full w-full cursor-pointer appearance-none rounded-full border-2 border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-bia-blue focus-visible:ring-offset-2 disabled:border-bia-coolgrey-light-50 disabled:checked:border-bia-blue-light-50", onChange: function (e) { return onChange(e); }, disabled: disabled }, props)),
@@ -1999,7 +2025,7 @@ Checkbox.defaultProps = {
     onChange: function () { },
 };
 
-var sizeConfig$7 = {
+var sizeConfig$8 = {
     md: {
         searchSize: 'text-size-base p-2.5 font-[350] h-10',
         iconSize: 'right-[10px] text-[18px]',
@@ -2010,7 +2036,7 @@ var sizeConfig$7 = {
     },
 };
 
-var sizeConfig$6 = {
+var sizeConfig$7 = {
     md: {
         container: 'text-size-base font-[350] py-[3px] first:pt-[8px] last:pb-[8px]',
         item: 'min-h-[34px] p-2.5',
@@ -2028,7 +2054,7 @@ function CustomDropdownItem(_a) {
     var _f = React.useState(false), isHoveredSubMenu = _f[0], setIsHoveredSubMenu = _f[1];
     var isOpenDropdown = isHovered || isHoveredSubMenu;
     var selectedClass = isSelected ? 'font-semibold' : 'font-normal';
-    var _g = sizeConfig$6[size], containerClass = _g.container, item = _g.item;
+    var _g = sizeConfig$7[size], containerClass = _g.container, item = _g.item;
     var itemClass = "".concat(item, " ").concat(selectedClass, " ").concat(className);
     var isExistSubDropdown = options.length !== 0;
     return (React.createElement("div", { className: "relative w-full focus-visible:outline-bia-blue-light-50 ".concat(containerClass), tabIndex: 0, role: "button", onClick: function (e) { return onClick(e); }, onMouseEnter: function () { return setisHovered(true); }, onMouseLeave: function () { return setisHovered(false); }, onKeyDown: function () { } },
@@ -2055,7 +2081,7 @@ function DefaultDropdownItem(_a) {
     var _g = React.useState(false), isHoveredSubMenu = _g[0], setIsHoveredSubMenu = _g[1];
     var isOpenDropdown = isHovered || isHoveredSubMenu;
     var selectedClass = isSelected ? 'font-semibold' : 'font-normal';
-    var _h = sizeConfig$6[size], containerClass = _h.container, item = _h.item;
+    var _h = sizeConfig$7[size], containerClass = _h.container, item = _h.item;
     var itemClass = "".concat(item, " ").concat(selectedClass, " ").concat(className);
     var isExistSubDropdown = options.length !== 0;
     return (React.createElement("div", { className: "relative w-full focus-visible:outline-bia-blue-light-50 ".concat(containerClass), tabIndex: 0, role: "button", onClick: function (e) { return onClick(e); }, onMouseEnter: function () { return setisHovered(true); }, onMouseLeave: function () { return setisHovered(false); }, onKeyDown: function () { } },
@@ -2082,7 +2108,7 @@ 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, label = _a.label, options = _a.options, _d = _a.required, required = _d === void 0 ? false : _d, selected = _a.selected, setSelected = _a.setSelected, _e = _a.onClickDropdown, onClickDropdown = _e === void 0 ? function () { } : _e, props = __rest(_a, ["descText", "disabled", "size", "id", "label", "options", "required", "selected", "setSelected", "onClickDropdown"]);
     var _f = React.useState(false), isOpen = _f[0], setIsOpen = _f[1];
     var validatedSize = validUnion(size, sizeUnion$2);
-    var _g = sizeConfig$7[validatedSize], searchSize = _g.searchSize, iconSize = _g.iconSize;
+    var _g = sizeConfig$8[validatedSize], searchSize = _g.searchSize, iconSize = _g.iconSize;
     var inputRef = React.useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
@@ -2146,7 +2172,7 @@ SelectInput.defaultProps = {
     setSelected: function () { },
 };
 
-var sizeConfig$5 = {
+var sizeConfig$6 = {
     md: {
         iconClass: 'right-[10px]',
         iconSize: '18',
@@ -2161,11 +2187,89 @@ var sizeConfig$5 = {
     },
 };
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
+var sizeConfig$5 = {
+    sm: 'min-w-[72px]',
+    md: 'min-w-[96px]',
+};
+var fontConfig = {
+    sm: 'text-[12px] font-[400]',
+    md: 'text-[14px] font-[350]',
+};
+
+var DropdownContainer = React.forwardRef(function DropdownContainer(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 ? 0 : _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 = sizeConfig$5[size] || sizeConfig$5['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 z-0 h-screen w-screen", onClick: function () { return onClose(); } })),
+        React.createElement("div", __assign({ style: {
+                zIndex: zIndex,
+            }, 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,
+                    })
+                : child;
+        })))));
+});
+DropdownContainer.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 ? 0 : _h, props = __rest(_a, ["children", "className", "onClickItem", "onClose", "size", "value", "content", "disabled", "zIndex"]);
+    var _j = React.useState(false), isHovered = _j[0], setIsHovered = _j[1];
+    var _k = React.useState(false), isLeft = _k[0], setIsLeft = _k[1];
+    var fontClass = fontConfig[size] || fontConfig['md'];
+    var itemClass = "".concat(fontClass, " ").concat(className);
+    var chevronSize = size === 'sm' ? 14 : 18;
+    var DropdownContRef = React.useRef(null);
+    React.useEffect(function () {
+        var _a;
+        if (DropdownContRef.current) {
+            // Adjust dropdown position to prevent overflow on the right.
+            var MenuContRect = (_a = DropdownContRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            var RectRight = MenuContRect === null || MenuContRect === void 0 ? void 0 : MenuContRect.right;
+            var innerWindow = window.innerWidth;
+            if (RectRight > innerWindow)
+                setIsLeft(true);
+            else
+                setIsLeft(false);
+        }
+    }, [isHovered]);
+    var translateClass = isLeft
+        ? 'left-0 -translate-x-full'
+        : 'right-0 translate-x-full';
+    var currentZIndex = zIndex + 10;
+    return (React.createElement("div", { className: "bianic-dropdown-item group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[6px] last:rounded-b-radius-sm last:pb-[6px]", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
+        React.createElement("button", __assign({ className: "relative flex h-full w-full !min-w-fit items-center justify-start whitespace-nowrap px-[15px] py-[5px] text-left text-bia-black disabled:cursor-not-allowed disabled:text-bia-coolgrey-light-50 hover:[&:not(:disabled)]:bg-bia-blue-pastel ".concat(itemClass), style: {
+                zIndex: isHovered ? currentZIndex : 0,
+            }, onClick: function (e) {
+                onClickItem(e, value);
+            }, onKeyDown: function () { }, disabled: disabled, type: "button" }, props),
+            content,
+            React.createElement("div", { className: "ml-auto flex items-center" }, children && (React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-coolgrey", size: chevronSize })))),
+        children && (React.createElement(DropdownContainer, { className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), onClose: onClose, open: isHovered, onClickItem: function (e, value) { return onClickItem(e, value); }, size: size, ref: DropdownContRef, zIndex: currentZIndex }, children))));
+}
+DropdownItem.defaultProps = {
+    className: '',
+    onClickItem: function () { },
+};
+
 function LiveSearch(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, options = _a.options, setValue = _a.setValue, value = _a.value, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e, _f = _a.onChangeText, onChangeText = _f === void 0 ? function () { } : _f, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, _h = _a.autoComplete, autoComplete = _h === void 0 ? 'off' : _h;
-    var _j = React.useState(false), isOpen = _j[0], setIsOpen = _j[1];
-    var _k = sizeConfig$5[size], iconClass = _k.iconClass, iconSize = _k.iconSize, inputClass = _k.inputClass;
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, options = _a.options, setValue = _a.setValue, value = _a.value, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e, _f = _a.onChangeText, onChangeText = _f === void 0 ? function () { } : _f, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, _h = _a.autoComplete, autoComplete = _h === void 0 ? 'off' : _h, _j = _a.children, children = _j === void 0 ? undefined : _j, _k = _a.dropdownClassName, dropdownClassName = _k === void 0 ? '' : _k, _l = _a.dropContProps, dropContProps = _l === void 0 ? undefined : _l;
+    var _m = React.useState(false), isOpen = _m[0], setIsOpen = _m[1];
+    var _o = React.useState(value.label || ''), searchTerm = _o[0], setSearchTerm = _o[1];
+    var _p = sizeConfig$6[size], iconClass = _p.iconClass, iconSize = _p.iconSize, inputClass = _p.inputClass;
     var inputRef = React.useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
@@ -2178,30 +2282,108 @@ function LiveSearch(_a) {
             document.removeEventListener('mousedown', handleOutsideClick);
         };
     });
+    // Synchronize internal searchTerm with external value prop
+    React.useEffect(function () {
+        // Only update searchTerm if the label from the value prop differs from the current searchTerm
+        // This prevents infinite loops if searchTerm is already the same as value.label
+        if (value.label !== searchTerm) {
+            setSearchTerm(value.label || '');
+        }
+    }, [value.label, searchTerm]);
     var filteredOptions = options.filter(function (item) {
         return item.label.toLowerCase().includes(value.label.toLowerCase());
     });
-    return (React.createElement("div", { className: "field-group flex w-full flex-col gap-y-2", ref: inputRef },
-        React.createElement("label", { htmlFor: id, className: "label text-xs font-semibold read-only:pointer-events-none" },
+    var handleInputChange = function (e) {
+        var newSearchTerm = e.target.value;
+        setSearchTerm(newSearchTerm);
+        setIsOpen(true); // Ensure dropdown opens when typing
+    };
+    var handleDropdownItemClick = React.useCallback(function (clickedValue) {
+        setSearchTerm(clickedValue.label); // Set input text to the selected label
+        setValue(clickedValue); // Update the value in the parent
+        setIsOpen(false);
+    }, [setValue]);
+    // Recursive function to filter and clone DropdownItems, including nested items
+    var processDropdownChildren = function (nodes, currentSearchTerm, includeAllIfNoSearch) {
+        return React.Children.map(nodes, function (child) {
+            if (!React.isValidElement(child) || child.type !== DropdownItem) {
+                return child; // Render non-DropdownItem or other elements as is
+            }
+            var itemProps = child.props; // Cast to any to access props
+            var itemValue = itemProps.value;
+            var isDisabled = itemProps.disabled;
+            // Filter based on searchTerm only if searchTerm is present
+            if (currentSearchTerm &&
+                !itemValue.toLowerCase().includes(currentSearchTerm.toLowerCase())) {
+                return null; // Do not render if it doesn't match
+            }
+            // If includeAllIfNoSearch is true (when searchTerm is empty), do not filter.
+            // If includeAllIfNoSearch is false (when searchTerm is present), filtering has been done above.
+            // Clone its children recursively if any
+            var clonedChildren = itemProps.children
+                ? processDropdownChildren(itemProps.children, currentSearchTerm)
+                : null;
+            // Clone the DropdownItem to inject the onClick prop
+            return React.cloneElement(child, {
+                onClick: function (e) {
+                    if (!isDisabled) {
+                        handleDropdownItemClick({
+                            id: itemValue,
+                            label: itemValue,
+                        });
+                    }
+                    if (dropContProps === null || dropContProps === void 0 ? void 0 : dropContProps.onClickItem) {
+                        dropContProps.onClickItem(e, itemValue);
+                    }
+                },
+                children: clonedChildren, // Ensure processed children are also cloned
+            });
+        });
+    };
+    // Determine which children to display
+    var renderedChildren = null;
+    var hasFilteredResults = false;
+    if (searchTerm) {
+        // If there's a searchTerm, filter children
+        renderedChildren = processDropdownChildren(children, searchTerm);
+        hasFilteredResults =
+            React.Children.toArray(renderedChildren).filter(Boolean).length > 0;
+    }
+    else {
+        // If searchTerm is empty, display all children without filtering (but with onClick injected)
+        renderedChildren = processDropdownChildren(children, '');
+        hasFilteredResults =
+            React.Children.toArray(renderedChildren).filter(Boolean).length > 0; // Should always be true if there are initial children
+    }
+    return (React.createElement("div", { className: "bianic-livesearch field-group flex w-full flex-col gap-y-2", ref: inputRef },
+        React.createElement("label", { htmlFor: id, className: "bianic-livesearch-label text-xs font-semibold read-only:pointer-events-none" },
             label,
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
         React.createElement("div", { className: "group relative w-full" },
-            React.createElement("input", { className: "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: value.label, required: required, disabled: disabled, id: id, placeholder: placeholder, onChange: function (e) {
+            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, onChange: function (e) {
                     onChangeText(e);
                     setValue({ id: null, label: e.target.value });
-                }, type: "search", readOnly: readOnly, autoComplete: autoComplete }),
-            React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 peer-hover:hidden peer-focus:hidden ".concat(iconClass) },
+                    handleInputChange(e);
+                }, type: "text", readOnly: readOnly, autoComplete: autoComplete }),
+            React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 group-hover:hidden ".concat(iconClass) },
                 React.createElement(TbZoom, { className: "text-primary-black", style: { fontSize: iconSize } })),
-            isOpen && (React.createElement("div", { className: "border-grey-100 absolute z-10 max-h-60 w-full overflow-y-auto rounded-b-md border bg-primary-white shadow-lg", onClick: onClickDropdown }, filteredOptions.map(function (option) {
+            React.createElement("div", { className: "absolute inset-y-0 z-20 hidden pl-3 group-hover:block ".concat(iconClass) },
+                React.createElement("button", { onClick: function () { return setValue({ id: null, label: '' }); }, className: "flex h-full w-full items-center" },
+                    React.createElement(TbX, { className: "text-primary-black", style: { fontSize: iconSize } }))),
+            children !== undefined && isOpen && (React.createElement("div", { className: "border-grey-100 absolute z-10 max-h-60 w-full overflow-y-auto rounded-b-md border bg-primary-white shadow-lg", onClick: onClickDropdown }, filteredOptions.map(function (option) {
                 var isSelected = value && value.id && option.id === value.id;
-                return option.custom ? (React.createElement(CustomDropdownItem, { size: size, isSelected: isSelected, onClick: function () {
+                return option.custom ? (React.createElement(CustomDropdownItem, { size: size, isSelected: isSelected, className: dropdownClassName, onClick: function () {
                         setValue(option);
                         setIsOpen(false);
-                    } }, option.custom)) : (React.createElement(DefaultDropdownItem, { label: option.label, size: size, isSelected: isSelected, onClick: function () {
+                    } }, option.custom)) : (React.createElement(DefaultDropdownItem, { label: option.label, size: size, isSelected: isSelected, className: dropdownClassName, onClick: function () {
                         setValue(option);
                         setIsOpen(false);
                     } }));
-            })))),
+            }))),
+            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(dropdownClassName) }, dropContProps), 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.") }))))),
         React.createElement("span", { className: "desc text-xs text-primary-cool" }, descText)));
 }
 LiveSearch.defaultProps = {
@@ -3297,6 +3479,8 @@ exports.Color = Color;
 exports.ContextualButton = ContextualButton;
 exports.Display = Display;
 exports.Divider = Divider;
+exports.DropdownContainer = DropdownContainer;
+exports.DropdownItem = DropdownItem;
 exports.FileTree = FileTree;
 exports.FormGroup = FormGroup;
 exports.FormGroupButton = FormGroupButton;