@primitiv-ui/react 0.1.0 → 0.1.2

package/src/ContextMenu/ContextMenu.tsx

@@ -7,12 +7,13 @@ import {
   useRef,
   useState,
 } from "react";
+import type { ReactElement } from "react";
 
-import { useCheckboxRoot } from "../Checkbox/hooks";
-import { useDirection } from "../DirectionProvider";
-import { useRadioGroupRoot } from "../RadioGroup/hooks";
-import { useControllableState } from "../hooks";
-import { Slot, composeEventHandlers } from "../Slot";
+import { useCheckboxRoot } from "../Checkbox/hooks/index.ts";
+import { useDirection } from "../DirectionProvider/index.ts";
+import { useRadioGroupRoot } from "../RadioGroup/hooks/index.ts";
+import { useControllableState } from "../hooks/index.ts";
+import { Slot, composeEventHandlers } from "../Slot/index.ts";
 
 import {
   ContextMenuContext,
@@ -67,13 +68,13 @@ import { MENUITEM_SELECTOR, TYPEAHEAD_RESET_MS } from "./constants";
  * keys (`ArrowRight` ↔ `ArrowLeft`). When omitted, the component reads
  * the inherited {@link DirectionProvider} value, falling back to `"ltr"`.
  */
-function ContextMenuRoot({
+export function ContextMenuRoot({
   defaultOpen = false,
   open: controlledOpen,
   onOpenChange,
   dir,
   children,
-}: ContextMenuRootProps) {
+}: ContextMenuRootProps): ReactElement {
   const contentId = useId();
   const triggerRef = useRef<HTMLElement | null>(null);
   const [position, setPosition] = useState<ContextMenuPosition | null>(null);
@@ -118,6 +119,7 @@ function ContextMenuRoot({
   );
 }
 
+/** @internal */
 ContextMenuRoot.displayName = "ContextMenuRoot";
 
 /**
@@ -140,13 +142,13 @@ function useCloseSiblingSub() {
  * the native menu is suppressed and the ContextMenu opens, positioned at
  * the pointer.
  */
-function ContextMenuTrigger({
+export function ContextMenuTrigger({
   children,
   onContextMenu,
   asChild = false,
   disabled,
   ...rest
-}: ContextMenuTriggerProps) {
+}: ContextMenuTriggerProps): ReactElement {
   const { setOpen, setPosition, triggerRef } = useContextMenuContext();
 
   const handleContextMenu = (event: React.MouseEvent<HTMLElement>) => {
@@ -171,6 +173,7 @@ function ContextMenuTrigger({
   return <span {...triggerProps}>{children}</span>;
 }
 
+/** @internal */
 ContextMenuTrigger.displayName = "ContextMenuTrigger";
 
 /**
@@ -195,13 +198,13 @@ ContextMenuTrigger.displayName = "ContextMenuTrigger";
  * that flip the menu to the opposite side when it would overflow the
  * viewport. Pass `asChild` to render any element with menu semantics.
  */
-function ContextMenuContent({
+export function ContextMenuContent({
   children,
   style,
   onKeyDown,
   asChild = false,
   ...rest
-}: ContextMenuContentProps) {
+}: ContextMenuContentProps): ReactElement {
   const { open, setOpen, position, contentId, triggerRef } =
     useContextMenuContext();
   const menuRef = useRef<HTMLMenuElement | null>(null);
@@ -373,6 +376,7 @@ function ContextMenuContent({
   );
 }
 
+/** @internal */
 ContextMenuContent.displayName = "ContextMenuContent";
 
 /**
@@ -386,14 +390,14 @@ ContextMenuContent.displayName = "ContextMenuContent";
  *
  * Disabled items receive `aria-disabled="true"` and no-op on activation.
  */
-function ContextMenuItem({
+export function ContextMenuItem({
   children,
   onClick,
   onSelect,
   disabled,
   asChild = false,
   ...rest
-}: ContextMenuItemProps) {
+}: ContextMenuItemProps): ReactElement {
   const { setOpen } = useContextMenuContext();
   const closeSiblingSub = useCloseSiblingSub();
   const [highlighted, setHighlighted] = useState(false);
@@ -430,6 +434,7 @@ function ContextMenuItem({
   return <li {...itemProps}>{children}</li>;
 }
 
+/** @internal */
 ContextMenuItem.displayName = "ContextMenuItem";
 
 /**
@@ -437,11 +442,11 @@ ContextMenuItem.displayName = "ContextMenuItem";
  * by default. Non-interactive — skipped by focus, arrow navigation, and
  * typeahead.
  */
-function ContextMenuSeparator({
+export function ContextMenuSeparator({
   asChild = false,
   children,
   ...rest
-}: ContextMenuSeparatorProps) {
+}: ContextMenuSeparatorProps): ReactElement {
   const separatorProps = { ...rest, role: "separator" as const };
 
   if (asChild) {
@@ -451,6 +456,7 @@ function ContextMenuSeparator({
   return <li {...separatorProps} />;
 }
 
+/** @internal */
 ContextMenuSeparator.displayName = "ContextMenuSeparator";
 
 /**
@@ -461,11 +467,11 @@ ContextMenuSeparator.displayName = "ContextMenuSeparator";
  * Generates a stable id for its accompanying {@link ContextMenuLabel |
  * `ContextMenu.Label`}, wired automatically via `aria-labelledby`.
  */
-function ContextMenuGroup({
+export function ContextMenuGroup({
   children,
   asChild = false,
   ...rest
-}: ContextMenuGroupProps) {
+}: ContextMenuGroupProps): ReactElement {
   const labelId = useId();
   const contextValue = useMemo(() => ({ labelId }), [labelId]);
   const groupProps = {
@@ -487,6 +493,7 @@ function ContextMenuGroup({
   );
 }
 
+/** @internal */
 ContextMenuGroup.displayName = "ContextMenuGroup";
 
 /**
@@ -496,12 +503,12 @@ ContextMenuGroup.displayName = "ContextMenuGroup";
  * consumers don't need to thread ids manually. A caller-supplied `id` takes
  * precedence over the auto-generated one.
  */
-function ContextMenuLabel({
+export function ContextMenuLabel({
   id,
   children,
   asChild = false,
   ...rest
-}: ContextMenuLabelProps) {
+}: ContextMenuLabelProps): ReactElement {
   const group = useContext(ContextMenuGroupContext);
   const labelProps = { ...rest, id: id ?? group?.labelId };
 
@@ -512,6 +519,7 @@ function ContextMenuLabel({
   return <li {...labelProps}>{children}</li>;
 }
 
+/** @internal */
 ContextMenuLabel.displayName = "ContextMenuLabel";
 
 /**
@@ -526,7 +534,7 @@ ContextMenuLabel.displayName = "ContextMenuLabel";
  *
  * Disabled items receive `aria-disabled="true"` and no-op on activation.
  */
-function ContextMenuCheckboxItem({
+export function ContextMenuCheckboxItem({
   children,
   onClick,
   onSelect,
@@ -536,7 +544,7 @@ function ContextMenuCheckboxItem({
   onCheckedChange,
   asChild = false,
   ...rest
-}: ContextMenuCheckboxItemProps) {
+}: ContextMenuCheckboxItemProps): ReactElement {
   const { setOpen } = useContextMenuContext();
   const closeSiblingSub = useCloseSiblingSub();
   const [highlighted, setHighlighted] = useState(false);
@@ -589,6 +597,7 @@ function ContextMenuCheckboxItem({
   );
 }
 
+/** @internal */
 ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
 
 /**
@@ -604,12 +613,12 @@ ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
  * {@link ContextMenuItemIndicatorProps.forceMount | `forceMount`} to keep
  * the DOM node mounted in both states for animation use cases.
  */
-function ContextMenuItemIndicator({
+export function ContextMenuItemIndicator({
   children,
   asChild = false,
   forceMount = false,
   ...rest
-}: ContextMenuItemIndicatorProps) {
+}: ContextMenuItemIndicatorProps): ReactElement | null {
   const context = useContext(ContextMenuItemIndicatorContext);
   if (!context) {
     throw new Error(
@@ -636,6 +645,7 @@ function ContextMenuItemIndicator({
   return <span {...indicatorProps}>{children}</span>;
 }
 
+/** @internal */
 ContextMenuItemIndicator.displayName = "ContextMenuItemIndicator";
 
 /**
@@ -643,14 +653,14 @@ ContextMenuItemIndicator.displayName = "ContextMenuItemIndicator";
  * {@link ContextMenuRadioItem | `ContextMenu.RadioItem`} elements. Renders a
  * `<li role="group">` wrapping `<ul role="none">`.
  */
-function ContextMenuRadioGroup({
+export function ContextMenuRadioGroup({
   defaultValue,
   value: controlledValue,
   onValueChange,
   children,
   asChild = false,
   ...rest
-}: ContextMenuRadioGroupProps) {
+}: ContextMenuRadioGroupProps): ReactElement {
   const { value, select } = useRadioGroupRoot({
     defaultValue,
     value: controlledValue,
@@ -672,6 +682,7 @@ function ContextMenuRadioGroup({
   );
 }
 
+/** @internal */
 ContextMenuRadioGroup.displayName = "ContextMenuRadioGroup";
 
 /**
@@ -686,7 +697,7 @@ ContextMenuRadioGroup.displayName = "ContextMenuRadioGroup";
  * {@link ContextMenuRadioItemProps.onSelect | `onSelect`} with a cancellable
  * `Event`. Call `event.preventDefault()` to keep the menu open.
  */
-function ContextMenuRadioItem({
+export function ContextMenuRadioItem({
   children,
   onClick,
   onSelect,
@@ -694,7 +705,7 @@ function ContextMenuRadioItem({
   value: itemValue,
   asChild = false,
   ...rest
-}: ContextMenuRadioItemProps) {
+}: ContextMenuRadioItemProps): ReactElement {
   const { setOpen } = useContextMenuContext();
   const closeSiblingSub = useCloseSiblingSub();
   const [highlighted, setHighlighted] = useState(false);
@@ -747,6 +758,7 @@ function ContextMenuRadioItem({
   );
 }
 
+/** @internal */
 ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
 
 /**
@@ -756,12 +768,12 @@ ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
  * menu. Supports uncontrolled (`defaultOpen`) and controlled (`open` +
  * `onOpenChange`) modes.
  */
-function ContextMenuSub({
+export function ContextMenuSub({
   defaultOpen,
   open: controlledOpen,
   onOpenChange,
   children,
-}: ContextMenuSubProps) {
+}: ContextMenuSubProps): ReactElement {
   const contentId = useId();
   const triggerRef = useRef<HTMLLIElement | null>(null);
   const [open, setOpenBase] = useControllableState<boolean>(
@@ -812,6 +824,7 @@ function ContextMenuSub({
   );
 }
 
+/** @internal */
 ContextMenuSub.displayName = "ContextMenuSub";
 
 /**
@@ -827,14 +840,14 @@ ContextMenuSub.displayName = "ContextMenuSub";
  * `ArrowRight` in `"ltr"`, `ArrowLeft` in `"rtl"`. Disabled triggers
  * ignore both click and the open arrow key.
  */
-function ContextMenuSubTrigger({
+export function ContextMenuSubTrigger({
   children,
   onClick,
   onKeyDown,
   disabled,
   asChild = false,
   ...rest
-}: ContextMenuSubTriggerProps) {
+}: ContextMenuSubTriggerProps): ReactElement {
   const sub = useContextMenuSubContext();
   const { dir } = useContextMenuContext();
   const openKey = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
@@ -878,6 +891,7 @@ function ContextMenuSubTrigger({
   return <li {...subTriggerProps}>{children}</li>;
 }
 
+/** @internal */
 ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
 
 /**
@@ -889,12 +903,12 @@ ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
  * key closes the submenu and returns focus to the SubTrigger —
  * `ArrowLeft` in `"ltr"`, `ArrowRight` in `"rtl"`.
  */
-function ContextMenuSubContent({
+export function ContextMenuSubContent({
   children,
   onKeyDown,
   asChild = false,
   ...rest
-}: ContextMenuSubContentProps) {
+}: ContextMenuSubContentProps): ReactElement {
   const sub = useContextMenuSubContext();
   const { dir } = useContextMenuContext();
   const closeKey = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
@@ -960,9 +974,11 @@ function ContextMenuSubContent({
   );
 }
 
+/** @internal */
 ContextMenuSubContent.displayName = "ContextMenuSubContent";
 
-type TContextMenuCompound = typeof ContextMenuRoot & {
+/** Type of the {@link ContextMenu} compound: the root callable plus its attached sub-components. */
+export type TContextMenuCompound = typeof ContextMenuRoot & {
   Root: typeof ContextMenuRoot;
   Trigger: typeof ContextMenuTrigger;
   Content: typeof ContextMenuContent;
@@ -979,6 +995,15 @@ type TContextMenuCompound = typeof ContextMenuRoot & {
   SubContent: typeof ContextMenuSubContent;
 };
 
+/**
+ * Headless, accessible **ContextMenu** — a compound component implementing the
+ * [WAI-ARIA menu pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) opened
+ * by a right-click (or long-press) on its trigger, with submenus, checkbox and
+ * radio items, groups, labels and separators. Zero styles ship.
+ *
+ * The default export is the `Root`; sub-components are attached as static
+ * properties (`ContextMenu.Trigger`, `ContextMenu.Content`, …).
+ */
 const ContextMenuCompound: TContextMenuCompound = Object.assign(
   ContextMenuRoot,
   {
@@ -999,6 +1024,7 @@ const ContextMenuCompound: TContextMenuCompound = Object.assign(
   },
 );
 
+/** @internal */
 ContextMenuCompound.displayName = "ContextMenu";
 
 export { ContextMenuCompound as ContextMenu };

package/src/ContextMenu/ContextMenuContext.ts

@@ -1,7 +1,7 @@
 import { RefObject } from "react";
 
-import { Direction } from "../DirectionProvider";
-import { createStrictContext } from "../utils";
+import { Direction } from "../DirectionProvider/index.ts";
+import { createStrictContext } from "../utils/index.ts";
 
 export type ContextMenuPosition = { x: number; y: number };
 

package/src/ContextMenu/ContextMenuSubContext.ts

@@ -1,6 +1,6 @@
 import { RefObject } from "react";
 
-import { createStrictContext } from "../utils";
+import { createStrictContext } from "../utils/index.ts";
 
 export type ContextMenuSubContextValue = {
   open: boolean;

package/src/ContextMenu/__tests__/ContextMenu.reading-direction.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import { DirectionProvider } from "../../DirectionProvider";
+import { DirectionProvider } from "../../DirectionProvider/index.ts";
 import { ContextMenu } from "../ContextMenu";
 
 describe("ContextMenu reading direction", () => {

package/src/ContextMenu/index.ts

@@ -1 +1,2 @@
-export { ContextMenu } from "./ContextMenu";
+export * from "./ContextMenu";
+export * from "./types";