bianic-ui 1.14.0 → 1.15.0-alpha.1

package/dist/cjs/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var reactDom = require('react-dom');
 
 function Accordions(_a) {
     var title = _a.title, content = _a.content;
@@ -487,12 +488,12 @@ var variantUnion$1 = [
 ];
 var radiusUnion = ['default', 'full-rounded'];
 var sizeUnion$5 = ['md', 'lg', 'sm', 'tn'];
-function Button(_a) {
+var Button = React.forwardRef(function (_a, ref) {
     var label = _a.label, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.radius, radius = _d === void 0 ? 'default' : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.variant, variant = _f === void 0 ? 'default' : _f, _g = _a.iconLeft, iconLeft = _g === void 0 ? null : _g, _h = _a.iconRight, iconRight = _h === void 0 ? null : _h, _j = _a.left, left = _j === void 0 ? null : _j, _k = _a.right, right = _k === void 0 ? null : _k, minWidth = _a.minWidth, props = __rest(_a, ["label", "className", "disabled", "radius", "size", "variant", "iconLeft", "iconRight", "left", "right", "minWidth"]);
     var validatedVariant = validUnion(variant, variantUnion$1);
     var validatedSize = validUnion(size, sizeUnion$5);
     var validatedRadius = validUnion(radius, radiusUnion);
-    var minWidthRules = minWidthConfig$1[size];
+    var minWidthRules = minWidthConfig$1[validatedSize];
     if (minWidth !== undefined) {
         minWidthRules = "min-w-[".concat(minWidth, "px]");
     }
@@ -509,23 +510,23 @@ function Button(_a) {
     var sizeClass = label || variant === 'form-group'
         ? " ".concat(minWidthRules, " ").concat(sizingRules)
         : "".concat(iconOnlySizeConfig$1[validatedSize], " ").concat(variant.includes('link') ? '' : "".concat(sidePaddingConfig[validatedSize]));
-    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({ type: "button", className: "bianic-button bianic-fgc-target flex items-center justify-center font-semibold ".concat(classString), disabled: disabled }, props),
+    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),
         childrenElement(label),
         childrenElement(iconRight || right)));
-}
+});
 Button.defaultProps = {
-    label: null,
+    label: undefined,
     className: '',
     disabled: false,
     radius: 'default',
     size: 'md',
     variant: 'default',
-    iconLeft: null,
-    iconRight: null,
-    left: null,
-    right: null,
+    iconLeft: undefined,
+    iconRight: undefined,
+    left: undefined,
+    right: undefined,
 };
 
 var AvatarConfig = {
@@ -2240,7 +2241,7 @@ var fontConfig = {
     md: 'text-[14px] font-[350]',
 };
 
-var DropdownContainer = React.forwardRef(function DropdownContainer(propsComp, ref) {
+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'];
@@ -2265,51 +2266,10 @@ var DropdownContainer = React.forwardRef(function DropdownContainer(propsComp, r
                 : child;
         })))));
 });
-DropdownContainer.defaultProps = {
+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];
-    var _k = React.useState(false), isLeft = _k[0], setIsLeft = _k[1];
-    var fontClass = fontConfig[size] || fontConfig['md'];
-    var itemSizeClass = itemSizeConfig[size] || itemSizeConfig['md'];
-    var itemClass = "".concat(itemSizeClass, " ").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-[5px] last:rounded-b-radius-sm last:pb-[5px]", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
-        React.createElement("button", __assign({ className: "relative flex 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 : currentZIndex + 15,
-            }, 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 + 10 }, children))));
-}
-DropdownItem.defaultProps = {
-    className: '',
-    onClickItem: function () { },
-};
-
 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, label = _a.label, _d = _a.options, options = _d === void 0 ? [] : _d, _e = _a.required, required = _e === void 0 ? false : _e, selected = _a.selected, setSelected = _a.setSelected, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, children = _a.children, _g = _a.dropContProps, _h = _g === void 0 ? {} : _g, _j = _h.className, dropContClassName = _j === void 0 ? '' : _j, restDropContProps = __rest(_h, ["className"]), props = __rest(_a, ["descText", "disabled", "size", "id", "label", "options", "required", "selected", "setSelected", "onClickDropdown", "children", "dropContProps"]);
@@ -2385,7 +2345,7 @@ function SelectInput(_a) {
                         setIsOpen(false);
                     } }));
             }))),
