@visns-studio/visns-components 6.17.0 → 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.0",
+    "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;

package/src/components/styles/global.css

@@ -247,7 +247,9 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         .variable-inserter-search-input
     ):not(.react-datepicker__month-select):not(
         .react-datepicker__year-select
-    ):not(.visns-native-date-filter__input) {
+    ):not(.visns-native-date-filter__input):not([type='date']):not(
+        [type='datetime-local']
+    ):not([type='time']) {
     background: white;
     border-radius: var(--br);
     border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
@@ -266,6 +268,36 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     }
 }
 
+/* Native date / time inputs are excluded from the padded rule above: 1rem of
+   padding inside a date control made it ~48px and, in Firefox, sat the value
+   low. They get a flat 34px control instead, matching the grid filters. */
+input[type='date'],
+input[type='datetime-local'],
+input[type='time'] {
+    box-sizing: border-box;
+    height: 34px;
+    min-height: 34px;
+    padding: 0 10px;
+    border: 1px solid rgba(var(--paragraph-color-rgb, 31, 31, 31), 0.15);
+    border-radius: var(--br, 4px);
+    background: #fff;
+    color: var(--paragraph-color, #1f1f1f);
+    font-family: inherit;
+    font-size: 0.85rem;
+    line-height: 32px;
+    font-variant-numeric: tabular-nums;
+}
+
+@-moz-document url-prefix() {
+    input[type='date'],
+    input[type='datetime-local'],
+    input[type='time'] {
+        height: 34px;
+        padding: 0 8px;
+        line-height: 32px;
+    }
+}
+
 .popup-content {
     border-radius: var(--br);
     padding: 0 !important;