@visns-studio/visns-components 6.24.1 → 6.24.3

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

package/src/components/columns/ColumnRenderers.jsx

@@ -1329,6 +1329,40 @@ export const renderFileColumn = ({
     handleDownload,
     styles,
 }) => {
+    // `styles.tdaction` belongs on the WRAPPER, not on the glyph.
+    //
+    // The class is a 28px hit target — `display: inline-flex; width: 28px;
+    // height: 28px` in DataGrid.module.scss, written so a row action is
+    // something a finger can land on. Put it on an `<svg>` and those two
+    // lengths do not draw a box around the icon, they ARE the icon: CSS
+    // `width`/`height` outrank the `width="14"` / `height="14"` presentation
+    // attributes lucide renders from `size`, so the declared 14px glyph was
+    // painted at 28 — measured, not guessed — twice the size of the 13px row
+    // text it sits in and twice the 18px the action column's own icons use.
+    //
+    // The action column never had the problem because its icons live inside
+    // `.tdactions`, where `.tdactions span svg { width: 18px }` is the more
+    // specific rule and wins. This column renders its icon on its own, so the
+    // bare `.tdaction` was the only rule reaching it.
+    //
+    // Moving the class one level out is what the actions column already does:
+    // the span becomes the 28px target (and picks up the hover wash and focus
+    // ring that were being painted on the glyph), and the icon is free to be
+    // the size it asks for. The span keeps its 10px right margin, so a row of
+    // several files occupies exactly the width it did before.
+    const icon = (tooltip) => (
+        <Download
+            data-tooltip-id="system-tooltip"
+            data-tooltip-content={tooltip}
+            strokeWidth={2}
+            size={16}
+        />
+    );
+
+    // `inline-flex` comes from the class; declaring `display` here as well
+    // would beat it from the style attribute and un-centre the glyph.
+    const wrapperStyle = { marginRight: '10px' };
+
     return {
         ...commonProps,
         name: column.id,
@@ -1341,48 +1375,30 @@ export const renderFileColumn = ({
                     return data[column.id].map((file, index) => (
                         <span
                             key={index}
+                            className={styles.tdaction}
                             onClick={(e) => {
                                 e.stopPropagation();
                                 e.preventDefault();
                                 handleDownload(file);
                             }}
-                            style={{
-                                marginRight: '10px',
-                                display: 'inline-block',
-                            }}
+                            style={wrapperStyle}
                         >
-                            <Download
-                                data-tooltip-id="system-tooltip"
-                                data-tooltip-content={`Download File ${file.file_name}`}
-                                strokeWidth={2}
-                                size={14}
-                                className={styles.tdaction}
-                            />
+                            {icon(`Download File ${file.file_name}`)}
                         </span>
                     ));
                 } else {
                     // Return a single span for a single file with added margin
                     return (
                         <span
+                            className={styles.tdaction}
                             onClick={(e) => {
                                 e.stopPropagation();
                                 e.preventDefault();
                                 handleDownload(data[column.id]);
                             }}
-                            style={{
-                                marginRight: '10px',
-                                display: 'inline-block',
-                            }}
+                            style={wrapperStyle}
                         >
-                            <Download
-                                data-tooltip-id="system-tooltip"
-                                data-tooltip-content={`Download File ${
-                                    data[column.id].file_name
-                                }`}
-                                strokeWidth={2}
-                                size={14}
-                                className={styles.tdaction}
-                            />
+                            {icon(`Download File ${data[column.id].file_name}`)}
                         </span>
                     );
                 }

package/src/components/columns/SelectFilterEditor.jsx

@@ -189,6 +189,68 @@ export const openedByGesture = (
     return !!node && !!node.contains && node.contains(gesture.target);
 };
 
+/**
+ * Breathing room left between a widened menu and the edge that would clip it.
+ */
+const MENU_GUTTER_PX = 8;
+
+/**
+ * How much room the option menu has to grow into before the grid clips it, in
+ * pixels — written onto the combo as `--vs-filter-menu-avail` for
+ * `global-datagrid.css` to cap the menu's `max-width` with.
+ *
+ * The menu is a direct child of the combo, absolutely positioned, and the
+ * nearest ancestor that clips is `.InovuaReactDataGrid__body` (`overflow:
+ * hidden`, so the grid can virtualise). The stylesheet now widens the menu to
+ * fit its longest option instead of ellipsising it into the column's width —
+ * but CSS cannot ask "how far is it from this column to the right edge of the
+ * grid?", so a menu on a right-hand column would grow straight into that clip
+ * and come out sliced. This measures the answer.
+ *
+ * Purely presentational: it sets one custom property and touches nothing else.
+ * The option list, the value and every event are untouched, and if this never
+ * runs the stylesheet's own 420px / 90vw caps still apply.
+ *
+ * Measured on the COMBO, not the menu, and before the menu mounts, so the
+ * first painted frame is already the right width. Recomputed on every open, so
+ * a resized grid or a dragged column is picked up with nothing to invalidate.
+ */
+export const measureMenuRoom = (node) => {
+    if (!node || typeof node.getBoundingClientRect !== 'function') {
+        return null;
+    }
+
+    const clip =
+        typeof node.closest === 'function'
+            ? node.closest('.InovuaReactDataGrid__body') ||
+              node.closest('.InovuaReactDataGrid')
+            : null;
+
+    const right = clip
+        ? clip.getBoundingClientRect().right
+        : typeof window !== 'undefined'
+          ? window.innerWidth
+          : 0;
+
+    const box = node.getBoundingClientRect();
+
+    // Never narrower than the field itself: a combo scrolled half out of view
+    // would otherwise be told it has no room at all. The stylesheet's
+    // `min-width` would fight that and win, but an honest floor is cheaper
+    // than relying on which cap happens to be stronger.
+    return Math.max(right - box.left - MENU_GUTTER_PX, box.width);
+};
+
+const applyMenuRoom = (node) => {
+    const room = measureMenuRoom(node);
+
+    if (room == null || !node || !node.style) {
+        return;
+    }
+
+    node.style.setProperty('--vs-filter-menu-avail', `${Math.round(room)}px`);
+};
+
 /**
  * "Is something actually filtered here?" — `null` is the `select` filter
  * type's emptyValue, `''` is what DataGrid's dependent-filter reset writes,
@@ -360,6 +422,23 @@ const SelectFilterEditor = forwardRef((props, ref) => {
                         editorProps.onExpandedChange(expanded);
                     }
 
+                    // Unconditional, and before the clear gate: every open gets
+                    // a menu sized to the room it has, whether or not this
+                    // particular open also clears the filter.
+                    if (expanded) {
+                        const instance = innerRef.current;
+                        const combo =
+                            instance &&
+                            instance.getInputRef &&
+                            instance.getInputRef();
+
+                        applyMenuRoom(
+                            combo && combo.getComboNode
+                                ? combo.getComboNode()
+                                : null
+                        );
+                    }
+
                     clearRef.current(expanded);
                 },
             }}

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

@@ -772,6 +772,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
@@ -788,15 +810,188 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
    theme selector the invisible rule uses, so it lands exactly where that rule
    lands and nowhere else.
 
-   `--primary-color` rather than one of the `--dgx-*` tokens above: those are
-   defined on `.InovuaReactDataGrid`, and the option list is rendered outside
-   the grid element, where they would not resolve. */
+   `--primary-color` rather than one of the `--dgx-*` tokens above, because
+   this selector is the vendored theme's, unscoped to the grid, and so also
+   matches a combo box that genuinely is outside `.InovuaReactDataGrid` (the
+   toolkit's `relativeToViewport` overlay), where a `--dgx-*` token would not
+   resolve. Inside a grid filter — which is where the list actually mounts,
+   see the block below — either would have worked. */
 .inovua-react-toolkit-combo-box__list--theme-default-light
     .inovua-react-toolkit-combo-box__list__item--active {
     border-color: color-mix(in srgb, var(--primary-color, #1b3933) 55%, transparent) !important;
     background: color-mix(in srgb, var(--primary-color, #1b3933) 12%, transparent) !important;
 }
 
+/* ==========================================================================
+   The dropdown filter's OPTION MENU
+   --------------------------------------------------------------------------
+   Two complaints, one rule set.
+
+   1. The options were being cut off. "Concrete, Concrete Precast & Concrete
+      Pumping" arrived as "CONCRETE, CONCRETE PRECAS…" and "General Building +
+      Construction Management" as "GENERAL BUILDING + CONSTR…", which makes two
+      different trades indistinguishable in the list you are choosing from.
+
+      That is not a text-length problem, it is a width problem. The vendored
+      base stylesheet pins the menu to the FIELD:
+
+          .inovua-react-toolkit-combo-box__list:not(…--relative-to-viewport) {
+              left: -1px; right: -1px; min-width: 100%; position: absolute;
+          }
+
+      Both edges anchored to a ~104px column means the menu can only ever be
+      as wide as the column, and every item carries
+      `…__list__item--ellipsis { overflow:hidden; white-space:nowrap;
+      text-overflow:ellipsis }`, so the text is trimmed to fit. Measured in a
+      real grid: item scrollWidth 355px inside clientWidth 102px.
+
+      Releasing the right edge and sizing to `max-content` lets the menu grow
+      to its widest option; `min-width` keeps it at least as wide as the field
+      it drops out of, and the cap keeps a pathological option (a 300-character
+      description) from painting a menu across the whole screen. Options longer
+      than the cap still ellipsize — that is the cap doing its job, not the bug
+      above.
+
+   2. The menu did not look like anything else in the library. It kept the
+      vendored theme's 14px text, 1px radius, hard `0 0 4px rgba(0,0,0,.4)`
+      shadow and indigo `rgba(121,134,203,…)` highlights, while the grid around
+      it is 13px `--dgx-ink` on 6-8px radii and the app's own dropdowns
+      (react-select, `.visns-select__menu` in global.css) are a hairline
+      surface with `primary 8%` on the focused option. So the values below are
+      lifted from those two places rather than invented: the option size sits
+      on the grid's own type scale, the highlights are the house primary, and
+      the surface is the same popover treatment.
+
+   Scoping. The menu is NOT portalled — verified in a rendered grid, its parent
+   chain is `…__list > .inovua-react-toolkit-combo-box.InovuaReactDataGrid__column-header__filter
+   > …__filter-wrapper > …__column-header > … > .InovuaReactDataGrid`. It is a
+   direct child of the combo, which is exactly why `>` off the grid's own
+   filter class is enough to reach it and nothing else: a combo box anywhere
+   else in the app (the pagination toolbar's page-size picker, for one) carries
+   no `InovuaReactDataGrid__column-header__filter` and is untouched.
+
+   Because it is inside the grid element, the `--dgx-*` tokens declared on
+   `.InovuaReactDataGrid` DO resolve here (measured: `--dgx-ink` computes to
+   rgb(43,43,43) on a node appended to the menu). They are still written with
+   their own fallbacks so the rules survive if a future grid ever renders the
+   list through the toolkit's `relativeToViewport` overlay.
+
+   Presentational only. Nothing here changes what is in the list, what a click
+   does, or how the filter reports its value.
+   ========================================================================== */
+
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    > .inovua-react-toolkit-combo-box__list {
+    /* The width fix. `right: auto` is the load-bearing line — while both
+       edges are pinned the box is stretched to the column and `width` is
+       ignored. */
+    right: auto !important;
+    width: max-content !important;
+    min-width: calc(100% + 2px) !important;
+
+    /* Three caps, whichever bites first.
+
+       `420px` is the design cap — past that a menu stops being a list and
+       starts being a wall of text. `90vw` is the small-screen cap.
+
+       `--vs-filter-menu-avail` is the one CSS cannot work out for itself: the
+       distance from this column to the right edge of the grid. The menu is
+       absolutely positioned INSIDE `.InovuaReactDataGrid__body`, which is
+       `overflow: hidden`, so a menu on a right-hand column that grew past that
+       edge would simply be sliced off — visibly worse than the ellipsis this
+       change removes. The number is measured and written onto the combo by
+       SelectFilterEditor as the menu opens (see the comment there); when it is
+       absent — a combo outside a grid, or the editor not in play — the cap
+       falls back to `100vw` and the other two do the work. */
+    max-width: min(420px, 90vw, var(--vs-filter-menu-avail, 100vw)) !important;
+
+    /* The same popover surface as `.visns-select__menu`, on the grid's radius. */
+    padding: 4px !important;
+    border: 1px solid var(--dgx-line, rgba(43, 43, 43, 0.12)) !important;
+    border-radius: 8px !important;
+    background: var(--dgx-surface, var(--background-color, #fff)) !important;
+    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.28) !important;
+}
+
+/* An RTL combo grows the other way, or it would run off the field it belongs
+   to. The toolkit marks the direction on the combo, not on the list. */
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box.inovua-react-toolkit-combo-box--rtl
+    > .inovua-react-toolkit-combo-box__list {
+    right: -1px !important;
+    left: auto !important;
+}
+
+/* One option.
+
+   `text-transform` and `letter-spacing` are declared rather than left alone
+   because the column header two rows up IS uppercase-with-tracking
+   (`…__column-header__content`), and an option list is data, not a label — it
+   must not inherit that treatment from a host stylesheet. Note this cannot
+   un-shout an option whose VALUE is stored in capitals; that is the record,
+   not the styling.
+
+   `border` is deliberately absent: the theme gives every item
+   `border: 1px solid transparent` and the keyboard-highlight rule above
+   colours it, so declaring a border here would silently kill arrow-key
+   navigation's only visual. The radius is set so that highlight is rounded. */
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    > .inovua-react-toolkit-combo-box__list
+    .inovua-react-toolkit-combo-box__list__item {
+    padding: 0.375rem 0.625rem !important;
+    border-radius: 6px !important;
+    color: var(--dgx-ink, var(--paragraph-color, #2b2b2b)) !important;
+    font-size: 0.8125rem !important;
+    font-weight: 400 !important;
+    line-height: 1.45 !important;
+    letter-spacing: normal !important;
+    text-transform: none !important;
+}
+
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    > .inovua-react-toolkit-combo-box__list
+    .inovua-react-toolkit-combo-box__list__item:not(.inovua-react-toolkit-combo-box__list__item--disabled):hover {
+    background: color-mix(in srgb, var(--primary-color, #1b3933) 8%, transparent) !important;
+}
+
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    > .inovua-react-toolkit-combo-box__list
+    .inovua-react-toolkit-combo-box__list__item--selected {
+    background: color-mix(in srgb, var(--primary-color, #1b3933) 16%, transparent) !important;
+    font-weight: 600 !important;
+}
+
+/* Group headings and the "no options" line are the menu's own chrome, so they
+   take the quiet label treatment the column headers use rather than looking
+   like options you could pick. */
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    > .inovua-react-toolkit-combo-box__list
+    .inovua-react-toolkit-combo-box__list__group,
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    > .inovua-react-toolkit-combo-box__list
+    .inovua-react-toolkit-combo-box__list__empty-text {
+    padding: 0.375rem 0.625rem !important;
+    color: var(--dgx-muted, rgba(43, 43, 43, 0.6)) !important;
+    font-size: 0.6875rem !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.05em !important;
+    text-transform: uppercase !important;
+}
+
+/* The field itself was 14px while the text, numeric and date filters beside it
+   are 0.75rem (the rule further up). The combo's displayed value and
+   placeholder are SPANS, not the `<input>` that rule reaches, which is how one
+   control in the filter row ended up a size larger than its neighbours. */
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box,
+.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,
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    .inovua-react-toolkit-combo-box__value__tag__label {
+    font-size: 0.75rem !important;
+    letter-spacing: normal !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