-            children && isOpen && (React.createElement(DropdownContainer, __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(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) {
                 if (React.isValidElement(child)) {
                     return React.cloneElement(child, {
                         isSelected: selected && selected.id === child.props.value.id,
@@ -2425,16 +2385,140 @@ var sizeConfig$6 = {
     },
 };
 
+var getDropdownStyle = function (anchorRef, dropdownRef) {
+    if (!anchorRef.current || !dropdownRef.current) {
+        return { minWidth: 'auto' };
+    }
+    var anchorRect = anchorRef.current.getBoundingClientRect();
+    var dropdownHeight = dropdownRef.current.offsetHeight;
+    var spaceToBottom = window.innerHeight - anchorRect.bottom;
+    var spaceToTop = anchorRect.top;
+    var style = {
+        left: "".concat(anchorRect.left + window.scrollX, "px"),
+        minWidth: "".concat(anchorRect.width, "px"),
+    };
+    // If space below is less than dropdown height, 
+    // AND space above is more than space below
+    // then flip up
+    if (spaceToBottom < dropdownHeight && spaceToTop > spaceToBottom) {
+        var topPositionForFlip = anchorRect.top + window.scrollY - dropdownHeight;
+        style.top = "".concat(topPositionForFlip, "px");
+    }
+    else {
+        style.top = "".concat(anchorRect.bottom + window.scrollY, "px");
+    }
+    return style;
+};
+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"]);
+    if (!open)
+        return null;
+    var _j = React.useState({ minWidth: 'auto' }), positionStyle = _j[0], setPositionStyle = _j[1];
+    var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
+    var sizeClass = containerSizeConfig[size] || containerSizeConfig['md'];
+    var containerClass = "".concat(sizeClass, " ").concat(radiusClass, " ").concat(className);
+    var dropdownRef = React.useRef(null);
+    var handleClickDrpdownItem = function (e, val) {
+        onClickItem(e, val);
+        onClose();
+    };
+    React.useLayoutEffect(function () {
+        if (!(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current))
+            return;
+        var newStyle = getDropdownStyle(anchorRef, dropdownRef);
+        setPositionStyle(newStyle);
+        var handleScrollOrResize = function () {
+            setPositionStyle(getDropdownStyle(anchorRef, dropdownRef));
+        };
+        window.addEventListener('scroll', handleScrollOrResize);
+        window.addEventListener('resize', handleScrollOrResize);
+        return function () {
+            window.removeEventListener('scroll', handleScrollOrResize);
+            window.removeEventListener('resize', handleScrollOrResize);
+        };
+    }, [anchorRef]);
+    return (React.createElement(React.Fragment, null,
+        isWithOverlay && (React.createElement("div", { className: "bianic-dropdown-overlay fixed left-0 top-0 h-screen w-screen", style: { zIndex: zIndex }, onClick: function () { return onClose(); } })),
+        reactDom.createPortal(React.createElement("div", __assign({ ref: dropdownRef, className: "absolute max-w-fit bianic-dropdown-container bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass), style: __assign({ zIndex: zIndex + 10 }, positionStyle) }, restProps), React.Children.map(children, function (child) {
+            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;
+        })), document.body)));
+};
+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 ? 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];
+    var _k = React.useState(false), isLeft = _k[0], setIsLeft = _k[1];
+    var fontClass = fontConfig[size] || fontConfig['md'];
+    var itemSizeClass = itemSizeConfig[size] || itemSizeConfig['md'];
+    var itemClass = "".concat(itemSizeClass, " ").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-[5px] last:rounded-b-radius-sm last:pb-[5px]", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
+        React.createElement("button", __assign({ className: "relative flex 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 : currentZIndex + 15,
+            }, 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(DropdownContNoAnchor, { 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 + 10 }, children))));
+}
+DropdownItem.defaultProps = {
+    className: '',
+    onClickItem: function () { },
+};
+
+var matchSearchTerm = function (content, term, variant) {
+    var lowerContent = content.toLowerCase();
+    var lowerTerm = term.toLowerCase();
+    switch (variant) {
+        case 'startsWith':
+            return lowerContent.startsWith(lowerTerm);
+        case 'endsWith':
+            return lowerContent.endsWith(lowerTerm);
+        case 'include':
+            return lowerContent.includes(lowerTerm);
+        default:
+            return lowerContent.includes(lowerTerm);
+    }
+};
 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, _j = _a.children, children = _j === void 0 ? undefined : _j, _k = _a.dropContProps, dropContProps = _k === void 0 ? { className: undefined } : _k;
-    var _l = React.useState(false), isOpen = _l[0], setIsOpen = _l[1];
-    var _m = React.useState(value.label || ''), searchTerm = _m[0], setSearchTerm = _m[1];
-    var _o = sizeConfig$6[size], iconClass = _o.iconClass, iconSize = _o.iconSize, inputClass = _o.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.dropContProps, dropContProps = _k === void 0 ? { className: undefined } : _k, _l = _a.searchVariant, searchVariant = _l === void 0 ? 'include' : _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 dropContClassName = dropContProps.className, restDropContProps = __rest(dropContProps, ["className"]);
     var isValueExist = value && value.label !== undefined && value.label !== '';
     var inputRef = React.useRef(null);
     var dropdownContRef = React.useRef(null);
-    var _p = React.useState(false), isDropUp = _p[0], setIsDropUp = _p[1];
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
             setIsOpen(false);
@@ -2454,22 +2538,6 @@ function LiveSearch(_a) {
             setSearchTerm(value.label || '');
         }
     }, [value.label, searchTerm]);
