@visns-studio/visns-components 5.12.5 → 5.12.7

package/package.json

@@ -24,13 +24,13 @@
         "dayjs": "^1.11.13",
         "fabric": "^6.7.0",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.19.2",
+        "framer-motion": "^12.23.0",
         "html-react-parser": "^5.2.5",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
-        "lucide-react": "^0.518.0",
+        "lucide-react": "^0.525.0",
         "moment": "^2.30.1",
-        "motion": "^12.19.2",
+        "motion": "^12.23.0",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
@@ -47,10 +47,10 @@
         "react-reveal": "^1.2.2",
         "react-router-dom": "^6.30.1",
         "react-select": "^5.10.1",
-        "react-signature-pad-wrapper": "^4.1.0",
+        "react-signature-pad-wrapper": "^4.1.1",
         "react-slugify": "^4.0.1",
         "react-sortable-hoc": "^2.0.0",
-        "react-to-print": "^3.1.0",
+        "react-to-print": "^3.1.1",
         "react-toastify": "^11.0.5",
         "react-toggle": "^4.1.3",
         "react-tooltip": "^5.29.1",
@@ -58,19 +58,19 @@
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
         "swapy": "^1.0.5",
-        "sweetalert2": "^11.22.1",
+        "sweetalert2": "^11.22.2",
         "tesseract.js": "^6.0.1",
         "truncate": "^3.0.0",
         "uuid": "^11.1.0",
         "validator": "^13.15.15",
         "vite": "^6.3.5",
         "yarn": "^1.22.22",
-        "yet-another-react-lightbox": "^3.23.4"
+        "yet-another-react-lightbox": "^3.24.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.27.7",
-        "@babel/plugin-transform-runtime": "^7.27.4",
-        "@babel/preset-env": "^7.27.2",
+        "@babel/core": "^7.28.0",
+        "@babel/plugin-transform-runtime": "^7.28.0",
+        "@babel/preset-env": "^7.28.0",
         "@babel/preset-react": "^7.27.1",
         "babel-loader": "^10.0.0",
         "copy-webpack-plugin": "^13.0.0",
@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.12.5",
+    "version": "5.12.7",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/Field.jsx

@@ -37,6 +37,7 @@ import Tools from './sketch/tools';
 import VisnsAsyncSelect from './AsyncSelect';
 import VisnsAutocomplete from './Autocomplete';
 import VisnsDropZone from './DropZone';
+import DatePickerPortal from './utils/DatePickerPortal';
 
 import 'react-toggle/style.css';
 import 'react-datepicker/dist/react-datepicker.css';
