@visns-studio/visns-components 5.12.6 → 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.6",
+    "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/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,