@visns-studio/visns-components 6.16.3 → 6.16.4

package/package.json

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

package/src/components/DataGrid.jsx

@@ -2883,11 +2883,7 @@ const DataGrid = forwardRef(
                                     rowProps.columns[columnIndex].link.key;
                                 const rowData = rowProps.data[linkKey];
 
-                                window.open(
-                                    `${linkPopup}/${rowData}`,
-                                    '',
-                                    'width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1'
-                                );
+                                openRecordWindow(`${linkPopup}/${rowData}`);
                             } else {
                                 debugLog('🔍 Checking for update setting:', {
                                     settings: settingsRef.current,

package/src/components/callQueue/CallQueuePop.jsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { openRecordWindow } from '../utils/popupWindow';
 import { Link } from 'react-router-dom';
 import {
     ChevronDown,
@@ -1061,11 +1062,7 @@ const CallQueuePop = ({
             return;
         }
 
-        window.open(
-            hrefForTask(task),
-            '',
-            'width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1'
-        );
+        openRecordWindow(hrefForTask(task));
     };
 
     /**

package/src/components/controls/DataGridSearch.jsx

@@ -1,4 +1,5 @@
 import { useNavigate } from 'react-router-dom';
+import { openRecordWindow } from '../utils/popupWindow';
 import { toast } from 'react-toastify';
 import { saveAs } from 'file-saver';
 import {
@@ -172,11 +173,7 @@ const DataGridSearch = ({
                                 }
                             } else {
                                 if (form.url) {
-                                    window.open(
-                                        form.url,
-                                        '',
-                                        'width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1'
-                                    );
+                                    openRecordWindow(form.url);
                                 }
                             }
                         }}
@@ -194,11 +191,7 @@ const DataGridSearch = ({
                         onClick={(e) => {
                             e.preventDefault();
 
-                            window.open(
-                                form.url,
-                                '',
-                                'width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1'
-                            );
+                            openRecordWindow(form.url);
                         }}
                     >
                         <Plus

package/src/components/utils/popupWindow.js

@@ -0,0 +1,44 @@
+/**
+ * One geometry for every record window the grid opens.
+ *
+ * The grid used to hard-code 1440×1024, which on a 1080p monitor left a
+ * third of the screen unused and on a laptop spilled off it. A record window
+ * now takes the whole available screen (inset 12px), on whichever monitor the
+ * browser is on, and is named so a second click raises the one already open
+ * instead of stacking another.
+ */
+export const FEATURE_FLAGS = 'menubar=1,resizable=1,status=1,titlebar=1,toolbar=1';
+
+export const popupFeatures = () => {
+    if (typeof window === 'undefined' || !window.screen) {
+        return `width=1440,height=1024,${FEATURE_FLAGS}`;
+    }
+
+    const { availWidth, availHeight, availLeft = 0, availTop = 0 } = window.screen;
+    const width = Math.max(960, (availWidth || 1440) - 24);
+    const height = Math.max(640, (availHeight || 1024) - 24);
+
+    return `width=${width},height=${height},left=${availLeft + 12},top=${availTop + 12},${FEATURE_FLAGS}`;
+};
+
+export const popupName = (url) =>
+    String(url || '')
+        .replace(/^https?:\/\/[^/]+/, '')
+        .replace(/[^a-z0-9]+/gi, '-')
+        .replace(/^-+|-+$/g, '') || 'record';
+
+export const openRecordWindow = (url, name = popupName(url)) => {
+    if (typeof window === 'undefined') return null;
+
+    const popup = window.open(url, name, popupFeatures());
+
+    try {
+        popup?.focus();
+    } catch (error) {
+        // A blocked popup returns null; nothing to focus.
+    }
+
+    return popup;
+};
+
+export default openRecordWindow;