@malilion/block-ui-react 0.4.0 → 0.5.0

package/dist/components/actions/BlockMenu/BlockMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/BlockMenu/BlockMenu.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAKvE;;;;;GAKG;AACH,eAAO,MAAM,SAAS,2GAqPpB,CAAC"}
+{"version":3,"file":"BlockMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/BlockMenu/BlockMenu.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAIvE;;;;;GAKG;AACH,eAAO,MAAM,SAAS,2GA0HpB,CAAC"}

package/dist/components/actions/BlockMenu/BlockMenu.js

@@ -1,13 +1,12 @@
 import { cx } from "../../../utils/cx.js";
-import { usePortalContainer } from "../../../provider/context.js";
 import { BlockButton } from "../BlockButton/BlockButton.js";
 import IconButton_module_default from "../IconButton/IconButton.module.js";
 import { useAnchoredPosition } from "../../../hooks/useAnchoredPosition.js";
 import { mergeRefs } from "../../../utils/refs.js";
 import BlockMenu_module_default from "./BlockMenu.module.js";
-import { isMenuItem, typeaheadIndex } from "./BlockMenu.utils.js";
-import { forwardRef, useEffect, useId, useRef, useState } from "react";
-import { createPortal } from "react-dom";
+import { enabledMenuIndexes } from "./BlockMenu.utils.js";
+import { MenuList } from "./MenuList.js";
+import { forwardRef, useId, useRef, useState } from "react";
 import { ChevronDownIcon } from "@malilion/block-ui-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/actions/BlockMenu/BlockMenu.tsx
@@ -21,11 +20,9 @@ var BlockMenu = forwardRef(function BlockMenu({ label, items, onSelect, variant
 	const baseId = useId();
 	const triggerId = `${baseId}-trigger`;
 	const menuId = `${baseId}-menu`;
-	const container = usePortalContainer();
 	const rootRef = useRef(null);
 	const menuRef = useRef(null);
 	const triggerRef = useRef(null);
-	const itemRefs = useRef(/* @__PURE__ */ new Map());
 	const [open, setOpenState] = useState(false);
 	const [focusTarget, setFocusTarget] = useState(null);
 	const position = useAnchoredPosition(triggerRef, menuRef, open, {
@@ -34,14 +31,12 @@ var BlockMenu = forwardRef(function BlockMenu({ label, items, onSelect, variant
 		gap: 4
 	});
 	const isInside = (node) => Boolean(node && (rootRef.current?.contains(node) || menuRef.current?.contains(node)));
-	const menuItems = items.filter(isMenuItem);
-	const enabledIndexes = menuItems.flatMap((item, index) => item.disabled ? [] : [index]);
 	const setOpen = (next) => {
 		setOpenState(next);
 		onOpenChange?.(next);
 	};
 	const openMenu = (target) => {
-		if (disabled || enabledIndexes.length === 0) return;
+		if (disabled || enabledMenuIndexes(items).length === 0) return;
 		setOpen(true);
 		setFocusTarget(target);
 	};
@@ -50,29 +45,7 @@ var BlockMenu = forwardRef(function BlockMenu({ label, items, onSelect, variant
 		setFocusTarget(null);
 		if (returnFocus) triggerRef.current?.focus();
 	};
-	const focusItem = (index) => {
-		const item = menuItems[index];
-		if (item) itemRefs.current.get(item.id)?.focus();
-	};
-	useEffect(() => {
-		if (!open || focusTarget === null || !position) return;
-		const index = focusTarget === "first" ? enabledIndexes[0] : focusTarget === "last" ? enabledIndexes[enabledIndexes.length - 1] : focusTarget;
-		if (index !== void 0) focusItem(index);
-	}, [
-		open,
-		focusTarget,
-		position !== null
-	]);
-	useEffect(() => {
-		if (!open) return;
-		const onPointerDown = (event) => {
-			if (!isInside(event.target)) closeMenu(false);
-		};
-		document.addEventListener("pointerdown", onPointerDown);
-		return () => document.removeEventListener("pointerdown", onPointerDown);
-	}, [open]);
 	const choose = (item) => {
-		if (item.disabled) return;
 		closeMenu(true);
 		item.onSelect?.();
 		onSelect?.(item.id);
@@ -86,44 +59,6 @@ var BlockMenu = forwardRef(function BlockMenu({ label, items, onSelect, variant
 			openMenu("last");
 		}
 	};
-	const onMenuKeyDown = (event) => {
-		const current = menuItems.findIndex((item) => itemRefs.current.get(item.id) === document.activeElement);
-		const position = enabledIndexes.indexOf(current);
-		const count = enabledIndexes.length;
-		let next;
-		switch (event.key) {
-			case "ArrowDown":
-				next = enabledIndexes[(position + 1) % count];
-				break;
-			case "ArrowUp":
-				next = enabledIndexes[(position - 1 + count) % count];
-				break;
-			case "Home":
-				next = enabledIndexes[0];
-				break;
-			case "End":
-				next = enabledIndexes[count - 1];
-				break;
-			case "Escape":
-				event.preventDefault();
-				event.stopPropagation();
-				closeMenu(true);
-				return;
-			case "Tab":
-				closeMenu(true);
-				return;
-			default: if (event.key.length === 1 && /\S/.test(event.key) && !event.ctrlKey && !event.metaKey) {
-				const match = typeaheadIndex(menuItems, current, event.key);
-				if (match >= 0) next = match;
-			}
-		}
-		if (next === void 0) return;
-		event.preventDefault();
-		focusItem(next);
-	};
-	const onMenuBlur = (event) => {
-		if (!isInside(event.relatedTarget)) closeMenu(false);
-	};
 	return /* @__PURE__ */ jsxs("div", {
 		ref: mergeRefs(ref, rootRef),
 		className: cx(BlockMenu_module_default.root, className),
@@ -154,55 +89,20 @@ var BlockMenu = forwardRef(function BlockMenu({ label, items, onSelect, variant
 				"aria-hidden": "true",
 				children: icon
 			}) : label
-		}), container ? createPortal(/* @__PURE__ */ jsx("div", {
-			ref: menuRef,
+		}), /* @__PURE__ */ jsx(MenuList, {
 			id: menuId,
-			role: "menu",
-			tabIndex: -1,
-			"aria-labelledby": triggerId,
-			hidden: !open,
-			"data-align": align,
-			"data-placement": position?.side ?? placement,
-			className: BlockMenu_module_default.menu,
-			style: position?.style,
-			onKeyDown: onMenuKeyDown,
-			onBlur: onMenuBlur,
-			children: items.map((entry, index) => {
-				if (!isMenuItem(entry)) return /* @__PURE__ */ jsx("div", {
-					role: "separator",
-					className: BlockMenu_module_default.separator
-				}, entry.id ?? `separator-${index}`);
-				return /* @__PURE__ */ jsxs("button", {
-					ref: (element) => {
-						if (element) itemRefs.current.set(entry.id, element);
-						else itemRefs.current.delete(entry.id);
-					},
-					type: "button",
-					role: "menuitem",
-					tabIndex: -1,
-					"aria-disabled": entry.disabled || void 0,
-					"data-danger": entry.danger || void 0,
-					className: BlockMenu_module_default.item,
-					onClick: () => choose(entry),
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: BlockMenu_module_default.icon,
-							"aria-hidden": "true",
-							children: entry.icon
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: BlockMenu_module_default.label,
-							children: entry.label
-						}),
-						entry.shortcut ? /* @__PURE__ */ jsx("kbd", {
-							className: BlockMenu_module_default.shortcut,
-							"aria-hidden": "true",
-							children: entry.shortcut
-						}) : null
-					]
-				}, entry.id);
-			})
-		}), container) : null]
+			items,
+			open,
+			focusTarget,
+			menuRef,
+			position,
+			labelledBy: triggerId,
+			align,
+			placement,
+			isInside,
+			onClose: closeMenu,
+			onChoose: choose
+		})]
 	});
 });
 //#endregion

