@crisp-ui-kit/crisp 0.13.1 → 0.15.0

package/dist/cjs/components/contextmenu/contextmenu.js

@@ -36,23 +36,47 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContextMenu = ContextMenu;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
+const menu_1 = require("../menu");
 const contextmenu_recipe_1 = require("./contextmenu.recipe");
 /**
  * A right-click context menu — the popover surface positioned at the cursor.
  * Wrap the target; right-clicking it opens the menu (flipping at the viewport
  * edges), closing on select, outside pointer-down, and Escape.
  */
-function ContextMenu({ children, items, className }) {
+function ContextMenu({ children, items, menuLabel = "Context menu", className, }) {
     const rootRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const returnFocusTo = React.useRef(null);
     const [pos, setPos] = React.useState(null);
     const open = (e) => {
         e.preventDefault();
+        // where focus goes back to on close. The menu takes focus to be operable
+        // at all, so something has to remember what had it.
+        returnFocusTo.current = document.activeElement;
         // flip so the menu stays on-screen near the right/bottom edges
         const x = Math.min(e.clientX, window.innerWidth - 220);
         const y = Math.min(e.clientY, window.innerHeight - 12 - items.length * 34);
         setPos({ x: Math.max(8, x), y: Math.max(8, y) });
     };
-    const close = React.useCallback(() => setPos(null), []);
+    const close = React.useCallback((restoreFocus = false) => {
+        setPos(null);
+        if (restoreFocus)
+            returnFocusTo.current?.focus?.();
+        returnFocusTo.current = null;
+    }, []);
+    // `role="menu"` puts a screen reader in application mode, where the arrow
+    // keys are the only navigation there is (#188). The model itself is crisp's
+    // shared one (#192) — Menu and all three RecordsTable surfaces run the same
+    // hook, and a fourth hand-written copy is how typeahead, menuitemcheckbox
+    // and the `[data-disabled]` spelling get lost one surface at a time.
+    const { onKeyDown: onMenuKeyDown } = (0, menu_1.useMenuKeyboard)({
+        open: !!pos,
+        close: () => close(true),
+        // Tab: the browser is already moving focus somewhere, so pulling it back
+        // to the trigger first would land the user in the wrong place
+        dismiss: () => close(),
+        contentRef: menuRef,
+    });
     React.useEffect(() => {
         if (!pos)
             return;
@@ -60,7 +84,7 @@ function ContextMenu({ children, items, className }) {
             if (!rootRef.current?.contains(e.target))
                 close();
         };
-        const onKey = (e) => e.key === "Escape" && close();
+        const onKey = (e) => e.key === "Escape" && close(true);
         document.addEventListener("pointerdown", onDown);
         document.addEventListener("keydown", onKey);
         return () => {
@@ -68,11 +92,11 @@ function ContextMenu({ children, items, className }) {
             document.removeEventListener("keydown", onKey);
         };
     }, [pos, close]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, contextmenu_recipe_1.contextmenuRecipe)({ className }), children: [(0, jsx_runtime_1.jsx)("div", { onContextMenu: open, children: children }), pos && ((0, jsx_runtime_1.jsx)("div", { className: "contextmenu-content", role: "menu", style: { left: pos.x, top: pos.y }, children: items.map((item, i) => item.separator ? ((0, jsx_runtime_1.jsx)("hr", { className: "contextmenu-sep" }, i)) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, contextmenu_recipe_1.contextmenuRecipe)({ className }), children: [(0, jsx_runtime_1.jsx)("div", { onContextMenu: open, children: children }), pos && ((0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "contextmenu-content", role: "menu", "aria-label": menuLabel, style: { left: pos.x, top: pos.y }, onKeyDown: onMenuKeyDown, children: items.map((item, i) => item.separator ? ((0, jsx_runtime_1.jsx)("hr", { className: "contextmenu-sep" }, i)) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
                         ? "contextmenu-item contextmenu-item--danger"
-                        : "contextmenu-item", onClick: () => {
+                        : "contextmenu-item", tabIndex: -1, onClick: () => {
                         item.onSelect?.();
-                        close();
+                        close(true);
                     }, children: [item.icon, item.label, item.shortcut && ((0, jsx_runtime_1.jsx)("span", { className: "contextmenu-shortcut", children: item.shortcut }))] }, i))) }))] }));
 }
 ContextMenu.displayName = "ContextMenu";

package/dist/esm/components/contextmenu/contextmenu.js

@@ -1,22 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useMenuKeyboard } from "../menu/index.js";
 import { contextmenuRecipe } from "./contextmenu.recipe.js";
 /**
  * A right-click context menu — the popover surface positioned at the cursor.
  * Wrap the target; right-clicking it opens the menu (flipping at the viewport
  * edges), closing on select, outside pointer-down, and Escape.
  */
