@visns-studio/visns-components 5.16.2 → 5.18.0

package/package.json

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

package/src/components/DataGrid.jsx

@@ -921,6 +921,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(
@@ -1275,6 +1305,11 @@ const DataGrid = forwardRef(
                 case 'update':
                     modalOpen('update', d.id);
                     break;
+                case 'navigate':
+                    if (s.url && s.key && d[s.key] != null) {
+                        navigate(`${s.url}${d[s.key]}`);
+                    }
+                    break;
                 default:
                     confirmDialog({
                         title: s.title,
@@ -1393,11 +1428,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 (
@@ -2533,6 +2578,8 @@ const DataGrid = forwardRef(
                         return getIconComponent(RotateCcw);
                     case 'update':
                         return getIconComponent(Edit);
+                    case 'navigate':
+                        return getIconComponent(Inbox);
                     case 'romComplete':
                         return getIconComponent(CheckCircle);
                     default:
@@ -3525,6 +3572,7 @@ const DataGrid = forwardRef(
 
                 {/* DataGrid container with its own border */}
                 <div className={styles.dataGridContainer}>
+
                     {limit && limit > 0 ? (
                         <ReactDataGrid
                             key={`datagrid-${ajaxSetting?.url || ''}-${
@@ -3747,6 +3795,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) => {

package/src/components/Form.jsx

@@ -2229,6 +2229,30 @@ 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]);
+
     useEffect(() => {
         formSettings.fields.forEach((field) => {
             // showIfEmpty: only show field when its own value is empty/null/undefined/[]

package/src/components/generic/GenericIndex.jsx

@@ -241,6 +241,20 @@ 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.
+    useEffect(() => {
+        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);
     }
 }
+
+