@visns-studio/visns-components 6.31.0 → 6.31.1

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

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

@@ -766,6 +766,8 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
 
 /* -- column filter row ---------------------------------------------------- */
 
+/* Native controls in the filter row (the <select> filters, and any bare
+   <input> that is not one of the toolkit's composite fields below). */
 .InovuaReactDataGrid__column-header__filter input,
 .InovuaReactDataGrid__column-header__filter select {
     height: 28px !important;
@@ -778,18 +780,130 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
     font-size: 0.75rem !important;
 }
 
-/* The toolkit WRAPPER around that input drew its own box too: a 1px #cdcecd
-   border at 1px radius, with the styled 6px-radius input sitting inside it.
-   Two nested borders a pixel apart, which is what made the filter row read as
-   one enormous raw text box spanning the column rather than as a filter.
-   
-   Only the input keeps an edge. The wrapper is a layout box. */
+/* TEXT and NUMERIC filters are composite fields: the toolkit renders a
+   wrapper holding the <input> AND, once there is a value, a clear cross (and
+   for numbers a pair of spin arrows) as siblings of it. An earlier version of
+   this file put the edge on the <input> and stripped the wrapper, which
+   looked right only while the field was empty — the moment a value went in,
+   the cross appeared OUTSIDE the bordered box, floating beside a shrunken
+   input.
+
+   So they are built the same way as the combo box below: the wrapper is the
+   28px bordered field, and everything inside it — input, cross, arrows — is
+   borderless furniture laid out along its 26px content box. */
 .InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-text-input,
 .InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-numeric-input {
+    display: inline-flex !important;
+    align-items: center !important;
+    height: 28px !important;
+    min-height: 28px !important;
+    max-height: 28px !important;
+    padding: 0 !important;
+    border: 1px solid var(--dgx-line) !important;
+    border-radius: 6px !important;
+    background: var(--dgx-surface) !important;
+    box-shadow: none !important;
+    overflow: hidden !important;
+    transition:
+        border-color 0.15s ease,
+        box-shadow 0.15s ease !important;
+}
+
+/* Same focus treatment as the native date filter beside it. */
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-text-input--focused,
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-numeric-input--focused {
+    border-color: #7986cb !important;
+    box-shadow: 0 0 0 2px rgba(121, 134, 203, 0.4) !important;
+}
+
+/* The inner <input> gives up the edge the generic rule above hands every
+   filter input: it is the typing area of the field, not a field of its own. */
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-text-input
+    .inovua-react-toolkit-text-input__input,
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-numeric-input
+    .inovua-react-toolkit-numeric-input__input {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+    height: 100% !important;
+    min-height: 0 !important;
+    margin: 0 !important;
+    padding: 0 0.5rem !important;
     border: 0 !important;
     border-radius: 0 !important;
     background: none !important;
     box-shadow: none !important;
+    outline: none !important;
+}
+
+/* The numeric wrapper wraps its input in one more box; let it fill. */
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-numeric-input
+    .inovua-react-toolkit-numeric-input__number-input {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+    height: 100% !important;
+}
+
+/* The clear cross: a fixed-width tool at the trailing edge, inside the box.
+   The vendored `flex: 1` would have let it grow to half the field. */
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-text-input
+    .inovua-react-toolkit-text-input__clear-button-wrapper,
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-numeric-input
+    .inovua-react-toolkit-numeric-input__clear-button-wrapper {
+    flex: 0 0 auto !important;
+    display: flex !important;
+    align-items: center !important;
+    height: 100% !important;
+    margin: 0 !important;
+}
+
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-text-input
+    .inovua-react-toolkit-text-input__clear-button,
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-numeric-input
+    .inovua-react-toolkit-numeric-input__clear-button {
+    flex: 0 0 auto !important;
+    width: 22px !important;
+    height: 100% !important;
+    margin: 0 2px 0 0 !important;
+    padding: 0 !important;
+    stroke: var(--dgx-muted) !important;
+    border-radius: 4px !important;
+}
+
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-text-input
+    .inovua-react-toolkit-text-input__clear-button:hover,
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-numeric-input
+    .inovua-react-toolkit-numeric-input__clear-button:hover {
+    stroke: var(--dgx-ink) !important;
+    background: var(--dgx-hover) !important;
+}
+
+/* The number spinner: the vendored 30px column overflowed the 26px content
+   box and its arrows were painted outside the field. Pin it to the field's
+   height, at the trailing edge, and let the hidden variant take no room. */
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-numeric-input
+    .inovua-react-toolkit-numeric-input__spinner-wrapper {
+    flex: 0 0 auto !important;
+    width: 18px !important;
+    height: 100% !important;
+    min-height: 0 !important;
+    margin: 0 !important;
+    fill: var(--dgx-muted) !important;
+}
+
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-numeric-input
+    .inovua-react-toolkit-numeric-input__spinner-wrapper-hidden {
+    display: none !important;
+}
+
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-numeric-input
+    .inovua-react-toolkit-numeric-input__spinner-arrow {
+    padding: 0 3px !important;
+}
+
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-numeric-input
+    .inovua-react-toolkit-numeric-input__spinner-arrow:hover {
+    fill: var(--dgx-ink) !important;
+    background: var(--dgx-hover) !important;
 }
 
 /* A COMBO BOX is built the other way round, and it matters.

package/src/components/styles/global.css

@@ -308,10 +308,33 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     width: 100%;
     line-height: 1;
     font-size: 0.85rem;
+}
 
-    &:focus {
-        border: 1px solid var(--primary-color);
-    }
+/* The focus border, as its own rule and NOT nested under the list above.
+
+   Nested `&:focus` is `:is(<the whole list>):focus`, and `:is()` takes the
+   specificity of its MOST specific argument — the twenty-clause `input` chain.
+   So the focus border on a plain `<select>` carried a specificity no consumer
+   stylesheet could reach without `!important`: a select styled as a borderless
+   segment of a custom control grew a full navy box the moment it was focused.
+   Stated per element, `select:focus` is (0,1,1) again and a consumer's own
+   rule wins as it should. The input chain keeps the specificity it always had. */
+textarea:focus,
+select:focus,
+input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
+        [type='checkbox']
+    ):not([type='radio']):not(.inovua-react-toolkit-numeric-input__input):not(
+        .inovua-react-toolkit-combo-box__input
+    ):not(.inovua-react-toolkit-date-input__input):not(
+        .inovua-react-toolkit-text-input__input
+    ):not(.inovua-react-toolkit-numeric-input__input):not(
+        .variable-inserter-search-input
+    ):not(.react-datepicker__month-select):not(
+        .react-datepicker__year-select
+    ):not(.visns-native-date-filter__input):not([type='date']):not(
+        [type='datetime-local']
+    ):not([type='time']):not([class*='searchInput']):not([class*='filterInput']):not([class*='rowActionPickerSearch']):focus {
+    border: 1px solid var(--primary-color);
 }
 
 /* THE DROPDOWN ARROW, restored. The rule further up gives `select` its