@visns-studio/visns-components 6.3.11 → 6.3.13

package/package.json

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

package/src/components/DataGrid.jsx

@@ -976,6 +976,19 @@ const DataGrid = forwardRef(
             },
         }));
 
+        // First matching `rowColours` rule for a row, shared by getRowStyle
+        // (which paints it) and rowClassName (which marks the row so the
+        // zebra banding stands down — see .tintedRow in the module styles).
+        const findRowColour = useCallback(
+            (data) =>
+                ajaxSetting?.rowColours?.length > 0 && data
+                    ? ajaxSetting.rowColours.find(
+                          (config) => data[config.id] === config.value
+                      )
+                    : undefined,
+            [ajaxSetting]
+        );
+
         const getRowStyle = useCallback(
             (rowProps) => {
                 const { data } = rowProps;
@@ -995,19 +1008,14 @@ const DataGrid = forwardRef(
                     style.fontWeight = 600;
                 }
 
-                if (ajaxSetting?.rowColours?.length > 0) {
-                    const colorConfig = ajaxSetting.rowColours.find(
-                        (config) => data[config.id] === config.value
-                    );
-
-                    if (colorConfig) {
-                        style.backgroundColor = colorConfig.colour;
-                    }
+                const colorConfig = findRowColour(data);
+                if (colorConfig) {
+                    style.backgroundColor = colorConfig.colour;
                 }
 
                 return Object.keys(style).length > 0 ? style : null;
             },
-            [ajaxSetting]
+            [ajaxSetting, findRowColour]
         );
 
         /**
@@ -1104,10 +1112,14 @@ const DataGrid = forwardRef(
                     'vs-datagrid--row',
                     treeRowClassName(rowProps?.data),
                     getRowClassName(rowProps),
+                    // A rowColours tint is an inline background on the row
+                    // element; the class lets the stylesheet clear the zebra
+                    // band that would otherwise paint over it on odd rows.
+                    findRowColour(rowProps?.data) ? styles.tintedRow : '',
                 ]
                     .filter(Boolean)
                     .join(' '),
-            [getRowClassName, treeRowClassName]
+            [getRowClassName, treeRowClassName, findRowColour]
         );
 
         const handleDownload = async (d) => {

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

@@ -83,6 +83,17 @@
     }
 }
 
+// A `rowColours` tint arrives as an inline background on the ROW element,
+// but the banding above paints the cell-wrap CHILD, which sits on top — so
+// on odd rows the stripe swallowed the tint and only even rows showed their
+// urgency colour. A tinted row (marked by rowClassName in DataGrid.jsx)
+// clears its cell-wrap so the row's own colour reads on every row. Must
+// stay AFTER the banding rule: same specificity, order decides. Hover is
+// unaffected — its background is `!important` on the hover target.
+.tintedRow :global(.InovuaReactDataGrid__row-cell-wrap) {
+    background: transparent;
+}
+
 .InovuaReactDataGrid__row-hover-target:hover {
     color: var(--primary-color) !important;
     background: var(--hover-color, rgb(230, 240, 250)) !important;

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 */