@visns-studio/visns-components 5.7.4 → 5.7.6

package/package.json

@@ -20,12 +20,12 @@
         "dayjs": "^1.11.13",
         "fabric": "^6.6.4",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.9.2",
+        "framer-motion": "^12.9.4",
         "html-react-parser": "^5.2.3",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
         "moment": "^2.30.1",
-        "motion": "^12.9.2",
+        "motion": "^12.9.4",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
@@ -63,10 +63,10 @@
         "yet-another-react-lightbox": "^3.23.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.26.10",
-        "@babel/plugin-transform-runtime": "^7.26.10",
-        "@babel/preset-env": "^7.26.9",
-        "@babel/preset-react": "^7.26.3",
+        "@babel/core": "^7.27.1",
+        "@babel/plugin-transform-runtime": "^7.27.1",
+        "@babel/preset-env": "^7.27.1",
+        "@babel/preset-react": "^7.27.1",
         "babel-loader": "^10.0.0",
         "copy-webpack-plugin": "^13.0.0",
         "css-loader": "^7.1.2",
@@ -82,7 +82,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.7.4",
+    "version": "5.7.6",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [
@@ -103,5 +103,5 @@
         "url": "https://github.com/visnsstudio/visns-components/issues"
     },
     "homepage": "https://github.com/visnsstudio/visns-components#readme",
-    "packageManager": "yarn@4.8.1"
+    "packageManager": "yarn@4.9.1"
 }

package/src/components/crm/Navigation.jsx

@@ -287,6 +287,9 @@ function Navigation({
         }
     };
 