@@ -72,6 +73,7 @@ function Field({
 }) {
     const editorRef = useRef(null);
     const fileImageInputRef = useRef(null);
+    const containerRef = useRef(null);
     const [autoValue, setAutoValue] = useState('');
     const [colorPickerShow, setColorPickerShow] = useState(false);
     const [counter, setCounter] = useState(0);
@@ -2129,31 +2131,38 @@ function Field({
             case 'date':
             case 'datetime':
                 return (
-                    <DatePicker
-                        dateFormat={
-                            settings.format
-                                ? settings.format
-                                : settings.type === 'datetime'
-                                ? 'dd-MM-yyyy hh:mm aa'
-                                : 'dd-MM-yyyy'
-                        }
-                        isClearable
-                        className={inputClass[settings.id]}
-                        selected={inputValue || ''}
-                        showMonthDropdown
-                        showYearDropdown
-                        scrollableYearDropdown
-                        onChange={(date) => onChangeDate(date, settings.id)}
-                        showTimeSelect={settings.type === 'datetime'}
-                        showTimeSelectOnly={settings.type === 'time'}
-                        timeIntervals={
-                            settings.type === 'time' ? 15 : undefined
-                        }
-                        timeCaption={
-                            settings.type === 'time' ? 'Time' : undefined
-                        }
-                        shouldCloseOnSelect={true}
-                    />
+                    <DatePickerPortal 
+                        containerRef={containerRef}
+                        centerScreen={settings.centerScreen}
+                        modalContext={settings.modalContext}
+                        usePortal={settings.usePortal}
+                    >
+                        <DatePicker
+                            dateFormat={
+                                settings.format
+                                    ? settings.format
+                                    : settings.type === 'datetime'
+                                    ? 'dd-MM-yyyy hh:mm aa'
+                                    : 'dd-MM-yyyy'
+                            }
+                            isClearable
+                            className={inputClass[settings.id]}
+                            selected={inputValue || ''}
+                            showMonthDropdown
+                            showYearDropdown
+                            scrollableYearDropdown
+                            onChange={(date) => onChangeDate(date, settings.id)}
+                            showTimeSelect={settings.type === 'datetime'}
+                            showTimeSelectOnly={settings.type === 'time'}
+                            timeIntervals={
+                                settings.type === 'time' ? 15 : undefined
+                            }
+                            timeCaption={
+                                settings.type === 'time' ? 'Time' : undefined
+                            }
+                            shouldCloseOnSelect={true}
+                        />
+                    </DatePickerPortal>
                 );
             case 'plaintext':
                 if (settings.description) {
@@ -2254,21 +2263,28 @@ function Field({
                 );
             case 'time':
                 return (
-                    <DatePicker
-                        dateFormat="hh:mm aa"
-                        isClearable
-                        className={inputClass[settings.id]}
-                        selected={inputValue || ''}
-                        showMonthDropdown
-                        showYearDropdown
-                        scrollableYearDropdown
-                        onChange={(date) => onChangeDate(date, settings.id)}
-                        showTimeSelect={true}
-                        showTimeSelectOnly={true}
-                        timeIntervals={15}
-                        timeCaption={'Time'}
-                        shouldCloseOnSelect={true}
-                    />
+                    <DatePickerPortal 
+                        containerRef={containerRef}
+                        centerScreen={settings.centerScreen}
+                        modalContext={settings.modalContext}
+                        usePortal={settings.usePortal}
+                    >
+                        <DatePicker
+                            dateFormat="hh:mm aa"
+                            isClearable
+                            className={inputClass[settings.id]}
+                            selected={inputValue || ''}
+                            showMonthDropdown
+                            showYearDropdown
+                            scrollableYearDropdown
+                            onChange={(date) => onChangeDate(date, settings.id)}
+                            showTimeSelect={true}
+                            showTimeSelectOnly={true}
+                            timeIntervals={15}
+                            timeCaption={'Time'}
+                            shouldCloseOnSelect={true}
+                        />
+                    </DatePickerPortal>
                 );
             case 'toggle':
                 return (
@@ -2522,7 +2538,7 @@ function Field({
     }, [counter]);
 
     return (
-        <div className={formItemClass} style={formItemStyle}>
+        <div className={formItemClass} style={formItemStyle} ref={containerRef}>
             <label
                 className={
                     ['richeditor', 'textarea'].includes(settings.type)

package/src/components/generic/GenericDetail.jsx

@@ -54,10 +54,16 @@ import {
     Eye as EyeOpen,
     EyeOff as EyeSlashed,
     File,
+    FileText,
+    FileSpreadsheet,
+    FileImage,
+    FileCode,
+    FileArchive,
     Edit as Pencil,
     Trash2 as TrashCan,
+    X as CircleX,
 } from 'lucide-react';
-import { confirmDialog } from '../../utils/ConfirmDialog';
+import { confirmDialog } from '../utils/ConfirmDialog';
 
 import 'react-big-calendar/lib/css/react-big-calendar.css';
 import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
@@ -79,6 +85,9 @@ import TableFilter from '../TableFilter';
 import ProposalTemplateSectionManager from '../proposal/ProposalTemplateSectionManager';
 import ProposalTemplatePreview from '../proposal/ProposalTemplatePreview';
 
+// Gallery Modal
+import GalleryModal from '../modals/GalleryModal';
+
 import styles from '../styles/GenericDetail.module.scss';
 
 const localizer = momentLocalizer(moment);
@@ -127,6 +136,88 @@ const optimizeImageIfNeeded = async (file) => {
     return file;
 };
 
+// Helper function to get accept types based on filetype configuration
+const getAcceptTypes = (filetype) => {
+    switch (filetype) {
+        case 'document':
+            return {
+                'application/pdf': ['.pdf'],
+                'application/msword': ['.doc'],
+                'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
+                'application/vnd.ms-excel': ['.xls'],
+                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
+                'application/vnd.ms-powerpoint': ['.ppt'],
+                'application/vnd.openxmlformats-officedocument.presentationml.presentation': ['.pptx'],
+                'text/plain': ['.txt'],
+                'text/csv': ['.csv'],
+                'application/zip': ['.zip'],
+                'application/x-rar-compressed': ['.rar'],
+                'application/x-7z-compressed': ['.7z']
+            };
+        case 'image':
+            return {
+                'image/jpeg': ['.jpg', '.jpeg'],
+                'image/png': ['.png'],
+                'image/gif': ['.gif'],
+                'image/webp': ['.webp'],
+                'image/svg+xml': ['.svg'],
+                'image/bmp': ['.bmp'],
+                'image/tiff': ['.tiff', '.tif']
+            };
+        default:
+            return undefined; // Accept all file types
+    }
+};
+
+// Helper function to get the appropriate icon based on file extension
+const getFileIcon = (filename) => {
+    const extension = filename.split('.').pop().toLowerCase();
+    
+    switch (extension) {
+        case 'pdf':
+            return <FileText strokeWidth={2} size={20} color="#dc2626" />;
+        case 'doc':
+        case 'docx':
+            return <FileText strokeWidth={2} size={20} color="#2563eb" />;
+        case 'xls':
+        case 'xlsx':
+            return <FileSpreadsheet strokeWidth={2} size={20} color="#16a34a" />;
+        case 'ppt':
+        case 'pptx':
+            return <FileText strokeWidth={2} size={20} color="#ea580c" />;
+        case 'txt':
+        case 'csv':
+            return <FileCode strokeWidth={2} size={20} color="#6b7280" />;
+        case 'zip':
+        case 'rar':
+        case '7z':
+            return <FileArchive strokeWidth={2} size={20} color="#7c3aed" />;
+        case 'jpg':
+        case 'jpeg':
+        case 'png':
+        case 'gif':
+        case 'webp':
+        case 'svg':
+        case 'bmp':
+        case 'tiff':
+        case 'tif':
+            return <FileImage strokeWidth={2} size={20} color="#059669" />;
+        default:
+            return <File strokeWidth={2} size={20} />;
+    }
+};
+
+// Helper function to format file size
+const formatFileSize = (bytes) => {
+    if (!bytes || bytes === 0) return '';
+    
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+};
+
 function GenericDetail({
     extraUrlParam,
     layout = 'full',
@@ -158,6 +249,19 @@ function GenericDetail({
     const [total, setTotal] = useState(0);
     const [windowHeight, setWindowHeight] = useState(window.innerHeight);
 
+    /** Gallery Modal States */
+    const [modalGalleryShow, setModalGalleryShow] = useState(false);
+    const [galleryData, setGalleryData] = useState([]);
+    const [currentItem, setCurrentItem] = useState(null);
+    const [lightboxOpen, setLightboxOpen] = useState(false);
+    const [lightboxIndex, setLightboxIndex] = useState(0);
+
+    // Gallery modal close function
+    const modalGalleryClose = () => {
+        setModalGalleryShow(false);
+        setLightboxOpen(false);
+    };
+
     /** Stage Popup States */
     const [showStagePopup, setShowStagePopup] = useState(false);
     const [stagePopupData, setStagePopupData] = useState(null);
@@ -1445,7 +1549,7 @@ function GenericDetail({
                                         message:
                                             'Are you sure you want to delete ' +
                                             name,
-                                        data: { name: name }, // Add context data
+                                        data: { name: name },
                                         buttons: [
                                             {
                                                 label: 'Yes',
@@ -1473,7 +1577,9 @@ function GenericDetail({
                                             },
                                             {
                                                 label: 'No',
-                                                onClick: () => close(),
+                                                onClick: () => {
+                                                    // Do nothing on cancel
+                                                },
                                             },
                                         ],
                                     });
@@ -1501,6 +1607,7 @@ function GenericDetail({
                                         />
                                     </div>
                                     <Dropzone
+                                        accept={getAcceptTypes(activeTabConfig.filetype)}
                                         onDrop={(acceptedFiles) => {
                                             const uploadFile = async (file) => {
                                                 // Optimize image if it's an image file
@@ -1695,20 +1802,9 @@ function GenericDetail({
                                                                 styles.sortlist
                                                             }
                                                         >
-                                                            {data[
-                                                                activeTabConfig
-                                                                    .key
-                                                            ] &&
-                                                                Array.isArray(
-                                                                    data[
-                                                                        activeTabConfig
-                                                                            .key
-                                                                    ]
-                                                                ) &&
-                                                                data[
-                                                                    activeTabConfig
-                                                                        .key
-                                                                ].map(
+                                                            {files &&
+                                                                Array.isArray(files) &&
+                                                                files.map(
                                                                     (a, b) => {
                                                                         const imageSource =
                                                                             a.base64_encoded_image ||
@@ -1732,6 +1828,33 @@ function GenericDetail({
                                                                                             alt={
                                                                                                 a.file_name
                                                                                             }
+                                                                                            onClick={(e) => {
+                                                                                                e.stopPropagation();
+                                                                                                e.preventDefault();
+                                                                                                
+                                                                                                // Prepare gallery data in the format expected by Lightbox
+                                                                                                const galleryArray = files
+                                                                                                    .filter(file => {
+                                                                                                        const imageSource = file.base64_encoded_image || file.s3_url || file.file_url;
+                                                                                                        return imageSource;
+                                                                                                    })
+                                                                                                    .map((file) => ({
+                                                                                                        src: file.base64_encoded_image || file.s3_url || file.file_url,
+                                                                                                        caption: file.file_name,
+                                                                                                        width: 320,
+                                                                                                        height: 240,
+                                                                                                    }));
+
+                                                                                                // Set gallery data for lightbox
+                                                                                                setGalleryData(galleryArray);
+                                                                                                
+                                                                                                // Set initial lightbox index
+                                                                                                setLightboxIndex(b);
+                                                                                                
+                                                                                                // Open lightbox directly
+                                                                                                setLightboxOpen(true);
+                                                                                            }}
+                                                                                            style={{ cursor: 'pointer' }}
                                                                                         />
                                                                                         <TrashCan
                                                                                             onClick={(
@@ -1788,18 +1911,16 @@ function GenericDetail({
                                                                         );
                                                                     }}
                                                                 >
-                                                                    <File
-                                                                        strokeWidth={
-                                                                            2
-                                                                        }
-                                                                        size={
-                                                                            20
-                                                                        }
-                                                                    />
+                                                                    {getFileIcon(a.file_name)}
                                                                     <div className="filename">
-                                                                        {
-                                                                            a.file_name
-                                                                        }
+                                                                        <div className="file-name">
+                                                                            {a.file_name}
+                                                                        </div>
+                                                                        {a.file_size && (
+                                                                            <div className="file-size">
+                                                                                {formatFileSize(a.file_size)}
+                                                                            </div>
+                                                                        )}
                                                                     </div>
                                                                 </div>
                                                                 <button
@@ -2390,6 +2511,7 @@ function GenericDetail({
                                                         }
                                                     >
                                                         <Dropzone
+                                                            accept={getAcceptTypes(activeTabConfig.filetype)}
                                                             onDrop={(
                                                                 acceptedFiles
                                                             ) => {
@@ -2718,6 +2840,17 @@ function GenericDetail({
         }
     }, [subnav, tabs]);
 
+    // Update files when active tab changes for dropzone tabs
+    useEffect(() => {
+        if (activeTabConfig && activeTabConfig.type === 'dropzone' && data) {
+            if (activeTabConfig.file_relationship && data[activeTabConfig.file_relationship]) {
+                setFiles(data[activeTabConfig.file_relationship]);
+            } else if (data.files) {
+                setFiles(data.files);
+            }
+        }
+    }, [activeTabConfig, data]);
+
     useEffect(() => {
         const fetchDropdownOptions = async () => {
             if (activeTabConfig?.columns) {
@@ -3167,6 +3300,20 @@ function GenericDetail({
                 entityData={data}
                 routeParams={routeParams}
             />
+
+            {/* Gallery Modal for image viewing */}
+            <GalleryModal
+                modalGalleryShow={modalGalleryShow}
+                modalGalleryClose={modalGalleryClose}
+                galleryData={galleryData}
+                setGalleryData={setGalleryData}
+                currentItem={currentItem}
+                form={{}}
+                lightboxOpen={lightboxOpen}
+                setLightboxOpen={setLightboxOpen}
+                lightboxIndex={lightboxIndex}
+                setLightboxIndex={setLightboxIndex}
+            />
         </>
     );
 }

package/src/components/modals/GalleryModal.jsx

@@ -4,6 +4,7 @@ import { toast } from 'react-toastify';
 import imageCompression from 'browser-image-compression';
 import Vapor from 'laravel-vapor';
 import Lightbox from 'yet-another-react-lightbox';
+import 'yet-another-react-lightbox/styles.css';
 import { X, Image as ImageIcon, CloudUpload } from 'lucide-react';
 import styles from '../styles/DataGrid.module.scss';
 import CustomFetch from '../Fetch';
@@ -396,7 +397,34 @@ const GalleryModal = ({
                 open={lightboxOpen}
                 close={() => setLightboxOpen(false)}
                 index={lightboxIndex}
-                slides={galleryData.map((img) => ({ src: img.src }))}
+                slides={galleryData.map((img, index) => ({ 
+                    src: img.src,
+                    alt: img.caption || `Image ${index + 1}`,
+                    title: img.caption
+                }))}
+                styles={{
+                    container: { 
+                        backgroundColor: "rgba(0, 0, 0, 0.9)",
+                        zIndex: 999999
+                    }
+                }}
+                controller={{
+                    closeOnBackdropClick: true,
+                    closeOnPullUp: true,
+                    closeOnPullDown: true
+                }}
+                carousel={{
+                    finite: true,
+                    preload: 1,
+                    padding: "16px",
+                    spacing: "30%",
+                    imageFit: "contain"
+                }}
+                animation={{
+                    fade: 300,
+                    swipe: 400
+                }}
+                portal={{ root: document.body }}
             />
         </>
     );

package/src/components/styles/GenericDetail.module.scss

@@ -333,9 +333,25 @@
             }
 
             .filename {
-                white-space: nowrap;
+                display: flex;
+                flex-direction: column;
                 overflow: hidden;
-                text-overflow: ellipsis;
+                flex: 1;
+                
+                .file-name {
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    font-weight: 500;
+                    line-height: 1.2;
+                }
+                
+                .file-size {
+                    font-size: 0.75rem;
+                    color: rgba(var(--primary-rgb), 0.7);
+                    margin-top: 2px;
+                    font-weight: 400;
+                }
             }
         }
 
@@ -364,26 +380,25 @@
 }
 
 .sortlist {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr); /* 4 columns by default */
-    gap: 16px;
+    display: grid !important;
+    grid-template-columns: repeat(4, 1fr) !important; /* 4 columns by default */
+    gap: 16px !important;
     padding: 16px 0;
+    margin: 0;
     list-style: none;
+    box-sizing: border-box;
 
     /* Responsive grid layout */
     @media (max-width: 1200px) {
-        grid-template-columns: repeat(3, 1fr); /* 3 columns on medium screens */
+        grid-template-columns: repeat(3, 1fr) !important; /* 3 columns on medium screens */
     }
 
     @media (max-width: 768px) {
-        grid-template-columns: repeat(2, 1fr); /* 2 columns on small screens */
+        grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on small screens */
     }
 
     @media (max-width: 480px) {
-        grid-template-columns: repeat(
-            1,
-            1fr
-        ); /* 1 column on very small screens */
+        grid-template-columns: repeat(1, 1fr) !important; /* 1 column on very small screens */
     }
 
     li {
@@ -413,6 +428,12 @@
                 width: 100%;
                 height: 100%;
                 object-fit: cover;
+                cursor: pointer;
+                transition: opacity 0.2s ease;
+                
+                &:hover {
+                    opacity: 0.9;
+                }
             }
 
             .delete {
@@ -819,3 +840,4 @@
     overflow-x: auto;
     white-space: pre-wrap;
 }
+

package/src/components/styles/GenericDynamic.module.scss

@@ -451,15 +451,7 @@ select:not(:placeholder-shown) + .fi__span {
     width: 100% !important;
 }
 
-.react-datepicker-popper {
-    z-index: 99999 !important;
-    position: fixed !important;
-    transform: none !important;
-    top: 50% !important;
-    left: 50% !important;
-    margin-top: -150px !important;
-    margin-left: -150px !important;
-}
+// DatePicker positioning removed - handled by global.css
 
 .react-datepicker__close-icon:after {
     background-color: rgba(var(--primary-rgb), 0.45) !important;

package/src/components/styles/GenericFormBuilder.module.scss

@@ -828,15 +828,7 @@ select:not(:placeholder-shown) + .fi__span {
     width: 100% !important;
 }
 
-.react-datepicker-popper {
-    z-index: 99999 !important;
-    position: fixed !important;
-    transform: none !important;
-    top: 50% !important;
-    left: 50% !important;
-    margin-top: -150px !important;
-    margin-left: -150px !important;
-}
+// DatePicker positioning removed - handled by global.css
 
 .react-datepicker__close-icon:after {
     background-color: rgba(var(--primary-rgb), 0.45) !important;

package/src/components/styles/global.css

@@ -196,7 +196,7 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         .inovua-react-toolkit-text-input__input
     ):not(.inovua-react-toolkit-numeric-input__input):not(
         .variable-inserter-search-input
-    ) {
+    ):not(.react-datepicker__month-select):not(.react-datepicker__year-select) {
     background: white;
     border-radius: var(--br);
     border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
@@ -339,29 +339,38 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     z-index: 999 !important;
 }
 
-/* DatePicker z-index fix */
+/* DatePicker proper z-index hierarchy */
 .react-datepicker-popper {
-    z-index: 99999 !important;
+    z-index: 1060 !important; /* Above Bootstrap modals (1050) */
+    position: absolute !important; /* Use absolute positioning for proper context */
+}
+
+/* Center-screen positioning for modal contexts */
+.react-datepicker-popper.center-screen {
     position: fixed !important;
-    transform: none !important;
     top: 50% !important;
     left: 50% !important;
-    margin-top: -150px !important;
-    margin-left: -150px !important;
+    transform: translate(-50%, -50%) !important;
+    z-index: 1060 !important;
+}
+
+/* Portal mode for modal contexts */
+.react-datepicker-popper.portal-mode {
+    position: fixed !important;
+    z-index: 1060 !important;
 }
 
 .react-datepicker {
-    position: absolute !important;
+    position: relative !important;
     display: inline-block !important;
-    z-index: 99999 !important;
+    z-index: 1 !important;
     background-color: white !important;
     border-radius: 0.3rem !important;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
 }
 
 .react-datepicker-portal {
-    position: fixed !important;
-    z-index: 99999 !important;
+    z-index: 1060 !important;
 }
 
 /* Fix for specific modal header that's causing issues */
@@ -369,12 +378,9 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     z-index: 1 !important;
 }
 
-/* Make sure popup content doesn't constrain the datepicker */
-.popup-content {
-    overflow: visible !important;
-}
-
-.modal__content {
+/* Conditional overflow visibility only for modal contexts */
+.modal-with-datepicker .popup-content,
+.modal-with-datepicker .modal__content {
     overflow: visible !important;
 }
 
@@ -384,26 +390,179 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     border: 1px solid #aeaeae !important;
     border-radius: 0.3rem !important;
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
+    float: left !important;
+}
+
+.react-datepicker {
+    position: relative !important;
+    display: inline-block !important;
+    background-color: white !important;
+    border-radius: 0.3rem !important;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
+    min-width: 385px !important; /* Wider to accommodate month/year dropdowns */
+    width: auto !important;
+}
+
+/* Ensure time container appears on the right side */
+.react-datepicker__time-container {
+    float: right !important;
+    border-left: 1px solid #aeaeae !important;
+    width: 85px !important;
+    display: block !important;
+}
+
+/* Fix navigation button positioning */
+.react-datepicker__navigation {
+    position: absolute !important;
+    top: 2px !important;
+    z-index: 1 !important;
+    height: 32px !important;
+    width: 32px !important;
+    cursor: pointer !important;
+}
+
+.react-datepicker__navigation--previous {
+    left: 2px !important;
+}
+
+.react-datepicker__navigation--next {
+    right: 2px !important;
+}
+
+/* Fix next button positioning when time selector is present */
+.react-datepicker__navigation--next--with-time:not(
+        .react-datepicker__navigation--next--with-today-button
+    ) {
+    right: 87px !important; /* Account for time container width + border */
+}
+
+/* Ensure proper clearfix for float layout */
+.react-datepicker::after {
+    content: '' !important;
+    display: table !important;
+    clear: both !important;
+}
+
+/* Fix header layout to accommodate navigation buttons */
+.react-datepicker__header {
+    text-align: center !important;
+    background-color: #f0f0f0 !important;
+    border-bottom: 1px solid #aeaeae !important;
+    border-top-left-radius: 0.3rem !important;
+    border-top-right-radius: 0.3rem !important;
+    padding: 8px 0 !important;
+    position: relative !important;
+}
+
+/* Ensure current month text doesn't interfere with navigation */
+.react-datepicker__current-month,
+.react-datepicker-time__header,
+.react-datepicker-year-header {
+    margin-top: 0 !important;
+    color: #000 !important;
+    font-weight: bold !important;
+    font-size: 0.944rem !important;
+    padding: 0 40px !important; /* Add padding to avoid navigation button overlap */
 }
 
-/* Hide the arrow since we're centering the calendar */
+/* Alternative approach: Force specific width for month container */
+.react-datepicker__month-container {
+    width: calc(
+        100% - 87px
+    ) !important; /* Full width minus time container and border */
+    box-sizing: border-box !important;
+    min-width: 295px !important; /* Ensure enough space for month/year dropdowns */
+}
+
+/* Ensure time container has proper sizing and positioning */
+.react-datepicker__time-container {
+    height: auto !important;
+    min-height: 250px !important; /* Match typical calendar height */
+}
+
+/* Force container to maintain layout */
+.react-datepicker {
+    overflow: hidden !important; /* Contain floated children */
+}
+
+/* Make month and year select dropdowns more compact */
+.react-datepicker__month-dropdown-container,
+.react-datepicker__year-dropdown-container {
+    display: inline-block !important;
+    margin: 0 5px !important;
+}
+
+/* Target the actual select elements with higher specificity */
+.react-datepicker .react-datepicker__header .react-datepicker__month-select,
+.react-datepicker .react-datepicker__header .react-datepicker__year-select {
+    width: auto !important;
+    min-width: 70px !important;
+    max-width: 90px !important;
+    padding: 4px 8px !important;
+    font-size: 0.9rem !important;
+    border: 1px solid #aeaeae !important;
+    border-radius: 4px !important;
+    background-color: white !important;
+    cursor: pointer !important;
+    text-align: center !important;
+    margin: 0 2px !important;
+    box-sizing: border-box !important;
+}
+
+.react-datepicker .react-datepicker__header .react-datepicker__year-select {
+    min-width: 60px !important;
+    max-width: 70px !important;
+}
+
+/* Also target read-view elements for dropdowns */
+.react-datepicker__month-read-view,
+.react-datepicker__year-read-view {
+    width: auto !important;
+    min-width: 70px !important;
+    max-width: 90px !important;
+    padding: 4px 8px !important;
+    font-size: 0.9rem !important;
+    border: 1px solid #aeaeae !important;
+    border-radius: 4px !important;
+    background-color: white !important;
+    cursor: pointer !important;
+    text-align: center !important;
+}
+
+.react-datepicker__year-read-view {
+    min-width: 60px !important;
+    max-width: 70px !important;
+}
+
+/* Ensure dropdowns fit in header */
+.react-datepicker__header {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    gap: 8px !important;
+}
+
+/* Container for month/year dropdowns */
+.react-datepicker__current-month {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    padding: 0 40px !important;
+}
+
+/* Show arrow for proper positioning context */
 .react-datepicker__triangle {
-    display: none !important;
+    display: block !important;
 }
 
-/* Ensure all containers allow the datepicker to be visible */
-.modal,
-.popup-content,
-.modal__content,
-.formItem,
-.fi__label,
-.dynamicform,
-.dynamic__left {
-    overflow: visible !important;
+/* Hide arrow only for center-screen mode */
+.react-datepicker-popper.center-screen .react-datepicker__triangle {
+    display: none !important;
 }
 
-/* Add a backdrop to make the datepicker stand out */
-.react-datepicker-popper::before {
+/* Backdrop only for center-screen mode */
+.react-datepicker-popper.center-screen::before {
     content: '' !important;
     position: fixed !important;
     top: 0 !important;
@@ -466,8 +625,7 @@ form div:has(.react-toggle) input[type='checkbox'] {
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 
     /* Checkerboard pattern for transparency */
-    background-image: 
-        linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
+    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
         linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
         linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
         linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
@@ -478,8 +636,7 @@ form div:has(.react-toggle) input[type='checkbox'] {
 .relation-color-preview:hover {
     border-color: #adb5bd;
     transform: scale(1.1);
-    box-shadow: 
-        inset 0 1px 2px rgba(0, 0, 0, 0.1),
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),
         0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
@@ -535,8 +692,7 @@ form div:has(.react-toggle) input[type='checkbox'] {
     flex-shrink: 0;
 
     /* Checkerboard pattern for transparency */
-    background-image: 
-        linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
+    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
         linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
         linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
         linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
@@ -545,18 +701,19 @@ form div:has(.react-toggle) input[type='checkbox'] {
 }
 
 /* When no color is selected */
-.cpicker__box[style=""] {
-    background: 
-        linear-gradient(45deg, 
-            transparent 40%, 
-            #dc3545 42%, 
-            #dc3545 58%, 
+.cpicker__box[style=''] {
+    background: linear-gradient(
+            45deg,
+            transparent 40%,
+            #dc3545 42%,
+            #dc3545 58%,
             transparent 60%
         ),
-        linear-gradient(-45deg, 
-            transparent 40%, 
-            #dc3545 42%, 
-            #dc3545 58%, 
+        linear-gradient(
+            -45deg,
+            transparent 40%,
+            #dc3545 42%,
+            #dc3545 58%,
             transparent 60%
         ),
         #ffffff;
@@ -600,7 +757,7 @@ form div:has(.react-toggle) input[type='checkbox'] {
     .cpicker-container {
         padding: 6px;
     }
-    
+
     .cpicker-container .w-color-sketch {
         transform: scale(0.75) !important;
     }
@@ -610,7 +767,7 @@ form div:has(.react-toggle) input[type='checkbox'] {
     .cpicker-container {
         padding: 4px;
     }
-    
+
     .cpicker-container .w-color-sketch {
         transform: scale(0.65) !important;
     }

package/src/components/utils/DatePickerPortal.jsx

@@ -0,0 +1,127 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+/**
+ * DatePickerPortal - Smart portal component for DatePicker positioning
+ * 
+ * Automatically detects if the DatePicker is inside a modal context
+ * and renders it appropriately to prevent z-index conflicts
+ */
+const DatePickerPortal = ({ 
+  children, 
+  usePortal = null, // null = auto-detect, true = force portal, false = no portal
+  modalContext = null, // null = auto-detect, true = force modal styling, false = normal
+  centerScreen = false, // true = force center-screen positioning
+  containerRef = null // reference to the input container for positioning
+}) => {
+  const [shouldUsePortal, setShouldUsePortal] = useState(false);
+  const [isModalContext, setIsModalContext] = useState(false);
+  const [portalContainer, setPortalContainer] = useState(null);
+
+  useEffect(() => {
+    // Auto-detect modal context if not explicitly set
+    if (modalContext === null) {
+      const detectModalContext = () => {
+        if (containerRef && containerRef.current) {
+          // Check if the container is inside a modal
+          const modalSelectors = [
+            '.modal',
+            '.popup-content',
+            '.modal__content',
+            '.swal2-container',
+            '[role="dialog"]',
+            '[aria-modal="true"]'
+          ];
+          
+          for (const selector of modalSelectors) {
+            if (containerRef.current.closest(selector)) {
+              setIsModalContext(true);
+              setShouldUsePortal(true);
+              return;
+            }
+          }
+        }
+        setIsModalContext(false);
+        setShouldUsePortal(false);
+      };
+      
+      detectModalContext();
+    } else {
+      setIsModalContext(modalContext);
+      setShouldUsePortal(modalContext);
+    }
+  }, [modalContext, containerRef]);
+
+  useEffect(() => {
+    // Override auto-detection if explicitly set
+    if (usePortal !== null) {
+      setShouldUsePortal(usePortal);
+    }
+  }, [usePortal]);
+
+  useEffect(() => {
+    // Create portal container
+    if (shouldUsePortal) {
+      const container = document.createElement('div');
+      container.className = 'datepicker-portal-container';
+      
+      // Add appropriate classes based on context
+      if (isModalContext || centerScreen) {
+        container.classList.add('modal-context');
+      }
+      
+      document.body.appendChild(container);
+      setPortalContainer(container);
+      
+      // Add modal-context class to body for CSS targeting
+      if (isModalContext) {
+        document.body.classList.add('modal-with-datepicker');
+      }
+      
+      return () => {
+        document.body.removeChild(container);
+        document.body.classList.remove('modal-with-datepicker');
+      };
+    }
+  }, [shouldUsePortal, isModalContext, centerScreen]);
+
+  // Clone children and add appropriate classes
+  const enhancedChildren = React.Children.map(children, child => {
+    if (React.isValidElement(child)) {
+      const additionalProps = {};
+      
+      // Add popperClassName for react-datepicker
+      if (child.props.popperClassName) {
+        additionalProps.popperClassName = child.props.popperClassName;
+      }
+      
+      // Add classes based on context
+      const classes = [];
+      if (isModalContext || centerScreen) {
+        classes.push('center-screen');
+      }
+      if (shouldUsePortal) {
+        classes.push('portal-mode');
+      }
+      
+      if (classes.length > 0) {
+        additionalProps.popperClassName = [
+          child.props.popperClassName,
+          ...classes
+        ].filter(Boolean).join(' ');
+      }
+      
+      return React.cloneElement(child, additionalProps);
+    }
+    return child;
+  });
+
+  // Render with or without portal
+  if (shouldUsePortal && portalContainer) {
+    return createPortal(enhancedChildren, portalContainer);
+  }
+  
+  return enhancedChildren;
+};
+
+export default DatePickerPortal;

package/src/index.js

@@ -29,6 +29,7 @@ import DataGridSearch from './components/controls/DataGridSearch';
 import AutoRefreshControls from './components/controls/AutoRefreshControls';
 import AudioPlayer from './components/controls/AudioPlayer';
 import GalleryModal from './components/modals/GalleryModal';
+import DatePickerPortal from './components/utils/DatePickerPortal';
 export * from './components/columns/ColumnRenderers.jsx';
 
 /** Auth Specific Components */
@@ -96,6 +97,7 @@ export {
     CustomFetch,
     DataGrid,
     DataGridSearch,
+    DatePickerPortal,
     Download,
     DropZone,
     Field,