@visns-studio/visns-components 6.16.2 → 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.2",
+    "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,
@@ -3953,14 +3949,15 @@ const DataGrid = forwardRef(
                             // screens) — columns then render a few px wide
                             // with no horizontal scrollbar ever appearing.
                             // A date filter needs room for its locale mask
-                            // ("dd/mm/yyyy" + the picker glyph); below ~140px
-                            // the native input clips its own value.
+                            // ("dd / mm / yyyy" in Firefox, glyph included -
+                            // Firefox will not hide it); below ~160px the
+                            // native input clips its own value.
                             minWidth:
                                 column.minWidth ??
                                 (['date', 'datetime', 'datetime-local'].includes(
                                     column.type
                                 )
-                                    ? Math.max(grid.columnMinWidth, 140)
+                                    ? Math.max(grid.columnMinWidth, 160)
                                     : grid.columnMinWidth),
                             maxWidth: column.maxWidth ?? undefined,
                             textAlign: column.textAlign ?? undefined,

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/styles/global-datagrid.css

@@ -541,6 +541,20 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
     display: none;
 }
 
+/* Firefox (109+) draws its calendar glyph as part of the control and ignores
+   the pseudo-element above, and it pads each date segment itself, which sat
+   the text high in the 32px row. Tighter metrics, and the column default below
+   (160px for date types) leaves the glyph its room. */
+@-moz-document url-prefix() {
+    .visns-native-date-filter__input {
+        padding: 0 0 0 2px;
+        font-size: 12px;
+        line-height: 28px;
+        height: 28px;
+        align-self: center;
+    }
+}
+
 .visns-native-date-filter__clear {
     flex: none;
     align-self: center;

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;