package/dist/components/actions/BlockMenu/BlockMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockMenu.js","names":["styles","iconButtonStyles"],"sources":["../../../../src/components/actions/BlockMenu/BlockMenu.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@malilion/block-ui-icons\";\nimport {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type FocusEvent,\n  type KeyboardEvent,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAnchoredPosition } from \"../../../hooks/useAnchoredPosition\";\nimport { usePortalContainer } from \"../../../provider/context\";\nimport { cx } from \"../../../utils/cx\";\nimport { mergeRefs } from \"../../../utils/refs\";\nimport { BlockButton } from \"../BlockButton/BlockButton\";\nimport iconButtonStyles from \"../IconButton/IconButton.module.css\";\nimport styles from \"./BlockMenu.module.css\";\nimport type { BlockMenuItem, BlockMenuProps } from \"./BlockMenu.types\";\nimport { isMenuItem, typeaheadIndex } from \"./BlockMenu.utils\";\n\ntype FocusTarget = \"first\" | \"last\" | number;\n\n/**\n * Dropdown menu button following the WAI-ARIA menu button pattern: arrow keys\n * move with wrap-around, Home/End jump, letters type-ahead, Enter/Space choose\n * and Escape closes — focus always returns to the trigger. The menu renders in\n * the provider's overlay layer, so scroll containers (tables) never clip it.\n */\nexport const BlockMenu = forwardRef<HTMLDivElement, BlockMenuProps>(function BlockMenu(\n  {\n    label,\n    items,\n    onSelect,\n    variant = \"stone\",\n    size = \"md\",\n    icon,\n    iconOnly = false,\n    align = \"start\",\n    placement = \"bottom\",\n    disabled = false,\n    onOpenChange,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const baseId = useId();\n  const triggerId = `${baseId}-trigger`;\n  const menuId = `${baseId}-menu`;\n  const container = usePortalContainer();\n  const rootRef = useRef<HTMLDivElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const itemRefs = useRef(new Map<string, HTMLButtonElement>());\n  const [open, setOpenState] = useState(false);\n  const [focusTarget, setFocusTarget] = useState<FocusTarget | null>(null);\n\n  const position = useAnchoredPosition(triggerRef, menuRef, open, {\n    side: placement,\n    align: align === \"end\" ? \"end\" : \"start\",\n    gap: 4,\n  });\n  const isInside = (node: Node | null) =>\n    Boolean(node && (rootRef.current?.contains(node) || menuRef.current?.contains(node)));\n\n  const menuItems = items.filter(isMenuItem);\n  const enabledIndexes = menuItems.flatMap((item, index) => (item.disabled ? [] : [index]));\n\n  const setOpen = (next: boolean) => {\n    setOpenState(next);\n    onOpenChange?.(next);\n  };\n\n  const openMenu = (target: FocusTarget) => {\n    if (disabled || enabledIndexes.length === 0) return;\n    setOpen(true);\n    setFocusTarget(target);\n  };\n\n  const closeMenu = (returnFocus: boolean) => {\n    setOpen(false);\n    setFocusTarget(null);\n    if (returnFocus) triggerRef.current?.focus();\n  };\n\n  const focusItem = (index: number) => {\n    const item = menuItems[index];\n    if (item) itemRefs.current.get(item.id)?.focus();\n  };\n\n  useEffect(() => {\n    if (!open || focusTarget === null || !position) return;\n    const index =\n      focusTarget === \"first\"\n        ? enabledIndexes[0]\n        : focusTarget === \"last\"\n          ? enabledIndexes[enabledIndexes.length - 1]\n          : focusTarget;\n    if (index !== undefined) focusItem(index);\n    // Focus once the menu is open and positioned, or when the target changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, focusTarget, position !== null]);\n\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (event: PointerEvent) => {\n      if (!isInside(event.target as Node)) closeMenu(false);\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => document.removeEventListener(\"pointerdown\", onPointerDown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open]);\n\n  const choose = (item: BlockMenuItem) => {\n    if (item.disabled) return;\n    closeMenu(true);\n    item.onSelect?.();\n    onSelect?.(item.id);\n  };\n\n  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === \"ArrowDown\" || event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      openMenu(\"first\");\n    } else if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n      openMenu(\"last\");\n    }\n  };\n\n  const onMenuKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const current = menuItems.findIndex(\n      (item) => itemRefs.current.get(item.id) === document.activeElement,\n    );\n    const position = enabledIndexes.indexOf(current);\n    const count = enabledIndexes.length;\n    let next: number | undefined;\n\n    switch (event.key) {\n      case \"ArrowDown\":\n        next = enabledIndexes[(position + 1) % count];\n        break;\n      case \"ArrowUp\":\n        next = enabledIndexes[(position - 1 + count) % count];\n        break;\n      case \"Home\":\n        next = enabledIndexes[0];\n        break;\n      case \"End\":\n        next = enabledIndexes[count - 1];\n        break;\n      case \"Escape\":\n        event.preventDefault();\n        event.stopPropagation();\n        closeMenu(true);\n        return;\n      case \"Tab\":\n        // The menu lives in the overlay layer at the end of the page: hand focus back to the\n        // trigger first so the browser's Tab continues from the trigger's place in the page.\n        closeMenu(true);\n        return;\n      default:\n        if (event.key.length === 1 && /\\S/.test(event.key) && !event.ctrlKey && !event.metaKey) {\n          const match = typeaheadIndex(menuItems, current, event.key);\n          if (match >= 0) next = match;\n        }\n    }\n    if (next === undefined) return;\n    event.preventDefault();\n    focusItem(next);\n  };\n\n  const onMenuBlur = (event: FocusEvent<HTMLDivElement>) => {\n    if (!isInside(event.relatedTarget as Node | null)) closeMenu(false);\n  };\n\n  return (\n    <div\n      ref={mergeRefs(ref, rootRef)}\n      className={cx(styles.root, className)}\n      data-open={open || undefined}\n      {...rest}\n    >\n      <BlockButton\n        ref={triggerRef}\n        id={triggerId}\n        variant={variant}\n        size={size}\n        disabled={disabled}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        aria-controls={menuId}\n        aria-label={iconOnly ? label : undefined}\n        title={iconOnly ? label : undefined}\n        startIcon={iconOnly ? undefined : icon}\n        endIcon={\n          iconOnly ? undefined : (\n            <span className={styles.chevron} aria-hidden=\"true\">\n              <ChevronDownIcon size={16} />\n            </span>\n          )\n        }\n        className={cx(iconOnly && iconButtonStyles.iconButton)}\n        onClick={() => (open ? closeMenu(false) : openMenu(\"first\"))}\n        onKeyDown={onTriggerKeyDown}\n      >\n        {iconOnly ? (\n          <span className={iconButtonStyles.icon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        ) : (\n          label\n        )}\n      </BlockButton>\n      {container\n        ? createPortal(\n            <div\n              ref={menuRef}\n              id={menuId}\n              role=\"menu\"\n              tabIndex={-1}\n              aria-labelledby={triggerId}\n              hidden={!open}\n              data-align={align}\n              data-placement={position?.side ?? placement}\n              className={styles.menu}\n              style={position?.style}\n              onKeyDown={onMenuKeyDown}\n              onBlur={onMenuBlur}\n            >\n              {items.map((entry, index) => {\n                if (!isMenuItem(entry)) {\n                  return (\n                    <div\n                      key={entry.id ?? `separator-${index}`}\n                      role=\"separator\"\n                      className={styles.separator}\n                    />\n                  );\n                }\n                return (\n                  <button\n                    key={entry.id}\n                    ref={(element) => {\n                      if (element) itemRefs.current.set(entry.id, element);\n                      else itemRefs.current.delete(entry.id);\n                    }}\n                    type=\"button\"\n                    role=\"menuitem\"\n                    tabIndex={-1}\n                    aria-disabled={entry.disabled || undefined}\n                    data-danger={entry.danger || undefined}\n                    className={styles.item}\n                    onClick={() => choose(entry)}\n                  >\n                    <span className={styles.icon} aria-hidden=\"true\">\n                      {entry.icon}\n                    </span>\n                    <span className={styles.label}>{entry.label}</span>\n                    {entry.shortcut ? (\n                      <kbd className={styles.shortcut} aria-hidden=\"true\">\n                        {entry.shortcut}\n                      </kbd>\n                    ) : null}\n                  </button>\n                );\n              })}\n            </div>,\n            container,\n          )\n        : null}\n    </div>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"BlockMenu.js","names":["styles","iconButtonStyles"],"sources":["../../../../src/components/actions/BlockMenu/BlockMenu.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@malilion/block-ui-icons\";\nimport { forwardRef, useId, useRef, useState, type KeyboardEvent } from \"react\";\nimport { useAnchoredPosition } from \"../../../hooks/useAnchoredPosition\";\nimport { cx } from \"../../../utils/cx\";\nimport { mergeRefs } from \"../../../utils/refs\";\nimport { BlockButton } from \"../BlockButton/BlockButton\";\nimport iconButtonStyles from \"../IconButton/IconButton.module.css\";\nimport styles from \"./BlockMenu.module.css\";\nimport type { BlockMenuItem, BlockMenuProps } from \"./BlockMenu.types\";\nimport { enabledMenuIndexes } from \"./BlockMenu.utils\";\nimport { MenuList, type MenuFocusTarget } from \"./MenuList\";\n\n/**\n * Dropdown menu button following the WAI-ARIA menu button pattern: arrow keys\n * move with wrap-around, Home/End jump, letters type-ahead, Enter/Space choose\n * and Escape closes — focus always returns to the trigger. The menu renders in\n * the provider's overlay layer, so scroll containers (tables) never clip it.\n */\nexport const BlockMenu = forwardRef<HTMLDivElement, BlockMenuProps>(function BlockMenu(\n  {\n    label,\n    items,\n    onSelect,\n    variant = \"stone\",\n    size = \"md\",\n    icon,\n    iconOnly = false,\n    align = \"start\",\n    placement = \"bottom\",\n    disabled = false,\n    onOpenChange,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const baseId = useId();\n  const triggerId = `${baseId}-trigger`;\n  const menuId = `${baseId}-menu`;\n  const rootRef = useRef<HTMLDivElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const [open, setOpenState] = useState(false);\n  const [focusTarget, setFocusTarget] = useState<MenuFocusTarget | null>(null);\n\n  const position = useAnchoredPosition(triggerRef, menuRef, open, {\n    side: placement,\n    align: align === \"end\" ? \"end\" : \"start\",\n    gap: 4,\n  });\n  const isInside = (node: Node | null) =>\n    Boolean(node && (rootRef.current?.contains(node) || menuRef.current?.contains(node)));\n\n  const setOpen = (next: boolean) => {\n    setOpenState(next);\n    onOpenChange?.(next);\n  };\n\n  const openMenu = (target: MenuFocusTarget) => {\n    if (disabled || enabledMenuIndexes(items).length === 0) return;\n    setOpen(true);\n    setFocusTarget(target);\n  };\n\n  const closeMenu = (returnFocus: boolean) => {\n    setOpen(false);\n    setFocusTarget(null);\n    if (returnFocus) triggerRef.current?.focus();\n  };\n\n  const choose = (item: BlockMenuItem) => {\n    closeMenu(true);\n    item.onSelect?.();\n    onSelect?.(item.id);\n  };\n\n  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === \"ArrowDown\" || event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      openMenu(\"first\");\n    } else if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n      openMenu(\"last\");\n    }\n  };\n\n  return (\n    <div\n      ref={mergeRefs(ref, rootRef)}\n      className={cx(styles.root, className)}\n      data-open={open || undefined}\n      {...rest}\n    >\n      <BlockButton\n        ref={triggerRef}\n        id={triggerId}\n        variant={variant}\n        size={size}\n        disabled={disabled}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        aria-controls={menuId}\n        aria-label={iconOnly ? label : undefined}\n        title={iconOnly ? label : undefined}\n        startIcon={iconOnly ? undefined : icon}\n        endIcon={\n          iconOnly ? undefined : (\n            <span className={styles.chevron} aria-hidden=\"true\">\n              <ChevronDownIcon size={16} />\n            </span>\n          )\n        }\n        className={cx(iconOnly && iconButtonStyles.iconButton)}\n        onClick={() => (open ? closeMenu(false) : openMenu(\"first\"))}\n        onKeyDown={onTriggerKeyDown}\n      >\n        {iconOnly ? (\n          <span className={iconButtonStyles.icon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        ) : (\n          label\n        )}\n      </BlockButton>\n      <MenuList\n        id={menuId}\n        items={items}\n        open={open}\n        focusTarget={focusTarget}\n        menuRef={menuRef}\n        position={position}\n        labelledBy={triggerId}\n        align={align}\n        placement={placement}\n        isInside={isInside}\n        onClose={closeMenu}\n        onChoose={choose}\n      />\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,IAAa,YAAY,WAA2C,SAAS,UAC3E,EACE,OACA,OACA,UACA,UAAU,SACV,OAAO,MACP,MACA,WAAW,OACX,QAAQ,SACR,YAAY,UACZ,WAAW,OACX,cACA,WACA,GAAG,QAEL,KACA;CACA,MAAM,SAAS,MAAM;CACrB,MAAM,YAAY,GAAG,OAAO;CAC5B,MAAM,SAAS,GAAG,OAAO;CACzB,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,aAAa,OAA0B,IAAI;CACjD,MAAM,CAAC,MAAM,gBAAgB,SAAS,KAAK;CAC3C,MAAM,CAAC,aAAa,kBAAkB,SAAiC,IAAI;CAE3E,MAAM,WAAW,oBAAoB,YAAY,SAAS,MAAM;EAC9D,MAAM;EACN,OAAO,UAAU,QAAQ,QAAQ;EACjC,KAAK;CACP,CAAC;CACD,MAAM,YAAY,SAChB,QAAQ,SAAS,QAAQ,SAAS,SAAS,IAAI,KAAK,QAAQ,SAAS,SAAS,IAAI,EAAE;CAEtF,MAAM,WAAW,SAAkB;EACjC,aAAa,IAAI;EACjB,eAAe,IAAI;CACrB;CAEA,MAAM,YAAY,WAA4B;EAC5C,IAAI,YAAY,mBAAmB,KAAK,CAAC,CAAC,WAAW,GAAG;EACxD,QAAQ,IAAI;EACZ,eAAe,MAAM;CACvB;CAEA,MAAM,aAAa,gBAAyB;EAC1C,QAAQ,KAAK;EACb,eAAe,IAAI;EACnB,IAAI,aAAa,WAAW,SAAS,MAAM;CAC7C;CAEA,MAAM,UAAU,SAAwB;EACtC,UAAU,IAAI;EACd,KAAK,WAAW;EAChB,WAAW,KAAK,EAAE;CACpB;CAEA,MAAM,oBAAoB,UAA4C;EACpE,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC3E,MAAM,eAAe;GACrB,SAAS,OAAO;EAClB,OAAO,IAAI,MAAM,QAAQ,WAAW;GAClC,MAAM,eAAe;GACrB,SAAS,MAAM;EACjB;CACF;CAEA,OACE,qBAAC,OAAD;EACE,KAAK,UAAU,KAAK,OAAO;EAC3B,WAAW,GAAGA,yBAAO,MAAM,SAAS;EACpC,aAAW,QAAQ,KAAA;EACnB,GAAI;EAJN,UAAA,CAME,oBAAC,aAAD;GACE,KAAK;GACL,IAAI;GACK;GACH;GACI;GACV,iBAAc;GACd,iBAAe;GACf,iBAAe;GACf,cAAY,WAAW,QAAQ,KAAA;GAC/B,OAAO,WAAW,QAAQ,KAAA;GAC1B,WAAW,WAAW,KAAA,IAAY;GAClC,SACE,WAAW,KAAA,IACT,oBAAC,QAAD;IAAM,WAAWA,yBAAO;IAAS,eAAY;IAC3C,UAAA,oBAAC,iBAAD,EAAiB,MAAM,GAAK,CAAA;GACxB,CAAA;GAGV,WAAW,GAAG,YAAYC,0BAAiB,UAAU;GACrD,eAAgB,OAAO,UAAU,KAAK,IAAI,SAAS,OAAO;GAC1D,WAAW;GAEV,UAAA,WACC,oBAAC,QAAD;IAAM,WAAWA,0BAAiB;IAAM,eAAY;IACjD,UAAA;GACG,CAAA,IAEN;EAES,CAAA,GACb,oBAAC,UAAD;GACE,IAAI;GACG;GACD;GACO;GACJ;GACC;GACV,YAAY;GACL;GACI;GACD;GACV,SAAS;GACT,UAAU;EACX,CAAA,CACE;;AAET,CAAC"}

