@visns-studio/visns-components 5.18.0 → 5.18.1

package/package.json

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

package/src/components/DataGrid.jsx

@@ -618,6 +618,32 @@ const DataGrid = forwardRef(
             };
         }, []);
 
+        // Track body.tablet-mode so we can fix rowHeight in tablet views.
+        // With rowHeight={null} Inovua measures each row's content, which is
+        // unreliable after auto-refresh on an idle tab (background-throttled
+        // rAF/timers). A fixed height in tablet-mode bypasses measurement
+        // entirely and prevents action buttons from being clipped.
+        const [isTabletMode, setIsTabletMode] = useState(() =>
+            typeof document !== 'undefined' &&
+            document.body.classList.contains('tablet-mode')
+        );
+        useEffect(() => {
+            if (typeof document === 'undefined') {
+                return undefined;
+            }
+            const sync = () =>
+                setIsTabletMode(
+                    document.body.classList.contains('tablet-mode')
+                );
+            sync();
+            const observer = new MutationObserver(sync);
+            observer.observe(document.body, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+            return () => observer.disconnect();
+        }, []);
+
         // Effect to handle autoRefresh setting
         useEffect(() => {
             if (ajaxSetting && ajaxSetting.autoRefresh !== undefined) {
@@ -1614,6 +1640,35 @@ const DataGrid = forwardRef(
                     const sortBy = id || null;
                     const sort = dir === 1 ? 'asc' : dir === -1 ? 'desc' : null;
 
+                    // Mirror sort to the URL when opted in via ajaxSetting.syncSortToUrl.
+                    // Uses replaceState so sort changes don't pollute back-button history.
+                    // Router-library-agnostic — works regardless of whether the consumer
+                    // uses react-router, next router, or vanilla history.
+                    if (prevState.ajaxSetting?.syncSortToUrl && typeof window !== 'undefined') {
+                        try {
+                            const params = new URLSearchParams(window.location.search);
+                            if (sortBy && sort) {
+                                params.set('sortBy', sortBy);
+                                params.set('sort', sort);
+                            } else {
+                                params.delete('sortBy');
+                                params.delete('sort');
+                            }
+                            const qs = params.toString();
+                            const url =
+                                window.location.pathname +
+                                (qs ? '?' + qs : '') +
+                                window.location.hash;
+                            window.history.replaceState(
+                                window.history.state,
+                                '',
+                                url
+                            );
+                        } catch (e) {
+                            // URL sync is best-effort; never block sort behaviour
+                        }
+                    }
+
                     return {
                         ...prevState,
                         ajaxSetting: {
@@ -1626,6 +1681,51 @@ const DataGrid = forwardRef(
             }
         };
 
+        /**
+         * Hydrate sort state from URL on first mount when ajaxSetting.syncSortToUrl
+         * is true. Trade-off: the initial fetch may use the default (config) sort
+         * before this effect re-fires the fetch with URL-derived sort. For typical
+         * paginated admin tables that one-extra-fetch is acceptable; the user sees
+         * a brief flash of default-sorted data, then it resorts.
+         */
+        const urlSortHydratedRef = useRef(false);
+        useEffect(() => {
+            if (
+                !ajaxSetting?.syncSortToUrl ||
+                urlSortHydratedRef.current ||
+                typeof window === 'undefined'
+            ) {
+                return;
+            }
+            urlSortHydratedRef.current = true;
+            let urlSortBy = null;
+            let urlSort = null;
+            try {
+                const params = new URLSearchParams(window.location.search);
+                urlSortBy = params.get('sortBy');
+                urlSort = params.get('sort');
+            } catch (e) {
+                return;
+            }
+            if (!urlSortBy || (urlSort !== 'asc' && urlSort !== 'desc')) return;
+            if (
+                urlSortBy === ajaxSetting.sortBy &&
+                urlSort === ajaxSetting.sort
+            ) {
+                return;
+            }
+            if (setConfig) {
+                setConfig((prev) => ({
+                    ...prev,
+                    ajaxSetting: {
+                        ...prev.ajaxSetting,
+                        sortBy: urlSortBy,
+                        sort: urlSort,
+                    },
+                }));
+            }
+        }, [ajaxSetting?.syncSortToUrl]);
+
         /**
          * DEBUG: Row Click Analysis
          *
@@ -4131,7 +4231,7 @@ const DataGrid = forwardRef(
                             }
                             headerProps={headerProps}
                             idProperty="id"
-                            minRowHeight={32}
+                            minRowHeight={isTabletMode ? 52 : 32}
                             onFilterValueChange={(fv) => {
                                 handleFilterChange(fv, filterValue);
                             }}
@@ -4143,7 +4243,7 @@ const DataGrid = forwardRef(
                             renderRowContextMenu={renderRowContextMenu}
                             renderColumnContextMenu={renderColumnContextMenu}
                             rowClassName="vs-datagrid--row"
-                            rowHeight={null}
+                            rowHeight={isTabletMode ? 52 : null}
                             rowStyle={getRowStyle}
                             selected={selected}
                             showZebraRows={true}

package/src/components/Form.jsx

@@ -2253,6 +2253,38 @@ function Form({
         }
     }, [formSettings?.autoSubmit]);
 
+    // Auto-focus a named field on mount. Pass the field id as
+    // formSettings.autoFocus, e.g. {"autoFocus": "prefix"}. We wait one
+    // tick for the modal animation to finish so the input is actually
+    // mounted and the browser will honour focus(). Falls back to the
+    // first non-hidden text-ish input if no name match is found.
+    useEffect(() => {
+        if (!formSettings?.autoFocus) return;
+        const target = formSettings.autoFocus;
+        const timer = setTimeout(() => {
+            let el = null;
+            if (typeof target === 'string' && target) {
+                el = document.querySelector(`[name="${target}"]`);
+            }
+            if (!el) {
+                el = document.querySelector(
+                    'form input:not([type="hidden"]):not([disabled]), form textarea:not([disabled]), form select:not([disabled])'
+                );
+            }
+            if (el && typeof el.focus === 'function') {
+                el.focus();
+                if (typeof el.select === 'function') {
+                    try {
+                        el.select();
+                    } catch (e) {
+                        // some input types throw on select(); ignore
+                    }
+                }
+            }
+        }, 150);
+        return () => clearTimeout(timer);
+    }, [formSettings?.autoFocus]);
+
     useEffect(() => {
         formSettings.fields.forEach((field) => {
             // showIfEmpty: only show field when its own value is empty/null/undefined/[]

package/src/components/generic/GenericIndex.jsx

@@ -1,6 +1,6 @@
 import '../styles/global.css';
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useInsertionEffect, useRef, useState } from 'react';
 import { useParams, Outlet } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { saveAs } from 'file-saver';
@@ -245,7 +245,10 @@ function GenericIndex({
     // Toggle a body-level "tablet-mode" class when this view opts in via
     // setting.tabletMode. Lets consumer projects style the whole UI
     // (including app-level chrome) for tablet use without touching this lib.
-    useEffect(() => {
+    // useInsertionEffect fires before child useLayoutEffects, so the class
+    // lands before the DataGrid measures row heights — otherwise rows can
+    // be sized for the non-tablet CSS and clip larger tablet-mode buttons.
+    useInsertionEffect(() => {
         if (!setting?.tabletMode) {
             return undefined;
         }