@visns-studio/visns-components 6.3.11 → 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.11",
+    "version": "6.3.12",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

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