@visns-studio/visns-components 6.17.2 → 6.20.0

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

@@ -589,3 +589,199 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
 .visns-native-date-filter__range .visns-native-date-filter {
     flex: 1 1 0;
 }
+
+/* ==========================================================================
+   2026 pass — the grid's cells
+   --------------------------------------------------------------------------
+   The grid itself is the vendored @visns-studio/visns-datagrid fork, whose
+   markup is not ours. It is styled from here rather than from that package,
+   because this file is already the override layer the library ships for it —
+   so a restyle costs no fork, no rebuild of a TypeScript+Babel+PostCSS
+   pipeline, and no npm publish.
+
+   `!important` throughout, reluctantly: the vendored theme's own selectors are
+   high-specificity and this file is imported before it. That is a property of
+   the host, not a preference.
+   ========================================================================== */
+
+.InovuaReactDataGrid {
+    --dgx-ink: var(--paragraph-color, #2b2b2b);
+    --dgx-surface: var(--background-color, #fff);
+    --dgx-line: color-mix(in srgb, var(--dgx-ink) 10%, transparent);
+    --dgx-muted: color-mix(in srgb, var(--dgx-ink) 60%, transparent);
+    --dgx-hover: color-mix(in srgb, var(--primary-color, #1b3933) 4%, var(--dgx-surface));
+    --dgx-selected: color-mix(in srgb, var(--primary-color, #1b3933) 8%, var(--dgx-surface));
+
+    border: 0 !important;
+    background: var(--dgx-surface) !important;
+    font-family: inherit !important;
+}
+
+/* -- column header -------------------------------------------------------- */
+
+.InovuaReactDataGrid__header,
+.InovuaReactDataGrid__header-wrapper {
+    background: var(--dgx-surface) !important;
+    border-bottom: 1px solid var(--dgx-line) !important;
+}
+
+.InovuaReactDataGrid__column-header {
+    background: transparent !important;
+    border: 0 !important;
+    border-bottom: 0 !important;
+}
+
+.InovuaReactDataGrid__column-header__content {
+    padding: 0.65rem 0.85rem !important;
+    color: var(--dgx-muted) !important;
+    font-size: 0.6875rem !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.05em !important;
+    text-transform: uppercase !important;
+}
+
+/* -- rows and cells ------------------------------------------------------- */
+
+/* 44px rather than the vendored 36: a row a finger can hit on the iPad these
+   are used on, and enough air that a table of twelve does not read as a wall. */
+.InovuaReactDataGrid__row {
+    min-height: 44px !important;
+    border: 0 !important;
+    background: var(--dgx-surface) !important;
+    transition: background 140ms cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+.InovuaReactDataGrid__row:hover,
+.InovuaReactDataGrid__row--hover-target:hover {
+    background: var(--dgx-hover) !important;
+}
+
+.InovuaReactDataGrid__row--selected,
+.InovuaReactDataGrid__row--active {
+    background: var(--dgx-selected) !important;
+}
+
+/* The vendored theme draws a border on every cell, so a table arrives as a
+   grid of boxes. One hairline under the row is all the separation a row needs;
+   the columns are separated by alignment. */
+.InovuaReactDataGrid__cell {
+    border: 0 !important;
+    border-bottom: 1px solid var(--dgx-line) !important;
+    background: transparent !important;
+    color: var(--dgx-ink) !important;
+    font-size: 0.8125rem !important;
+}
+
+.InovuaReactDataGrid__cell__content {
+    padding: 0 0.85rem !important;
+    line-height: 1.45 !important;
+}
+
+/* Columns of numbers line up; everything else keeps proportional figures. */
+.InovuaReactDataGrid__cell--align-end .InovuaReactDataGrid__cell__content,
+.InovuaReactDataGrid__cell--align-right .InovuaReactDataGrid__cell__content {
+    font-variant-numeric: tabular-nums !important;
+}
+
+.InovuaReactDataGrid__row:last-child .InovuaReactDataGrid__cell {
+    border-bottom: 0 !important;
+}
+
+/* -- checkbox ------------------------------------------------------------- */
+
+.InovuaReactDataGrid__checkbox {
+    accent-color: var(--primary-color, #1b3933) !important;
+}
+
+/* -- group header --------------------------------------------------------- */
+
+.InovuaReactDataGrid__group-cell,
+.InovuaReactDataGrid__group-row {
+    background: color-mix(in srgb, var(--dgx-ink) 3%, var(--dgx-surface)) !important;
+    color: var(--dgx-ink) !important;
+    font-weight: 600 !important;
+}
+
+/* -- column filter row ---------------------------------------------------- */
+
+.InovuaReactDataGrid__column-header__filter input,
+.InovuaReactDataGrid__column-header__filter select {
+    height: 28px !important;
+    padding: 0 0.5rem !important;
+    border: 1px solid var(--dgx-line) !important;
+    border-radius: 6px !important;
+    background: var(--dgx-surface) !important;
+    color: var(--dgx-ink) !important;
+    font: inherit !important;
+    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. */
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-text-input,
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-numeric-input {
+    border: 0 !important;
+    border-radius: 0 !important;
+    background: none !important;
+    box-shadow: none !important;
+}
+
+/* A COMBO BOX is built the other way round, and it matters.
+   
+   In a text or numeric filter the inner `<input>` fills the wrapper, so the
+   input carries the edge and the wrapper is a layout box. In a combo box the
+   inner `<input>` is only a narrow typing sliver sitting NEXT to a placeholder
+   span — measured at 18px wide inside a 130px control. Putting the edge on it
+   drew a bordered 18px box beside the word "ALL", which is why the ALL filters
+   looked like they had a stray empty checkbox in front of them.
+   
+   So for combo boxes the wrapper carries the edge and the sliver gets none. */
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box {
+    /* min/max as well as height: the grid theme pins the filter cell to
+       `min-height: 32px`, and min-height beats height, so `height` alone left
+       the ALL dropdowns 4px taller than the text and date filters beside
+       them. */
+    height: 28px !important;
+    min-height: 28px !important;
+    max-height: 28px !important;
+    border: 1px solid var(--dgx-line) !important;
+    border-radius: 6px !important;
+    background: var(--dgx-surface) !important;
+    box-shadow: none !important;
+}
+
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    .inovua-react-toolkit-combo-box__input {
+    border: 0 !important;
+    border-radius: 0 !important;
+    background: none !important;
+}
+
+/* The native date filter is the odd one out in the row.
+   
+   Measured on /tickets: every other filter editor is 28px tall with a 6px
+   radius and the `--dgx-line` hairline, while this one was 34px with a 1px
+   radius and the toolkit's old #cdcecd border. Six pixels taller and squarer
+   than its neighbours is exactly what makes one control in a row look
+   "selected" or broken when nothing is wrong with it.
+   
+   Note the edge lives on the WRAPPER here, not on the input — the input is
+   `border: none` because Chrome's date segments need to fill the box — so the
+   wrapper is what has to carry the 2026 treatment. */
+.InovuaReactDataGrid__column-header__filter .visns-native-date-filter,
+.visns-native-date-filter {
+    height: 28px !important;
+    min-height: 28px !important;
+    max-height: 28px !important;
+    border: 1px solid var(--dgx-line) !important;
+    border-radius: 6px !important;
+    background: var(--dgx-surface) !important;
+}
+
+.visns-native-date-filter__input {
+    font-size: 0.75rem !important;
+}

package/src/components/styles/global.css

@@ -228,13 +228,54 @@ ul {
 }
 
 a {
+    /* `outline: none` used to sit here alone, stripping the focus ring from
+       every link in every consuming app with nothing put back. The outline is
+       removed only for the mouse; keyboard focus keeps a real ring. */
     outline: none;
 }
 
+a:focus-visible {
+    outline: 2px solid var(--highlight-color, #3cbf7d);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm, 4px);
+}
+
+/* The two rules above force `appearance: none` and `outline: none !important`
+   on every checkbox and radio, which left them with a 14px hit target and NO
+   keyboard focus indicator anywhere in the library. Restoring the ring is
+   separated from the drawn control deliberately: other rules depend on the
+   custom box, but nothing depends on focus being invisible. */
+input[type='checkbox']:focus-visible,
+input[type='radio']:focus-visible,
+.radio-input:focus-visible {
+    outline: 2px solid var(--highlight-color, #3cbf7d) !important;
+    outline-offset: 2px !important;
+}
+
 .loginbg {
     background: var(--tertiary-color);
 }
 
+/* The grid's own toolbar and column-filter fields opt out of this rule, same
+   as the Inovua toolkit inputs listed in it.
+
+   This selector carries about a dozen chained `:not()` clauses, and every one
+   of them adds specificity — so at roughly (0,13,1) it silently beat
+   `.searchInput` (0,1,0) in DataGrid.module.scss and imposed `padding: 1rem`
+   on a 34px-tall field, which is what pushed the magnifier glyph on top of the
+   placeholder text.
+
+   The exclusions match on a class SUBSTRING because these are CSS-module
+   classes: by the time this plain stylesheet applies, the name is
+   `_searchInput_17s7g_654`, so a bare `.searchInput` here would match nothing.
+
+   KEEP THE SELECTOR ON ONE UNBROKEN COMPOUND. A newline — or a comment, which
+   is whitespace — between two `:not()` clauses is a DESCENDANT COMBINATOR, and
+   it silently retargets the rule at descendants of an `<input>`, which do not
+   exist. That is not a hypothetical: it happened here, and every text field in
+   the app fell back to the browser's default 2px inset border while selects
+   and textareas kept their styling. Hence three different-looking controls in
+   one form. */
 textarea,
 select,
 input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
@@ -249,10 +290,10 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         .react-datepicker__year-select
     ):not(.visns-native-date-filter__input):not([type='date']):not(
         [type='datetime-local']
-    ):not([type='time']) {
+    ):not([type='time']):not([class*='searchInput']):not([class*='filterInput']):not([class*='rowActionPickerSearch']) {
     background: white;
     border-radius: var(--br);
-    border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
+    border: 1px solid rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.15);
     box-shadow: none;
     padding: 1rem;
     outline: none;
@@ -344,7 +385,7 @@ input[type='time'] {
     background-color: var(--tertiary-color);
     padding: 0;
     margin: 0;
-    border: 1px solid rgba(var(--primary-rgb), 0.25);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.25);
     border-radius: var(--br);
     overflow: hidden;
     font-size: 1rem;
@@ -384,21 +425,17 @@ input[type='time'] {
 
 /* Async Select */
 
+/* The control's appearance is defined once, further down, next to the rule
+   for native inputs it has to match. This rule keeps only the structural
+   properties — it used to also set `min-height: 50px`, a second border and a
+   4px radius, all of which fought the later block. */
 .visns-select__control {
     width: 100%;
     cursor: default;
-    min-height: 50px;
-    outline: 0 !important;
     position: relative;
-    -webkit-transition: all 100ms;
-    transition: all 100ms;
-    background-color: hsl(0, 0%, 100%);
-    border-color: hsl(0, 0%, 80%);
-    border-radius: 4px;
-    border-style: solid;
-    border-width: 1px;
+    outline: 0 !important;
     box-sizing: border-box;
-    box-shadow: none !important;
+    transition: border-color 0.15s linear;
 }
 
 /* These were written as `&--is-focused` / `&--menu-is-open` nested inside the
@@ -661,10 +698,11 @@ input[type='time'] {
 }
 
 /* Fix for specific toggle in forms */
-form div:has(span:contains('Use T-Bar?')) .react-toggle {
-    margin-right: 8px;
-    vertical-align: middle;
-}
+/* Removed: `form div:has(span:contains('Use T-Bar?'))` — `:contains()` is a
+   jQuery extension, not CSS, so this selector was invalid and the rule had
+   never applied to anything. Restore it with a real class or data attribute
+   on the toggle if the behaviour is still wanted. */
+
 
 /* Hide checkboxes when they're next to a toggle */
 .react-toggle + input[type='checkbox'],
@@ -998,3 +1036,116 @@ form div:has(.react-toggle) input[type='checkbox'] {
         font-weight: bold !important;
     }
 }
+
+/* ---------------------------------------------------------------------------
+   react-select, wearing the same clothes as every other field
+   ---------------------------------------------------------------------------
+   The dropdowns are react-select with `classNamePrefix="visns-select"`, so
+   they arrive with react-select's OWN defaults: a #cccccc 1px border and a 4px
+   radius. Everything else in a form gets the rule above — a
+   `rgba(paragraph, .15)` hairline at `var(--br)`. Measured side by side in one
+   form: 1px #cccccc / 4px on the selects, 1px rgba(68,60,43,.15) / 5px on the
+   inputs.
+
+   One pixel of radius and a different grey is not something anyone can name
+   when they look at it, which is exactly why it reads as "these don't match".
+   ------------------------------------------------------------------------ */
+
+.visns-select__control {
+    /* Same token the native inputs below use. 51px was 3px taller than a text
+       input, which is exactly the kind of difference nobody can name but
+       everybody sees when the two sit side by side in one form. */
+    min-height: var(--field-height, 51px);
+    border: 1px solid rgba(var(--paragraph-rgb, 43, 43, 43), 0.15) !important;
+    border-radius: var(--br, 5px) !important;
+    background: var(--background-color, #fff);
+    /* react-select paints its own shadow on focus; the app's focus ring is the
+       one below, so this one goes. */
+    box-shadow: none !important;
+}
+
+.visns-select__control:hover {
+    border-color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.28) !important;
+}
+
+.visns-select__control--is-focused {
+    border-color: color-mix(
+        in srgb,
+        var(--primary-color, #1b3933) 45%,
+        rgba(var(--paragraph-rgb, 43, 43, 43), 0.15)
+    ) !important;
+    box-shadow: 0 0 0 3px
+        color-mix(in srgb, var(--highlight-color, #3cbf7d) 22%, transparent) !important;
+}
+
+.visns-select__control--is-disabled {
+    background: rgba(var(--paragraph-rgb, 43, 43, 43), 0.04);
+}
+
+/* The menu is a surface like any other popover in the app, not a browser
+   dropdown: same radius, same hairline, one shadow. */
+.visns-select__menu {
+    border: 1px solid rgba(var(--paragraph-rgb, 43, 43, 43), 0.15);
+    border-radius: var(--br, 5px);
+    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.28);
+    overflow: hidden;
+}
+
+.visns-select__option--is-focused {
+    background: color-mix(
+        in srgb,
+        var(--primary-color, #1b3933) 8%,
+        transparent
+    );
+}
+
+.visns-select__option--is-selected {
+    background: var(--primary-color, #1b3933);
+    color: #fff;
+}
+
+/* react-select builds the control out of nested boxes that each carry their
+   own padding, so matching the outer height is not enough — the text still
+   sits differently from a native input. These line the inner boxes up with
+   the `padding: 1rem` / `font-size: 0.85rem` of the input rule below, and
+   drop the indicator separator, a divider no other field in the app has. */
+.visns-select__value-container {
+    padding: 0 1rem !important;
+}
+
+.visns-select__input-container,
+.visns-select__single-value,
+.visns-select__placeholder {
+    margin: 0 !important;
+    padding: 0 !important;
+    font-size: 0.85rem;
+    line-height: 1;
+}
+
+.visns-select__indicator-separator {
+    display: none !important;
+}
+
+/* react-select puts a real `<input>` inside the control so you can type to
+   filter. It is an `input[type="text"]`, so the padded native-input rule
+   further up was styling it as a form field in its own right: 1rem of padding
+   and the full 48px control height, nested INSIDE the 48px control. That is
+   what made every dropdown ~6px taller than the input beside it. */
+.visns-select__input {
+    min-height: 0 !important;
+    height: auto !important;
+    padding: 0 !important;
+    border: 0 !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    line-height: 1 !important;
+}
+
+.visns-select__indicator {
+    padding: 0 0.5rem !important;
+}
+
+.visns-select__option {
+    font-size: 0.85rem;
+}
+