@visns-studio/visns-components 5.18.1 → 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.1",
+    "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

@@ -2800,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;
@@ -2951,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,
@@ -3283,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
@@ -3322,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>
                                 );
                             },
@@ -3405,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);