@visns-studio/visns-components 5.16.3 → 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.16.3",
+    "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) {
@@ -921,6 +947,36 @@ const DataGrid = forwardRef(
             [selected, ajaxSetting]
         );
 
+        const isGroupPartiallySelected = useCallback(
+            (groupValue) => {
+                if (!dataRef.current || !ajaxSetting?.groupBy) {
+                    return false;
+                }
+
+                const groupField = ajaxSetting.groupBy[0];
+                const validRows = dataRef.current.filter(
+                    (row) =>
+                        row &&
+                        row[groupField] === groupValue &&
+                        row.id !== undefined &&
+                        row.id !== null
+                );
+
+                if (validRows.length === 0) {
+                    return false;
+                }
+
+                const selectedCount = validRows.filter(
+                    (row) =>
+                        selected[row.id] &&
+                        !selected[row.id].__group
+                ).length;
+
+                return selectedCount > 0 && selectedCount < validRows.length;
+            },
+            [selected, ajaxSetting]
+        );
+
         const findUpdatedFilter = (filters, currentValues) => {
             for (const filter of filters) {
                 const matchingCurrentValue = currentValues.find(
@@ -1398,11 +1454,21 @@ const DataGrid = forwardRef(
             // Check if all show conditions are met
             return iconConfig.show.every((condition) => {
                 const { id, value } = condition;
+                const hasValueProp = condition.hasOwnProperty('value');
 
                 // Check if any row in the group matches the condition
                 return groupRows.some((row) => {
                     const rowValue = row[id];
 
+                    // No value prop → field must be truthy (set/non-empty)
+                    if (!hasValueProp) {
+                        return (
+                            rowValue !== null &&
+                            rowValue !== undefined &&
+                            rowValue !== ''
+                        );
+                    }
+
                     // Handle null value condition
                     if (value === null) {
                         return (
@@ -1574,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: {
@@ -1586,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
          *
@@ -3532,6 +3672,7 @@ const DataGrid = forwardRef(
 
                 {/* DataGrid container with its own border */}
                 <div className={styles.dataGridContainer}>
+
                     {limit && limit > 0 ? (
                         <ReactDataGrid
                             key={`datagrid-${ajaxSetting?.url || ''}-${
@@ -3754,6 +3895,37 @@ const DataGrid = forwardRef(
                                                           styles.groupActionContainer
                                                       }
                                                   >
+                                                      {tableSetting?.checkboxColumn && (
+                                                          <input
+                                                              type="checkbox"
+                                                              className={
+                                                                  styles.groupHeaderCheckbox
+                                                              }
+                                                              checked={isGroupSelected(
+                                                                  groupValue
+                                                              )}
+                                                              ref={(el) => {
+                                                                  if (el) {
+                                                                      el.indeterminate =
+                                                                          isGroupPartiallySelected(
+                                                                              groupValue
+                                                                          );
+                                                                  }
+                                                              }}
+                                                              onClick={(e) =>
+                                                                  e.stopPropagation()
+                                                              }
+                                                              onChange={(e) => {
+                                                                  e.stopPropagation();
+                                                                  handleGroupSelectionChange(
+                                                                      groupValue,
+                                                                      e.target
+                                                                          .checked
+                                                                  );
+                                                              }}
+                                                              aria-label="Select all items in this group"
+                                                          />
+                                                      )}
                                                       <button
                                                           className={`group-expand-btn ${styles.groupExpandBtn}`}
                                                           onClick={(e) => {
@@ -4059,7 +4231,7 @@ const DataGrid = forwardRef(
                             }
                             headerProps={headerProps}
                             idProperty="id"
-                            minRowHeight={32}
+                            minRowHeight={isTabletMode ? 52 : 32}
                             onFilterValueChange={(fv) => {
                                 handleFilterChange(fv, filterValue);
                             }}
@@ -4071,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

@@ -2229,6 +2229,62 @@ function Form({
         }
     }, [tableData.dataSource]);
 
+    // Auto-submit on mount when formSettings.autoSubmit is true.
+    // Used for "report" tabs that should show their results immediately instead of
+    // requiring the user to click "View Report" with an empty filter form.
+    // We trigger an actual click on the rendered Save button so the path is
+    // identical to the user clicking it manually.
+    const autoSubmittedRef = useRef(false);
+    useEffect(() => {
+        if (formSettings?.autoSubmit && !autoSubmittedRef.current) {
+            autoSubmittedRef.current = true;
+            const timer = setTimeout(() => {
+                const saveBtn = document.querySelector('[data-type="save"]');
+                if (saveBtn) {
+                    saveBtn.click();
+                } else {
+                    handleSubmit({
+                        preventDefault: () => {},
+                        target: { dataset: { type: 'save' } },
+                    });
+                }
+            }, 150);
+            return () => clearTimeout(timer);
+        }
+    }, [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';
@@ -241,6 +241,23 @@ function GenericIndex({
     const [customActionFormData, setCustomActionFormData] = useState({});
     const [customActionConfig, setCustomActionConfig] = useState(null);
     const { windowHeight, windowWidth } = useWindowDimensions();
+
+    // 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.
+    // 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;
+        }
+        document.body.classList.add('tablet-mode');
+        return () => {
+            document.body.classList.remove('tablet-mode');
+        };
+    }, [setting?.tabletMode]);
+
     const { config, setConfig, subnav, setSubnav } = useConfig(
         setting,
         setting.tabs,

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

@@ -879,6 +879,21 @@
     position: relative;
 }
 
+.groupHeaderCheckbox {
+    width: 22px;
+    height: 22px;
+    margin-right: 12px;
+    cursor: pointer;
+    accent-color: var(--primary-color, #3b82f6);
+    flex-shrink: 0;
+    border-radius: 4px;
+    transition: transform 0.15s ease;
+
+    &:hover {
+        transform: scale(1.08);
+    }
+}
+
 .groupExpandBtn {
     background: var(--primary-color, #3b82f6);
     border: none;
@@ -1200,3 +1215,5 @@
         transform: scale(1.2);
     }
 }
+
+