bianic-ui 1.16.0-alpha.6 → 1.16.0-alpha.7

package/dist/cjs/index.js

@@ -1728,7 +1728,9 @@ var getContextualPopupStyle = function (anchorRef, popupRef, position) {
     if (!anchorRef.current || !popupRef.current) {
         return {};
     }
-    var style = {};
+    var style = {
+        position: 'absolute',
+    };
     var anchorRect = anchorRef.current.getBoundingClientRect();
     var popupRect = popupRef.current.getBoundingClientRect();
     var popupHeight = popupRect.height;
@@ -1778,6 +1780,7 @@ var getDropdownStyle = function (anchorRef, popupRef) {
     var spaceToBottom = window.innerHeight - anchorRect.bottom;
     var spaceToTop = anchorRect.top;
     var style = {
+        position: 'absolute',
         left: "".concat(anchorRect.left + window.scrollX, "px"),
     };
     // If space below is less than popup height,
@@ -1795,6 +1798,9 @@ var usePopupPosition = function (anchorRef, popupRef, position) {
     // In projects where bianic-ui is installed,
     // there is a delay in rendering styles,
     // which causes popups to lose their position and need to be re-rendered.
+    if (!anchorRef || !popupRef) {
+        return [{}, function () { }];
+    }
     var _a = React.useState(0), repeateRender = _a[0], setRepeateRender = _a[1];
     var _b = React.useState({}), positionStyle = _b[0], setPositionStyle = _b[1];
     var calcPosition = function () {
@@ -1824,28 +1830,38 @@ var usePopupPosition = function (anchorRef, popupRef, position) {
     return [positionStyle, calcPosition];
 };
 
+var MenuElement = React.forwardRef(function (_a, ref) {
+    var isTopFlat = _a.isTopFlat, children = _a.children, className = _a.className, zIndex = _a.zIndex, menuRef = _a.menuRef, onClose = _a.onClose, onClickItem = _a.onClickItem, style = _a.style, restProps = __rest(_a, ["isTopFlat", "children", "className", "zIndex", "menuRef", "onClose", "onClickItem", "style"]);
+    var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
+    return (React.createElement("div", __assign({ ref: menuRef, className: "w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(radiusClass, " ").concat(className), style: style }, restProps), React.Children.map(children, function (child) {
+        return React.isValidElement(child)
+            ? React.cloneElement(child, {
+                onClose: function () { return onClose(); },
+                zIndex: zIndex + 10,
+                inheritedOnClick: function () { return onClickItem(); },
+            })
+            : child;
+    })));
+});
 var MenuContainer = function (props) {
-    var _a;
-    var _b = props.isTopFlat, isTopFlat = _b === void 0 ? false : _b, children = props.children, _c = props.open, open = _c === void 0 ? true : _c, _d = props.onClose, onClose = _d === void 0 ? function () { } : _d, _e = props.className, className = _e === void 0 ? '' : _e, _f = props.isWithOverlay, isWithOverlay = _f === void 0 ? true : _f, _g = props.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = props.onClickItem, onClickItem = _h === void 0 ? function () { } : _h, anchorRef = props.anchorRef, restProps = __rest(props, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex", "onClickItem", "anchorRef"]);
+    var _a = props.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = props.children, _b = props.open, open = _b === void 0 ? true : _b, _c = props.onClose, onClose = _c === void 0 ? function () { } : _c, _d = props.className, className = _d === void 0 ? '' : _d, _e = props.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = props.zIndex, zIndex = _f === void 0 ? 100 : _f, _g = props.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, anchorRef = props.anchorRef, restProps = __rest(props, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex", "onClickItem", "anchorRef"]);
     if (!open)
         return null;
-    var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
     var MenuContainerRef = React.useRef(null);
     var positionStyle = usePopupPosition(anchorRef, MenuContainerRef)[0];
+    var newStyle = React.useMemo(function () {
+        var _a;
+        if (!(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)) {
+            return {};
+        }
+        return __assign({ zIndex: zIndex + 10, minWidth: (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
+                ? (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth
+                : undefined }, positionStyle);
+    }, [positionStyle]);
+    var menuElement = (React.createElement(MenuElement, __assign({ isTopFlat: isTopFlat, children: children, className: className, zIndex: zIndex, menuRef: MenuContainerRef, onClose: onClose, onClickItem: onClickItem, style: newStyle }, restProps)));
     return (React.createElement(React.Fragment, null,
         isWithOverlay && (React.createElement("div", { className: "bianic-menu-overlay fixed left-0 top-0 z-0 h-screen w-screen", onClick: function () { return onClose(); }, style: { zIndex: zIndex } })),
-        reactDom.createPortal(React.createElement("div", __assign({ ref: MenuContainerRef, className: "absolute w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(radiusClass, " ").concat(className), style: __assign({ zIndex: zIndex + 10, minWidth: (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
-                    ? (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth
-                    : undefined }, positionStyle) }, 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(); },
-                        zIndex: zIndex + 10,
-                        inheritedOnClick: function () { return onClickItem(); },
-                    })
-                : child;
-        })), document.body)));
+        (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) ? reactDom.createPortal(menuElement, document.body) : menuElement));
 };
 MenuContainer.defaultProps = {
     isTopFlat: false,
@@ -2473,34 +2489,47 @@ var sizeConfig$6 = {
     },
 };
 
-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 DropdownElement = function (_a) {
+    var isTopFlat = _a.isTopFlat, children = _a.children, className = _a.className, size = _a.size, zIndex = _a.zIndex, dropdownRef = _a.dropdownRef, onClose = _a.onClose, onClickItem = _a.onClickItem, style = _a.style, restProps = __rest(_a, ["isTopFlat", "children", "className", "size", "zIndex", "dropdownRef", "onClose", "onClickItem", "style"]);
     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 positionStyle = usePopupPosition(anchorRef, dropdownRef)[0];
     var handleClickDrpdownItem = function (e, val) {
         onClickItem(e, val);
         onClose();
     };
+    return (React.createElement("div", __assign({ ref: dropdownRef, className: "bianic-dropdown-container max-w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass), style: style }, restProps), React.Children.map(children, function (child) {
+        return React.isValidElement(child)
+            ? React.cloneElement(child, {
+                onClose: function () { return onClose(); },
+                size: size,
+                onClickItem: function (e, val) { return handleClickDrpdownItem(e, val); },
+                zIndex: zIndex + 10,
+            })
+            : child;
+    })));
+};
+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 dropdownRef = React.useRef(null);
+    var positionStyle = usePopupPosition(anchorRef, dropdownRef)[0];
+    var newStyle = React.useMemo(function () {
+        var _a;
+        if (!(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)) {
+            return {};
+        }
+        return __assign({ zIndex: zIndex + 10, minWidth: (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
+                ? (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth
+                : undefined }, positionStyle);
+    }, [positionStyle]);
+    var dropdownElement = (React.createElement(DropdownElement, __assign({ isTopFlat: isTopFlat, children: children, className: className, size: size, zIndex: zIndex, dropdownRef: dropdownRef, onClose: onClose, onClickItem: onClickItem, style: newStyle }, restProps)));
     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: "bianic-dropdown-container absolute max-w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass), style: __assign({ minWidth: anchorRef.current
-                    ? anchorRef.current.offsetWidth
-                    : undefined, 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)));
+        (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
+            ? reactDom.createPortal(dropdownElement, document.body)
+            : dropdownElement));
 };
 DropdownContainer.defaultProps = {
     isTopFlat: false,
@@ -2665,20 +2694,20 @@ var useLiveSearch = function (_a) {
 };
 
 function LiveSearch(_a) {
-    var _b = _a.autoComplete, autoComplete = _b === void 0 ? 'off' : _b, _c = _a.children, children = _c === void 0 ? undefined : _c, descText = _a.descText, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.dropContProps, dropContProps = _e === void 0 ? { className: undefined } : _e, id = _a.id, label = _a.label, _f = _a.onChangeText, onChangeText = _f === void 0 ? function () { } : _f, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, options = _a.options, placeholder = _a.placeholder, _h = _a.readOnly, readOnly = _h === void 0 ? false : _h, _j = _a.required, required = _j === void 0 ? false : _j, _k = _a.searchVariant, searchVariant = _k === void 0 ? 'include' : _k, setValue = _a.setValue, _l = _a.size, size = _l === void 0 ? 'md' : _l, value = _a.value;
+    var _b = _a.autoComplete, autoComplete = _b === void 0 ? 'off' : _b, _c = _a.children, children = _c === void 0 ? undefined : _c, descText = _a.descText, _d = _a.disabled, disabled = _d === void 0 ? false : _d, dropContProps = _a.dropContProps, id = _a.id, label = _a.label, _e = _a.onChangeText, onChangeText = _e === void 0 ? function () { } : _e, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, options = _a.options, placeholder = _a.placeholder, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.searchVariant, searchVariant = _j === void 0 ? 'include' : _j, setValue = _a.setValue, _k = _a.size, size = _k === void 0 ? 'md' : _k, value = _a.value;
     var inputRef = React.useRef(null);
     var dropdownContRef = React.useRef(null);
-    var _m = useLiveSearch({
+    var _l = useLiveSearch({
         value: value,
         setValue: setValue,
         onChangeText: onChangeText,
         dropContOnClickItem: dropContProps.onClickItem
-    }), isOpen = _m.isOpen, setIsOpen = _m.setIsOpen, searchTerm = _m.searchTerm, handleInputChange = _m.handleInputChange, handleDropdownItemClick = _m.handleDropdownItemClick;
-    var _o = sizeConfig$6[size], iconClass = _o.iconClass, iconSize = _o.iconSize, inputClass = _o.inputClass;
-    var dropContClassName = dropContProps.className; dropContProps.onClickItem; var restDropContProps = __rest(dropContProps, ["className", "onClickItem"]);
+    }), isOpen = _l.isOpen, setIsOpen = _l.setIsOpen, searchTerm = _l.searchTerm, handleInputChange = _l.handleInputChange, handleDropdownItemClick = _l.handleDropdownItemClick;
+    var _m = sizeConfig$6[size], iconClass = _m.iconClass, iconSize = _m.iconSize, inputClass = _m.inputClass;
+    var dropContClassName = dropContProps.className; dropContProps.onClickItem; dropContProps.anchorRef; var restDropContProps = __rest(dropContProps, ["className", "onClickItem", "anchorRef"]);
     var isValueExist = value && value.label !== undefined && value.label !== '';
     var filteredOptions = filterOptions(options || [], value.label);
-    var _p = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _p.renderedChildren, hasFilteredResults = _p.hasFilteredResults;
+    var _o = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _o.renderedChildren, hasFilteredResults = _o.hasFilteredResults;
     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" },

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

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

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

@@ -1,4 +1,3 @@
-import React, { ComponentPropsWithRef } from 'react';
 interface MenuContainerProps extends ComponentPropsWithRef<'div'> {
     isTopFlat?: boolean;
     children: React.ReactNode | undefined;
@@ -8,8 +7,9 @@ interface MenuContainerProps extends ComponentPropsWithRef<'div'> {
     isWithOverlay?: boolean;
     zIndex?: number;
     onClickItem?: () => void;
-    anchorRef: React.RefObject<HTMLElement>;
+    anchorRef?: React.RefObject<HTMLElement>;
 }
+import React, { ComponentPropsWithRef } from 'react';
 declare const MenuContainer: {
     (props: MenuContainerProps): React.JSX.Element | null;
     defaultProps: {

package/dist/cjs/types/utility/hooks/usePopupPosition.d.ts

@@ -4,6 +4,7 @@ interface PositionStyle {
     left?: string;
     right?: string;
     bottom?: string;
+    position?: 'absolute' | 'fixed' | 'relative';
 }
-declare const usePopupPosition: (anchorRef: RefObject<HTMLElement>, popupRef: RefObject<HTMLDivElement>, position?: string) => [PositionStyle, () => void];
+declare const usePopupPosition: (anchorRef?: RefObject<HTMLElement>, popupRef?: RefObject<HTMLDivElement>, position?: string) => [PositionStyle, () => void] | {}[];
 export default usePopupPosition;

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, forwardRef, useRef, cloneElement, useLayoutEffect, Children, isValidElement, useCallback } from 'react';
+import React, { useState, useEffect, forwardRef, useRef, cloneElement, useLayoutEffect, Children, useMemo, isValidElement, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 
 function Accordions(_a) {
@@ -1726,7 +1726,9 @@ var getContextualPopupStyle = function (anchorRef, popupRef, position) {
     if (!anchorRef.current || !popupRef.current) {
         return {};
     }
-    var style = {};
+    var style = {
+        position: 'absolute',
+    };
     var anchorRect = anchorRef.current.getBoundingClientRect();
     var popupRect = popupRef.current.getBoundingClientRect();
     var popupHeight = popupRect.height;
@@ -1776,6 +1778,7 @@ var getDropdownStyle = function (anchorRef, popupRef) {
     var spaceToBottom = window.innerHeight - anchorRect.bottom;
     var spaceToTop = anchorRect.top;
     var style = {
+        position: 'absolute',
         left: "".concat(anchorRect.left + window.scrollX, "px"),
     };
     // If space below is less than popup height,
@@ -1793,6 +1796,9 @@ var usePopupPosition = function (anchorRef, popupRef, position) {
     // In projects where bianic-ui is installed,
     // there is a delay in rendering styles,
     // which causes popups to lose their position and need to be re-rendered.
+    if (!anchorRef || !popupRef) {
+        return [{}, function () { }];
+    }
     var _a = useState(0), repeateRender = _a[0], setRepeateRender = _a[1];
     var _b = useState({}), positionStyle = _b[0], setPositionStyle = _b[1];
     var calcPosition = function () {
@@ -1822,28 +1828,38 @@ var usePopupPosition = function (anchorRef, popupRef, position) {
     return [positionStyle, calcPosition];
 };
 
+var MenuElement = forwardRef(function (_a, ref) {
+    var isTopFlat = _a.isTopFlat, children = _a.children, className = _a.className, zIndex = _a.zIndex, menuRef = _a.menuRef, onClose = _a.onClose, onClickItem = _a.onClickItem, style = _a.style, restProps = __rest(_a, ["isTopFlat", "children", "className", "zIndex", "menuRef", "onClose", "onClickItem", "style"]);
+    var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
+    return (React.createElement("div", __assign({ ref: menuRef, className: "w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(radiusClass, " ").concat(className), style: style }, restProps), Children.map(children, function (child) {
+        return React.isValidElement(child)
+            ? cloneElement(child, {
+                onClose: function () { return onClose(); },
+                zIndex: zIndex + 10,
+                inheritedOnClick: function () { return onClickItem(); },
+            })
+            : child;
+    })));
+});
 var MenuContainer = function (props) {
-    var _a;
-    var _b = props.isTopFlat, isTopFlat = _b === void 0 ? false : _b, children = props.children, _c = props.open, open = _c === void 0 ? true : _c, _d = props.onClose, onClose = _d === void 0 ? function () { } : _d, _e = props.className, className = _e === void 0 ? '' : _e, _f = props.isWithOverlay, isWithOverlay = _f === void 0 ? true : _f, _g = props.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = props.onClickItem, onClickItem = _h === void 0 ? function () { } : _h, anchorRef = props.anchorRef, restProps = __rest(props, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex", "onClickItem", "anchorRef"]);
+    var _a = props.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = props.children, _b = props.open, open = _b === void 0 ? true : _b, _c = props.onClose, onClose = _c === void 0 ? function () { } : _c, _d = props.className, className = _d === void 0 ? '' : _d, _e = props.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = props.zIndex, zIndex = _f === void 0 ? 100 : _f, _g = props.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, anchorRef = props.anchorRef, restProps = __rest(props, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "zIndex", "onClickItem", "anchorRef"]);
     if (!open)
         return null;
-    var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
     var MenuContainerRef = useRef(null);
     var positionStyle = usePopupPosition(anchorRef, MenuContainerRef)[0];
+    var newStyle = useMemo(function () {
+        var _a;
+        if (!(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)) {
+            return {};
+        }
+        return __assign({ zIndex: zIndex + 10, minWidth: (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
+                ? (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth
+                : undefined }, positionStyle);
+    }, [positionStyle]);
+    var menuElement = (React.createElement(MenuElement, __assign({ isTopFlat: isTopFlat, children: children, className: className, zIndex: zIndex, menuRef: MenuContainerRef, onClose: onClose, onClickItem: onClickItem, style: newStyle }, restProps)));
     return (React.createElement(React.Fragment, null,
         isWithOverlay && (React.createElement("div", { className: "bianic-menu-overlay fixed left-0 top-0 z-0 h-screen w-screen", onClick: function () { return onClose(); }, style: { zIndex: zIndex } })),
-        createPortal(React.createElement("div", __assign({ ref: MenuContainerRef, className: "absolute w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(radiusClass, " ").concat(className), style: __assign({ zIndex: zIndex + 10, minWidth: (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
-                    ? (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth
-                    : undefined }, positionStyle) }, restProps), Children.map(children, function (child) {
-            return React.isValidElement(child)
-                ? // Kirimkan handleItemClick sebagai props onClick ke setiap MenuItem
-                    cloneElement(child, {
-                        onClose: function () { return onClose(); },
-                        zIndex: zIndex + 10,
-                        inheritedOnClick: function () { return onClickItem(); },
-                    })
-                : child;
-        })), document.body)));
+        (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) ? createPortal(menuElement, document.body) : menuElement));
 };
 MenuContainer.defaultProps = {
     isTopFlat: false,
@@ -2471,34 +2487,47 @@ var sizeConfig$6 = {
     },
 };
 
-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 DropdownElement = function (_a) {
+    var isTopFlat = _a.isTopFlat, children = _a.children, className = _a.className, size = _a.size, zIndex = _a.zIndex, dropdownRef = _a.dropdownRef, onClose = _a.onClose, onClickItem = _a.onClickItem, style = _a.style, restProps = __rest(_a, ["isTopFlat", "children", "className", "size", "zIndex", "dropdownRef", "onClose", "onClickItem", "style"]);
     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 = useRef(null);
-    var positionStyle = usePopupPosition(anchorRef, dropdownRef)[0];
     var handleClickDrpdownItem = function (e, val) {
         onClickItem(e, val);
         onClose();
     };
+    return (React.createElement("div", __assign({ ref: dropdownRef, className: "bianic-dropdown-container max-w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass), style: style }, restProps), Children.map(children, function (child) {
+        return React.isValidElement(child)
+            ? cloneElement(child, {
+                onClose: function () { return onClose(); },
+                size: size,
+                onClickItem: function (e, val) { return handleClickDrpdownItem(e, val); },
+                zIndex: zIndex + 10,
+            })
+            : child;
+    })));
+};
+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 dropdownRef = useRef(null);
+    var positionStyle = usePopupPosition(anchorRef, dropdownRef)[0];
+    var newStyle = useMemo(function () {
+        var _a;
+        if (!(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)) {
+            return {};
+        }
+        return __assign({ zIndex: zIndex + 10, minWidth: (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
+                ? (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth
+                : undefined }, positionStyle);
+    }, [positionStyle]);
+    var dropdownElement = (React.createElement(DropdownElement, __assign({ isTopFlat: isTopFlat, children: children, className: className, size: size, zIndex: zIndex, dropdownRef: dropdownRef, onClose: onClose, onClickItem: onClickItem, style: newStyle }, restProps)));
     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(); } })),
-        createPortal(React.createElement("div", __assign({ ref: dropdownRef, className: "bianic-dropdown-container absolute max-w-fit bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass), style: __assign({ minWidth: anchorRef.current
-                    ? anchorRef.current.offsetWidth
-                    : undefined, zIndex: zIndex + 10 }, positionStyle) }, restProps), Children.map(children, function (child) {
-            return React.isValidElement(child)
-                ? // Kirimkan handleItemClick sebagai props onClick ke setiap DropdownItem
-                    cloneElement(child, {
-                        onClose: function () { return onClose(); },
-                        size: size,
-                        onClickItem: function (e, val) { return handleClickDrpdownItem(e, val); },
-                        zIndex: zIndex + 10,
-                    })
-                : child;
-        })), document.body)));
+        (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
+            ? createPortal(dropdownElement, document.body)
+            : dropdownElement));
 };
 DropdownContainer.defaultProps = {
     isTopFlat: false,
@@ -2663,20 +2692,20 @@ var useLiveSearch = function (_a) {
 };
 
 function LiveSearch(_a) {
-    var _b = _a.autoComplete, autoComplete = _b === void 0 ? 'off' : _b, _c = _a.children, children = _c === void 0 ? undefined : _c, descText = _a.descText, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.dropContProps, dropContProps = _e === void 0 ? { className: undefined } : _e, id = _a.id, label = _a.label, _f = _a.onChangeText, onChangeText = _f === void 0 ? function () { } : _f, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, options = _a.options, placeholder = _a.placeholder, _h = _a.readOnly, readOnly = _h === void 0 ? false : _h, _j = _a.required, required = _j === void 0 ? false : _j, _k = _a.searchVariant, searchVariant = _k === void 0 ? 'include' : _k, setValue = _a.setValue, _l = _a.size, size = _l === void 0 ? 'md' : _l, value = _a.value;
+    var _b = _a.autoComplete, autoComplete = _b === void 0 ? 'off' : _b, _c = _a.children, children = _c === void 0 ? undefined : _c, descText = _a.descText, _d = _a.disabled, disabled = _d === void 0 ? false : _d, dropContProps = _a.dropContProps, id = _a.id, label = _a.label, _e = _a.onChangeText, onChangeText = _e === void 0 ? function () { } : _e, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, options = _a.options, placeholder = _a.placeholder, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.searchVariant, searchVariant = _j === void 0 ? 'include' : _j, setValue = _a.setValue, _k = _a.size, size = _k === void 0 ? 'md' : _k, value = _a.value;
     var inputRef = useRef(null);
     var dropdownContRef = useRef(null);
-    var _m = useLiveSearch({
+    var _l = useLiveSearch({
         value: value,
         setValue: setValue,
         onChangeText: onChangeText,
         dropContOnClickItem: dropContProps.onClickItem
-    }), isOpen = _m.isOpen, setIsOpen = _m.setIsOpen, searchTerm = _m.searchTerm, handleInputChange = _m.handleInputChange, handleDropdownItemClick = _m.handleDropdownItemClick;
-    var _o = sizeConfig$6[size], iconClass = _o.iconClass, iconSize = _o.iconSize, inputClass = _o.inputClass;
-    var dropContClassName = dropContProps.className; dropContProps.onClickItem; var restDropContProps = __rest(dropContProps, ["className", "onClickItem"]);
+    }), isOpen = _l.isOpen, setIsOpen = _l.setIsOpen, searchTerm = _l.searchTerm, handleInputChange = _l.handleInputChange, handleDropdownItemClick = _l.handleDropdownItemClick;
+    var _m = sizeConfig$6[size], iconClass = _m.iconClass, iconSize = _m.iconSize, inputClass = _m.inputClass;
+    var dropContClassName = dropContProps.className; dropContProps.onClickItem; dropContProps.anchorRef; var restDropContProps = __rest(dropContProps, ["className", "onClickItem", "anchorRef"]);
     var isValueExist = value && value.label !== undefined && value.label !== '';
     var filteredOptions = filterOptions(options || [], value.label);
-    var _p = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _p.renderedChildren, hasFilteredResults = _p.hasFilteredResults;
+    var _o = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _o.renderedChildren, hasFilteredResults = _o.hasFilteredResults;
     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" },

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

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

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

@@ -1,4 +1,3 @@
-import React, { ComponentPropsWithRef } from 'react';
 interface MenuContainerProps extends ComponentPropsWithRef<'div'> {
     isTopFlat?: boolean;
     children: React.ReactNode | undefined;
@@ -8,8 +7,9 @@ interface MenuContainerProps extends ComponentPropsWithRef<'div'> {
     isWithOverlay?: boolean;
     zIndex?: number;
     onClickItem?: () => void;
-    anchorRef: React.RefObject<HTMLElement>;
+    anchorRef?: React.RefObject<HTMLElement>;
 }
+import React, { ComponentPropsWithRef } from 'react';
 declare const MenuContainer: {
     (props: MenuContainerProps): React.JSX.Element | null;
     defaultProps: {

package/dist/esm/types/utility/hooks/usePopupPosition.d.ts

@@ -4,6 +4,7 @@ interface PositionStyle {
     left?: string;
     right?: string;
     bottom?: string;
+    position?: 'absolute' | 'fixed' | 'relative';
 }
-declare const usePopupPosition: (anchorRef: RefObject<HTMLElement>, popupRef: RefObject<HTMLDivElement>, position?: string) => [PositionStyle, () => void];
+declare const usePopupPosition: (anchorRef?: RefObject<HTMLElement>, popupRef?: RefObject<HTMLDivElement>, position?: string) => [PositionStyle, () => void] | {}[];
 export default usePopupPosition;

package/dist/index.d.ts

@@ -161,8 +161,9 @@ interface MenuContainerProps extends ComponentPropsWithRef<'div'> {
     isWithOverlay?: boolean;
     zIndex?: number;
     onClickItem?: () => void;
-    anchorRef: React$1.RefObject<HTMLElement>;
+    anchorRef?: React$1.RefObject<HTMLElement>;
 }
+
 declare const MenuContainer: {
     (props: MenuContainerProps): React$1.JSX.Element | null;
     defaultProps: {
@@ -307,7 +308,7 @@ interface DropdownContainerProps extends ComponentPropsWithRef<'div'> {
     isWithOverlay?: boolean;
     size?: 'sm' | 'md';
     zIndex?: number;
-    anchorRef: React$1.RefObject<HTMLElement>;
+    anchorRef?: React$1.RefObject<HTMLElement>;
     onClickItem?: (event: React$1.MouseEvent<HTMLDivElement>, val: string | number | object) => void;
 }
 declare const DropdownContainer: {

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "@biaenergi:registry": "https://gitlab.com/api/v4/projects/50905269/packages/npm/"
   },
-  "version": "1.16.0-alpha.6",
+  "version": "1.16.0-alpha.7",
   "description": "Design Language System develop by BIAENERGI",
   "scripts": {
     "rollup": "rollup -c",