@crisp-ui-kit/crisp 0.41.0 → 0.42.0

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

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContextMenu = ContextMenu;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_slot_1 = require("@radix-ui/react-slot");
 const React = __importStar(require("react"));
 const core_1 = require("../../core");
 const menu_1 = require("../menu");
@@ -44,7 +45,7 @@ const contextmenu_recipe_1 = require("./contextmenu.recipe");
  * 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, menuLabel = "Context menu", className, }) {
+function ContextMenu({ children, items, menuLabel = "Context menu", className, asChild = false, }) {
     const rootRef = React.useRef(null);
     const menuRef = React.useRef(null);
     const returnFocusTo = React.useRef(null);
@@ -109,7 +110,7 @@ function ContextMenu({ children, items, menuLabel = "Context menu", 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)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "crisp-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: "crisp-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)(jsx_runtime_1.Fragment, { children: [asChild ? ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { ref: rootRef, className: className, onContextMenu: open, children: children })) : ((0, jsx_runtime_1.jsx)("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)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "crisp-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: "crisp-contextmenu-sep" }, i)) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
                             ? "crisp-contextmenu-item crisp-contextmenu-item--danger"
                             : "crisp-contextmenu-item", tabIndex: -1, onClick: () => {
                             item.onSelect?.();

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

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
 import { FloatingPortal, isInsideLaterFloatingLayer, registerFloatingLayer, } from "../../core/index.js";
 import { useMenuKeyboard } from "../menu/index.js";
@@ -8,7 +9,7 @@ import { contextmenuRecipe } from "./contextmenu.recipe.js";
  * 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, menuLabel = "Context menu", className, }) {
+export function ContextMenu({ children, items, menuLabel = "Context menu", className, asChild = false, }) {
     const rootRef = React.useRef(null);
     const menuRef = React.useRef(null);
     const returnFocusTo = React.useRef(null);
@@ -73,7 +74,7 @@ export function ContextMenu({ children, items, menuLabel = "Context menu", class
             document.removeEventListener("keydown", onKey);
         };
     }, [pos, close]);
-    return (_jsxs("div", { ref: rootRef, className: contextmenuRecipe({ className }), children: [_jsx("div", { onContextMenu: open, children: children }), pos && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsx("div", { ref: menuRef, className: "crisp-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: "crisp-contextmenu-sep" }, i)) : (_jsxs("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
+    return (_jsxs(_Fragment, { children: [asChild ? (_jsx(Slot, { ref: rootRef, className: className, onContextMenu: open, children: children })) : (_jsx("div", { ref: rootRef, className: contextmenuRecipe({ className }), children: _jsx("div", { onContextMenu: open, children: children }) })), pos && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsx("div", { ref: menuRef, className: "crisp-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: "crisp-contextmenu-sep" }, i)) : (_jsxs("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
                             ? "crisp-contextmenu-item crisp-contextmenu-item--danger"
                             : "crisp-contextmenu-item", tabIndex: -1, onClick: () => {
                             item.onSelect?.();

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

@@ -17,13 +17,23 @@ export type ContextMenuProps = {
     /** Accessible name for the menu surface. */
     menuLabel?: string;
     className?: string;
+    /**
+     * Render `onContextMenu` and the trigger ref directly onto `children`
+     * instead of wrapping it in a `<div>` (#340) — needed when `children` is
+     * an element that cannot have a wrapping element inserted around it, such
+     * as a `<tr>` inside a `<tbody>` (the browser's HTML parser hoists the row
+     * out of the wrapping `<div>`, breaking both the layout and the
+     * right-click target). `children` must then be a single valid React
+     * element, same as any other `asChild` in crisp (`core/primitive.tsx`).
+     */
+    asChild?: boolean;
 };
 /**
  * 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 declare function ContextMenu({ children, items, menuLabel, className, }: ContextMenuProps): React.JSX.Element;
+export declare function ContextMenu({ children, items, menuLabel, className, asChild, }: 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.41.0",
+  "version": "0.42.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",