@cytario/design 9.6.0 → 9.6.2

package/dist/index.d.ts

@@ -448,6 +448,8 @@ declare function Menu({ items, content, children, onAction, selectionMode, selec
 interface UseContextMenuProps {
     /** Menu body — compose `MenuItem` / `MenuSeparator` / `MenuSection`. */
     content: ReactNode;
+    /** Accessible name for the menu (sets `aria-label` on the `<menu>`). */
+    label?: string;
     /** Called with the activated item key (fires alongside each item's own `onAction`). */
     onAction?: (key: string) => void;
     /** Extra classes for the menu popover. */
@@ -464,6 +466,10 @@ interface UseContextMenuResult {
      */
     triggerProps: {
         onPress: (event: PressEvent) => void;
+        onClick: (event: React.MouseEvent) => void;
+        "aria-haspopup": "menu";
+        "aria-expanded": boolean;
+        "aria-controls": string | undefined;
     };
     /** Render this wherever — it portals itself. */
     menu: ReactNode;
@@ -487,7 +493,7 @@ interface UseContextMenuResult {
  * the trigger's rect for keyboard opens) — React-Aria's positioning observes
  * the trigger with a `ResizeObserver`, so a plain virtual object won't do.
  */
-declare function useContextMenu({ content, onAction, className, }: UseContextMenuProps): UseContextMenuResult;
+declare function useContextMenu({ content, label, onAction, className, }: UseContextMenuProps): UseContextMenuResult;
 
 interface MenuItemProps {
     id: string;

package/dist/index.js

@@ -2204,22 +2204,24 @@ function Menu2({
 import {
   useCallback as useCallback3,
   useEffect as useEffect3,
+  useId as useId2,
   useRef as useRef5,
   useState as useState7
 } from "react";
 import {
   Menu as AriaMenu2,
   MenuTrigger as MenuTrigger2,
-  Popover as Popover3,
-  Pressable
+  Popover as Popover3
 } from "react-aria-components";
 import { twMerge as twMerge16 } from "tailwind-merge";
 import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 function useContextMenu({
   content,
+  label,
   onAction,
   className
 }) {
+  const popoverId = useId2();
   const [anchor, setAnchor] = useState7(null);
   const anchorRef = useRef5(null);
   const popoverRef = useRef5(null);
@@ -2264,25 +2266,29 @@ function useContextMenu({
         if (!open) close();
       },
       children: [
-        /* @__PURE__ */ jsx30(Pressable, { children: /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx30(
           "span",
           {
             ref: anchorRef,
             "aria-hidden": true,
+            tabIndex: -1,
             className: "pointer-events-none fixed h-0 w-0",
             style: { left: anchor?.x ?? 0, top: anchor?.y ?? 0 }
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx30(
           Popover3,
           {
             isNonModal: true,
+            triggerRef: anchorRef,
             placement: "bottom start",
             ref: popoverRef,
             className: twMerge16(popoverStyles, className),
             children: /* @__PURE__ */ jsx30(
               AriaMenu2,
               {
+                id: popoverId,
+                "aria-label": label,
                 autoFocus: "first",
                 onAction: (key) => {
                   onAction?.(String(key));
@@ -2299,7 +2305,15 @@ function useContextMenu({
   );
   return {
     targetProps: { onContextMenu },
-    triggerProps: { onPress },
+    triggerProps: {
+      onPress,
+      onClick: (e) => {
+        e.preventDefault();
+      },
+      "aria-haspopup": "menu",
+      "aria-expanded": isOpen,
+      "aria-controls": isOpen ? popoverId : void 0
+    },
     menu,
     isOpen,
     close