@visns-studio/visns-components 6.32.3 → 6.34.3

package/src/components/generic/StandardModal.jsx

@@ -1,6 +1,10 @@
-import React, { useState, useEffect, useCallback, useId, useRef } from 'react';
+import React, { useEffect, useCallback, useId, useRef } from 'react';
 import { X } from 'lucide-react';
 import formStyles from '../styles/Form.module.scss';
+// The overlay's and the panel's own geometry. It was an inline style object
+// built from a user-agent sniff; that file says why that had to stop, and it
+// is also where the z-index order is written down.
+import styles from '../styles/StandardModal.module.scss';
 
 /**
  * The sheet's entry animation.
@@ -24,6 +28,9 @@ const SHEET_KEYFRAMES = `
 }
 `;
 
+/** The three panel widths the stylesheet defines. Anything else is 'medium'. */
+const PANEL_SIZES = ['small', 'medium', 'large'];
+
 /**
  * StandardModal Component
  * 
@@ -71,29 +78,6 @@ const StandardModal = ({
     showHeader = false,
     customStyles = {}
 }) => {
-    // Device detection state
-    const [windowWidth, setWindowWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1024);
-    
-    // Device detection utility
-    const getDeviceType = () => {
-        const hasTouch = typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0);
-        const userAgent = typeof window !== 'undefined' ? navigator.userAgent : '';
-        
-        // Mobile detection: width + user agent + touch
-        const isMobileUA = /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
-        const isMobileWidth = windowWidth <= 768;
-        const isMobile = isMobileUA || (isMobileWidth && hasTouch);
-        
-        // Tablet detection: iPad or Android tablets or medium width with touch
-        const isTabletUA = /iPad|Android(?!.*Mobile)/i.test(userAgent);
-        const isTabletWidth = windowWidth > 768 && windowWidth <= 1024;
-        const isTablet = isTabletUA || (isTabletWidth && hasTouch && !isMobile);
-        
-        return { isMobile, isTablet, isDesktop: !isMobile && !isTablet };
-    };
-    
-    const { isMobile, isTablet } = getDeviceType();
-
     const titleId = useId();
     const panelRef = useRef(null);
     const returnFocusRef = useRef(null);
@@ -157,18 +141,6 @@ const StandardModal = ({
         }
     }, []);
     
-    // Handle window resize
-    useEffect(() => {
-        if (typeof window === 'undefined') return;
-        
-        const handleResize = () => {
-            setWindowWidth(window.innerWidth);
-        };
-        
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, []);
-
     // Handle keyboard events
     const handleKeyDown = useCallback((e) => {
         if (!isOpen) return;
@@ -178,17 +150,36 @@ const StandardModal = ({
         }
     }, [isOpen, closeOnEscape, onClose]);
 
+    /*
+     * Escape, and the page-scroll lock.
+     *
+     * The lock used to put `overflow: unset` back rather than what it found,
+     * which is not the same thing whenever something else is already holding
+     * the page still — the navigation drawer's own lock, most obviously, since
+     * a record form can be opened from inside it on a phone. Closing the
+     * dialog released the drawer's lock too. The previous VALUE is captured
+     * and restored.
+     */
     useEffect(() => {
-        if (isOpen) {
-            document.addEventListener('keydown', handleKeyDown);
-            document.body.style.overflow = 'hidden';
-        } else {
-            document.body.style.overflow = 'unset';
+        if (!isOpen) {
+            return undefined;
         }
 
+        document.addEventListener('keydown', handleKeyDown);
+
+        const previousOverflow = document.body.style.overflow;
+        const previousOverscroll = document.body.style.overscrollBehavior;
+
+        document.body.style.overflow = 'hidden';
+        // iOS keeps scrolling the document once a scroll inside the panel
+        // reaches its end. `overscroll-behavior: contain` on the panel stops
+        // the chain going up; this stops the document passing it on.
+        document.body.style.overscrollBehavior = 'none';
+
         return () => {
             document.removeEventListener('keydown', handleKeyDown);
-            document.body.style.overflow = 'unset';
+            document.body.style.overflow = previousOverflow;
+            document.body.style.overscrollBehavior = previousOverscroll;
         };
     }, [isOpen, handleKeyDown]);
 
@@ -210,136 +201,57 @@ const StandardModal = ({
 
     const isSheet = variant === 'sheet';
 
-    // Get overlay styles
-    const getOverlayStyle = () => {
-        const baseStyle = {
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            // Was a flat 50% black. A scrim that heavy on a sheet buries the
-            // list the sheet exists to keep visible, so the sheet dims less.
-            backgroundColor: isSheet
-                ? 'rgba(15, 23, 32, 0.32)'
-                : 'rgba(0, 0, 0, 0.5)',
-            display: 'flex',
-            alignItems: isSheet
-                ? 'stretch'
-                : verticalAlign === 'top'
-                  ? 'flex-start'
-                  : 'center',
-            // A sheet is pinned to the right edge; a modal is centred.
-            justifyContent: isSheet ? 'flex-end' : 'center',
-            zIndex: 1000,
-            padding: isSheet ? 0 : '20px',
-            ...customStyles.overlay
-        };
-
-        if (!isSheet && verticalAlign === 'top') {
-            baseStyle.paddingTop = '5%';
-        }
-
-        return baseStyle;
-    };
-
-    /**
-     * A sheet's width is FIXED, not a share of the window.
+    /*
+     * The overlay and the panel are CLASSED, not styled inline.
+     *
+     * Everything that was in `getOverlayStyle` / `getContentStyle` /
+     * `getSheetStyle` lives in StandardModal.module.scss now, which is what
+     * lets a phone get `100dvh` (with `100vh` behind it), a real bottom-sheet
+     * shape, and the right geometry on the FIRST paint rather than one resize
+     * listener later. That file carries the full reasoning, the phone and
+     * tablet breakpoints, and the z-index order.
      *
-     * A form wants one comfortable measure. `80vw` gave it a different measure
-     * on every monitor and stretched two-column rows into something unreadable
-     * on a wide screen. Below the tablet breakpoint the sheet becomes
-     * full-width, which is the only sensible shape on a phone.
+     * `customStyles` is still spread inline and therefore still wins over all
+     * of it, which is the contract the SMS composer and the gallery depend on.
      */
-    const getSheetStyle = () => {
-        const width = { small: 420, medium: 560, large: 800 }[size] ?? 560;
+    const overlayClasses = [
+        styles.overlay,
+        isSheet ? styles['overlay--sheet'] : styles['overlay--modal'],
+        !isSheet && verticalAlign === 'top' ? styles['overlay--top'] : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
 
-        return {
-            position: 'relative',
-            backgroundColor: 'white',
-            width: isMobile ? '100vw' : `min(${width}px, 96vw)`,
-            maxWidth: '100vw',
-            height: '100vh',
-            display: 'flex',
-            flexDirection: 'column',
-            borderRadius: 0,
-            boxShadow: '-12px 0 40px -12px rgba(0, 0, 0, 0.28)',
-            overflowY: 'auto',
-            // Honours prefers-reduced-motion via the media query below; the
-            // transform is the entry, and it is deliberately short.
-            animation: 'visnsSheetIn 180ms cubic-bezier(0.32, 0.72, 0, 1)',
-            ...customStyles.modal,
-        };
-    };
+    /* A size that is not one of the three is 'medium', the documented default.
+       Checked against the list rather than trusting `styles[...]` to be
+       undefined for an unknown key: a config typo would otherwise produce a
+       class name that exists in the markup and in no stylesheet, which is an
+       unsized panel — full-bleed on a desktop — and nothing to grep for. */
+    const sizeKey = PANEL_SIZES.includes(size) ? size : 'medium';
 
-    // Get size-based styles for the modal content with device-aware positioning
-    const getContentStyle = () => {
-        if (isSheet) {
-            return getSheetStyle();
-        }
-
-        const baseStyle = {
-            position: 'relative',
-            backgroundColor: 'white',
-            borderRadius: '8px',
-            boxShadow: '0 10px 30px rgba(0, 0, 0, 0.3)',
-            maxHeight: isMobile || isTablet ? '85vh' : '90vh',
-            overflowY: 'auto'
-        };
-
-        /*
-         * customStyles.modal is spread LAST, after the size preset, because a
-         * caller that bothers to pass one is overriding the default rather
-         * than asking to be overridden by it. Spread before the preset (as it
-         * once was) the width/minWidth/maxWidth a size sets could never be
-         * touched - which is what the SMS compose modal needs: a form-shaped
-         * width, and a visible overflow so its templates menu can open past
-         * the modal's own edge.
-         */
-
-        // Apply size-based styles with device considerations
-        switch (size) {
-            case 'small':
-                return {
-                    ...baseStyle,
-                    width: isMobile ? '95vw' : '400px',
-                    minWidth: isMobile ? '300px' : '400px',
-                    maxWidth: isMobile ? '95vw' : '600px',
-                    ...customStyles.modal
-                };
-            case 'large':
-                return {
-                    ...baseStyle,
-                    width: '95vw',
-                    minWidth: isMobile ? '300px' : '800px',
-                    maxWidth: isMobile ? '95vw' : '1600px',
-                    ...customStyles.modal
-                };
-            case 'medium':
-            default:
-                return {
-                    ...baseStyle,
-                    width: isMobile ? '95vw' : '80vw',
-                    minWidth: isMobile ? '300px' : '600px',
-                    maxWidth: isMobile ? '95vw' : '1200px',
-                    ...customStyles.modal
-                };
-        }
-    };
+    const panelClasses = [
+        styles.panel,
+        isSheet ? styles['panel--sheet'] : styles['panel--modal'],
+        styles[`panel--${sizeKey}`],
+    ]
+        .filter(Boolean)
+        .join(' ');
 
     if (!isOpen) {
         return null;
     }
 
     return (
-        <div 
-            style={getOverlayStyle()}
+        <div
+            className={overlayClasses}
+            style={customStyles.overlay}
             onClick={handleBackdropClick}
         >
             <style>{SHEET_KEYFRAMES}</style>
-            <div 
+            <div
                 ref={panelRef}
-                style={getContentStyle()}
+                className={panelClasses}
+                style={customStyles.modal}
                 onClick={(e) => e.stopPropagation()}
                 /* This had none of these. Without `role="dialog"` and
                    `aria-modal` a screen reader treats the panel as ordinary
@@ -363,6 +275,7 @@ const StandardModal = ({
                                     onClick={onClose}
                                     style={customStyles.closeButton}
                                     type="button"
+                                    title="Close this dialog without saving anything"
                                     aria-label="Close modal"
                                 >
                                     <X strokeWidth={1} size={24} />