@visns-studio/visns-components 5.11.2 → 5.11.4

package/src/components/crm/styles/Navigation.module.scss

@@ -13,6 +13,16 @@
         line-height: 1.45;
         margin-right: 1rem;
 
+        .logoButton {
+            background: none;
+            border: none;
+            padding: 0;
+            margin: 0;
+            cursor: pointer;
+            width: 100%;
+            display: block;
+        }
+
         img {
             width: 100%;
             height: auto;
@@ -89,7 +99,8 @@
         }
 
         a,
-        span {
+        span,
+        button {
             font-size: 0.9rem;
             display: flex;
             flex-wrap: nowrap;
@@ -103,11 +114,16 @@
             outline: none;
             border-radius: var(--br);
             transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-family: inherit;
         }
 
         &.nav-item {
             a,
-            span {
+            span,
+            button {
                 color: var(--tertiary-color);
             }
 
@@ -120,7 +136,9 @@
             &:hover a,
             &.active a,
             &:hover span,
-            &.active span {
+            &.active span,
+            &:hover button,
+            &.active button {
                 background: rgba(var(--secondary-rgb), 1);
                 color: var(--tertiary-color);
             }
@@ -175,7 +193,8 @@
                         border-radius: 0;
                     }
 
-                    > a {
+                    > a,
+                    > button {
                         width: 100%;
                         padding: 8px 20px;
                         box-sizing: border-box;
@@ -187,9 +206,14 @@
                         background: rgba(var(--primary-rgb), 1);
                         color: var(--tertiary-color) !important;
                         position: relative;
+                        border: none;
+                        cursor: pointer;
+                        font-family: inherit;
+                        text-align: left;
                     }
 
-                    &:hover a {
+                    &:hover a,
+                    &:hover button {
                         background: rgba(var(--primary-rgb), 1);
                         color: var(--tertiary-color);
                     }
@@ -304,6 +328,8 @@
 .hactions {
     width: max-content;
     justify-self: end;
+    position: relative;
+    z-index: 1000; // Higher z-index to stay above sticky header
 
     > ul {
         list-style: none;
@@ -313,10 +339,21 @@
         flex-wrap: nowrap;
         flex-direction: row;
         align-items: center;
-        justify-content: center;
+        justify-content: flex-end;
+        gap: 2px;
+        position: relative;
+        z-index: 1001;
 
         li {
-            margin: 0 5px;
+            margin: 0 2px;
+            position: relative;
+            display: flex;
+            align-items: center;
+            flex-shrink: 0;
+            min-width: 32px; // Reduced from 40px for better spacing
+            min-height: 32px; // Reduced from 40px for better spacing
+            justify-content: center;
+            z-index: 1002;
         }
 
         a {
@@ -325,15 +362,30 @@
             padding: 0.35rem;
             text-decoration: none;
             background: none;
-            border: 2px solid var(--primary-color);
+            border: 1px solid var(--primary-color);
             border-radius: 100%;
-            transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+            transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); // Reduced duration
             display: flex;
             align-items: center;
+            justify-content: center;
+            width: 32px; // Reduced from 36px
+            height: 32px; // Reduced from 36px
+            position: relative;
+            z-index: 1003;
+            transform: translateZ(0) translateX(0) translateY(0); // Force compositor layer
+            will-change: transform, background-color; // Optimize for animations
+            /* Remove contain: layout to prevent rendering optimization conflicts */
+            outline: none;
+            appearance: none;
+            backface-visibility: hidden; // Prevent rendering glitches
+            -webkit-backface-visibility: hidden;
+            /* Force onto own layer to prevent culling */
+            isolation: isolate;
 
             &:hover,
             &.active {
                 background: var(--primary-color);
+                transform: translateZ(0) scale(1.05); // Slight scale on hover
 
                 svg {
                     color: var(--secondary-color);
@@ -349,15 +401,27 @@
             background: none;
             border: 1px solid var(--primary-color);
             border-radius: 100%;
-            transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+            transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); // Reduced duration
             display: flex;
             align-items: center;
+            justify-content: center;
+            width: 32px; // Reduced from 36px
+            height: 32px; // Reduced from 36px
             outline: none;
             appearance: none;
+            position: relative;
+            z-index: 1003;
+            transform: translateZ(0) translateX(0) translateY(0); // Force compositor layer
+            will-change: transform, background-color; // Optimize for animations
+            /* Remove contain: layout to prevent rendering optimization conflicts */
+            backface-visibility: hidden; // Prevent rendering glitches
+            -webkit-backface-visibility: hidden;
+            isolation: isolate;
 
             &:hover,
             &.active {
                 background: var(--primary-color);
+                transform: translateZ(0) scale(1.05); // Slight scale on hover
 
                 svg {
                     color: var(--secondary-color);
@@ -370,6 +434,8 @@
 .hactions-alternate {
     width: max-content;
     justify-self: end;
+    position: relative;
+    z-index: 1000; // Higher z-index to stay above sticky header
 
     > ul {
         list-style: none;
@@ -379,10 +445,21 @@
         flex-wrap: nowrap;
         flex-direction: row;
         align-items: center;
-        justify-content: center;
+        justify-content: flex-end;
+        gap: 2px;
+        position: relative;
+        z-index: 1001;
 
         li {
-            margin: 0 5px;
+            margin: 0 2px;
+            position: relative;
+            display: flex;
+            align-items: center;
+            flex-shrink: 0;
+            min-width: 32px; // Reduced from 40px for better spacing
+            min-height: 32px; // Reduced from 40px for better spacing
+            justify-content: center;
+            z-index: 1002;
         }
 
         a {
@@ -391,15 +468,30 @@
             padding: 0.35rem;
             text-decoration: none;
             background: none;
-            border: 2px solid var(--primary-color);
+            border: 1px solid var(--primary-color);
             border-radius: 100%;
-            transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+            transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); // Reduced duration
             display: flex;
             align-items: center;
+            justify-content: center;
+            width: 32px; // Reduced from 36px
+            height: 32px; // Reduced from 36px
+            position: relative;
+            z-index: 1003;
+            transform: translateZ(0) translateX(0) translateY(0); // Force compositor layer
+            will-change: transform, background-color; // Optimize for animations
+            /* Remove contain: layout to prevent rendering optimization conflicts */
+            outline: none;
+            appearance: none;
+            backface-visibility: hidden; // Prevent rendering glitches
+            -webkit-backface-visibility: hidden;
+            /* Force onto own layer to prevent culling */
+            isolation: isolate;
 
             &:hover,
             &.active {
                 background: var(--primary-color);
+                transform: translateZ(0) scale(1.05); // Slight scale on hover
 
                 svg {
                     color: var(--tertiary-color);
@@ -415,15 +507,27 @@
             background: none;
             border: 1px solid var(--primary-color);
             border-radius: 100%;
-            transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+            transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); // Reduced duration
             display: flex;
             align-items: center;
+            justify-content: center;
+            width: 32px; // Reduced from 36px
+            height: 32px; // Reduced from 36px
             outline: none;
             appearance: none;
+            position: relative;
+            z-index: 1003;
+            transform: translateZ(0) translateX(0) translateY(0); // Force compositor layer
+            will-change: transform, background-color; // Optimize for animations
+            /* Remove contain: layout to prevent rendering optimization conflicts */
+            backface-visibility: hidden; // Prevent rendering glitches
+            -webkit-backface-visibility: hidden;
+            isolation: isolate;
 
             &:hover,
             &.active {
                 background: var(--primary-color);
+                transform: translateZ(0) scale(1.05); // Slight scale on hover
 
                 svg {
                     color: var(--tertiary-color);
@@ -629,13 +733,17 @@
         flex-wrap: nowrap;
         justify-content: space-between;
         align-items: center;
-        overflow-x: auto; /* Allow horizontal scrolling if needed */
+        overflow: visible; /* Allow icons to remain visible */
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none; /* Firefox */
         -ms-overflow-style: none; /* IE and Edge */
         position: sticky;
         top: 0;
         z-index: 995;
+        /* Remove contain: layout as it can cause rendering issues with child elements */
+        transform: translateZ(0); /* Force hardware acceleration */
+        backface-visibility: hidden; /* Prevent rendering glitches */
+        -webkit-backface-visibility: hidden;
 
         /* Hide scrollbar for Chrome/Safari/Opera */
         &::-webkit-scrollbar {
@@ -980,6 +1088,30 @@
     }
 }
 
+// Debug styles for troubleshooting icon disappearing
+.debug-icons {
+    a, button {
+        border: 2px solid red !important;
+        background: rgba(255, 0, 0, 0.1) !important;
+        
+        &::before {
+            content: 'A' !important;
+            position: absolute !important;
+            top: -15px !important;
+            left: 0 !important;
+            font-size: 10px !important;
+            background: red !important;
+            color: white !important;
+            padding: 2px !important;
+        }
+    }
+    
+    button::before {
+        content: 'B' !important;
+        background: blue !important;
+    }
+}
+
 @media (max-width: 960px) {
     .hwrap {
         grid-template-columns: auto 1fr auto;

package/src/components/crm/styles/global-datagrid.css

@@ -3,6 +3,15 @@
     overflow: hidden !important;
 }
 
+/* Ensure tooltips always appear above all other elements */
+.react-tooltip,
+div[role="tooltip"],
+[data-tooltip-id] + div[role="tooltip"],
+.tooltip {
+    z-index: 999999 !important;
+    position: fixed !important;
+}
+
 .InovuaReactDataGrid__header-wrapper {
     border-top-left-radius: var(--br, 4px) !important;
     border-top-right-radius: var(--br, 4px) !important;

package/src/index.js

@@ -6,15 +6,18 @@ import SortableList from './components/cms/sorting/List';
 
 /** CRM Components */
 import AsyncSelect from './components/crm/AsyncSelect';
+import AssociationManager from './components/crm/AssociationManager';
 import Autocomplete from './components/crm/Autocomplete';
 import Breadcrumb from './components/crm/Breadcrumb';
 import BusinessCardOcr from './components/crm/BusinessCardOcr';
 import Call from './components/crm/Call';
+import ClientAssociationManager from './components/crm/ClientAssociationManager';
 import CustomFetch from './components/crm/Fetch';
 import Download from './components/crm/Download';
 import Field from './components/crm/Field';
 import Form from './components/crm/Form';
 import Loader from './components/crm/Loader';
+import MergeEntity from './components/crm/MergeEntity';
 import MultiSelect from './components/crm/MultiSelect';
 import Navigation from './components/crm/Navigation';
 import Notification from './components/crm/Notification';
@@ -64,6 +67,7 @@ import NotificationList from './components/crm/generic/NotificationList';
 
 export {
     AsyncSelect,
+    AssociationManager,
     AudioPlayer,
     AuditLog,
     AuditLogs,
@@ -73,6 +77,7 @@ export {
     BusinessCardOcr,
     Call,
     CellWithTooltip,
+    ClientAssociationManager,
     ClientLogin,
     ClientOTPVerify,
     ClientPortal,
@@ -104,6 +109,7 @@ export {
     GenericSort,
     Loader,
     Login,
+    MergeEntity,
     MultiSelect,
     Navigation,
     Notification,