@visns-studio/visns-components 6.15.3 → 6.16.1

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

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/styles/Sms.module.scss

@@ -2216,12 +2216,18 @@ $sms-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
     }
 }
 
+// Columns, not a single list: a practice has a dozen-plus staff and one name
+// per line turned the dialog into a scroll box.
 .staffPicker {
-    display: flex;
-    flex-direction: column;
-    gap: 0.3rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+    gap: 0.3rem 1rem;
     box-sizing: border-box;
-    max-height: 190px;
+    max-height: 220px;
+
+    > .help {
+        grid-column: 1 / -1;
+    }
     padding: 0.5rem 0.6rem;
     border: 1px solid var(--s-line);
     border-radius: var(--s-btn-br);

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=""]'));
+};