@visns-studio/visns-components 5.18.0 → 5.19.0

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.19.0",
     "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
          *
@@ -2700,6 +2800,27 @@ const DataGrid = forwardRef(
                         return { ...acc, ...result };
                     }, {});
 
+                    // Settings that an 'action' column renders inline render there
+                    // instead of the trailing Action column (avoids duplication).
+                    const actionColumnSettingIds = new Set(
+                        (columns || [])
+                            .filter(
+                                (c) =>
+                                    c.type === 'action' &&
+                                    Array.isArray(c.settings)
+                            )
+                            .flatMap((c) => c.settings)
+                    );
+
+                    // Width to fit N action icons: tablet-mode icons have a larger
+                    // tap target/margin (~44px) than the default (~34px), plus cell
+                    // padding. Used by both action columns and the trailing column.
+                    const actionColumnWidthFor = (count) =>
+                        Math.max(
+                            100,
+                            count * (isTabletMode ? 44 : 34) + 16
+                        );
+
                     const renderColumn = (column) => {
                         let childValue;
                         let columnId;
@@ -2851,6 +2972,37 @@ const DataGrid = forwardRef(
                         }
 
                         switch (column.type) {
+                            case 'action': {
+                                const actionSettings = (column.settings || [])
+                                    .map((id) =>
+                                        memoizedSettings.find(
+                                            (s) => s.id === id
+                                        )
+                                    )
+                                    .filter(Boolean);
+                                const width = actionColumnWidthFor(
+                                    actionSettings.length
+                                );
+                                return {
+                                    ...commonProps,
+                                    name: Array.isArray(column.id)
+                                        ? column.id.join('_')
+                                        : column.id,
+                                    header: column.label ?? '',
+                                    sortable: false,
+                                    defaultFlex: undefined,
+                                    defaultWidth: width,
+                                    minWidth: width,
+                                    textAlign: 'center',
+                                    render: ({ data }) => (
+                                        <div className={styles.tdactions}>
+                                            {actionSettings.map((setting) =>
+                                                renderSetting(setting, data)
+                                            )}
+                                        </div>
+                                    ),
+                                };
+                            }
                             case 'address':
                                 return renderAddressColumn({
                                     column,
@@ -3183,37 +3335,42 @@ const DataGrid = forwardRef(
 
                     const newColumns = columns.map(renderColumn);
 
-                    // Function to check if any settings would be visible for any row
-                    const hasVisibleSettings = () => {
-                        if (memoizedSettings.length === 0) return false;
-
-                        // Check if any setting would be visible based on role permissions
-                        return memoizedSettings.some((setting) => {
-                            // Check role-based permissions
+                    // Count settings that could render in the trailing Action
+                    // column: role-permitted AND not claimed by an 'action' column.
+                    // Per-row conditions (active/condition/hide) may hide more at
+                    // runtime, but the column must fit the maximum case.
+                    const trailingSettings = memoizedSettings.filter(
+                        (setting) => {
+                            if (actionColumnSettingIds.has(setting.id)) {
+                                return false;
+                            }
                             if (
                                 setting.roles &&
                                 Array.isArray(setting.roles) &&
                                 setting.roles.length > 0
                             ) {
-                                const hasRequiredRole = setting.roles.some(
-                                    (requiredRole) =>
-                                        userProfile?.roles?.some(
-                                            (userRole) =>
-                                                userRole.name === requiredRole
-                                        )
+                                return setting.roles.some((requiredRole) =>
+                                    userProfile?.roles?.some(
+                                        (userRole) =>
+                                            userRole.name === requiredRole
+                                    )
                                 );
-                                return hasRequiredRole;
                             }
                             // If no roles specified, setting is visible
                             return true;
-                        });
-                    };
+                        }
+                    );
+
+                    if (trailingSettings.length > 0) {
+                        const actionColumnWidth = actionColumnWidthFor(
+                            trailingSettings.length
+                        );
 
-                    if (hasVisibleSettings()) {
                         newColumns.push({
                             name: 'setting',
                             header: 'Action',
-                            defaultWidth: 100,
+                            defaultWidth: actionColumnWidth,
+                            minWidth: actionColumnWidth,
                             textAlign: 'center',
                             textVerticalAlign:
                                 style && style.text_vertical_align
@@ -3222,9 +3379,16 @@ const DataGrid = forwardRef(
                             render: ({ data }) => {
                                 return (
                                     <div className={styles.tdactions}>
-                                        {memoizedSettings.map((setting) =>
-                                            renderSetting(setting, data)
-                                        )}
+                                        {memoizedSettings
+                                            .filter(
+                                                (setting) =>
+                                                    !actionColumnSettingIds.has(
+                                                        setting.id
+                                                    )
+                                            )
+                                            .map((setting) =>
+                                                renderSetting(setting, data)
+                                            )}
                                     </div>
                                 );
                             },
@@ -3305,7 +3469,7 @@ const DataGrid = forwardRef(
                 .catch((error) => {
                     console.error('Error in fetching dropdown data: ', error);
                 });
-        }, [columns, filterDataSource, memoizedSettings]);
+        }, [columns, filterDataSource, memoizedSettings, isTabletMode]);
 
         // Force re-render when filterDataSource updates to ensure dropdown filters get their data
         const [renderKey, setRenderKey] = useState(0);
@@ -4131,7 +4295,7 @@ const DataGrid = forwardRef(
                             }
                             headerProps={headerProps}
                             idProperty="id"
-                            minRowHeight={32}
+                            minRowHeight={isTabletMode ? 52 : 32}
                             onFilterValueChange={(fv) => {
                                 handleFilterChange(fv, filterValue);
                             }}
@@ -4143,7 +4307,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;
         }