@visns-studio/visns-components 5.11.1 → 5.11.3

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

@@ -304,6 +304,8 @@
 .hactions {
     width: max-content;
     justify-self: end;
+    position: relative;
+    z-index: 100; // Ensure proper stacking above modal content
 
     > ul {
         list-style: none;
@@ -313,10 +315,21 @@
         flex-wrap: nowrap;
         flex-direction: row;
         align-items: center;
-        justify-content: center;
+        justify-content: flex-end;
+        gap: 2px;
+        position: relative;
+        z-index: 101;
 
         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: 102;
         }
 
         a {
@@ -327,13 +340,21 @@
             background: none;
             border: 2px 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: 103;
+            transform: translateZ(0); // Force hardware acceleration
+            will-change: transform, background-color; // Optimize for animations
 
             &:hover,
             &.active {
                 background: var(--primary-color);
+                transform: translateZ(0) scale(1.05); // Slight scale on hover
 
                 svg {
                     color: var(--secondary-color);
@@ -349,15 +370,23 @@
             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: 103;
+            transform: translateZ(0); // Force hardware acceleration
+            will-change: transform, background-color; // Optimize for animations
 
             &:hover,
             &.active {
                 background: var(--primary-color);
+                transform: translateZ(0) scale(1.05); // Slight scale on hover
 
                 svg {
                     color: var(--secondary-color);
@@ -370,6 +399,8 @@
 .hactions-alternate {
     width: max-content;
     justify-self: end;
+    position: relative;
+    z-index: 100; // Ensure proper stacking above modal content
 
     > ul {
         list-style: none;
@@ -379,10 +410,21 @@
         flex-wrap: nowrap;
         flex-direction: row;
         align-items: center;
-        justify-content: center;
+        justify-content: flex-end;
+        gap: 2px;
+        position: relative;
+        z-index: 101;
 
         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: 102;
         }
 
         a {
@@ -393,13 +435,21 @@
             background: none;
             border: 2px 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: 103;
+            transform: translateZ(0); // Force hardware acceleration
+            will-change: transform, background-color; // Optimize for animations
 
             &:hover,
             &.active {
                 background: var(--primary-color);
+                transform: translateZ(0) scale(1.05); // Slight scale on hover
 
                 svg {
                     color: var(--tertiary-color);
@@ -415,15 +465,23 @@
             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: 103;
+            transform: translateZ(0); // Force hardware acceleration
+            will-change: transform, background-color; // Optimize for animations
 
             &:hover,
             &.active {
                 background: var(--primary-color);
+                transform: translateZ(0) scale(1.05); // Slight scale on hover
 
                 svg {
                     color: var(--tertiary-color);
@@ -636,6 +694,8 @@
         position: sticky;
         top: 0;
         z-index: 995;
+        contain: layout; /* Prevent layout shifts */
+        transform: translateZ(0); /* Force hardware acceleration */
 
         /* Hide scrollbar for Chrome/Safari/Opera */
         &::-webkit-scrollbar {

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,