package/dist/components/actions/BlockMenu/BlockMenu.utils.d.ts

@@ -7,4 +7,6 @@ export declare function itemText(item: BlockMenuItem): string;
  * forward from the item after `from` and wrapping around.
  */
 export declare function typeaheadIndex(items: BlockMenuItem[], from: number, char: string): number;
+/** Enabled item indexes among the menu items (separators excluded). */
+export declare function enabledMenuIndexes(items: BlockMenuEntry[]): number[];
 //# sourceMappingURL=BlockMenu.utils.d.ts.map

package/dist/components/actions/BlockMenu/BlockMenu.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockMenu.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/BlockMenu/BlockMenu.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvE,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,IAAI,aAAa,CAExE;AAED,8CAA8C;AAC9C,wBAAgB,QAAQ,CAAC,IAAI,EAAE,aAAa,GAAG,MAAM,CAGpD;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAQzF"}
+{"version":3,"file":"BlockMenu.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/BlockMenu/BlockMenu.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvE,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,IAAI,aAAa,CAExE;AAED,8CAA8C;AAC9C,wBAAgB,QAAQ,CAAC,IAAI,EAAE,aAAa,GAAG,MAAM,CAGpD;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAQzF;AAED,uEAAuE;AACvE,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,MAAM,EAAE,CAEpE"}

