@visns-studio/visns-components 6.15.2 → 6.16.0

package/README.md

@@ -300,6 +300,7 @@ connected* rather than as an error, because it is not one.
 | `echo` | `null` | An Echo instance **or** a factory (`() => getEcho()`). A factory is called inside the effect, so a user without messaging never opens a Pusher connection. |
 | `channelFor` | `` (id) => `sms-line.${id}` `` | Return the environment-suffixed name if the deployment shares a Pusher app. |
 | `inboxUrl` | `'/sms'` | A row navigates to `` `${inboxUrl}?thread=<id>` ``. |
+| `shortcut` | `'mod+shift+m'` | Opens/closes the popover from anywhere - ⌘⇧M on a Mac, Ctrl+Shift+M elsewhere (⌘M minimises the window on macOS). A string or a list, like the vault's. |
 | `limit` | `8` | Sent as `per_page`. |
 
 The trigger is the same 40px chip as `Notification` and `VaultQuickSearch`,

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.15.2",
+    "version": "6.16.0",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -3141,9 +3141,9 @@ const DataGrid = forwardRef(
                                 backgroundColor:
                                     'var(--light-bg-color, #f5f5f5)',
                                 borderRadius: '4px',
-                                padding: '4px',
-                                width: '28px',
-                                height: '28px',
+                                padding: '3px',
+                                width: '26px',
+                                height: '26px',
                                 boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
                                 margin: 0,
                                 cursor: 'pointer',
@@ -3190,9 +3190,9 @@ const DataGrid = forwardRef(
                                     backgroundColor:
                                         'var(--light-bg-color, #f5f5f5)',
                                     borderRadius: '4px',
-                                    padding: '4px',
-                                    width: '28px',
-                                    height: '28px',
+                                    padding: '3px',
+                                    width: '26px',
+                                    height: '26px',
                                     boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
                                     margin: 0,
                                     cursor: 'pointer',
@@ -3283,8 +3283,8 @@ const DataGrid = forwardRef(
                             key={`coding-slot-${config.id[0]}-${configKey}`}
                             style={{
                                 display: 'inline-flex',
-                                width: '28px',
-                                height: '28px',
+                                width: '26px',
+                                height: '26px',
                                 margin: '0 1px',
                             }}
                         />
@@ -3296,13 +3296,14 @@ const DataGrid = forwardRef(
             return (
                 <div
                     style={{
-                        // Same shape as the action column's cluster: one row,
-                        // a small even gap, centred in the cell.
+                        // One row of fixed slots, left-aligned so every slot
+                        // lands in the same place on every row (the other
+                        // coding columns - clients, workflow - read that way).
                         display: 'flex',
                         flexWrap: 'nowrap',
                         alignItems: 'center',
-                        justifyContent: 'center',
-                        gap: '4px',
+                        justifyContent: 'flex-start',
+                        gap: '2px',
                         width: '100%',
                         padding: 0,
                         minHeight: '24px',

package/src/components/sms/SmsInboxBadge.jsx

@@ -9,6 +9,11 @@ import styles from '../styles/Sms.module.scss';
 // works inside a Router and outside one. Imported rather than copied so there
 // is one implementation of that decision in the library.
 import withVaultNavigation from '../vault/vaultNavigation';
+import {
+    matchesShortcut,
+    shortcutLabel,
+    shouldIgnoreShortcut,
+} from '../vault/vaultHelpers';
 import { resolveSmsEndpoints } from './smsEndpoints';
 import useSmsLive, { defaultChannelFor } from './useSmsLive';
 import {
@@ -56,10 +61,35 @@ const SmsInboxBadgeInner = ({
     inboxUrl = '/sms',
     limit = 8,
     navigate,
+    // ⌘⇧M / Ctrl+Shift+M. Not ⌘M: macOS minimises the window on that. A
+    // string or a list, like the vault's; the first one is what the tooltip
+    // prints.
+    shortcut = 'mod+shift+m',
 }) => {
     const routes = useMemo(() => resolveSmsEndpoints(endpoints), [endpoints]);
 
     const [open, setOpen] = useState(false);
+
+    // Global, captured: same reasoning as the vault - the point of a chord is
+    // not reaching for the mouse, and a data grid or rich editor that stops
+    // keydown propagation must not swallow it.
+    const shortcutRef = useRef(shortcut);
+    shortcutRef.current = shortcut;
+
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (!matchesShortcut(event, shortcutRef.current)) return;
+            if (shouldIgnoreShortcut(event)) return;
+
+            event.preventDefault();
+            event.stopPropagation();
+            setOpen((prev) => !prev);
+        };
+
+        window.addEventListener('keydown', onKeyDown, true);
+
+        return () => window.removeEventListener('keydown', onKeyDown, true);
+    }, []);
     const [status, setStatus] = useState(null);
     const [lines, setLines] = useState([]);
     const [threads, setThreads] = useState([]);
@@ -293,6 +323,7 @@ const SmsInboxBadgeInner = ({
     /* --------------------------------------------------------------- render */
 
     const label = setting?.label || 'Messages';
+    const hint = shortcutLabel(shortcut);
     const count = badgeCount(unread);
 
     // Two different sentences, because they mean two different things: one is
@@ -368,8 +399,9 @@ const SmsInboxBadgeInner = ({
                 onClick={() => (open ? close() : setOpen(true))}
                 data-tooltip-id="system-tooltip"
                 data-tooltip-place="bottom"
-                data-tooltip-content={label}
+                data-tooltip-content={hint ? `${label} · ${hint}` : label}
                 aria-label={unread > 0 ? `${label} (${unread} unread)` : label}
+                aria-keyshortcuts="Meta+Shift+M Control+Shift+M"
                 aria-expanded={open}
                 aria-haspopup="dialog"
             >

package/src/components/vault/VaultQuickSearch.jsx

@@ -23,46 +23,11 @@ import {
     hostFromUrl,
     isMacPlatform,
     matchesShortcut,
+    shouldIgnoreShortcut,
     openableUrl,
     shortcutLabel,
 } from './vaultHelpers';
 
-/** What the shortcut must not interrupt. */
-const MODAL_SELECTOR = [
-    'dialog[open]',
-    '[aria-modal="true"]',
-    // SweetAlert, which the library uses for confirmations, and which takes
-    // the keyboard for itself while it is up.
-    '.swal2-container',
-].join(', ');
-
-/**
- * Should this keystroke be left alone?
- *
- * ⌘K is a cheap chord, which is the point of it and also the risk: it is the
- * kind of key an editor or a spreadsheet grid binds for itself. So the vault
- * declines it when something modal is already on screen, and when the caret is
- * in rich text — a TinyMCE body is `contenteditable` inside an iframe, and an
- * editor toolbar's own ⌘K (insert link) has a better claim on the keystroke
- * than a header popover does.
- */
-const shouldIgnoreShortcut = (event) => {
-    if (typeof document === 'undefined') return false;
-
-    if (document.querySelector(MODAL_SELECTOR)) return true;
-
-    const target = event.target;
-
-    // A keydown inside an iframe never reaches this window in the first place;
-    // this catches the case where the iframe itself holds focus.
-    if (target?.tagName === 'IFRAME' || document.activeElement?.tagName === 'IFRAME') {
-        return true;
-    }
-
-    if (target?.isContentEditable) return true;
-
-    return Boolean(target?.closest?.('[contenteditable="true"], [contenteditable=""]'));
-};
 
 /**
  * The vault, from the header.

package/src/components/vault/vaultHelpers.js

@@ -545,3 +545,40 @@ export const parseTags = (input) => {
 
     return out;
 };
+
+/** What the shortcut must not interrupt. */
+export const MODAL_SELECTOR = [
+    'dialog[open]',
+    '[aria-modal="true"]',
+    // SweetAlert, which the library uses for confirmations, and which takes
+    // the keyboard for itself while it is up.
+    '.swal2-container',
+].join(', ');
+
+/**
+ * Should this keystroke be left alone?
+ *
+ * ⌘K is a cheap chord, which is the point of it and also the risk: it is the
+ * kind of key an editor or a spreadsheet grid binds for itself. So the vault
+ * declines it when something modal is already on screen, and when the caret is
+ * in rich text — a TinyMCE body is `contenteditable` inside an iframe, and an
+ * editor toolbar's own ⌘K (insert link) has a better claim on the keystroke
+ * than a header popover does.
+ */
+export const shouldIgnoreShortcut = (event) => {
+    if (typeof document === 'undefined') return false;
+
+    if (document.querySelector(MODAL_SELECTOR)) return true;
+
+    const target = event.target;
+
+    // A keydown inside an iframe never reaches this window in the first place;
+    // this catches the case where the iframe itself holds focus.
+    if (target?.tagName === 'IFRAME' || document.activeElement?.tagName === 'IFRAME') {
+        return true;
+    }
+
+    if (target?.isContentEditable) return true;
+
+    return Boolean(target?.closest?.('[contenteditable="true"], [contenteditable=""]'));
+};