bianic-ui 1.14.0 → 1.15.0-alpha.0

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,77 @@ var fontConfig = {
     md: 'text-[14px] font-[350]',
 };
 
-var DropdownContainer = React.forwardRef(function DropdownContainer(propsComp, ref) {
+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,
+};
+
+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,7 +2336,7 @@ var DropdownContainer = React.forwardRef(function DropdownContainer(propsComp, r
                 : child;
         })))));
 });
-DropdownContainer.defaultProps = {
+DropdownContNoAnchor.defaultProps = {
     isTopFlat: false,
 };
 
@@ -2303,7 +2374,7 @@ function DropdownItem(_a) {
             }, 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))));
+        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: '',
@@ -2314,11 +2385,9 @@ 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"]);
     var _k = React.useState(false), isOpen = _k[0], setIsOpen = _k[1];
-    var _l = React.useState(false), isDropUp = _l[0], setIsDropUp = _l[1];
     var validatedSize = validUnion(size, sizeUnion$2);
-    var _m = sizeConfig$8[validatedSize], searchSize = _m.searchSize, iconSize = _m.iconSize;
+    var _l = sizeConfig$8[validatedSize], searchSize = _l.searchSize, iconSize = _l.iconSize;
     var inputRef = React.useRef(null);
-    var dropdownContRef = React.useRef(null);
     var handleOutsideClick = function (e) {
         if (inputRef.current && !inputRef.current.contains(e.target)) {
             setIsOpen(false);
@@ -2330,22 +2399,6 @@ function SelectInput(_a) {
             document.removeEventListener('mousedown', handleOutsideClick);
         };
     });
-    React.useEffect(function () {
-        var _a, _b;
-        if (inputRef.current) {
-            // Adjust dropdown position to prevent show up out of screen
-            var windowHeight = window.innerHeight;
-            var inputRect = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            var inputBottom = inputRect === null || inputRect === void 0 ? void 0 : inputRect.bottom;
-            var diff = windowHeight - inputBottom;
-            var dropdownRect = (_b = dropdownContRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-            var dropdownHeight = (dropdownRect === null || dropdownRect === void 0 ? void 0 : dropdownRect.height) || 0;
-            if (dropdownHeight >= diff)
-                setIsDropUp(true);
-            else
-                setIsDropUp(false);
-        }
-    }, [isOpen]);
     var isObjectOptionItem = false;
     if (options.every(function (item) { return typeof item === 'object' && item !== null; }))
         isObjectOptionItem = true;
@@ -2365,7 +2418,6 @@ function SelectInput(_a) {
             optionsElement.style.maxHeight = "".concat(Math.max(0, maxHeight), "px");
         }
     }, [isOpen]);
-    var dropdownPosition = isDropUp ? 'bottom-full' : 'top-full';
     return (React.createElement("div", { className: "field-group flex w-full flex-col", ref: inputRef },
         React.createElement("label", { htmlFor: id, className: "label pb-2 text-xs font-semibold" },
             childrenElement(label),
@@ -2385,7 +2437,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(DropdownContainer, __assign({ open: isOpen, onClose: function () { return setIsOpen(false); }, size: size, isTopFlat: true, anchorRef: inputRef, 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) }, 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 +2477,29 @@ var sizeConfig$6 = {
     },
 };
 
+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 +2519,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 +2536,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 +2576,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 +2608,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 = {