@pagamio/frontend-commons-lib 0.8.324 → 0.8.326

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/lib/components/ui/UploadField.d.ts

@@ -9,6 +9,8 @@ type UploadProps = {
     allowedFileTypes?: string[];
     maxFileSize?: number;
     helperText?: string;
+    /** Optional label for the inline trigger (defaults to "Choose file"). */
+    chooseFileLabel?: string;
     value?: never;
 };
 declare const UploadField: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<HTMLInputElement>>;

package/lib/components/ui/UploadField.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from 'react';
 import { Button, Icon } from '../../components';
-const UploadField = forwardRef(({ onChange, id, type = 'file', hideUploadButton = false, className = '', disabled = false, allowedFileTypes, maxFileSize, helperText, value, // Explicitly exclude value prop becuase it's not allowed for security reasons.
+const UploadField = forwardRef(({ onChange, id, type = 'file', hideUploadButton = false, className = '', disabled = false, allowedFileTypes, maxFileSize, helperText, chooseFileLabel = 'Choose file', value, // Explicitly exclude value prop becuase it's not allowed for security reasons.
 ...props }, ref) => {
     const [fileName, setFileName] = useState(null);
     const [key, setKey] = useState(0);
@@ -42,11 +42,11 @@ const UploadField = forwardRef(({ onChange, id, type = 'file', hideUploadButton
         setKey((prev) => prev + 1);
     };
     const acceptValue = allowedFileTypes?.map((ext) => `.${ext}`).join(',');
-    return (_jsxs("div", { className: `flex flex-col gap-3 w-full ${className}`, children: [_jsxs("div", { className: "flex gap-3 w-full items-center", children: [_jsxs("label", { htmlFor: id, className: "flex items-center gap-2 cursor-pointer flex-1", children: [_jsx("div", { className: "bg-primary rounded-full h-10 w-10 flex items-center justify-center", children: _jsx(Icon, { name: "FiUpload", size: 20, className: "text-white" }) }), _jsx("span", { className: "text-sm font-medium text-foreground", children: "Choose file" }), _jsx("input", { type: type, onChange: handleFileChange, className: "hidden", id: id, ref: ref, disabled: disabled, accept: acceptValue, ...props }, key)] }), !hideUploadButton && (_jsx(Button, { onClick: () => {
+    return (_jsxs("div", { className: `flex flex-col gap-3 w-full ${className}`, children: [_jsxs("div", { className: "flex gap-3 w-full items-center", children: [_jsxs("label", { htmlFor: id, className: "flex items-center gap-2 cursor-pointer flex-1", children: [_jsx("div", { className: "bg-primary rounded-full h-10 w-10 flex items-center justify-center", children: _jsx(Icon, { name: "FiUpload", size: 20, className: "text-white" }) }), _jsx("span", { className: "text-sm font-medium text-foreground", children: chooseFileLabel }), _jsx("input", { type: type, onChange: handleFileChange, className: "hidden", id: id, ref: ref, disabled: disabled, accept: acceptValue, ...props }, key)] }), !hideUploadButton && (_jsx(Button, { onClick: () => {
                             if (ref && typeof ref === 'object' && ref.current) {
                                 ref.current.click();
                             }
-                        }, disabled: disabled, children: "Upload" }))] }), fileName && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-sm text-muted-foreground", children: ["Selected: ", fileName] }), _jsx(Button, { variant: "destructive", size: "sm", onClick: handleClearFile, disabled: disabled, children: "Clear" })] })), helperText && (_jsx("div", { className: "w-full", children: _jsx("p", { className: "text-sm text-muted-foreground w-full md:w-[65%]", children: helperText }) })), error && _jsx("div", { className: "text-red-500 text-sm", children: error })] }));
+                        }, disabled: disabled, children: "Upload" }))] }), fileName && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-sm text-muted-foreground", children: ["Selected: ", fileName] }), _jsx(Button, { variant: "destructive", size: "sm", onClick: handleClearFile, disabled: disabled, children: "Clear" })] })), helperText && _jsx("p", { className: "text-sm text-muted-foreground", children: helperText }), error && _jsx("div", { className: "text-red-500 text-sm", children: error })] }));
 });
 UploadField.displayName = 'UploadField';
 export default UploadField;

package/lib/form-engine/components/inputs/upload-field/UploadFieldForm.js

@@ -53,7 +53,7 @@ const UploadFieldForm = forwardRef(({ field, error, ...props }, ref) => {
         return _jsx("span", { className: "text-muted-foreground", children: "File uploaded." });
     }, [preview, field.name]);
     const previewLabel = preview.type === 'pdf' ? 'Uploaded PDF:' : 'Uploaded Image:';
-    return (_jsxs("div", { className: "flex flex-col space-y-4", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx("label", { htmlFor: field.name, className: "text-sm font-medium text-foreground", children: field.label }), _jsx(UploadField, { ...props, id: field.name, ref: ref, value: props.value || null, onChange: handleFileChange, className: "w-full p-2 border border-input rounded-md", hideUploadButton: field.hideUploadButton, allowedFileTypes: field.allowedFileTypes, maxFileSize: field.maxFileSize, helperText: field.fileUploadHelperText }), error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: error.message })] }), field.showFileUploadPreview && (_jsxs("div", { className: "mt-4", children: [_jsx("label", { htmlFor: `${field.name}-preview`, className: "text-sm font-medium text-foreground", children: previewLabel }), _jsx("div", { className: "mt-2 flex flex-col items-center p-4 border border-input rounded-md", children: previewElement })] }))] }));
+    return (_jsxs("div", { className: "flex flex-col space-y-4", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx("label", { htmlFor: field.name, className: "text-sm font-medium text-foreground", children: field.label }), _jsx(UploadField, { ...props, id: field.name, ref: ref, value: props.value || null, onChange: handleFileChange, className: "w-full p-2 border border-input rounded-md", hideUploadButton: field.hideUploadButton, allowedFileTypes: field.allowedFileTypes, maxFileSize: field.maxFileSize, helperText: field.fileUploadHelperText, chooseFileLabel: field.chooseFileLabel }), error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: error.message })] }), field.showFileUploadPreview && (_jsxs("div", { className: "mt-4", children: [_jsx("label", { htmlFor: `${field.name}-preview`, className: "text-sm font-medium text-foreground", children: previewLabel }), _jsx("div", { className: "mt-2 flex flex-col items-center p-4 border border-input rounded-md", children: previewElement })] }))] }));
 });
 UploadFieldForm.displayName = 'UploadFieldForm';
 export default UploadFieldForm;

package/lib/form-engine/types/index.d.ts

@@ -157,6 +157,8 @@ export interface Field {
     showFileUploadPreview?: boolean;
     /** To display file upload helper text */
     fileUploadHelperText?: string;
+    /** Custom label for the inline upload trigger (defaults to "Choose file") */
+    chooseFileLabel?: string;
     /** Default country for phone input */
     defaultCountry?: string;
     /** Disables the field */

package/lib/styles.css

@@ -6714,10 +6714,6 @@ video {
     width: 420px;
   }
 
-  .md\:w-\[65\%\] {
-    width: 65%;
-  }
-
   .md\:w-auto {
     width: auto;
   }

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.326",
   "publishConfig": {
     "access": "public",
     "provenance": false