package/dist/components/actions/BlockMenu/BlockMenu.utils.js

@@ -20,7 +20,11 @@ function typeaheadIndex(items, from, char) {
 	}
 	return -1;
 }
+/** Enabled item indexes among the menu items (separators excluded). */
+function enabledMenuIndexes(items) {
+	return items.filter(isMenuItem).flatMap((item, index) => item.disabled ? [] : [index]);
+}
 //#endregion
-export { isMenuItem, itemText, typeaheadIndex };
+export { enabledMenuIndexes, isMenuItem, itemText, typeaheadIndex };
 
 //# sourceMappingURL=BlockMenu.utils.js.map

package/dist/components/actions/BlockMenu/BlockMenu.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockMenu.utils.js","names":[],"sources":["../../../../src/components/actions/BlockMenu/BlockMenu.utils.ts"],"sourcesContent":["import type { BlockMenuEntry, BlockMenuItem } from \"./BlockMenu.types\";\n\nexport function isMenuItem(entry: BlockMenuEntry): entry is BlockMenuItem {\n  return !(\"type\" in entry && entry.type === \"separator\");\n}\n\n/** Text an item answers to for type-ahead. */\nexport function itemText(item: BlockMenuItem): string {\n  if (item.textValue !== undefined) return item.textValue;\n  return typeof item.label === \"string\" || typeof item.label === \"number\" ? String(item.label) : \"\";\n}\n\n/**\n * Index of the next enabled item whose text starts with `char`, searching\n * forward from the item after `from` and wrapping around.\n */\nexport function typeaheadIndex(items: BlockMenuItem[], from: number, char: string): number {\n  const needle = char.toLowerCase();\n  for (let step = 1; step <= items.length; step += 1) {\n    const index = (from + step) % items.length;\n    const item = items[index];\n    if (item && !item.disabled && itemText(item).toLowerCase().startsWith(needle)) return index;\n  }\n  return -1;\n}\n"],"mappings":";AAEA,SAAgB,WAAW,OAA+C;CACxE,OAAO,EAAE,UAAU,SAAS,MAAM,SAAS;AAC7C;;AAGA,SAAgB,SAAS,MAA6B;CACpD,IAAI,KAAK,cAAc,KAAA,GAAW,OAAO,KAAK;CAC9C,OAAO,OAAO,KAAK,UAAU,YAAY,OAAO,KAAK,UAAU,WAAW,OAAO,KAAK,KAAK,IAAI;AACjG;;;;;AAMA,SAAgB,eAAe,OAAwB,MAAc,MAAsB;CACzF,MAAM,SAAS,KAAK,YAAY;CAChC,KAAK,IAAI,OAAO,GAAG,QAAQ,MAAM,QAAQ,QAAQ,GAAG;EAClD,MAAM,SAAS,OAAO,QAAQ,MAAM;EACpC,MAAM,OAAO,MAAM;EACnB,IAAI,QAAQ,CAAC,KAAK,YAAY,SAAS,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC,WAAW,MAAM,GAAG,OAAO;CACxF;CACA,OAAO;AACT"}
+{"version":3,"file":"BlockMenu.utils.js","names":[],"sources":["../../../../src/components/actions/BlockMenu/BlockMenu.utils.ts"],"sourcesContent":["import type { BlockMenuEntry, BlockMenuItem } from \"./BlockMenu.types\";\n\nexport function isMenuItem(entry: BlockMenuEntry): entry is BlockMenuItem {\n  return !(\"type\" in entry && entry.type === \"separator\");\n}\n\n/** Text an item answers to for type-ahead. */\nexport function itemText(item: BlockMenuItem): string {\n  if (item.textValue !== undefined) return item.textValue;\n  return typeof item.label === \"string\" || typeof item.label === \"number\" ? String(item.label) : \"\";\n}\n\n/**\n * Index of the next enabled item whose text starts with `char`, searching\n * forward from the item after `from` and wrapping around.\n */\nexport function typeaheadIndex(items: BlockMenuItem[], from: number, char: string): number {\n  const needle = char.toLowerCase();\n  for (let step = 1; step <= items.length; step += 1) {\n    const index = (from + step) % items.length;\n    const item = items[index];\n    if (item && !item.disabled && itemText(item).toLowerCase().startsWith(needle)) return index;\n  }\n  return -1;\n}\n\n/** Enabled item indexes among the menu items (separators excluded). */\nexport function enabledMenuIndexes(items: BlockMenuEntry[]): number[] {\n  return items.filter(isMenuItem).flatMap((item, index) => (item.disabled ? [] : [index]));\n}\n"],"mappings":";AAEA,SAAgB,WAAW,OAA+C;CACxE,OAAO,EAAE,UAAU,SAAS,MAAM,SAAS;AAC7C;;AAGA,SAAgB,SAAS,MAA6B;CACpD,IAAI,KAAK,cAAc,KAAA,GAAW,OAAO,KAAK;CAC9C,OAAO,OAAO,KAAK,UAAU,YAAY,OAAO,KAAK,UAAU,WAAW,OAAO,KAAK,KAAK,IAAI;AACjG;;;;;AAMA,SAAgB,eAAe,OAAwB,MAAc,MAAsB;CACzF,MAAM,SAAS,KAAK,YAAY;CAChC,KAAK,IAAI,OAAO,GAAG,QAAQ,MAAM,QAAQ,QAAQ,GAAG;EAClD,MAAM,SAAS,OAAO,QAAQ,MAAM;EACpC,MAAM,OAAO,MAAM;EACnB,IAAI,QAAQ,CAAC,KAAK,YAAY,SAAS,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC,WAAW,MAAM,GAAG,OAAO;CACxF;CACA,OAAO;AACT;;AAGA,SAAgB,mBAAmB,OAAmC;CACpE,OAAO,MAAM,OAAO,UAAU,CAAC,CAAC,SAAS,MAAM,UAAW,KAAK,WAAW,CAAC,IAAI,CAAC,KAAK,CAAE;AACzF"}

