cr-ui-lib 1.1.50 → 1.1.51

package/dist/index.d.mts

@@ -326,6 +326,7 @@ interface GroupedCheckboxDropdownProps {
     hasIcon?: boolean;
     iconClass?: string;
     placeholderClass?: string;
+    isTop?: boolean;
 }
 declare const GroupedCheckboxDropdown: React$1.FC<GroupedCheckboxDropdownProps>;
 

package/dist/index.d.ts

@@ -326,6 +326,7 @@ interface GroupedCheckboxDropdownProps {
     hasIcon?: boolean;
     iconClass?: string;
     placeholderClass?: string;
+    isTop?: boolean;
 }
 declare const GroupedCheckboxDropdown: React$1.FC<GroupedCheckboxDropdownProps>;
 

package/dist/index.js

@@ -4018,7 +4018,9 @@ var GroupedCheckboxDropdown = ({
   placeholder = "Required",
   hasIcon = true,
   iconClass = "",
-  placeholderClass = ""
+  placeholderClass = "",
+  isTop
+  // <-- ADDED (no default value)
 }) => {
   const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
   const [dropdownPosition, setDropdownPosition] = React.useState({
@@ -4054,7 +4056,8 @@ var GroupedCheckboxDropdown = ({
       const rect = containerRef.current.getBoundingClientRect();
       const viewportHeight = window.innerHeight;
       const dropdownHeight = 300;
-      const shouldOpenUpward = rect.bottom + dropdownHeight > viewportHeight;
+      const autoShouldOpenUpward = rect.bottom + dropdownHeight > viewportHeight && rect.top - dropdownHeight > 0;
+      const shouldOpenUpward = isTop === true ? true : isTop === false ? false : autoShouldOpenUpward;
       setDropdownPosition({
         top: shouldOpenUpward ? rect.top + window.scrollY - dropdownHeight - 4 : rect.bottom + window.scrollY + 4,
         // open downward
@@ -4062,7 +4065,7 @@ var GroupedCheckboxDropdown = ({
         width: rect.width
       });
     }
-  }, [isDropdownOpen, usePortal]);
+  }, [isDropdownOpen, usePortal, isTop]);
   const allOptionKeys = React.useMemo(
     () => options.flatMap((group) => group.options.map((opt) => opt.key)),
     [options]
@@ -4079,15 +4082,18 @@ var GroupedCheckboxDropdown = ({
     "div",
     {
       style: usePortal ? {
+        // --- UPDATED PORTAL STYLE ---
         position: "absolute",
-        top: `${dropdownPosition.top + 4}px`,
+        top: `${dropdownPosition.top}px`,
+        // <-- REMOVED + 4
         left: `${dropdownPosition.left}px`,
         width: `${dropdownPosition.width}px`
       } : {
+        // --- UPDATED NON-PORTAL STYLE ---
         position: "absolute",
-        top: "100%",
+        ...isTop ? { bottom: "100%", marginBottom: "4px" } : { top: "100%", marginTop: "4px" },
+        // Open downward (default)
         left: 0,
-        marginTop: "4px",
         width: "100%",
         zIndex: 99
       },