bianic-ui 1.15.0-alpha.0 → 1.15.0-alpha.2

package/dist/cjs/index.js

@@ -2241,76 +2241,6 @@ var fontConfig = {
     md: 'text-[14px] font-[350]',
 };
 
-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');
@@ -2340,54 +2270,15 @@ 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(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 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 _l = sizeConfig$8[validatedSize], searchSize = _l.searchSize, iconSize = _l.iconSize;
+    var _m = sizeConfig$8[validatedSize], searchSize = _m.searchSize, iconSize = _m.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);
@@ -2399,6 +2290,22 @@ 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;
@@ -2418,6 +2325,7 @@ 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),
@@ -2437,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, 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) {
+            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,
@@ -2477,6 +2385,116 @@ 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) {
+        style.bottom = "".concat(window.innerHeight - anchorRect.top, "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();