@visns-studio/visns-components 6.15.0 → 6.15.2

package/package.json

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

package/src/components/DataGrid.jsx

@@ -3145,7 +3145,7 @@ const DataGrid = forwardRef(
                                 width: '28px',
                                 height: '28px',
                                 boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
-                                margin: '0 1px',
+                                margin: 0,
                                 cursor: 'pointer',
                             }}
                         >
@@ -3194,7 +3194,7 @@ const DataGrid = forwardRef(
                                     width: '28px',
                                     height: '28px',
                                     boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
-                                    margin: '0 1px',
+                                    margin: 0,
                                     cursor: 'pointer',
                                 }}
                             >
@@ -3203,8 +3203,12 @@ const DataGrid = forwardRef(
                                     data-tooltip-content={tooltipContent}
                                     strokeWidth={2}
                                     size={18}
-                                    className={styles.tdaction}
+                                    // Not styles.tdaction: that class carries
+                                    // the action column's 16px bottom margin
+                                    // and padding, which pushed these icons
+                                    // out of line with the row.
                                     style={{
+                                        display: 'block',
                                         color: 'var(--primary-color, #4a90e2)',
                                     }}
                                 />
@@ -3292,15 +3296,17 @@ const DataGrid = forwardRef(
             return (
                 <div
                     style={{
-                        display: 'inline-flex', // Changed to inline-flex to keep icons in a single row
-                        flexWrap: 'nowrap', // Prevent wrapping
+                        // Same shape as the action column's cluster: one row,
+                        // a small even gap, centred in the cell.
+                        display: 'flex',
+                        flexWrap: 'nowrap',
                         alignItems: 'center',
-                        justifyContent: 'flex-start',
-                        gap: '1px', // Reduced gap since we have margins on the icons
-                        padding: '2px 0',
+                        justifyContent: 'center',
+                        gap: '4px',
+                        width: '100%',
+                        padding: 0,
                         minHeight: '24px',
-                        maxWidth: '100%',
-                        overflow: 'hidden', // Hide overflow if too many icons
+                        overflow: 'hidden',
                     }}
                 >
                     {icons.length > 0 ? (
@@ -3945,7 +3951,16 @@ const DataGrid = forwardRef(
                             // clamped columns exceed the container (narrow
                             // screens) — columns then render a few px wide
                             // with no horizontal scrollbar ever appearing.
-                            minWidth: column.minWidth ?? grid.columnMinWidth,
+                            // A date filter needs room for its locale mask
+                            // ("dd/mm/yyyy" + the picker glyph); below ~140px
+                            // the native input clips its own value.
+                            minWidth:
+                                column.minWidth ??
+                                (['date', 'datetime', 'datetime-local'].includes(
+                                    column.type
+                                )
+                                    ? Math.max(grid.columnMinWidth, 140)
+                                    : grid.columnMinWidth),
                             maxWidth: column.maxWidth ?? undefined,
                             textAlign: column.textAlign ?? undefined,
                             textVerticalAlign:

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

@@ -444,6 +444,8 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
 .visns-native-date-filter {
     position: relative;
     display: flex;
+    /* Lets the rules below react to the column's width, not the window's. */
+    container-type: inline-size;
     /* stretch, not center: the input has to fill the 32px the theme pins the
        filter to, or the clickable area is smaller than the box it draws. */
     align-items: stretch;
@@ -483,14 +485,18 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
     min-width: 0;
     height: auto;
     margin: 0;
-    padding: 0 2px 0 8px;
+    padding: 0 2px 0 6px;
     border: none;
     outline: none;
     background: none;
     color: inherit;
     font-family: inherit;
-    font-size: inherit;
+    /* A notch under the grid's 14px: the locale mask is ten characters and
+       the default filter row is narrow. */
+    font-size: 13px;
+    letter-spacing: -0.01em;
     line-height: 1;
+    font-variant-numeric: tabular-nums;
     -webkit-appearance: none;
     appearance: none;
 }
@@ -516,6 +522,25 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
     opacity: 1;
 }
 
+/* In a narrow column the glyph costs the last two digits of the year; the
+   field still opens the picker on click/Space, so drop the glyph first and the
+   clear button only when there is really no room. */
+@container (max-width: 128px) {
+    .visns-native-date-filter__input::-webkit-calendar-picker-indicator {
+        display: none;
+    }
+
+    .visns-native-date-filter__input {
+        padding-right: 0;
+    }
+}
+
+@container (max-width: 104px) {
+    .visns-native-date-filter__clear {
+        display: none;
+    }
+}
+
 /* Browser-supplied clear / spin affordances are replaced by our own button,
    which is consistent across engines. */
 .visns-native-date-filter__input::-webkit-clear-button,