@visns-studio/visns-components 6.23.1 → 6.24.0

package/package.json

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

package/src/components/DataGrid.jsx

@@ -43,6 +43,7 @@ import NativeDateFilterEditor from './columns/NativeDateFilterEditor';
 import SelectFilterEditor from './columns/SelectFilterEditor';
 import { toast } from 'react-toastify';
 import fetchUtil from '../utils/fetchUtil';
+import { resolveFormVariant } from '../utils/formLayout';
 import { confirmDialog } from './utils/ConfirmDialog';
 import {
     useDensity,
@@ -1431,7 +1432,14 @@ const DataGrid = forwardRef(
                     // A rowColours tint is an inline background on the row
                     // element; the class lets the stylesheet clear the zebra
                     // band that would otherwise paint over it on odd rows.
-                    findRowColour(rowProps?.data) ? styles.tintedRow : '',
+                    // The literal twin exists for global-datagrid.css, which
+                    // cannot see the hashed module class: the 2026-pass row
+                    // surface there is `!important` (it has to outrank the
+                    // vendored theme) and would beat the inline tint, so that
+                    // rule stands down on rows carrying this class.
+                    findRowColour(rowProps?.data)
+                        ? `${styles.tintedRow} vs-datagrid--row-tinted`
+                        : '',
                 ]
                     .filter(Boolean)
                     .join(' '),
@@ -6774,10 +6782,14 @@ const DataGrid = forwardRef(
                     /* A record form is the case a side sheet is for: the list
                        stays visible behind it, a long form scrolls naturally
                        instead of stretching the dialog, and the width is fixed
-                       so the fields keep one measure on every monitor. A view
-                       that genuinely wants the centred dialog sets
-                       `form.layout: "modal"`. */
-                    variant={formData.layout === 'modal' ? 'modal' : 'sheet'}
+                       so the fields keep one measure on every monitor. That is
+                       the library default, so forms land in the sheet unless
+                       something says otherwise. A whole project can flip to the
+                       centred dialog with `setDefaultFormLayout('modal')` at
+                       bootstrap, and a single view that wants the other
+                       presentation overrides it with `form.layout: "modal"` or
+                       `form.layout: "sheet"`. */
+                    variant={resolveFormVariant(formData.layout)}
                     size={formData.modalSize || 'medium'}
                 >
                     <Form

package/src/components/generic/GenericDetail.jsx

@@ -47,6 +47,7 @@ import { saveAs } from 'file-saver';
 import { toast } from 'react-toastify';
 import imageCompression from 'browser-image-compression';
 import fetchUtil from '../../utils/fetchUtil';
+import { resolveFormVariant } from '../../utils/formLayout';
 import {
     CheckCircle as CircleCheck,
     Copy,
@@ -4267,7 +4268,7 @@ function GenericDetail({
                 title={formData.title || 'Edit Details'}
                 closeOnDocumentClick={false}
                 verticalAlign={formData.verticalAlign || 'center'}
-                variant={formData.layout === 'modal' ? 'modal' : 'sheet'}
+                variant={resolveFormVariant(formData.layout)}
                 size={formData.modalSize || 'medium'}
             >
                 <Form

package/src/components/styles/global-datagrid.css

@@ -647,10 +647,23 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
 .InovuaReactDataGrid__row {
     min-height: 44px !important;
     border: 0 !important;
-    background: var(--dgx-surface) !important;
     transition: background 140ms cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
+/* The surface is on its own rule so it can stand down for a `rowColours`
+   tint. That tint arrives as an INLINE background set by rowStyle in
+   DataGrid.jsx, and inline loses to any `!important` — so painting the
+   surface `!important` on every row silently killed the priority/urgency
+   colours projects configure (tasks grids and the like). Rows with a tint
+   are marked `vs-datagrid--row-tinted` (the literal twin of the module's
+   hashed `.tintedRow`); on those rows nothing is declared here and the
+   inline tint wins over the vendored theme's non-important zebra.
+   Hover and selected below stay `!important` on every row by design —
+   they have always outranked the tint. */
+.InovuaReactDataGrid__row:not(.vs-datagrid--row-tinted) {
+    background: var(--dgx-surface) !important;
+}
+
 .InovuaReactDataGrid__row:hover,
 .InovuaReactDataGrid__row--hover-target:hover {
     background: var(--dgx-hover) !important;

package/src/index.js

@@ -14,6 +14,14 @@ import {
     SECONDARY_GRID_HEIGHT,
 } from './components/utils/useDensity';
 import { readBuildEnv, buildEnv } from './components/utils/buildEnv';
+// Project-wide default for how record CRUD forms are presented — the side
+// sheet unless an app calls setDefaultFormLayout('modal') at bootstrap. A
+// form config's own `layout` still wins.
+import {
+    setDefaultFormLayout,
+    getDefaultFormLayout,
+    resolveFormVariant,
+} from './utils/formLayout';
 
 /** CRM Components */
 import AsyncSelect from './components/AsyncSelect';
@@ -478,6 +486,7 @@ export {
     GenericQuote,
     GenericReport,
     GenericSort,
+    getDefaultFormLayout,
     GroupedReportRenderer,
     hasChallengeState,
     ImpersonateGate,
@@ -523,6 +532,7 @@ export {
     resolveAuthEndpoints,
     resolveClientPaths,
     resolveClientProtocol,
+    resolveFormVariant,
     // Passkeys (WebAuthn). Exported so a consuming app can build its own
     // enrolment screen against the same marshalling the login screen uses.
     base64UrlToBytes,
@@ -536,6 +546,7 @@ export {
     SectionTypeSelector,
     SelectList,
     Select,
+    setDefaultFormLayout,
     showConfirmDialog,
     SortableList,
     StagePopupModal,

package/src/utils/formLayout.js

@@ -0,0 +1,59 @@
+/**
+ * Project-wide default for how record CRUD forms are presented.
+ *
+ * StandardModal can draw a form either as a centred dialog (`variant="modal"`)
+ * or as a right-side slide-in sheet (`variant="sheet"`). The library ships with
+ * the sheet as its default so existing projects keep the presentation they
+ * already have. A consuming app that prefers the classic centred dialog calls
+ * `setDefaultFormLayout('modal')` once at bootstrap (before the first render)
+ * and every DataGrid / GenericDetail form follows.
+ *
+ * An individual form config still wins in both directions: set
+ * `layout: 'modal'` or `layout: 'sheet'` on the form and that form ignores the
+ * project default.
+ */
+
+/** The two presentations StandardModal understands. */
+const VALID_LAYOUTS = ['modal', 'sheet'];
+
+/** Library default — the side sheet, unless a project opts out. */
+let defaultFormLayout = 'sheet';
+
+/** Warn at most once so a bad bootstrap call is not a console flood. */
+let warnedInvalidLayout = false;
+
+/**
+ * Set the project-wide default presentation for record forms.
+ * @param {'modal'|'sheet'} layout - Presentation to use when a form config does
+ *                                   not specify its own `layout`.
+ * @returns {void} Anything other than 'modal' or 'sheet' is ignored.
+ */
+export const setDefaultFormLayout = (layout) => {
+    if (!VALID_LAYOUTS.includes(layout)) {
+        if (!warnedInvalidLayout) {
+            warnedInvalidLayout = true;
+            // eslint-disable-next-line no-console
+            console.warn(
+                `setDefaultFormLayout: expected 'modal' or 'sheet', received ${JSON.stringify(layout)}. Keeping '${defaultFormLayout}'.`
+            );
+        }
+        return;
+    }
+
+    defaultFormLayout = layout;
+};
+
+/**
+ * Read the current project-wide default.
+ * @returns {'modal'|'sheet'} The default presentation for record forms.
+ */
+export const getDefaultFormLayout = () => defaultFormLayout;
+
+/**
+ * Resolve the StandardModal variant for one form.
+ * @param {string} [layout] - The form config's own `layout`, if it has one.
+ * @returns {'modal'|'sheet'} The form's own layout when it is valid, otherwise
+ *                            the project-wide default.
+ */
+export const resolveFormVariant = (layout) =>
+    (VALID_LAYOUTS.includes(layout) ? layout : defaultFormLayout);