package/dist/components/actions/BlockMenu/MenuList.d.ts

@@ -0,0 +1,28 @@
+import { type RefObject } from "react";
+import type { AnchoredPosition } from "../../../hooks/useAnchoredPosition";
+import type { BlockMenuEntry, BlockMenuItem } from "./BlockMenu.types";
+export type MenuFocusTarget = "first" | "last" | number;
+export interface MenuListProps {
+    id: string;
+    items: BlockMenuEntry[];
+    open: boolean;
+    /** Item to focus once the menu is open and positioned. */
+    focusTarget: MenuFocusTarget | null;
+    menuRef: RefObject<HTMLDivElement | null>;
+    position: AnchoredPosition | null;
+    labelledBy?: string;
+    label?: string;
+    align?: "start" | "end";
+    placement?: string;
+    /** Whether a node belongs to the menu or its trigger (outside clicks / blur close the menu). */
+    isInside: (node: Node | null) => boolean;
+    onClose: (returnFocus: boolean) => void;
+    onChoose: (item: BlockMenuItem) => void;
+}
+/**
+ * Internal `role="menu"` shared by `BlockMenu` and `ContextMenu`: rendered in the
+ * overlay layer, with roving focus, wrap-around arrows, Home / End, type-ahead,
+ * Escape / Tab to close and outside clicks closing it.
+ */
+export declare function MenuList({ id, items, open, focusTarget, menuRef, position, labelledBy, label, align, placement, isInside, onClose, onChoose, }: MenuListProps): import("react").ReactPortal | null;
+//# sourceMappingURL=MenuList.d.ts.map

package/dist/components/actions/BlockMenu/MenuList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/BlockMenu/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGvE,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAExD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,0DAA0D;IAC1D,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC,OAAO,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC1C,QAAQ,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gGAAgG;IAChG,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,OAAO,CAAC;IACzC,OAAO,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CACzC;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACvB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,WAAW,EACX,OAAO,EACP,QAAQ,EACR,UAAU,EACV,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAQ,GACT,EAAE,aAAa,sCA4If"}

package/dist/components/actions/BlockMenu/MenuList.js

@@ -0,0 +1,134 @@
+import { usePortalContainer } from "../../../provider/context.js";
+import BlockMenu_module_default from "./BlockMenu.module.js";
+import { enabledMenuIndexes, isMenuItem, typeaheadIndex } from "./BlockMenu.utils.js";
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/actions/BlockMenu/MenuList.tsx
+/**
+* Internal `role="menu"` shared by `BlockMenu` and `ContextMenu`: rendered in the
+* overlay layer, with roving focus, wrap-around arrows, Home / End, type-ahead,
+* Escape / Tab to close and outside clicks closing it.
+*/
+function MenuList({ id, items, open, focusTarget, menuRef, position, labelledBy, label, align, placement, isInside, onClose, onChoose }) {
+	const container = usePortalContainer();
+	const itemRefs = useRef(/* @__PURE__ */ new Map());
+	const menuItems = items.filter(isMenuItem);
+	const enabledIndexes = enabledMenuIndexes(items);
+	const focusItem = (index) => {
+		const item = menuItems[index];
+		if (item) itemRefs.current.get(item.id)?.focus();
+	};
+	useEffect(() => {
+		if (!open || focusTarget === null || !position) return;
+		const index = focusTarget === "first" ? enabledIndexes[0] : focusTarget === "last" ? enabledIndexes[enabledIndexes.length - 1] : focusTarget;
+		if (index !== void 0) focusItem(index);
+	}, [
+		open,
+		focusTarget,
+		position !== null
+	]);
+	useEffect(() => {
+		if (!open) return;
+		const onPointerDown = (event) => {
+			if (!isInside(event.target)) onClose(false);
+		};
+		document.addEventListener("pointerdown", onPointerDown);
+		return () => document.removeEventListener("pointerdown", onPointerDown);
+	}, [open]);
+	const onKeyDown = (event) => {
+		const current = menuItems.findIndex((item) => itemRefs.current.get(item.id) === document.activeElement);
+		const at = enabledIndexes.indexOf(current);
+		const count = enabledIndexes.length;
+		let next;
+		switch (event.key) {
+			case "ArrowDown":
+				next = enabledIndexes[(at + 1) % count];
+				break;
+			case "ArrowUp":
+				next = enabledIndexes[(at - 1 + count) % count];
+				break;
+			case "Home":
+				next = enabledIndexes[0];
+				break;
+			case "End":
+				next = enabledIndexes[count - 1];
+				break;
+			case "Escape":
+				event.preventDefault();
+				event.stopPropagation();
+				onClose(true);
+				return;
+			case "Tab":
+				onClose(true);
+				return;
+			default: if (event.key.length === 1 && /\S/.test(event.key) && !event.ctrlKey && !event.metaKey) {
+				const match = typeaheadIndex(menuItems, current, event.key);
+				if (match >= 0) next = match;
+			}
+		}
+		if (next === void 0) return;
+		event.preventDefault();
+		focusItem(next);
+	};
+	const onBlur = (event) => {
+		if (!isInside(event.relatedTarget)) onClose(false);
+	};
+	if (!container) return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		ref: menuRef,
+		id,
+		role: "menu",
+		tabIndex: -1,
+		"aria-labelledby": labelledBy,
+		"aria-label": labelledBy ? void 0 : label,
+		hidden: !open,
+		"data-align": align,
+		"data-placement": position?.side ?? placement,
+		className: BlockMenu_module_default.menu,
+		style: position?.style,
+		onKeyDown,
+		onBlur,
+		children: items.map((entry, index) => {
+			if (!isMenuItem(entry)) return /* @__PURE__ */ jsx("div", {
+				role: "separator",
+				className: BlockMenu_module_default.separator
+			}, entry.id ?? `separator-${index}`);
+			return /* @__PURE__ */ jsxs("button", {
+				ref: (element) => {
+					if (element) itemRefs.current.set(entry.id, element);
+					else itemRefs.current.delete(entry.id);
+				},
+				type: "button",
+				role: "menuitem",
+				tabIndex: -1,
+				"aria-disabled": entry.disabled || void 0,
+				"data-danger": entry.danger || void 0,
+				className: BlockMenu_module_default.item,
+				onClick: () => {
+					if (!entry.disabled) onChoose(entry);
+				},
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: BlockMenu_module_default.icon,
+						"aria-hidden": "true",
+						children: entry.icon
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: BlockMenu_module_default.label,
+						children: entry.label
+					}),
+					entry.shortcut ? /* @__PURE__ */ jsx("kbd", {
+						className: BlockMenu_module_default.shortcut,
+						"aria-hidden": "true",
+						children: entry.shortcut
+					}) : null
+				]
+			}, entry.id);
+		})
+	}), container);
+}
+//#endregion
+export { MenuList };
+
+//# sourceMappingURL=MenuList.js.map