-export function ContextMenu({ children, items, className }) {
+export function ContextMenu({ children, items, menuLabel = "Context menu", className, }) {
     const rootRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const returnFocusTo = React.useRef(null);
     const [pos, setPos] = React.useState(null);
     const open = (e) => {
         e.preventDefault();
+        // where focus goes back to on close. The menu takes focus to be operable
+        // at all, so something has to remember what had it.
+        returnFocusTo.current = document.activeElement;
         // flip so the menu stays on-screen near the right/bottom edges
         const x = Math.min(e.clientX, window.innerWidth - 220);
         const y = Math.min(e.clientY, window.innerHeight - 12 - items.length * 34);
         setPos({ x: Math.max(8, x), y: Math.max(8, y) });
     };
-    const close = React.useCallback(() => setPos(null), []);
+    const close = React.useCallback((restoreFocus = false) => {
+        setPos(null);
+        if (restoreFocus)
+            returnFocusTo.current?.focus?.();
+        returnFocusTo.current = null;
+    }, []);
+    // `role="menu"` puts a screen reader in application mode, where the arrow
+    // keys are the only navigation there is (#188). The model itself is crisp's
+    // shared one (#192) — Menu and all three RecordsTable surfaces run the same
+    // hook, and a fourth hand-written copy is how typeahead, menuitemcheckbox
+    // and the `[data-disabled]` spelling get lost one surface at a time.
+    const { onKeyDown: onMenuKeyDown } = useMenuKeyboard({
+        open: !!pos,
+        close: () => close(true),
+        // Tab: the browser is already moving focus somewhere, so pulling it back
+        // to the trigger first would land the user in the wrong place
+        dismiss: () => close(),
+        contentRef: menuRef,
+    });
     React.useEffect(() => {
         if (!pos)
             return;
@@ -24,7 +48,7 @@ export function ContextMenu({ children, items, className }) {
             if (!rootRef.current?.contains(e.target))
                 close();
         };
-        const onKey = (e) => e.key === "Escape" && close();
+        const onKey = (e) => e.key === "Escape" && close(true);
         document.addEventListener("pointerdown", onDown);
         document.addEventListener("keydown", onKey);
         return () => {
@@ -32,11 +56,11 @@ export function ContextMenu({ children, items, className }) {
             document.removeEventListener("keydown", onKey);
         };
     }, [pos, close]);
-    return (_jsxs("div", { ref: rootRef, className: contextmenuRecipe({ className }), children: [_jsx("div", { onContextMenu: open, children: children }), pos && (_jsx("div", { className: "contextmenu-content", role: "menu", style: { left: pos.x, top: pos.y }, children: items.map((item, i) => item.separator ? (_jsx("hr", { className: "contextmenu-sep" }, i)) : (_jsxs("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
+    return (_jsxs("div", { ref: rootRef, className: contextmenuRecipe({ className }), children: [_jsx("div", { onContextMenu: open, children: children }), pos && (_jsx("div", { ref: menuRef, className: "contextmenu-content", role: "menu", "aria-label": menuLabel, style: { left: pos.x, top: pos.y }, onKeyDown: onMenuKeyDown, children: items.map((item, i) => item.separator ? (_jsx("hr", { className: "contextmenu-sep" }, i)) : (_jsxs("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
                         ? "contextmenu-item contextmenu-item--danger"
-                        : "contextmenu-item", onClick: () => {
+                        : "contextmenu-item", tabIndex: -1, onClick: () => {
                         item.onSelect?.();
-                        close();
+                        close(true);
                     }, children: [item.icon, item.label, item.shortcut && (_jsx("span", { className: "contextmenu-shortcut", children: item.shortcut }))] }, i))) }))] }));
 }
 ContextMenu.displayName = "ContextMenu";

package/dist/types/components/contextmenu/contextmenu.d.ts

@@ -14,6 +14,8 @@ export type ContextMenuProps = {
     /** The area that opens the menu on right-click. */
     children: React.ReactNode;
     items: ContextMenuOption[];
+    /** Accessible name for the menu surface. */
+    menuLabel?: string;
     className?: string;
 };
 /**
@@ -21,7 +23,7 @@ export type ContextMenuProps = {
  * Wrap the target; right-clicking it opens the menu (flipping at the viewport
  * edges), closing on select, outside pointer-down, and Escape.
  */
-export declare function ContextMenu({ children, items, className }: ContextMenuProps): React.JSX.Element;
+export declare function ContextMenu({ children, items, menuLabel, className, }: ContextMenuProps): React.JSX.Element;
 export declare namespace ContextMenu {
     var displayName: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",