@pagamio/frontend-commons-lib 0.8.324 → 0.8.325

package/lib/components/ui/MultiSelect.js

@@ -3,6 +3,12 @@ import { ChevronDownIcon, Cross2Icon } from '@radix-ui/react-icons';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { cn } from '../../helpers';
 import Button from './Button';
+const DROPDOWN_MARGIN = 4;
+const VIEWPORT_PADDING = 8;
+// Target height when there's plenty of room. The actual height is capped to
+// the available space, so in tight viewports the dropdown shrinks rather
+// than overshooting.
+const PREFERRED_DROPDOWN_HEIGHT = 224;
 const MultiSelect = forwardRef(({ options, value, defaultValue = [], disabled, onChange, placeholder, className, field, tagPosition = 'inside' }, ref) => {
     const [selectedValues, setSelectedValues] = useState(defaultValue);
     const [isOpen, setIsOpen] = useState(false);
@@ -15,15 +21,29 @@ const MultiSelect = forwardRef(({ options, value, defaultValue = [], disabled, o
             setSelectedValues(value);
         }
     }, [value]);
-    // Measure trigger position so the fixed dropdown aligns correctly
+    // Measure trigger position and decide whether to render the dropdown
+    // below or above the trigger based on available viewport space. Cap the
+    // height to whatever room is left so the list never extends past the
+    // visible area — that's what produced the "I can't see more shifts" bug
+    // when the trigger sat near the bottom of a drawer.
     const updateDropdownPosition = useCallback(() => {
         if (!triggerRef.current)
             return;
         const rect = triggerRef.current.getBoundingClientRect();
+        const viewportH = window.innerHeight;
+        const spaceBelow = Math.max(0, viewportH - rect.bottom - DROPDOWN_MARGIN - VIEWPORT_PADDING);
+        const spaceAbove = Math.max(0, rect.top - DROPDOWN_MARGIN - VIEWPORT_PADDING);
+        const placeBelow = spaceBelow >= PREFERRED_DROPDOWN_HEIGHT || spaceBelow >= spaceAbove;
+        const available = placeBelow ? spaceBelow : spaceAbove;
+        // Never exceed the actual room — overshooting causes the list to
+        // disappear under the trigger or off the bottom of the viewport.
+        const maxHeight = Math.min(PREFERRED_DROPDOWN_HEIGHT, available);
         setDropdownPos({
-            top: rect.bottom + window.scrollY + 4,
-            left: rect.left + window.scrollX,
+            top: placeBelow ? rect.bottom + DROPDOWN_MARGIN : rect.top - DROPDOWN_MARGIN,
+            left: rect.left,
             width: rect.width,
+            maxHeight,
+            placement: placeBelow ? 'bottom' : 'top',
         });
     }, []);
     // Reposition on scroll / resize while open
@@ -90,10 +110,12 @@ const MultiSelect = forwardRef(({ options, value, defaultValue = [], disabled, o
                                 ? displayPlaceholder
                                 : `${selectedOptions.length} selected` })) }), _jsx(ChevronDownIcon, { className: cn('ml-2 flex-shrink-0 text-muted-foreground transition-transform duration-150', isOpen && 'rotate-180') })] }), tagPosition === 'bottom' && selectedOptions.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1 mt-2", children: tags })), isOpen && dropdownPos && (_jsx("div", { ref: ref, id: "ms-dropdown-portal", style: {
                     position: 'fixed',
-                    top: dropdownPos.top,
+                    top: dropdownPos.placement === 'bottom' ? dropdownPos.top : undefined,
+                    bottom: dropdownPos.placement === 'top' ? window.innerHeight - dropdownPos.top : undefined,
                     left: dropdownPos.left,
                     width: dropdownPos.width,
-                }, className: cn('z-[9999]', 'bg-popover border border-border rounded-md shadow-lg', 'animate-in fade-in-0 zoom-in-95 duration-100'), children: _jsx("ul", { className: "max-h-56 overflow-y-auto p-1.5 space-y-0.5", children: options.length > 0 ? (options.map((option) => {
+                    maxHeight: dropdownPos.maxHeight,
+                }, className: cn('z-[9999] flex flex-col', 'bg-popover border border-border rounded-md shadow-lg', 'animate-in fade-in-0 zoom-in-95 duration-100'), children: _jsx("ul", { className: "overflow-y-auto p-1.5 space-y-0.5", style: { maxHeight: dropdownPos.maxHeight }, children: options.length > 0 ? (options.map((option) => {
                         const checked = internalValues.includes(option.value);
                         const id = `ms-opt-${field?.name ?? 'ms'}-${option.value}`;
                         return (_jsx("li", { children: _jsxs("label", { htmlFor: id, className: cn('flex items-center gap-2.5 px-2 py-2 rounded-md cursor-pointer text-sm', 'hover:bg-accent hover:text-accent-foreground transition-colors', checked && 'bg-primary/5'), children: [_jsx("input", { id: id, type: "checkbox", checked: checked, onChange: () => handleToggle(option.value), className: cn('w-4 h-4 rounded border border-input bg-background flex-shrink-0', 'accent-[hsl(var(--primary))] cursor-pointer', 'focus:ring-2 focus:ring-ring focus:ring-offset-0') }), _jsx("span", { className: "flex-1 font-medium text-foreground", children: option.label })] }) }, option.value));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.324",
+  "version": "0.8.325",
   "publishConfig": {
     "access": "public",
     "provenance": false