@visns-studio/visns-components 6.17.1 → 6.17.2

package/package.json

@@ -95,7 +95,7 @@
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.17.1",
+    "version": "6.17.2",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/Navigation.jsx

@@ -30,7 +30,7 @@ import CustomFetch from './Fetch';
 import Notification from './Notification';
 import SwitchAccount from './SwitchAccount';
 import BusinessCardOcr from './BusinessCardOcr';
-import { isNavActive } from './navActive';
+import { isNavActive, bestMatchingUrl, cleanUrl } from './navActive';
 import styles from './styles/Navigation.module.scss';
 
 // Opt-in icons for the sidebar (simple/cms) layouts: a nav entry names one
@@ -598,7 +598,11 @@ function Navigation({
                                         <Link
                                             to={child.url}
                                             className={
-                                                isNavActive(child.url, [], currentPage)
+                                                cleanUrl(child.url) ===
+                                                bestMatchingUrl(
+                                                    n.children.map((one) => one.url),
+                                                    currentPage
+                                                )
                                                     ? styles.active
                                                     : ''
                                             }

package/src/components/navActive.js

@@ -57,4 +57,29 @@ export function isNavActive(navUrl, childUrls, currentUrl) {
     return (childUrls || []).some((child) => covers(cleanUrl(child), current));
 }
 
+
+/**
+ * Which ONE of a set of sibling urls is the current page's best match: the
+ * longest url that covers it. `/reports` and `/reports/prebuilt` both cover
+ * `/reports/prebuilt`; only the second is the page you are on.
+ *
+ * @param {string[]} urls       sibling urls (dropdown children).
+ * @param {string} currentUrl   the path being viewed.
+ * @returns {string|null} the cleaned winning url, or null when none covers it.
+ */
+export function bestMatchingUrl(urls, currentUrl) {
+    const current = cleanUrl(currentUrl) || '/';
+    let best = null;
+
+    (urls || []).forEach((url) => {
+        const base = cleanUrl(url);
+
+        if (!base || base === '/') return;
+        if (!covers(base, current)) return;
+        if (best === null || base.length > best.length) best = base;
+    });
+
+    return best;
+}
+
 export default isNavActive;