@visns-studio/visns-components 6.3.10 → 6.3.12

package/package.json

@@ -91,7 +91,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.3.10",
+    "version": "6.3.12",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -759,21 +759,23 @@ const DataGrid = forwardRef(
                                     }
                                 );
 
-                                // Mark children for styling (getRowStyle) and
-                                // prefix their display value so nesting reads
+                                // Mark children so the row and its display cell
+                                // can be styled as nested.
+                                //
+                                // The "↳" marker is NOT written into the value
+                                // here any more. Prepending it made the string
+                                // itself longer, so the member's text started
+                                // roughly a character and a half further right
+                                // than the same column's text on every other
+                                // row, and the indent had no fixed budget — it
+                                // was however wide the glyph plus a space
+                                // happened to set. It also left the row's own
+                                // data holding a decoration, which anything
+                                // reading that field downstream then had to
+                                // know about. It is drawn instead by
+                                // decorateTreeChildIndent, inside the cell.
                                 children.forEach((child) => {
                                     child.__treeChild = true;
-
-                                    if (
-                                        treeDisplayColumn &&
-                                        child[treeDisplayColumn] != null &&
-                                        String(
-                                            child[treeDisplayColumn]
-                                        ).indexOf('↳') !== 0
-                                    ) {
-                                        child[treeDisplayColumn] =
-                                            '↳ ' + child[treeDisplayColumn];
-                                    }
                                 });
 
                                 // Optional member count, e.g. "3 Headers"
