bianic-ui 1.11.0 → 1.12.1

package/dist/cjs/index.js

@@ -2200,9 +2200,11 @@ 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$7[validatedSize], searchSize = _l.searchSize, iconSize = _l.iconSize;
+    var _m = sizeConfig$7[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);
@@ -2214,6 +2216,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;
@@ -2233,6 +2251,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),
@@ -2240,7 +2259,7 @@ function SelectInput(_a) {
         React.createElement("div", { className: "group relative w-full" },
             React.createElement("input", __assign({ className: "field peer w-full cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 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:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled }, props)),
             React.createElement("div", { className: "pointer-events-none absolute inset-y-0 flex items-center pl-3 text-bia-coolgrey peer-disabled:text-bia-coolgrey-light-50 ".concat(iconSize) }, isOpen ? React.createElement(TbChevronUp, null) : React.createElement(TbChevronDown, null)),
-            children === undefined && isOpen && (React.createElement("div", { className: "absolute z-10 w-full overflow-y-auto rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg", ref: optionsRef, onClick: onClickDropdown }, options.map(function (option) {
+            children === undefined && isOpen && (React.createElement("div", { className: "absolute z-10 w-full rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg ".concat(dropdownPosition), ref: optionsRef, onClick: onClickDropdown }, options.map(function (option) {
                 var isSelected = JSON.stringify(option) === JSON.stringify(selected);
                 var optionLabel = isObjectOptionItem ? option.label : option;
                 var optionCaption = isObjectOptionItem ? option.caption : '';
@@ -2252,7 +2271,7 @@ function SelectInput(_a) {
                         setIsOpen(false);
                     } }));
             }))),
-            children && isOpen && (React.createElement(DropdownContainer, __assign({ open: isOpen, onClose: function () { return setIsOpen(false); }, size: size, isTopFlat: true, className: "bianic-livesearch-dropdown absolute z-10 mt-1 w-full overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ".concat(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, 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,
@@ -2300,6 +2319,8 @@ function LiveSearch(_a) {
     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);
@@ -2319,6 +2340,22 @@ 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.filter(function (item) {
         return item.label.toLowerCase().includes(value.label.toLowerCase());
     });
@@ -2384,6 +2421,7 @@ function LiveSearch(_a) {
         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 flex w-full flex-col gap-y-2", ref: inputRef },
         React.createElement("label", { htmlFor: id, className: "bianic-livesearch-label text-xs font-semibold read-only:pointer-events-none" },
             label,
@@ -2408,7 +2446,7 @@ 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(dropContClassName) }, restDropContProps), hasFilteredResults
+            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
                 ? 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.") }))))),
@@ -3145,6 +3183,14 @@ var Inlet = function (_a) {
         React.createElement("path", { d: "M15.586 10.657L11.636 6.707C11.4538 6.5184 11.353 6.26579 11.3553 6.0036C11.3576 5.7414 11.4628 5.49059 11.6482 5.30518C11.8336 5.11977 12.0844 5.0146 12.3466 5.01232C12.6088 5.01005 12.8614 5.11084 13.05 5.293L18.707 10.95C18.8002 11.0427 18.8741 11.1528 18.9246 11.2741C18.9751 11.3955 19.001 11.5256 19.001 11.657C19.001 11.7884 18.9751 11.9185 18.9246 12.0399C18.8741 12.1612 18.8002 12.2713 18.707 12.364L13.05 18.021C12.9578 18.1165 12.8474 18.1927 12.7254 18.2451C12.6034 18.2975 12.4722 18.3251 12.3394 18.3263C12.2066 18.3274 12.0749 18.3021 11.952 18.2518C11.8292 18.2015 11.7175 18.1273 11.6236 18.0334C11.5297 17.9395 11.4555 17.8279 11.4052 17.705C11.3549 17.5821 11.3296 17.4504 11.3308 17.3176C11.3319 17.1848 11.3595 17.0536 11.4119 16.9316C11.4643 16.8096 11.5405 16.6992 11.636 16.607L15.586 12.657H6C5.73478 12.657 5.48043 12.5516 5.29289 12.3641C5.10536 12.1766 5 11.9222 5 11.657C5 11.3918 5.10536 11.1374 5.29289 10.9499C5.48043 10.7624 5.73478 10.657 6 10.657H15.586Z", fill: "inherit" })));
 };
 
+var Neutral = function (_a) {
+    var className = _a.className, _b = _a.fill, fill = _b === void 0 ? 'currentColor' : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
+    var numericSize = Number(size);
+    return (React.createElement("svg", { className: className, width: numericSize * 2, height: numericSize, viewBox: "0 0 48 24", fill: fill, xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M28 12C28 11.4477 28.4477 11 29 11H43C43.5523 11 44 11.4477 44 12C44 12.5523 43.5523 13 43 13H29C28.4477 13 28 12.5523 28 12Z", fill: "#2F2F2F" }),
+        React.createElement("path", { d: "M12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22Z", fill: "#2F2F2F" })));
+};
+
 function Modal(_a) {
     var _b = _a.size, size = _b === void 0 ? 'sm' : _b, title = _a.title, open = _a.open, _c = _a.zIndex, zIndex = _c === void 0 ? 100 : _c, onClose = _a.onClose, onClick = _a.onClick, rest = __rest(_a, ["size", "title", "open", "zIndex", "onClose", "onClick"]);
     var modalSize;
@@ -3172,7 +3218,7 @@ function Modal(_a) {
             React.createElement("div", { className: "bianic-modal flex flex-col gap-[20px] rounded-[5px] bg-white p-[20px] ".concat(modalSize), onClick: onClick },
                 React.createElement("div", { className: "bianic-modal-header flex justify-between" },
                     React.createElement("div", { className: " text-wrap text-left font-humnst777 text-[18px] font-bold leading-[21.85px] text-primary-black" }, title),
-                    React.createElement(Button, { variant: "subtle", radius: "full-rounded", iconLeft: React.createElement(TbX, null), size: "tn", onClick: function () { return onClose(); } })),
+                    React.createElement(Button, { variant: "subtle", radius: "full-rounded", iconLeft: React.createElement(TbX, { size: 14 }), size: "tn", onClick: function () { return onClose(); } })),
                 React.createElement("div", { className: "bianic-modal-content flex w-full flex-col items-start gap-[20px]" }, rest.children))));
     }
     return null;
@@ -3431,8 +3477,8 @@ var resizerContainerClass = {
 };
 
 function ResizeableDiv(_a) {
-    var _b = _a.position, position = _b === void 0 ? 'bottom' : _b, children = _a.children, className = _a.className, initialWidth = _a.initialWidth, minWidth = _a.minWidth, initialHeight = _a.initialHeight, minHeight = _a.minHeight;
-    var container = React.useRef(null);
+    var _b = _a.position, position = _b === void 0 ? 'bottom' : _b, children = _a.children, className = _a.className, initialWidth = _a.initialWidth, minWidth = _a.minWidth, maxWidth = _a.maxWidth, initialHeight = _a.initialHeight, minHeight = _a.minHeight, maxHeight = _a.maxHeight, ref = _a.ref, zIndex = _a.zIndex; __rest(_a, ["position", "children", "className", "initialWidth", "minWidth", "maxWidth", "initialHeight", "minHeight", "maxHeight", "ref", "zIndex"]);
+    var container = ref || React.useRef(null);
     var resizer = React.useRef(null);
     var handleResize = function (e) {
         var mouseY = e.clientY;
@@ -3477,19 +3523,28 @@ function ResizeableDiv(_a) {
     var minimumWidth = typeof minWidth === 'number' && !isNaN(minWidth)
         ? "".concat(minWidth, "px")
         : minWidth;
+    var maximumWidth = typeof maxWidth === 'number' && !isNaN(maxWidth)
+        ? "".concat(maxWidth, "px")
+        : maxWidth;
     var containerHeight = typeof initialHeight === 'number' && !isNaN(initialHeight)
         ? "".concat(initialHeight, "px")
         : initialHeight;
     var minimumHeight = typeof minHeight === 'number' && !isNaN(minHeight)
         ? "".concat(minHeight, "px")
         : minHeight;
+    var maximumHeight = typeof maxHeight === 'number' && !isNaN(maxHeight)
+        ? "".concat(maxHeight, "px")
+        : maxHeight;
     return (React.createElement("div", { className: "relative overflow-visible", ref: container, style: {
+            zIndex: zIndex,
             width: containerWidth,
             height: containerHeight,
             minWidth: minimumWidth,
             minHeight: minimumHeight,
+            maxHeight: maximumHeight,
+            maxWidth: maximumWidth,
         } },
-        React.createElement("div", { className: "group peer absolute z-10 flex items-center justify-center ".concat(resizerContainerClass[position]), ref: resizer, onMouseDown: function () {
+        React.createElement("div", { className: "group peer absolute flex items-center justify-center ".concat(resizerContainerClass[position]), ref: resizer, onMouseDown: function () {
                 window.addEventListener('mousemove', handleResize);
                 window.addEventListener('mouseup', stopResize);
             }, role: "button" },
@@ -3972,6 +4027,7 @@ exports.BCFlowqount = Flowqount;
 exports.BCInlet = Inlet;
 exports.BCLegend = Legend;
 exports.BCModalBalance = ModalBalance;
+exports.BCNeutral = Neutral;
 exports.BCNode = Node;
 exports.BCOutlet = Outlet;
 exports.BCPort = Port;