@visns-studio/visns-components 6.4.0 → 6.4.2

package/package.json

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

package/src/components/DataGrid.jsx

@@ -3645,7 +3645,13 @@ const DataGrid = forwardRef(
                             defaultFlex: 1,
                             sortable: sortable,
                             link: column.link ?? {},
-                            minWidth: column.minWidth ?? undefined,
+                            // Floor every column: the datagrid's flex solver
+                            // hands the last unclamped columns the leftover
+                            // width VERBATIM, which goes negative once the
+                            // clamped columns exceed the container (narrow
+                            // screens) — columns then render a few px wide
+                            // with no horizontal scrollbar ever appearing.
+                            minWidth: column.minWidth ?? 80,
                             maxWidth: column.maxWidth ?? undefined,
                             textAlign: column.textAlign ?? undefined,
                             textVerticalAlign:

package/src/components/Navigation.jsx

@@ -440,6 +440,7 @@ function Navigation({
                     // Close the mobile drawer when navigating; no-op for the
                     // header layout where the drawer state is never opened.
                     <Link to={n.url} onClick={() => setOpen(false)}>
+                        {NavItemIcon ? <NavItemIcon size={18} /> : null}
                         {n.label}
                     </Link>
                 ) : (
@@ -733,6 +734,14 @@ function Navigation({
                     </nav>
                 </div>
             </aside>
+            {isOpen ? (
+                <button
+                    type="button"
+                    className={styles['drawer-backdrop']}
+                    aria-label="Close menu"
+                    onClick={() => setOpen(false)}
+                />
+            ) : null}
             <main className={styles.content}>
                 <div className={styles['content-header']}>
                     {navConfig.search?.enable === true && (

package/src/components/TableFilter.jsx

@@ -13,6 +13,7 @@ function TableFilter({
     const [visibleChildren, setVisibleChildren] = useState({});
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
     const isFirstRender = useRef(true);
+    const listRef = useRef(null);
 
     // Initialize visible children for all parent categories and set checkbox function availability
     useEffect(() => {
@@ -500,6 +501,10 @@ function TableFilter({
         setMobileMenuOpen(false);
     };
 
+    // `data-active` below marks the selected top-level item. It is what the
+    // mobile tab strip scrolls into view on mount; `filterTable` destructures
+    // only the dataset keys it names, so the extra attribute is inert to the
+    // click handling and to every existing consumer.
     const renderContent = (d) => {
         // Determine if this is a parent category
         const isParent = d.isParent === true;
@@ -519,6 +524,7 @@ function TableFilter({
                         data-filtertype="parent"
                         data-url={d.url || ''}
                         data-value={d.hasOwnProperty('value') ? d.value : ''}
+                        data-active={d.show === true ? 'true' : undefined}
                         onClick={filterTable}
                     >
                         {d.label}
@@ -534,6 +540,7 @@ function TableFilter({
                         data-filtertype="parent"
                         data-url={d.url || ''}
                         data-value={d.hasOwnProperty('value') ? d.value : ''}
+                        data-active={d.show === true ? 'true' : undefined}
                         onClick={filterTable}
                         className={parentClass}
                     >
@@ -616,21 +623,68 @@ function TableFilter({
 
     const activeLabel = activeFilter ? activeFilter.label : 'Select Option';
 
+    // A rail whose items are a flat list of tabs renders on narrow viewports as
+    // a single-row strip that pans with a thumb, instead of collapsing behind a
+    // hamburger of its own — the app shell already owns one, and the collapse
+    // cost two taps per switch. A rail with expandable parents keeps the
+    // collapse: a nested submenu has no single row to pan.
+    //
+    // Nothing here runs above the strip's breakpoint (759px, below): the class
+    // is only styled inside that media query, and `.mobileToggle` is
+    // `display: none` at every width above it, so leaving it out of the tree
+    // for a flat rail is invisible on desktop and tablet.
+    const isFlatStrip = !(filters || []).some(
+        (filter) =>
+            filter &&
+            filter.isParent === true &&
+            Array.isArray(filter.children) &&
+            filter.children.length > 0
+    );
+
+    const activeId = activeFilter ? activeFilter.id : null;
+
+    // Bring the selected tab into view when the strip is wider than its box.
+    // Guarded on overflow so this never scrolls anything at widths where the
+    // rail is a plain vertical list.
+    useEffect(() => {
+        if (!isFlatStrip) return;
+
+        const list = listRef.current;
+
+        if (!list || typeof list.querySelector !== 'function') return;
+        if (list.scrollWidth <= list.clientWidth) return;
+
+        const active = list.querySelector('[data-active="true"]');
+
+        if (active && typeof active.scrollIntoView === 'function') {
+            active.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        }
+    }, [isFlatStrip, activeId]);
+
     return (
-        <div className={styles.tableFilterContainer}>
-            <div className={styles.mobileToggle} onClick={toggleMobileMenu}>
-                <span className={styles.activeFilterLabel}>{activeLabel}</span>
-                <span
-                    className={`${styles.mobileMenuIcon} ${
-                        mobileMenuOpen ? styles.open : ''
-                    }`}
-                >
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                </span>
-            </div>
+        <div
+            className={`${styles.tableFilterContainer} ${
+                isFlatStrip ? styles.flatFilter : ''
+            }`}
+        >
+            {!isFlatStrip && (
+                <div className={styles.mobileToggle} onClick={toggleMobileMenu}>
+                    <span className={styles.activeFilterLabel}>
+                        {activeLabel}
+                    </span>
+                    <span
+                        className={`${styles.mobileMenuIcon} ${
+                            mobileMenuOpen ? styles.open : ''
+                        }`}
+                    >
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </span>
+                </div>
+            )}
             <ul
+                ref={listRef}
                 className={`${styles.tableFilter} ${
                     mobileMenuOpen ? styles.mobileOpen : ''
                 }`}

package/src/components/columns/ColumnRenderers.jsx

@@ -282,8 +282,10 @@ export const renderDateColumn = ({
         name: column.id,
         filterEditor: filterEditor,
         filterEditorProps: filterEditorProps,
-        defaultWidth: 120, // Set default width for date columns
-        minWidth: 120, // Set minimum width for date columns
+        // Config-first: these sit after the commonProps spread, so a literal
+        // here silently discards an explicit column.minWidth from the app.
+        defaultWidth: column.defaultWidth ?? 120,
+        minWidth: column.minWidth ?? 120,
         render: ({ data }) => {
             if (
                 data &&
@@ -343,8 +345,9 @@ export const renderDateTimeColumn = ({
         name: column.id,
         filterEditor: filterEditor,
         filterEditorProps: filterEditorProps,
-        defaultWidth: 160, // Set default width for datetime columns
-        minWidth: 160, // Set minimum width for datetime columns
+        // Config-first — see renderDateColumn.
+        defaultWidth: column.defaultWidth ?? 160,
+        minWidth: column.minWidth ?? 160,
         render: ({ data }) => {
             if (
                 data &&
@@ -2530,8 +2533,9 @@ export const renderDateRangeColumn = ({
         name: `${column.id[0]}.${column.id[1]}.`,
         filterEditor: filterEditor,
         filterEditorProps: filterEditorProps,
-        defaultWidth: 200, // Set default width for daterange columns
-        minWidth: 200, // Set minimum width for daterange columns
+        // Config-first — see renderDateColumn.
+        defaultWidth: column.defaultWidth ?? 200,
+        minWidth: column.minWidth ?? 200,
         render: ({ data }) => {
             let value = '';
 

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

@@ -952,6 +952,12 @@
     }
 }
 
+/* Rendered only while the mobile drawer is open; the phone block below
+   displays it. Desktop never opens the drawer, but the guard costs nothing. */
+.drawer-backdrop {
+    display: none;
+}
+
 @media (max-width: 1024px) {
     .hwrap {
         grid-template-columns: auto 1fr auto;
@@ -970,7 +976,10 @@
     }
 
     .aside--cms {
-        width: 100%;
+        /* A panel, not a full-screen sheet: the page stays visible behind
+           the backdrop, which gives tap-outside-to-close and stops a short
+           nav list reading as a vast empty void. */
+        width: min(84vw, 320px);
         /* The content header is sticky at z-index 995, so the drawer sits
            below it: start the drawer under the 50px header instead of
            letting the header paint over the drawer's top row. This also
@@ -981,12 +990,45 @@
         transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
         will-change: transform;
         z-index: 600;
+        box-shadow: 24px 0 48px rgba(0, 0, 0, 0.35);
 
         /* The header already anchors the screen; the drawer's own logo
            plate would render as a second 50px brand row. */
         .logo {
             display: none;
         }
+
+        /* Phone-sized touch targets: the desktop rail's compact rows are
+           finger-hostile at arm's length on site. */
+        .app-nav .nav-item {
+            padding: 0.2rem 0.65rem;
+
+            a {
+                padding: 0.85rem 1rem;
+                font-size: 1rem;
+                line-height: 1.3;
+            }
+
+            svg {
+                width: 20px;
+                height: 20px;
+            }
+        }
+    }
+
+    .drawer-backdrop {
+        display: block;
+        position: fixed;
+        top: 50px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.45);
+        border: none;
+        margin: 0;
+        padding: 0;
+        appearance: none;
+        z-index: 599;
     }
 
     .aside--cms--open {

package/src/components/styles/TableFilter.module.scss

@@ -298,4 +298,104 @@
     .collapsibleMenu {
         border-left: none;
     }
+
+    /* ---------------------------------------------------------------------
+       Flat rails: a one-row tab strip instead of the hamburger.
+
+       `.flatFilter` is set by TableFilter on any rail whose items have no
+       expandable children, and exists only inside this media query — above
+       759px the class matches nothing and the rail is byte-for-byte the
+       vertical list it has always been.
+
+       The strip pans horizontally with a thumb and marks the selection with a
+       3px accent edge rather than the full brand fill: on a phone the fill was
+       a solid band the width of the screen, which read as a header rather than
+       as one tab out of several.
+
+       These selectors are deliberately longer than the ones they override —
+       `.subactive` and `.activetab button` carry `!important`, so only a more
+       specific `!important` can take the fill back off. --------------------- */
+
+    .flatFilter .tableFilter,
+    .flatFilter .tableFilter.mobileOpen {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: stretch;
+        gap: var(--spacing-xs, 0.25rem);
+        max-height: none;
+        overflow-x: auto;
+        overflow-y: hidden;
+        /* Momentum panning on iOS. */
+        -webkit-overflow-scrolling: touch;
+        /* The scrollbar is noise on a two-tab strip; the overflowing tab is
+           the affordance. */
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        /* The dropdown drew itself a card. A strip sits on the panel it is
+           already inside. */
+        padding: 0;
+        border: none;
+        border-radius: 0;
+        margin-bottom: 0;
+        /* No baseline rule under the row: every surface this rail sits on
+           (`.grid__subnav` in Profile, GenericIndex and GenericDetail) already
+           draws its own border a few pixels below, and a second hairline
+           alongside it read as a mistake. The 3px edge under the selected tab
+           is the whole marker. */
+        box-shadow: none;
+    }
+
+    .flatFilter .tableFilter::-webkit-scrollbar {
+        display: none;
+    }
+
+    .flatFilter .tableFilter > li {
+        flex: 0 0 auto;
+        margin: 0;
+        border-bottom: none;
+    }
+
+    /* Inactive tabs are muted labels, not tinted blocks. `white-space: nowrap`
+       is what keeps the row one row: without it a two-word tab wraps and the
+       strip grows a second line instead of overflowing. */
+    .flatFilter .tableFilter > li > .link,
+    .flatFilter .tableFilter > li > .parentLink,
+    .flatFilter .tableFilter > li > button {
+        display: block;
+        white-space: nowrap;
+        padding: 0.75rem var(--spacing-md, 1rem);
+        border: none;
+        border-bottom: 3px solid transparent;
+        border-radius: 0;
+        background: none !important;
+        color: var(--paragraph-color, #6b7280) !important;
+        font-size: var(--font-size-sm, 0.8125rem);
+        font-weight: var(--font-weight-medium, 500);
+        cursor: pointer;
+    }
+
+    /* The selected tab. `--primary-color` first because it is what the rail
+       already fills the active item with everywhere else; `--accent-color`
+       covers apps that only declare that one, and the literal keeps the edge
+       visible in an app that declares neither. */
+    .flatFilter .tableFilter > li > .subactive,
+    .flatFilter .tableFilter > li.activetab > button {
+        background: none !important;
+        color: var(--heading-color, #111) !important;
+        font-weight: var(--font-weight-semibold, 600);
+        border-bottom-color: var(
+            --primary-color,
+            var(--accent-color, #0076c0)
+        );
+    }
+
+    /* Touch devices keep :hover stuck on the last tap, which on the old rule
+       tinted whichever tab was tapped last and made it compete with the
+       selected one. */
+    .flatFilter .tableFilter > li > .link:hover,
+    .flatFilter .tableFilter > li > .parentLink:hover,
+    .flatFilter .tableFilter > li > button:hover {
+        background: none !important;
+        color: var(--heading-color, #111) !important;
+    }
 }