@visns-studio/visns-components 6.3.13 → 6.3.15

package/package.json

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

package/src/components/Field.jsx

@@ -2603,6 +2603,8 @@ function Field({
                                 <textarea
                                     value={cell[cellKey] || ''}
                                     data-id={settings.id}
+                                    rows={3}
+                                    className={styles.autoGrowCellTextarea}
                                     onChange={(e) =>
                                         onChangeTableRadio(e, rowKey, cellKey)
                                     }
@@ -2801,6 +2803,8 @@ function Field({
                                 <textarea
                                     value={cell || ''}
                                     data-id={settings.id}
+                                    rows={3}
+                                    className={styles.autoGrowCellTextarea}
                                     onChange={(e) =>
                                         onChangeTableText(e, rowKey, cellKey)
                                     }
@@ -2947,7 +2951,7 @@ function Field({
                         <textarea
                             ref={variableTextareaRef}
                             data-name={settings.id}
-                            className={inputClass[settings.id]}
+                            className={`${inputClass[settings.id] || ''} ${styles.autoGrowTextarea}`.trim()}
                             onChange={onChange}
                             value={
                                 inputValue && inputValue !== 'null'

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

@@ -83,15 +83,17 @@
     }
 }
 
-// A `rowColours` tint arrives as an inline background on the ROW element,
-// but the banding above paints the cell-wrap CHILD, which sits on top — so
-// on odd rows the stripe swallowed the tint and only even rows showed their
-// urgency colour. A tinted row (marked by rowClassName in DataGrid.jsx)
-// clears its cell-wrap so the row's own colour reads on every row. Must
-// stay AFTER the banding rule: same specificity, order decides. Hover is
-// unaffected — its background is `!important` on the hover target.
+// A `rowColours` tint arrives as an inline background on the ROW element.
+// The grid's base.css gives the cell-wrap `background: inherit`, which is
+// how the tint normally reaches the eye — but the banding above replaces
+// that with the alternate colour, so on odd rows the stripe swallowed the
+// tint. A tinted row (marked by rowClassName in DataGrid.jsx) restores
+// `inherit` — NOT `transparent`, which would break the inheritance chain
+// the tint travels through. Must stay AFTER the banding rule: same
+// specificity, order decides. Hover is unaffected — its background is
+// `!important` on the hover target.
 .tintedRow :global(.InovuaReactDataGrid__row-cell-wrap) {
-    background: transparent;
+    background: inherit;
 }
 
 .InovuaReactDataGrid__row-hover-target:hover {

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

@@ -1764,3 +1764,38 @@ input[type='file']:hover {
         color: var(--danger-color, #dc3545);
     }
 }
+
+/* =========================================================================
+   Auto-growing note/comment textareas
+
+   A fixed `rows` box turns a long note log into a porthole: the reader
+   scrolls a few lines at a time inside a form that has plenty of room.
+   Where the browser supports it (field-sizing), the box sizes itself to
+   its content so a note history reads top to bottom with the page's own
+   scroll; the `rows` attribute stays as the fallback everywhere else.
+   `resize: vertical` keeps a drag handle in both worlds, so a reviewer
+   can pull the box taller regardless of support.
+
+   Two minimums: a standalone Notes/Comments field opens at roughly its
+   old 8-row size so an empty form doesn't collapse to a slit; a
+   table-cell textarea starts near its 3-row fallback so checklist rows
+   stay compact until they have content.
+   ========================================================================= */
+
+.autoGrowTextarea {
+    resize: vertical;
+
+    @supports (field-sizing: content) {
+        field-sizing: content;
+        min-height: 8lh;
+    }
+}
+
+.autoGrowCellTextarea {
+    resize: vertical;
+
+    @supports (field-sizing: content) {
+        field-sizing: content;
+        min-height: 3lh;
+    }
+}