@visns-studio/visns-components 5.4.8 → 5.4.9

package/package.json

@@ -56,7 +56,7 @@
         "truncate": "^3.0.0",
         "uuid": "^10.0.0",
         "validator": "^13.15.0",
-        "vite": "^5.4.16",
+        "vite": "^5.4.17",
         "yarn": "^1.22.22"
     },
     "devDependencies": {
@@ -71,7 +71,7 @@
         "mini-css-extract-plugin": "^2.9.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "sass": "^1.86.2",
+        "sass": "^1.86.3",
         "sass-loader": "^16.0.5"
     },
     "peerDependencies": {
@@ -79,7 +79,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.4.8",
+    "version": "5.4.9",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

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

@@ -452,7 +452,13 @@ select:not(:placeholder-shown) + .fi__span {
 }
 
 .react-datepicker-popper {
-    z-index: 999 !important;
+    z-index: 99999 !important;
+    position: fixed !important;
+    transform: none !important;
+    top: 50% !important;
+    left: 50% !important;
+    margin-top: -150px !important;
+    margin-left: -150px !important;
 }
 
 .react-datepicker__close-icon:after {

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

@@ -520,7 +520,13 @@ select:not(:placeholder-shown) + .fi__span {
 }
 
 .react-datepicker-popper {
-    z-index: 999 !important;
+    z-index: 99999 !important;
+    position: fixed !important;
+    transform: none !important;
+    top: 50% !important;
+    left: 50% !important;
+    margin-top: -150px !important;
+    margin-left: -150px !important;
 }
 
 .react-datepicker__close-icon:after {

package/src/components/styles/global.css

@@ -217,3 +217,78 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
 .visns-select__menu {
     z-index: 999 !important;
 }
+
+/* DatePicker z-index fix */
+.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;
+}
+
+.react-datepicker {
+    position: absolute !important;
+    display: inline-block !important;
+    z-index: 99999 !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;
+}
+
+/* Fix for specific modal header that's causing issues */
+[class*='_modal__header_'] {
+    z-index: 1 !important;
+}
+
+/* Make sure popup content doesn't constrain the datepicker */
+.popup-content {
+    overflow: visible !important;
+}
+
+.modal__content {
+    overflow: visible !important;
+}
+
+/* Ensure the datepicker is always visible */
+.react-datepicker__month-container {
+    background-color: white !important;
+    border: 1px solid #aeaeae !important;
+    border-radius: 0.3rem !important;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
+}
+
+/* Hide the arrow since we're centering the calendar */
+.react-datepicker__triangle {
+    display: none !important;
+}
+
+/* Ensure all containers allow the datepicker to be visible */
+.modal,
+.popup-content,
+.modal__content,
+.formItem,
+.fi__label,
+.dynamicform,
+.dynamic__left {
+    overflow: visible !important;
+}
+
+/* Add a backdrop to make the datepicker stand out */
+.react-datepicker-popper::before {
+    content: '' !important;
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    background: rgba(0, 0, 0, 0.5) !important;
+    z-index: -1 !important;
+}