@visns-studio/visns-components 6.16.1 → 6.16.3

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

package/src/components/DataGrid.jsx

@@ -3953,14 +3953,15 @@ const DataGrid = forwardRef(
                             // screens) — columns then render a few px wide
                             // with no horizontal scrollbar ever appearing.
                             // A date filter needs room for its locale mask
-                            // ("dd/mm/yyyy" + the picker glyph); below ~140px
-                            // the native input clips its own value.
+                            // ("dd / mm / yyyy" in Firefox, glyph included -
+                            // Firefox will not hide it); below ~160px the
+                            // native input clips its own value.
                             minWidth:
                                 column.minWidth ??
                                 (['date', 'datetime', 'datetime-local'].includes(
                                     column.type
                                 )
-                                    ? Math.max(grid.columnMinWidth, 140)
+                                    ? Math.max(grid.columnMinWidth, 160)
                                     : grid.columnMinWidth),
                             maxWidth: column.maxWidth ?? undefined,
                             textAlign: column.textAlign ?? undefined,

package/src/components/columns/NativeDateFilterEditor.jsx

@@ -180,6 +180,19 @@ const NativeDateInput = ({
             {...rest}
             ref={inputRef}
             type={withTime ? 'datetime-local' : 'date'}
+            // The picker glyph is hidden in the grid (it cost the year); a
+            // click anywhere in the field opens the picker instead, where the
+            // browser supports it. Typing still works.
+            onClick={(event) => {
+                if (event.currentTarget.disabled) return;
+
+                try {
+                    event.currentTarget.showPicker?.();
+                } catch (error) {
+                    // Some browsers only allow showPicker from a user gesture
+                    // in certain contexts; the field still accepts typing.
+                }
+            }}
             className="visns-native-date-filter__input"
             value={inputValue}
             disabled={disabled}

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

@@ -485,17 +485,22 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
     min-width: 0;
     height: auto;
     margin: 0;
-    padding: 0 2px 0 6px;
+    /* Fill the 32px row the theme pins the filter to, and centre the text in
+       it: Chrome lays the date segments out in an internal box that otherwise
+       sits high in a taller parent. */
+    height: 100%;
+    align-self: stretch;
+    padding: 0 4px;
     border: none;
     outline: none;
     background: none;
     color: inherit;
     font-family: inherit;
-    /* A notch under the grid's 14px: the locale mask is ten characters and
-       the default filter row is narrow. */
-    font-size: 13px;
+    /* Two notches under the grid's 14px: the locale mask is ten characters
+       plus Chrome's segment padding, and the filter row is narrow. */
+    font-size: 12px;
     letter-spacing: -0.01em;
-    line-height: 1;
+    line-height: normal;
     font-variant-numeric: tabular-nums;
     -webkit-appearance: none;
     appearance: none;
@@ -509,32 +514,15 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
     color: rgba(85, 94, 104, 0.7);
 }
 
-/* The calendar glyph IS how the picker opens on desktop — keep it, just
-   shrink it into the 32px row. */
+/* No calendar glyph in the grid: it cost the year in a narrow column, and a
+   click anywhere in the field opens the picker (showPicker) instead. */
 .visns-native-date-filter__input::-webkit-calendar-picker-indicator {
-    margin: 0;
-    padding: 0 2px;
-    opacity: 0.55;
-    cursor: pointer;
-}
-
-.visns-native-date-filter__input::-webkit-calendar-picker-indicator:hover {
-    opacity: 1;
+    display: none;
 }
 
 /* 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;
@@ -550,8 +538,21 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
 }
 
 .visns-native-date-filter__input::-moz-calendar-picker-indicator {
-    opacity: 0.55;
-    cursor: pointer;
+    display: none;
+}
+
+/* Firefox (109+) draws its calendar glyph as part of the control and ignores
+   the pseudo-element above, and it pads each date segment itself, which sat
+   the text high in the 32px row. Tighter metrics, and the column default below
+   (160px for date types) leaves the glyph its room. */
+@-moz-document url-prefix() {
+    .visns-native-date-filter__input {
+        padding: 0 0 0 2px;
+        font-size: 12px;
+        line-height: 28px;
+        height: 28px;
+        align-self: center;
+    }
 }
 
 .visns-native-date-filter__clear {