@@ -979,16 +981,18 @@ const DataGrid = forwardRef(
                 const { data } = rowProps;
                 const style = {};
 
-                // Tree mode: mark the summary parent and its nested
-                // children with a left accent bar so the block reads as
-                // one unit and children are visibly subordinate
-                if (ajaxSetting?.treeGroupBy?.key) {
-                    if (data?.__treeParent) {
-                        style.borderLeft = '4px solid #2e7dbd';
-                        style.fontWeight = 600;
-                    } else if (data?.__treeChild) {
-                        style.borderLeft = '4px solid #93c5fd';
-                    }
+                // Tree mode: the parent's heavier weight. The left accent bar
+                // that used to be set here as `borderLeft` is now drawn by
+                // `.treeParentRow` / `.treeChildRow` — see rowClassName below
+                // and the notes in DataGrid.module.scss.
+                //
+                // A border belongs to the row's box, so a 4px one shifted the
+                // whole cell strip 4px right: every column edge on a tree row
+                // sat 4px off the same edge on an ordinary row and off the
+                // column header. The bar is now an inset overlay that occupies
+                // no space in the box model, so the columns line up exactly.
+                if (ajaxSetting?.treeGroupBy?.key && data?.__treeParent) {
+                    style.fontWeight = 600;
                 }
 
                 if (ajaxSetting?.rowColours?.length > 0) {
@@ -1066,6 +1070,28 @@ const DataGrid = forwardRef(
             [ajaxSetting]
         );
 
+        /**
+         * The tree row's accent bar, as a class rather than a border.
+         *
+         * Kept out of `rowStyles` (which is a project-facing config) because
+         * this is the library's own tree chrome, not something a view asks
+         * for.
+         */
+        const treeRowClassName = useCallback(
+            (data) => {
+                if (!ajaxSetting?.treeGroupBy?.key || !data) {
+                    return '';
+                }
+
+                if (data.__treeParent) {
+                    return styles.treeParentRow;
+                }
+
+                return data.__treeChild ? styles.treeChildRow : '';
+            },
+            [ajaxSetting]
+        );
+
         /**
          * The grid's own row class plus whatever `rowStyles` adds. Passed as a
          * function rather than the bare string the grid used to get: the grid
@@ -1074,10 +1100,14 @@ const DataGrid = forwardRef(
          */
         const rowClassName = useCallback(
             (rowProps) =>
-                ['vs-datagrid--row', getRowClassName(rowProps)]
+                [
+                    'vs-datagrid--row',
+                    treeRowClassName(rowProps?.data),
+                    getRowClassName(rowProps),
+                ]
                     .filter(Boolean)
                     .join(' '),
-            [getRowClassName]
+            [getRowClassName, treeRowClassName]
         );
 
         const handleDownload = async (d) => {
@@ -4171,6 +4201,68 @@ const DataGrid = forwardRef(
                         };
                     };
 
+                    /**
+                     * The nesting marker on a tree member's display cell.
+                     *
+                     * Drawn here rather than prepended to the value, so the
+                     * indent is a FIXED budget spent inside the cell's content
+                     * box instead of however much advance width the glyph and
+                     * a space happen to take. The marker is a flex item of a
+                     * known width and the value takes the rest with
+                     * `min-width: 0`, so a long value ellipsizes at the column
+                     * edge rather than running past it — the column's left and
+                     * right edges are then identical on ordinary, parent and
+                     * member rows.
+                     *
+                     * Applied UNDER decorateTreeParentActions, which delegates
+                     * to this for every non-parent row.
+                     */
+                    const decorateTreeChildIndent = (gridColumn, columnDef) => {
+                        const tree = ajaxSetting?.treeGroupBy;
+                        const columnId = Array.isArray(columnDef?.id)
+                            ? columnDef.id.join('-')
+                            : columnDef?.id;
+
+                        if (
+                            !tree?.key ||
+                            !tree.column ||
+                            tree.column !== columnId
+                        ) {
+                            return gridColumn;
+                        }
+
+                        const originalRender = gridColumn.render;
+
+                        return {
+                            ...gridColumn,
+                            render: (arg) => {
+                                const content = originalRender
+                                    ? originalRender(arg)
+                                    : arg?.value ?? null;
+
+                                if (!arg?.data?.__treeChild) {
+                                    return content;
+                                }
+
+                                return (
+                                    <span className={styles.treeChildCell}>
+                                        <span
+                                            className={styles.treeChildMarker}
+                                            aria-hidden="true"
+                                        >
+                                            ↳
+                                        </span>
+                                        <span
+                                            className={styles.treeChildValue}
+                                        >
+                                            {content}
+                                        </span>
+                                    </span>
+                                );
+                            },
+                        };
+                    };
+
                     /**
                      * The group's collapse control.
                      *
@@ -4449,11 +4541,18 @@ const DataGrid = forwardRef(
                         };
                     };
 
+                    // decorateTreeChildIndent sits INSIDE
+                    // decorateTreeParentActions: the latter draws parent rows
+                    // itself and delegates everything else downward, so the
+                    // member indent has to be the render it delegates to.
                     const newColumns = columns.map((column) =>
                         decorateColumnRowActions(
                             decorateTreeParentActions(
-                                guardTreeParentRender(
-                                    renderColumn(column),
+                                decorateTreeChildIndent(
+                                    guardTreeParentRender(
+                                        renderColumn(column),
+                                        column
+                                    ),
                                     column
                                 ),
                                 column

package/src/components/Field.jsx

@@ -152,6 +152,9 @@ function Field({
     const editorRef = useRef(null);
     const fileImageInputRef = useRef(null);
     const containerRef = useRef(null);
+    // Wrapper for the `colour` field's popup picker — used by the
+    // click-outside handler below to tell inside clicks from outside ones
+    const colorPickerRef = useRef(null);
     const [autoValue, setAutoValue] = useState('');
     const [colorPickerShow, setColorPickerShow] = useState(false);
     const [counter, setCounter] = useState(0);
@@ -163,6 +166,42 @@ function Field({
     const [emailSuggestions, setEmailSuggestions] = useState([]);
     const [showEmailSuggestions, setShowEmailSuggestions] = useState(false);
 
+    /**
+     * `colour` field popup picker: dismiss the popover when the user clicks
+     * anywhere outside it or presses Escape. Picking a colour inside the
+     * popover deliberately keeps it open (users drag around the gradient).
+     * Declared here — top level of the component — because the field itself
+     * is rendered from a switch further down.
+     */
+    useEffect(() => {
+        if (!colorPickerShow) {
+            return;
+        }
+
+        const onMouseDown = (event) => {
+            if (
+                colorPickerRef.current &&
+                !colorPickerRef.current.contains(event.target)
+            ) {
+                setColorPickerShow(false);
+            }
+        };
+
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                setColorPickerShow(false);
+            }
+        };
+
+        document.addEventListener('mousedown', onMouseDown);
+        document.addEventListener('keydown', onKeyDown);
+
+        return () => {
+            document.removeEventListener('mousedown', onMouseDown);
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [colorPickerShow]);
+
     /**
      * Conflict warnings (opt-in via `settings.conflict`): the field polls
      * `conflict.url` for a map of {optionId: info} describing options that
@@ -1069,46 +1108,77 @@ function Field({
                               ))}
                     </div>
                 );
-            case 'colour':
+            case 'colour': {
+                const hasColour = inputValue && inputValue !== 'null';
+                const toggleColorPicker = () => {
+                    if (isFieldReadOnly) {
+                        return;
+                    }
+
+                    setColorPickerShow((show) => !show);
+                };
+
                 return (
-                    <div className="cpicker-inline">
-                        <div className="cpicker-preview-container">
+                    <div
+                        className="cpicker-inline cpicker-popup"
+                        ref={colorPickerRef}
+                    >
+                        <div
+                            className="cpicker-trigger"
+                            role="button"
+                            tabIndex={isFieldReadOnly ? -1 : 0}
+                            aria-haspopup="dialog"
+                            aria-expanded={colorPickerShow}
+                            aria-disabled={isFieldReadOnly}
+                            onClick={toggleColorPicker}
+                            onKeyDown={(event) => {
+                                if (event.key === 'Enter' || event.key === ' ') {
+                                    event.preventDefault();
+                                    toggleColorPicker();
+                                }
+                            }}
+                        >
                             <div
                                 className="cpicker__box"
-                                data-color={inputValue && inputValue !== 'null' ? inputValue : 'No colour selected'}
+                                data-color={
+                                    hasColour ? inputValue : 'No colour selected'
+                                }
                                 style={
-                                    inputValue && inputValue !== 'null'
+                                    hasColour
                                         ? { backgroundColor: inputValue }
                                         : {}
                                 }
-                                title={inputValue && inputValue !== 'null' ? `Current colour: ${inputValue}` : 'No colour selected'}
+                                title={
+                                    hasColour
+                                        ? `Current colour: ${inputValue}`
+                                        : 'No colour selected'
+                                }
                             ></div>
                             <span className="cpicker-value">
-                                {inputValue && inputValue !== 'null' ? inputValue : 'No colour selected'}
+                                {hasColour ? inputValue : 'No colour selected'}
                             </span>
                         </div>
-                        <div className="cpicker-container">
-                            <Sketch
-                                color={
-                                    inputValue && inputValue !== 'null'
-                                        ? inputValue
-                                        : '#000000'
-                                }
-                                onChange={(color) => {
-                                    onChangeColour(
-                                        { target: { value: color.hex } },
-                                        { hex: color.hex },
-                                        settings.id
-                                    );
-                                }}
-                                style={{
-                                    boxShadow: 'none',
-                                    border: 'none'
-                                }}
-                            />
-                        </div>
+                        {colorPickerShow && (
+                            <div className="cpicker-popover" role="dialog">
+                                <Sketch
+                                    color={hasColour ? inputValue : '#000000'}
+                                    onChange={(color) => {
+                                        onChangeColour(
+                                            { target: { value: color.hex } },
+                                            { hex: color.hex },
+                                            settings.id
+                                        );
+                                    }}
+                                    style={{
+                                        boxShadow: 'none',
+                                        border: 'none'
+                                    }}
+                                />
+                            </div>
+                        )}
                     </div>
                 );
+            }
             case 'copytoclipboard':
                 return (
                     <>

package/src/components/styles/DataGrid.module.scss

@@ -1579,3 +1579,96 @@
         );
     }
 }
+
+/* =========================================================================
+   treeGroupBy nesting: accent bar and member indent
+
+   Both of these used to be drawn in ways that took up space in the layout,
+   which is what pushed tree rows out of line with ordinary ones:
+
+     - the accent bar was `border-left: 4px` set on the ROW. A border is part
+       of the row's box, so the whole cell strip started 4px to the right and
+       every column edge on a tree row sat 4px off the same edge on an
+       ordinary row (and off the column header).
+
+     - the "↳" was PREPENDED TO THE VALUE, so it was ordinary text inside the
+       cell's single text run. The member's own text therefore began after the
+       glyph plus a space — about 11px at 14px Barlow — while the parent's
+       label and every ordinary row's text began at the cell's padding edge.
+       The indent was whatever the font made it, it varied with the type size,
+       and a long value had that much less room before it ran out of cell.
+
+   Both are now drawn without occupying layout: the bar is an inset overlay,
+   and the marker is a fixed-width flex item spent from INSIDE the cell's
+   existing content box.
+
+   Density hooks, per the convention above:
+
+     --grid-tree-accent-width  the nesting bar.            default: 4px
+     --grid-tree-indent        member indent budget, marker included.
+                               default: 18px
+   ========================================================================= */
+
+/* The bar is painted by an overlay pinned to the row's left edge rather than
+   by a border, so it costs nothing in the box model. It has to be an overlay
+   rather than an inset box-shadow because `.InovuaReactDataGrid__row-cell-wrap`
+   carries `background: inherit` — it repaints the row's own background across
+   the full width and would cover any shadow the row painted underneath. */
+.treeParentRow,
+.treeChildRow {
+    position: relative;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: var(--grid-tree-accent-width, 4px);
+        /* Above the cell strip, which paints an opaque background of its own */
+        z-index: 1;
+        pointer-events: none;
+    }
+}
+
+.treeParentRow::after {
+    background: var(--grid-tree-accent-parent, #2e7dbd);
+}
+
+.treeChildRow::after {
+    background: var(--grid-tree-accent-child, #93c5fd);
+}
+
+/* The member's display cell: marker and value on one line, inside the cell.
+   `min-width: 0` on both the wrapper and the value is what lets the value
+   ellipsize at the column edge instead of overflowing past it — a flex item
+   defaults to `min-width: auto`, which refuses to shrink below its content. */
+.treeChildCell {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.treeChildMarker {
+    /* Fixed basis, never shrinks: this IS the indent budget, so the value
+       starts at the same offset on every member row whatever the glyph, the
+       type size or the value's length. */
+    flex: 0 0 var(--grid-tree-indent, 18px);
+    width: var(--grid-tree-indent, 18px);
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    color: var(--muted-color, #6b7688);
+    line-height: 1;
+    user-select: none;
+}
+
+.treeChildValue {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

package/src/components/styles/global.css

@@ -807,6 +807,69 @@ form div:has(.react-toggle) input[type='checkbox'] {
     }
 }
 
+/* Popup (click-to-open) variant of the colour picker — the collapsed
+   trigger row plus the floating Sketch popover. Additive: the inline
+   rules above are left as-is for any consumer still using them. */
+.cpicker-popup {
+    position: relative;
+    gap: 0;
+}
+
+.cpicker-trigger {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    box-sizing: border-box;
+    min-height: 42px;
+    padding: 0.4rem 0.65rem;
+    font-size: 0.85rem;
+    color: var(--paragraph-color);
+    background: #ffffff;
+    border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.15);
+    border-radius: var(--br, 6px);
+    cursor: pointer;
+    transition: border 0.15s linear;
+}
+
+.cpicker-trigger:hover,
+.cpicker-trigger:focus-visible {
+    border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.85);
+    outline: none;
+}
+
+.cpicker-trigger[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
+/* The value chip styling only makes sense on the old inline preview —
+   inside the trigger it should read as plain input text */
+.cpicker-trigger .cpicker-value {
+    background: transparent;
+    border: none;
+    padding: 0;
+    font-weight: 500;
+}
+
+.cpicker-popover {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    z-index: 1100;
+    padding: 8px;
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-radius: 6px;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+}
+
+.cpicker-popover .w-color-sketch {
+    box-shadow: none !important;
+    border: none !important;
+    border-radius: 6px !important;
+}
+
 /* Safari-specific fixes for form elements */
 @supports (-webkit-touch-callout: none) {
     /* Safari-specific styles */