@crisp-ui-kit/crisp 0.14.0 → 0.15.0

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

@@ -36,6 +36,7 @@ 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.
@@ -63,16 +64,19 @@ function ContextMenu({ children, items, menuLabel = "Context menu", className, }
             returnFocusTo.current?.focus?.();
         returnFocusTo.current = null;
     }, []);
-    /** The items a roving focus may land on: not separators, not disabled. */
-    const enabled = React.useCallback(() => Array.from(menuRef.current?.querySelectorAll('[role="menuitem"]:not([disabled])') ?? []), []);
     // `role="menu"` puts a screen reader in application mode, where the arrow
-    // keys are the only navigation there is — so opening has to put focus on an
-    // item, or the role is a promise the component does not keep (#188).
-    React.useEffect(() => {
-        if (!pos)
-            return;
-        enabled()[0]?.focus();
-    }, [pos, enabled]);
+    // 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;
@@ -88,29 +92,6 @@ function ContextMenu({ children, items, menuLabel = "Context menu", className, }
             document.removeEventListener("keydown", onKey);
         };
     }, [pos, close]);
-    const onMenuKeyDown = (e) => {
-        // a menu is not a focus trap: Tab leaves, and leaving means closing
-        if (e.key === "Tab") {
-            close(true);
-            return;
-        }
-        const step = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0;
-        const items = enabled();
-        if (!items.length)
-            return;
-        const at = items.indexOf(document.activeElement);
-        let next = null;
-        if (step)
-            next = (at + step + items.length) % items.length;
-        else if (e.key === "Home")
-            next = 0;
-        else if (e.key === "End")
-            next = items.length - 1;
-        if (next === null)
-            return;
-        e.preventDefault();
-        items[next]?.focus();
-    };
     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", tabIndex: -1, onClick: () => {

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

@@ -1,5 +1,6 @@
 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.
@@ -27,16 +28,19 @@ export function ContextMenu({ children, items, menuLabel = "Context menu", class
             returnFocusTo.current?.focus?.();
         returnFocusTo.current = null;
     }, []);
-    /** The items a roving focus may land on: not separators, not disabled. */
-    const enabled = React.useCallback(() => Array.from(menuRef.current?.querySelectorAll('[role="menuitem"]:not([disabled])') ?? []), []);
     // `role="menu"` puts a screen reader in application mode, where the arrow
-    // keys are the only navigation there is — so opening has to put focus on an
-    // item, or the role is a promise the component does not keep (#188).
-    React.useEffect(() => {
-        if (!pos)
-            return;
-        enabled()[0]?.focus();
-    }, [pos, enabled]);
+    // 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;
@@ -52,29 +56,6 @@ export function ContextMenu({ children, items, menuLabel = "Context menu", class
             document.removeEventListener("keydown", onKey);
         };
     }, [pos, close]);
-    const onMenuKeyDown = (e) => {
-        // a menu is not a focus trap: Tab leaves, and leaving means closing
-        if (e.key === "Tab") {
-            close(true);
-            return;
-        }
-        const step = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0;
-        const items = enabled();
-        if (!items.length)
-            return;
-        const at = items.indexOf(document.activeElement);
-        let next = null;
-        if (step)
-            next = (at + step + items.length) % items.length;
-        else if (e.key === "Home")
-            next = 0;
-        else if (e.key === "End")
-            next = items.length - 1;
-        if (next === null)
-            return;
-        e.preventDefault();
-        items[next]?.focus();
-    };
     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", tabIndex: -1, onClick: () => {

package/package.json

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