package/dist/components/actions/BlockMenu/MenuList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuList.js","names":["styles"],"sources":["../../../../src/components/actions/BlockMenu/MenuList.tsx"],"sourcesContent":["import { useEffect, useRef, type FocusEvent, type KeyboardEvent, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { AnchoredPosition } from \"../../../hooks/useAnchoredPosition\";\nimport { usePortalContainer } from \"../../../provider/context\";\nimport styles from \"./BlockMenu.module.css\";\nimport type { BlockMenuEntry, BlockMenuItem } from \"./BlockMenu.types\";\nimport { enabledMenuIndexes, isMenuItem, typeaheadIndex } from \"./BlockMenu.utils\";\n\nexport type MenuFocusTarget = \"first\" | \"last\" | number;\n\nexport interface MenuListProps {\n  id: string;\n  items: BlockMenuEntry[];\n  open: boolean;\n  /** Item to focus once the menu is open and positioned. */\n  focusTarget: MenuFocusTarget | null;\n  menuRef: RefObject<HTMLDivElement | null>;\n  position: AnchoredPosition | null;\n  labelledBy?: string;\n  label?: string;\n  align?: \"start\" | \"end\";\n  placement?: string;\n  /** Whether a node belongs to the menu or its trigger (outside clicks / blur close the menu). */\n  isInside: (node: Node | null) => boolean;\n  onClose: (returnFocus: boolean) => void;\n  onChoose: (item: BlockMenuItem) => void;\n}\n\n/**\n * Internal `role=\"menu\"` shared by `BlockMenu` and `ContextMenu`: rendered in the\n * overlay layer, with roving focus, wrap-around arrows, Home / End, type-ahead,\n * Escape / Tab to close and outside clicks closing it.\n */\nexport function MenuList({\n  id,\n  items,\n  open,\n  focusTarget,\n  menuRef,\n  position,\n  labelledBy,\n  label,\n  align,\n  placement,\n  isInside,\n  onClose,\n  onChoose,\n}: MenuListProps) {\n  const container = usePortalContainer();\n  const itemRefs = useRef(new Map<string, HTMLButtonElement>());\n  const menuItems = items.filter(isMenuItem);\n  const enabledIndexes = enabledMenuIndexes(items);\n\n  const focusItem = (index: number) => {\n    const item = menuItems[index];\n    if (item) itemRefs.current.get(item.id)?.focus();\n  };\n\n  useEffect(() => {\n    if (!open || focusTarget === null || !position) return;\n    const index =\n      focusTarget === \"first\"\n        ? enabledIndexes[0]\n        : focusTarget === \"last\"\n          ? enabledIndexes[enabledIndexes.length - 1]\n          : focusTarget;\n    if (index !== undefined) focusItem(index);\n    // Focus once the menu is open and positioned, or when the target changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, focusTarget, position !== null]);\n\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (event: PointerEvent) => {\n      if (!isInside(event.target as Node)) onClose(false);\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => document.removeEventListener(\"pointerdown\", onPointerDown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open]);\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const current = menuItems.findIndex(\n      (item) => itemRefs.current.get(item.id) === document.activeElement,\n    );\n    const at = enabledIndexes.indexOf(current);\n    const count = enabledIndexes.length;\n    let next: number | undefined;\n\n    switch (event.key) {\n      case \"ArrowDown\":\n        next = enabledIndexes[(at + 1) % count];\n        break;\n      case \"ArrowUp\":\n        next = enabledIndexes[(at - 1 + count) % count];\n        break;\n      case \"Home\":\n        next = enabledIndexes[0];\n        break;\n      case \"End\":\n        next = enabledIndexes[count - 1];\n        break;\n      case \"Escape\":\n        event.preventDefault();\n        event.stopPropagation();\n        onClose(true);\n        return;\n      case \"Tab\":\n        // The menu lives in the overlay layer at the end of the page: hand focus back to the\n        // opener first so the browser's Tab continues from the opener's place in the page.\n        onClose(true);\n        return;\n      default:\n        if (event.key.length === 1 && /\\S/.test(event.key) && !event.ctrlKey && !event.metaKey) {\n          const match = typeaheadIndex(menuItems, current, event.key);\n          if (match >= 0) next = match;\n        }\n    }\n    if (next === undefined) return;\n    event.preventDefault();\n    focusItem(next);\n  };\n\n  const onBlur = (event: FocusEvent<HTMLDivElement>) => {\n    if (!isInside(event.relatedTarget as Node | null)) onClose(false);\n  };\n\n  if (!container) return null;\n\n  return createPortal(\n    <div\n      ref={menuRef}\n      id={id}\n      role=\"menu\"\n      tabIndex={-1}\n      aria-labelledby={labelledBy}\n      aria-label={labelledBy ? undefined : label}\n      hidden={!open}\n      data-align={align}\n      data-placement={position?.side ?? placement}\n      className={styles.menu}\n      style={position?.style}\n      onKeyDown={onKeyDown}\n      onBlur={onBlur}\n    >\n      {items.map((entry, index) => {\n        if (!isMenuItem(entry)) {\n          return (\n            <div\n              key={entry.id ?? `separator-${index}`}\n              role=\"separator\"\n              className={styles.separator}\n            />\n          );\n        }\n        return (\n          <button\n            key={entry.id}\n            ref={(element) => {\n              if (element) itemRefs.current.set(entry.id, element);\n              else itemRefs.current.delete(entry.id);\n            }}\n            type=\"button\"\n            role=\"menuitem\"\n            tabIndex={-1}\n            aria-disabled={entry.disabled || undefined}\n            data-danger={entry.danger || undefined}\n            className={styles.item}\n            onClick={() => {\n              if (!entry.disabled) onChoose(entry);\n            }}\n          >\n            <span className={styles.icon} aria-hidden=\"true\">\n              {entry.icon}\n            </span>\n            <span className={styles.label}>{entry.label}</span>\n            {entry.shortcut ? (\n              <kbd className={styles.shortcut} aria-hidden=\"true\">\n                {entry.shortcut}\n              </kbd>\n            ) : null}\n          </button>\n        );\n      })}\n    </div>,\n    container,\n  );\n}\n"],"mappings":"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"}

