@visns-studio/visns-components 6.15.0 → 6.15.1

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.1",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -3945,7 +3945,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,