@apptimate/ui 4.9.0 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "4.9.0",
+  "version": "5.0.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "dependencies": {

package/src/base-components/Dropdown.tsx

@@ -17,12 +17,37 @@ interface DropdownProps {
 export function Dropdown({ trigger, children, align = 'left', valign = 'bottom', className, contentClassName, closeOnContentClick = true }: DropdownProps) {
     const [isOpen, setIsOpen] = useState(false);
     const [coords, setCoords] = useState({ top: 0, bottom: 0, left: 0, right: 0 });
+    const [actualValign, setActualValign] = useState(valign);
+    const [actualAlign, setActualAlign] = useState(align);
     const dropdownRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);
 
     const updatePosition = useCallback(() => {
         if (dropdownRef.current) {
             const rect = dropdownRef.current.getBoundingClientRect();
+            
+            let newValign = valign;
+            const spaceBelow = window.innerHeight - rect.bottom;
+            const spaceAbove = rect.top;
+
+            if (valign === 'bottom' && spaceBelow < 250 && spaceAbove > spaceBelow) {
+                newValign = 'top';
+            } else if (valign === 'top' && spaceAbove < 250 && spaceBelow > spaceAbove) {
+                newValign = 'bottom';
+            }
+            
+            let newAlign = align;
+            const spaceRight = window.innerWidth - rect.right;
+            const spaceLeft = rect.left;
+            
+            if (align === 'left' && spaceRight < 180 && spaceLeft > spaceRight) {
+                newAlign = 'right';
+            } else if (align === 'right' && spaceLeft < 180 && spaceRight > spaceLeft) {
+                newAlign = 'left';
+            }
+            
+            setActualValign(newValign);
+            setActualAlign(newAlign);
             setCoords({
                 top: rect.top + window.scrollY,
                 bottom: rect.bottom + window.scrollY,
@@ -89,15 +114,15 @@ export function Dropdown({ trigger, children, align = 'left', valign = 'bottom',
                     ref={contentRef}
                     style={{
                         position: 'absolute',
-                        ...(valign === 'bottom' 
+                        ...(actualValign === 'bottom' 
                             ? { top: `${coords.bottom}px` } 
                             : { bottom: `${window.innerHeight - coords.top}px` }
                         ),
-                        ...(align === 'left' ? { left: `${coords.left}px` } : { right: `${coords.right}px` })
+                        ...(actualAlign === 'left' ? { left: `${coords.left}px` } : { right: `${coords.right}px` })
                     }}
                     className={cn(
-                        "z-[9999] min-w-[160px] rounded-[10px] bg-white border border-gray-200 shadow-[0_8px_30px_rgb(0,0,0,0.12)] p-1.5 animate-in fade-in zoom-in-95 duration-200",
-                        valign === 'bottom' ? "mt-1.5" : "mb-1.5",
+                        "z-[9999] flex flex-col min-w-[160px] rounded-[10px] bg-white border border-gray-200 shadow-[0_8px_30px_rgb(0,0,0,0.12)] p-1.5 animate-in fade-in zoom-in-95 duration-200",
+                        actualValign === 'bottom' ? "mt-1.5" : "mb-1.5",
                         contentClassName
                     )}
                     onClick={closeOnContentClick ? closeDropdown : undefined}