package/dist/components/actions/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,8 @@
+import type { ContextMenuProps } from "./ContextMenu.types";
+/**
+ * Right-click menu for an area (an inventory slot, a list row). Opens at the
+ * pointer, or at the focused element with Shift+F10 / the Menu key; keyboard
+ * behaviour matches `BlockMenu` and focus returns to where it was.
+ */
+export declare const ContextMenu: import("react").ForwardRefExoticComponent<ContextMenuProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ContextMenu.d.ts.map

package/dist/components/actions/ContextMenu/ContextMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAO5D;;;;GAIG;AACH,eAAO,MAAM,WAAW,6GA0GtB,CAAC"}

package/dist/components/actions/ContextMenu/ContextMenu.js

@@ -0,0 +1,100 @@
+import { cx } from "../../../utils/cx.js";
+import { useAnchoredPosition } from "../../../hooks/useAnchoredPosition.js";
+import { mergeRefs } from "../../../utils/refs.js";
+import { enabledMenuIndexes } from "../BlockMenu/BlockMenu.utils.js";
+import { MenuList } from "../BlockMenu/MenuList.js";
+import ContextMenu_module_default from "./ContextMenu.module.js";
+import { forwardRef, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/actions/ContextMenu/ContextMenu.tsx
+/**
+* Right-click menu for an area (an inventory slot, a list row). Opens at the
+* pointer, or at the focused element with Shift+F10 / the Menu key; keyboard
+* behaviour matches `BlockMenu` and focus returns to where it was.
+*/
+var ContextMenu = forwardRef(function ContextMenu({ children, items, onSelect, label = "Context menu", disabled = false, onOpenChange, className, ...rest }, ref) {
+	const menuId = useId();
+	const areaRef = useRef(null);
+	const menuRef = useRef(null);
+	const returnTo = useRef(null);
+	const point = useRef({
+		x: 0,
+		y: 0
+	});
+	const [open, setOpenState] = useState(false);
+	const [focusTarget, setFocusTarget] = useState(null);
+	const virtualAnchor = useRef({ getBoundingClientRect: () => DOMRect.fromRect({
+		x: point.current.x,
+		y: point.current.y,
+		width: 0,
+		height: 0
+	}) });
+	const position = useAnchoredPosition(virtualAnchor, menuRef, open, {
+		side: "bottom",
+		align: "start",
+		gap: 2
+	});
+	const setOpen = (next) => {
+		setOpenState(next);
+		onOpenChange?.(next);
+	};
+	const openAt = (x, y) => {
+		if (enabledMenuIndexes(items).length === 0) return;
+		returnTo.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		point.current = {
+			x,
+			y
+		};
+		setOpen(true);
+		setFocusTarget("first");
+	};
+	const close = (returnFocus) => {
+		setOpen(false);
+		setFocusTarget(null);
+		if (returnFocus) returnTo.current?.focus();
+	};
+	const choose = (item) => {
+		close(true);
+		item.onSelect?.();
+		onSelect?.(item.id);
+	};
+	const onContextMenu = (event) => {
+		if (disabled) return;
+		event.preventDefault();
+		event.target.closest("button, a[href], input, [tabindex]")?.focus({ preventScroll: true });
+		openAt(event.clientX, event.clientY);
+	};
+	const onKeyDown = (event) => {
+		if (disabled) return;
+		if (event.key === "ContextMenu" || event.key === "F10" && event.shiftKey) {
+			event.preventDefault();
+			const rect = event.target.getBoundingClientRect();
+			openAt(rect.left + rect.width / 2, rect.top + rect.height / 2);
+		}
+	};
+	const isInside = (node) => Boolean(node && menuRef.current?.contains(node));
+	return /* @__PURE__ */ jsxs("div", {
+		ref: mergeRefs(ref, areaRef),
+		className: cx(ContextMenu_module_default.area, className),
+		"data-open": open || void 0,
+		onContextMenu,
+		onKeyDown,
+		...rest,
+		children: [children, /* @__PURE__ */ jsx(MenuList, {
+			id: menuId,
+			items,
+			open,
+			focusTarget,
+			menuRef,
+			position,
+			label,
+			isInside,
+			onClose: close,
+			onChoose: choose
+		})]
+	});
+});
+//#endregion
+export { ContextMenu };
+
+//# sourceMappingURL=ContextMenu.js.map

package/dist/components/actions/ContextMenu/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","names":["styles"],"sources":["../../../../src/components/actions/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { forwardRef, useId, useRef, useState, type KeyboardEvent, type MouseEvent } from \"react\";\nimport { useAnchoredPosition } from \"../../../hooks/useAnchoredPosition\";\nimport { cx } from \"../../../utils/cx\";\nimport { mergeRefs } from \"../../../utils/refs\";\nimport type { BlockMenuItem } from \"../BlockMenu/BlockMenu.types\";\nimport { enabledMenuIndexes } from \"../BlockMenu/BlockMenu.utils\";\nimport { MenuList, type MenuFocusTarget } from \"../BlockMenu/MenuList\";\nimport styles from \"./ContextMenu.module.css\";\nimport type { ContextMenuProps } from \"./ContextMenu.types\";\n\ninterface Point {\n  x: number;\n  y: number;\n}\n\n/**\n * Right-click menu for an area (an inventory slot, a list row). Opens at the\n * pointer, or at the focused element with Shift+F10 / the Menu key; keyboard\n * behaviour matches `BlockMenu` and focus returns to where it was.\n */\nexport const ContextMenu = forwardRef<HTMLDivElement, ContextMenuProps>(function ContextMenu(\n  {\n    children,\n    items,\n    onSelect,\n    label = \"Context menu\",\n    disabled = false,\n    onOpenChange,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const menuId = useId();\n  const areaRef = useRef<HTMLDivElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const returnTo = useRef<HTMLElement | null>(null);\n  const point = useRef<Point>({ x: 0, y: 0 });\n  const [open, setOpenState] = useState(false);\n  const [focusTarget, setFocusTarget] = useState<MenuFocusTarget | null>(null);\n\n  // A zero-size \"element\" at the pointer for the shared positioning hook.\n  const virtualAnchor = useRef({\n    getBoundingClientRect: () =>\n      DOMRect.fromRect({ x: point.current.x, y: point.current.y, width: 0, height: 0 }),\n  });\n  const position = useAnchoredPosition(virtualAnchor, menuRef, open, {\n    side: \"bottom\",\n    align: \"start\",\n    gap: 2,\n  });\n\n  const setOpen = (next: boolean) => {\n    setOpenState(next);\n    onOpenChange?.(next);\n  };\n\n  const openAt = (x: number, y: number) => {\n    if (enabledMenuIndexes(items).length === 0) return;\n    returnTo.current =\n      document.activeElement instanceof HTMLElement ? document.activeElement : null;\n    point.current = { x, y };\n    setOpen(true);\n    setFocusTarget(\"first\");\n  };\n\n  const close = (returnFocus: boolean) => {\n    setOpen(false);\n    setFocusTarget(null);\n    if (returnFocus) returnTo.current?.focus();\n  };\n\n  const choose = (item: BlockMenuItem) => {\n    close(true);\n    item.onSelect?.();\n    onSelect?.(item.id);\n  };\n\n  const onContextMenu = (event: MouseEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    event.preventDefault();\n    // Right-clicking does not move focus; remember the clicked control instead when it is focusable.\n    const target = (event.target as HTMLElement).closest<HTMLElement>(\n      \"button, a[href], input, [tabindex]\",\n    );\n    target?.focus({ preventScroll: true });\n    openAt(event.clientX, event.clientY);\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    if (event.key === \"ContextMenu\" || (event.key === \"F10\" && event.shiftKey)) {\n      event.preventDefault();\n      const rect = (event.target as HTMLElement).getBoundingClientRect();\n      openAt(rect.left + rect.width / 2, rect.top + rect.height / 2);\n    }\n  };\n\n  const isInside = (node: Node | null) => Boolean(node && menuRef.current?.contains(node));\n\n  return (\n    // The area only listens for right-clicks and the Menu key bubbling up from the controls inside it.\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      ref={mergeRefs(ref, areaRef)}\n      className={cx(styles.area, className)}\n      data-open={open || undefined}\n      onContextMenu={onContextMenu}\n      onKeyDown={onKeyDown}\n      {...rest}\n    >\n      {children}\n      <MenuList\n        id={menuId}\n        items={items}\n        open={open}\n        focusTarget={focusTarget}\n        menuRef={menuRef}\n        position={position}\n        label={label}\n        isInside={isInside}\n        onClose={close}\n        onChoose={choose}\n      />\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;AAoBA,IAAa,cAAc,WAA6C,SAAS,YAC/E,EACE,UACA,OACA,UACA,QAAQ,gBACR,WAAW,OACX,cACA,WACA,GAAG,QAEL,KACA;CACA,MAAM,SAAS,MAAM;CACrB,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,WAAW,OAA2B,IAAI;CAChD,MAAM,QAAQ,OAAc;EAAE,GAAG;EAAG,GAAG;CAAE,CAAC;CAC1C,MAAM,CAAC,MAAM,gBAAgB,SAAS,KAAK;CAC3C,MAAM,CAAC,aAAa,kBAAkB,SAAiC,IAAI;CAG3E,MAAM,gBAAgB,OAAO,EAC3B,6BACE,QAAQ,SAAS;EAAE,GAAG,MAAM,QAAQ;EAAG,GAAG,MAAM,QAAQ;EAAG,OAAO;EAAG,QAAQ;CAAE,CAAC,EACpF,CAAC;CACD,MAAM,WAAW,oBAAoB,eAAe,SAAS,MAAM;EACjE,MAAM;EACN,OAAO;EACP,KAAK;CACP,CAAC;CAED,MAAM,WAAW,SAAkB;EACjC,aAAa,IAAI;EACjB,eAAe,IAAI;CACrB;CAEA,MAAM,UAAU,GAAW,MAAc;EACvC,IAAI,mBAAmB,KAAK,CAAC,CAAC,WAAW,GAAG;EAC5C,SAAS,UACP,SAAS,yBAAyB,cAAc,SAAS,gBAAgB;EAC3E,MAAM,UAAU;GAAE;GAAG;EAAE;EACvB,QAAQ,IAAI;EACZ,eAAe,OAAO;CACxB;CAEA,MAAM,SAAS,gBAAyB;EACtC,QAAQ,KAAK;EACb,eAAe,IAAI;EACnB,IAAI,aAAa,SAAS,SAAS,MAAM;CAC3C;CAEA,MAAM,UAAU,SAAwB;EACtC,MAAM,IAAI;EACV,KAAK,WAAW;EAChB,WAAW,KAAK,EAAE;CACpB;CAEA,MAAM,iBAAiB,UAAsC;EAC3D,IAAI,UAAU;EACd,MAAM,eAAe;EAKrB,MAHsB,OAAuB,QAC3C,oCAEF,CAAA,EAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;EACrC,OAAO,MAAM,SAAS,MAAM,OAAO;CACrC;CAEA,MAAM,aAAa,UAAyC;EAC1D,IAAI,UAAU;EACd,IAAI,MAAM,QAAQ,iBAAkB,MAAM,QAAQ,SAAS,MAAM,UAAW;GAC1E,MAAM,eAAe;GACrB,MAAM,OAAQ,MAAM,OAAuB,sBAAsB;GACjE,OAAO,KAAK,OAAO,KAAK,QAAQ,GAAG,KAAK,MAAM,KAAK,SAAS,CAAC;EAC/D;CACF;CAEA,MAAM,YAAY,SAAsB,QAAQ,QAAQ,QAAQ,SAAS,SAAS,IAAI,CAAC;CAEvF,OAGE,qBAAC,OAAD;EACE,KAAK,UAAU,KAAK,OAAO;EAC3B,WAAW,GAAGA,2BAAO,MAAM,SAAS;EACpC,aAAW,QAAQ,KAAA;EACJ;EACJ;EACX,GAAI;EANN,UAAA,CAQG,UACD,oBAAC,UAAD;GACE,IAAI;GACG;GACD;GACO;GACJ;GACC;GACH;GACG;GACV,SAAS;GACT,UAAU;EACX,CAAA,CACE;;AAET,CAAC"}

