bianic-ui 1.1.0-beta.5 → 1.1.0-beta.6

package/dist/cjs/index.js

@@ -1816,9 +1816,25 @@ function SelectInput(_a) {
         };
     });
     var isObjectOptionItem = false;
-    if (options.every(function (item) { return typeof item === "object" && item !== null; }))
+    if (options.every(function (item) { return typeof item === 'object' && item !== null; }))
         isObjectOptionItem = true;
-    var selectedLabel = isObjectOptionItem && typeof selected === 'object' ? selected.label : selected;
+    var selectedLabel = isObjectOptionItem && typeof selected === 'object'
+        ? selected.label
+        : selected;
+    var optionsRef = React.useRef(null);
+    React.useEffect(function () {
+        if (isOpen && inputRef.current && optionsRef.current) {
+            console.log('entered');
+            var selectRect = inputRef.current.getBoundingClientRect();
+            var optionsElement = optionsRef.current;
+            var windowHeight = window.innerHeight;
+            // Cek ruang di bawah
+            var spaceBelow = windowHeight - selectRect.bottom;
+            var maxHeight = void 0;
+            maxHeight = spaceBelow - 10; // Beri margin
+            optionsElement.style.maxHeight = "".concat(Math.max(0, maxHeight), "px");
+        }
+    }, [isOpen]);
     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),
@@ -1826,7 +1842,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)),
-            isOpen && (React.createElement("div", { className: "absolute z-10 w-full rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg" }, options.map(function (option) {
+            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 }, options.map(function (option) {
                 var isSelected = JSON.stringify(option) === JSON.stringify(selected);
                 var optionLabel = isObjectOptionItem ? option.label : option;
                 var optionCaption = isObjectOptionItem ? option.caption : '';