-    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 filteredOptions = options === null || options === void 0 ? void 0 : options.filter(function (item) {
         return item.label.toLowerCase().includes(value.label.toLowerCase());
     });
@@ -2487,36 +2555,38 @@ function LiveSearch(_a) {
     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
+                return child;
             }
-            var itemProps = child.props; // Cast to any to access props
+            var itemProps = child.props;
+            // Assume content is a string for filtering; otherwise, filtering won't work well
+            var itemContent = typeof itemProps.content === 'string' ? itemProps.content : '';
             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
+            // 2. Filtering Logic (Uses Global Search Variant)
+            if (!includeAllIfNoSearch) {
+                // Use the matchSearchTerm utility with the selected searchVariant
+                if (currentSearchTerm && !matchSearchTerm(itemValue, currentSearchTerm, searchVariant)) {
+                    return null; // Item does not match the search criteria
+                }
             }
-            // 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
+            // 3. Process Nested Children (Recursion)
             var clonedChildren = itemProps.children
-                ? processDropdownChildren(itemProps.children, currentSearchTerm)
+                ? processDropdownChildren(itemProps.children, currentSearchTerm, includeAllIfNoSearch)
                 : null;
-            // Clone the DropdownItem to inject the onClick prop
+            // 4. Clone and Inject Click Handler
             return React.cloneElement(child, {
                 onClick: function (e) {
                     if (!isDisabled) {
                         handleDropdownItemClick({
-                            id: itemValue,
-                            label: itemValue,
+                            id: itemValue !== undefined ? itemValue : itemContent,
+                            label: itemValue !== undefined ? itemValue : itemContent
                         });
                     }
-                    if (dropContProps === null || dropContProps === void 0 ? void 0 : dropContProps.onClickItem) {
-                        dropContProps.onClickItem(e, itemValue);
+                    if (itemProps.onClick) {
+                        itemProps.onClick(e);
                     }
                 },
-                children: clonedChildren, // Ensure processed children are also cloned
+                children: clonedChildren
             });
         });
     };
@@ -2525,21 +2595,20 @@ function LiveSearch(_a) {
     var hasFilteredResults = false;
     if (searchTerm) {
         // If there's a searchTerm, filter children
-        renderedChildren = processDropdownChildren(children, searchTerm);
+        renderedChildren = processDropdownChildren(children, searchTerm, false);
         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, '');
+        renderedChildren = processDropdownChildren(children, '', true);
         hasFilteredResults =
             React.Children.toArray(renderedChildren).filter(Boolean).length > 0; // Should always be true if there are initial children
     }
-    var dropdownPosition = isDropUp ? 'bottom-full' : 'top-full';
-    return (React.createElement("div", { className: "bianic-livesearch field-group group/form flex w-full flex-col gap-y-2 ", ref: inputRef },
+    return (React.createElement("div", { className: "bianic-livesearch field-group group/form flex w-full flex-col gap-y-2 " },
         label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
         React.createElement("div", { className: "group relative w-full" },
-            React.createElement("input", { className: "bianic-livesearch-input field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white read-only:pointer-events-none read-only:border-bia-grey-disabled focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-10 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, 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, ref: inputRef, onChange: function (e) {
                     onChangeText(e);
                     setValue({ id: null, label: e.target.value });
                     handleInputChange(e);
@@ -2558,10 +2627,10 @@ function LiveSearch(_a) {
                         setIsOpen(false);
                     } }));
             }))),
-            children && isOpen && (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(dropdownPosition, " ").concat(dropContClassName), ref: dropdownContRef }, 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), ref: dropdownContRef, anchorRef: inputRef }, 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.") }))))),
+                    searchTerm.length > 0 && (React.createElement(DropdownItem, { content: React.createElement("div", { className: "px-4 py-2 text-gray-500" }, "Tidak ada hasil ditemukan.") })))),
         descText && (React.createElement("span", { className: "desc text-xs text-primary-cool" }, descText))));
 }
 LiveSearch.defaultProps = {