+    const [, setActiveDropdown] = useState(null); // We only need the setter
+    const navWrapRef = useRef(null);
+
     const renderNav = (n) => {
         let navItemClasses;
 
@@ -302,8 +305,30 @@ function Navigation({
                     : styles['nav-item'];
         }
 
+        const hasChildren = n.children && n.children.length > 0;
+
+        const handleMouseEnter = () => {
+            if (hasChildren) {
+                setActiveDropdown(n.id);
+                // Temporarily disable overflow on the navwrap when dropdown is active
+                if (navWrapRef.current) {
+                    navWrapRef.current.style.overflowX = 'visible';
+                }
+            }
+        };
+
+        const handleMouseLeave = () => {
+            if (hasChildren) {
+                setActiveDropdown(null);
+                // Restore overflow when dropdown is no longer active
+                if (navWrapRef.current) {
+                    navWrapRef.current.style.overflowX = 'auto';
+                }
+            }
+        };
+
         const renderChildren = () => {
-            if (n.children && n.children.length > 0) {
+            if (hasChildren) {
                 return (
                     <ul className={styles.navDropdown}>
                         {n.children.map(
@@ -331,7 +356,11 @@ function Navigation({
         };
 
         return (
-            <li className={navItemClasses}>
+            <li
+                className={navItemClasses}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+            >
                 {n.url ? (
                     <Link to={n.url}>{n.label}</Link>
                 ) : (
@@ -508,7 +537,7 @@ function Navigation({
                     </Link>
                 </div>
                 <div className={styles.awrap}>
-                    <nav className={styles.navwrap}>
+                    <nav className={styles.navwrap} ref={navWrapRef}>
                         <ul className={appNavClasses}>
                             {navData.navigations.map((nav, navKey) =>
                                 nav.permission === true ||
@@ -578,7 +607,7 @@ function Navigation({
                     <img src={logo} alt="System Logo" />
                 </Link>
             </div>
-            <div className={styles.navwrap}>
+            <div className={styles.navwrap} ref={navWrapRef}>
                 <ul className={appNavClasses}>
                     {navData.navigations.map((nav, navKey) =>
                         nav.permission === true || nav.permissionKey === '' ? (

package/src/components/crm/Notification.jsx

@@ -7,6 +7,46 @@ import { Bell, CircleX, Check } from 'akar-icons';
 import CustomFetch from './Fetch';
 import styles from './styles/Notification.module.scss';
 
+// Helper function to sanitize HTML content and remove unwanted styling from anchor tags
+const sanitizeHtml = (html) => {
+    if (!html) return '';
+
+    // Create a temporary div to parse the HTML
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = html;
+
+    // Find all anchor tags and remove any styling attributes
+    const anchors = tempDiv.querySelectorAll('a');
+    anchors.forEach((anchor) => {
+        // Preserve href and target attributes, remove all others
+        const href = anchor.getAttribute('href');
+        const target = anchor.getAttribute('target');
+
+        // Clone the text content
+        const textContent = anchor.textContent;
+
+        // Create a clean anchor with only necessary attributes
+        const cleanAnchor = document.createElement('a');
+        cleanAnchor.textContent = textContent;
+
+        if (href) cleanAnchor.setAttribute('href', href);
+        if (target) cleanAnchor.setAttribute('target', target);
+
+        // Add a small icon after the link text to indicate it's a link
+        // We'll use CSS to style this instead of adding an actual icon
+        cleanAnchor.setAttribute('data-is-link', 'true');
+
+        // Set inline styles to ensure visibility against white background
+        cleanAnchor.style.color = '#0056b3';
+        cleanAnchor.style.fontWeight = '600';
+
+        // Replace the original anchor with the clean one
+        anchor.parentNode.replaceChild(cleanAnchor, anchor);
+    });
+
+    return tempDiv.innerHTML;
+};
+
 function Notification(props) {
     const navigate = useNavigate();
     const wrapperRef = useRef(null);
@@ -290,7 +330,11 @@ function Notification(props) {
                                                 <div
                                                     className={styles.notiText}
                                                 >
-                                                    {parse(item.data.label)}
+                                                    {parse(
+                                                        sanitizeHtml(
+                                                            item.data.label
+                                                        )
+                                                    )}
                                                 </div>
                                                 <div
                                                     className={styles.notiTime}

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

@@ -4,6 +4,7 @@
     align-items: center;
     gap: var(--padding);
     width: 100%;
+    position: relative; /* Establish a positioning context */
 
     .logo {
         width: var(--logo-width);
@@ -42,6 +43,7 @@
     flex: 1;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
+    position: relative; /* Ensure proper stacking context */
 
     /* Hide scrollbar for most browsers but keep functionality */
     scrollbar-width: none; /* Firefox */
@@ -67,8 +69,10 @@
 
     .navDropdown {
         border-radius: var(--br);
-        overflow: hidden;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        overflow: visible;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+        z-index: 1000; /* Ensure dropdown appears above other elements */
+        position: absolute; /* Ensure it's positioned absolutely */
     }
 
     .nav-item,
@@ -78,6 +82,11 @@
         box-sizing: border-box;
         position: relative;
         flex-shrink: 0; /* Prevent items from shrinking too much */
+        z-index: 10; /* Base z-index for nav items */
+
+        &:hover {
+            z-index: 100; /* Higher z-index when hovered to ensure dropdown visibility */
+        }
 
         a,
         span {
@@ -132,9 +141,11 @@
                 opacity: 0;
                 background: rgba(var(--primary-rgb), 0.75);
                 border-radius: var(--br);
-                overflow: hidden;
+                overflow: visible;
                 margin-top: 1px;
                 clip-path: inset(0 0 0 0 round var(--br));
+                z-index: 1000; /* Ensure dropdown appears above other elements */
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Add shadow for better visibility */
 
                 li {
                     display: block;
@@ -230,9 +241,11 @@
                 opacity: 0;
                 background: rgba(var(--primary-rgb), 0.9);
                 border-radius: var(--br);
-                overflow: hidden;
+                overflow: visible;
                 margin-top: 1px;
                 clip-path: inset(0 0 0 0 round var(--br));
+                z-index: 1000; /* Ensure dropdown appears above other elements */
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Add shadow for better visibility */
 
                 li {
                     display: block;
@@ -544,7 +557,9 @@
                         background: var(--primary-color);
                         border-radius: 5px;
                         clip-path: inset(0 0 0 0 round 5px);
-                        overflow: hidden;
+                        overflow: visible;
+                        z-index: 1000; /* Ensure dropdown appears above other elements */
+                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Add shadow for better visibility */
 
                         li {
                             display: block;

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

@@ -158,18 +158,62 @@
     line-height: 1.4;
     margin-bottom: 4px;
     word-break: break-word;
+
+    /* Target all elements inside notiText to ensure proper styling */
+    * {
+        background: inherit;
+        border: none;
+        border-radius: 0;
+        padding: 0;
+        margin: 0;
+        display: inline;
+        box-shadow: none;
+        text-shadow: none;
+        white-space: normal;
+    }
 }
 
 .notiText a {
-    color: var(--primary-color);
-    font-weight: 500;
+    /* Use a darker color that will be visible against white background */
+    color: #0056b3 !important; /* Fallback if var(--primary-color) is too light */
+    font-weight: 600 !important; /* Make it slightly bolder */
     text-decoration: none;
-    transition: color 0.2s;
+    transition: all 0.2s;
+    /* Reset any potential styling that could cause elliptical borders and white text */
+    background: transparent !important;
+    border: none !important;
+    border-radius: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    display: inline !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+    white-space: normal !important;
+    /* Add subtle bottom border to indicate it's a link */
+    border-bottom: 1px dotted #0056b3 !important;
+    position: relative !important;
+}
+
+/* Add a small external link icon after links with data-is-link attribute */
+.notiText a[data-is-link='true']::after {
+    content: '↗';
+    font-size: 10px;
+    position: relative;
+    top: -5px;
+    margin-left: 2px;
+    opacity: 0.9;
+    color: #0056b3 !important; /* Match the link color */
 }
 
 .notiText a:hover {
-    color: var(--secondary-color);
-    text-decoration: underline;
+    color: #003d80 !important; /* Darker shade for hover state */
+    text-decoration: none;
+    background: transparent !important;
+    border-bottom: 1px solid #003d80 !important;
+}
+
+.notiText a:hover[data-is-link='true']::after {
+    opacity: 1;
 }
 
 .notiTime {