@visns-studio/visns-components 6.24.2 → 6.24.4

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

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

@@ -765,6 +765,63 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
     border-radius: 6px !important;
     background: var(--dgx-surface) !important;
     box-shadow: none !important;
+    /* The vendored theme's padding-top: 2px — inside a hard 28px box it just
+       pushed the text off-centre. */
+    padding-top: 0 !important;
+}
+
+/* A narrow column must TRUNCATE the text, not run it into the arrow.
+
+   The vendored theme declares the placeholder `white-space: nowrap` and gives
+   neither it nor the flex boxes above it any way to shrink: `__value` is
+   allowed to wrap (useless inside a hard 28px height — the second line is
+   just clipped) and the input wrapper keeps its content-size width. So in a
+   column narrower than the text, "ALL OPTIONS" kept its full width and the
+   toggle arrow was painted on top of its tail.
+
+   `min-width: 0` at each flex level is what lets the text box actually give
+   up width; the ellipsis then says so honestly. The arrow is pinned
+   unshrinkable on the other side — a dropdown with no visible handle stops
+   looking like a dropdown.
+
+   The vendored 27px min-heights on `__value`/`__tools` also go: inside the
+   26px content box of the bordered 28px field they forced a 1px overflow that
+   read as the text sitting low. */
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    .inovua-react-toolkit-combo-box__value {
+    flex-wrap: nowrap !important;
+    min-width: 0 !important;
+    min-height: 0 !important;
+    height: 100% !important;
+    overflow: hidden !important;
+}
+
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    .inovua-react-toolkit-combo-box__input__wrapper {
+    min-width: 0 !important;
+    overflow: hidden !important;
+    margin-bottom: 0 !important;
+    /* The vendored --ltr theme rule pads THIS wrapper 8px left as well as the
+       display value — stacked on the spans' own inset that made 16px. The
+       spans carry the one true inset; the wrapper carries none. */
+    padding: 0 !important;
+}
+
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    .inovua-react-toolkit-combo-box__input__placeholder,
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    .inovua-react-toolkit-combo-box__value__display-value {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+}
+
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    .inovua-react-toolkit-combo-box__tools {
+    flex: 0 0 auto !important;
+    min-height: 0 !important;
+    margin: 0 !important;
+    align-items: center !important;
 }
 
 .InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
@@ -772,6 +829,28 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
     border: 0 !important;
     border-radius: 0 !important;
     background: none !important;
+    /* The `filter input { padding: 0 0.5rem }` rule above reaches this inner
+       input too. On a text filter that padding is the text's inset; here the
+       input is the 1px typing sliver rendered BEFORE the placeholder span, so
+       8px a side inflated an invisible element to ~17px and shoved the
+       "ALL …" text that far off the field's left edge. The visible text gets
+       its inset below instead. */
+    padding: 0 !important;
+    height: auto !important;
+}
+
+/* One inset for whichever span is doing the talking — the placeholder when
+   the filter is empty, the display value once something is picked. 6px here
+   plus the value area's own 2px lines the text up with the 8px inset of the
+   text and date filters beside it (the vendored theme gave the display value
+   8px and the placeholder nothing, so the two states didn't even line up with
+   each other). Logical properties so RTL mirrors for free. */
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    .inovua-react-toolkit-combo-box__value__display-value,
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    .inovua-react-toolkit-combo-box__input__placeholder {
+    padding-inline-start: 6px !important;
+    padding-inline-end: 0 !important;
 }
 
 /* The keyboard highlight in a dropdown's option list — declared by the