package/dist/components/actions/ContextMenu/ContextMenu.module.js

@@ -0,0 +1,7 @@
+//#region src/components/actions/ContextMenu/ContextMenu.module.css
+var area = "block-area-Zq0O2";
+var ContextMenu_module_default = { area };
+//#endregion
+export { area, ContextMenu_module_default as default };
+
+//# sourceMappingURL=ContextMenu.module.js.map

package/dist/components/actions/ContextMenu/ContextMenu.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.module.js","names":[],"sources":["../../../../src/components/actions/ContextMenu/ContextMenu.module.css"],"sourcesContent":["/* The area takes the size of its content; it adds no visual of its own. */\n.area {\n  display: contents;\n}\n"],"mappings":""}

package/dist/components/actions/ContextMenu/ContextMenu.types.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockMenuEntry } from "../BlockMenu/BlockMenu.types";
+export interface ContextMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** Area that opens the menu on right-click, Shift+F10 or the Menu key. */
+    children: ReactNode;
+    items: BlockMenuEntry[];
+    /** Called with the item id after any item is chosen. */
+    onSelect?: (id: string) => void;
+    /** Accessible name of the menu. @default "Context menu" */
+    label?: string;
+    /** Keep the browser's own menu. */
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+//# sourceMappingURL=ContextMenu.types.d.ts.map

package/dist/components/actions/ContextMenu/ContextMenu.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.types.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/ContextMenu/ContextMenu.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAEnE,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxF,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC"}

package/dist/components/actions/ContextMenu/index.d.ts

@@ -0,0 +1,3 @@
+export { ContextMenu } from "./ContextMenu";
+export type { ContextMenuProps } from "./ContextMenu.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/actions/ContextMenu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/ContextMenu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}