@primitiv-ui/react 0.1.0 → 0.1.2

package/src/Dropdown/Dropdown.tsx

@@ -1,9 +1,10 @@
 import { useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import type { ReactElement } from "react";
 
-import { useCheckboxRoot } from "../Checkbox/hooks";
-import { useDirection } from "../DirectionProvider";
-import { useRadioGroupRoot } from "../RadioGroup/hooks";
-import { composeEventHandlers, Slot } from "../Slot";
+import { useCheckboxRoot } from "../Checkbox/hooks/index.ts";
+import { useDirection } from "../DirectionProvider/index.ts";
+import { useRadioGroupRoot } from "../RadioGroup/hooks/index.ts";
+import { composeEventHandlers, Slot } from "../Slot/index.ts";
 
 import { DropdownContext } from "./DropdownContext";
 import { DropdownContentContext } from "./DropdownContentContext";
@@ -21,7 +22,7 @@ import {
   useDropdownRoot,
   useDropdownSubContext,
   useDropdownTrigger,
-} from "./hooks";
+} from "./hooks/index.ts";
 import {
   DropdownCheckboxItemProps,
   DropdownContentProps,
@@ -84,13 +85,13 @@ import { MENUITEM_SELECTOR } from "./constants";
  * </Dropdown.Root>
  * ```
  */
-function DropdownRoot({
+export function DropdownRoot({
   defaultOpen,
   open,
   onOpenChange,
   dir,
   children,
-}: DropdownRootProps) {
+}: DropdownRootProps): ReactElement {
   const inheritedDir = useDirection();
   const { contextValue } = useDropdownRoot({
     defaultOpen,
@@ -106,6 +107,7 @@ function DropdownRoot({
   );
 }
 
+/** @internal */
 DropdownRoot.displayName = "DropdownRoot";
 
 /**
@@ -126,12 +128,12 @@ DropdownRoot.displayName = "DropdownRoot";
  * </Dropdown.Trigger>
  * ```
  */
-function DropdownTrigger({
+export function DropdownTrigger({
   children,
   onClick,
   asChild = false,
   ...rest
-}: DropdownTriggerProps) {
+}: DropdownTriggerProps): ReactElement {
   const { triggerProps } = useDropdownTrigger({ onClick, restProps: rest });
 
   if (asChild) {
@@ -145,6 +147,7 @@ function DropdownTrigger({
   );
 }
 
+/** @internal */
 DropdownTrigger.displayName = "DropdownTrigger";
 
 /**
@@ -178,12 +181,12 @@ DropdownTrigger.displayName = "DropdownTrigger";
  * lands on the next sibling item in the parent rather than getting
  * stuck on a non-focusable item inside a closed sub-popover.
  */
-function DropdownContent({
+export function DropdownContent({
   children,
   onKeyDown,
   asChild = false,
   ...rest
-}: DropdownContentProps) {
+}: DropdownContentProps): ReactElement {
   const { contentContextValue, contentProps } = useDropdownContent({
     onKeyDown,
     restProps: rest,
@@ -200,6 +203,7 @@ function DropdownContent({
   );
 }
 
+/** @internal */
 DropdownContent.displayName = "DropdownContent";
 
 /**
@@ -215,14 +219,14 @@ DropdownContent.displayName = "DropdownContent";
  * Disabled items receive `aria-disabled="true"` and are skipped by arrow
  * navigation, typeahead, and activation handlers.
  */
-function DropdownItem({
+export function DropdownItem({
   children,
   onClick,
   onSelect,
   disabled,
   asChild = false,
   ...rest
-}: DropdownItemProps) {
+}: DropdownItemProps): ReactElement {
   const { itemProps } = useDropdownItem({
     disabled,
     onClick,
@@ -237,6 +241,7 @@ function DropdownItem({
   return <li {...itemProps}>{children}</li>;
 }
 
+/** @internal */
 DropdownItem.displayName = "DropdownItem";
 
 /**
@@ -244,11 +249,11 @@ DropdownItem.displayName = "DropdownItem";
  * by default; pass `asChild` to render any element with separator semantics.
  * Non-interactive — skipped by focus, arrow navigation, and typeahead.
  */
-function DropdownSeparator({
+export function DropdownSeparator({
   asChild = false,
   children,
   ...rest
-}: DropdownSeparatorProps) {
+}: DropdownSeparatorProps): ReactElement {
   const separatorProps = { ...rest, role: "separator" as const };
 
   if (asChild) {
@@ -258,6 +263,7 @@ function DropdownSeparator({
   return <li {...separatorProps} />;
 }
 
+/** @internal */
 DropdownSeparator.displayName = "DropdownSeparator";
 
 /**
@@ -270,11 +276,11 @@ DropdownSeparator.displayName = "DropdownSeparator";
  * first child to provide the accessible name; screen readers will announce
  * the group when arrowing into it.
  */
-function DropdownGroup({
+export function DropdownGroup({
   children,
   asChild = false,
   ...rest
-}: DropdownGroupProps) {
+}: DropdownGroupProps): ReactElement {
   const { contextValue, groupProps } = useDropdownGroup({ restProps: rest });
 
   return (
@@ -290,6 +296,7 @@ function DropdownGroup({
   );
 }
 
+/** @internal */
 DropdownGroup.displayName = "DropdownGroup";
 
 /**
@@ -301,12 +308,12 @@ DropdownGroup.displayName = "DropdownGroup";
  * Renders a `<li>` by default; pass `asChild` to render any element. A
  * caller-supplied `id` takes precedence over the auto-generated one.
  */
-function DropdownLabel({
+export function DropdownLabel({
   id,
   children,
   asChild = false,
   ...rest
-}: DropdownLabelProps) {
+}: DropdownLabelProps): ReactElement {
   const { labelProps } = useDropdownLabel({ id, restProps: rest });
 
   if (asChild) {
@@ -315,6 +322,7 @@ function DropdownLabel({
   return <li {...labelProps}>{children}</li>;
 }
 
+/** @internal */
 DropdownLabel.displayName = "DropdownLabel";
 
 /**
@@ -343,7 +351,7 @@ DropdownLabel.displayName = "DropdownLabel";
  *
  * Disabled items receive `aria-disabled="true"` and no-op on activation.
  */
-function DropdownCheckboxItem({
+export function DropdownCheckboxItem({
   children,
   onClick,
   onSelect,
@@ -353,7 +361,7 @@ function DropdownCheckboxItem({
   onCheckedChange,
   asChild = false,
   ...rest
-}: DropdownCheckboxItemProps) {
+}: DropdownCheckboxItemProps): ReactElement {
   const { setOpen, triggerRef } = useDropdownContext();
   const closeSiblingSub = useCloseSiblingSub();
   const [highlighted, setHighlighted] = useState(false);
@@ -403,6 +411,7 @@ function DropdownCheckboxItem({
   );
 }
 
+/** @internal */
 DropdownCheckboxItem.displayName = "DropdownCheckboxItem";
 
 /**
@@ -417,14 +426,14 @@ DropdownCheckboxItem.displayName = "DropdownCheckboxItem";
  *   Optional `onValueChange` observes selections.
  * - **Controlled** — pass `value` *and* `onValueChange` together.
  */
-function DropdownRadioGroup({
+export function DropdownRadioGroup({
   defaultValue,
   value: controlledValue,
   onValueChange,
   children,
   asChild = false,
   ...rest
-}: DropdownRadioGroupProps) {
+}: DropdownRadioGroupProps): ReactElement {
   const { value, select } = useRadioGroupRoot({
     defaultValue,
     value: controlledValue,
@@ -445,6 +454,7 @@ function DropdownRadioGroup({
   );
 }
 
+/** @internal */
 DropdownRadioGroup.displayName = "DropdownRadioGroup";
 
 /**
@@ -467,7 +477,7 @@ DropdownRadioGroup.displayName = "DropdownRadioGroup";
  *
  * Disabled items receive `aria-disabled="true"` and no-op on activation.
  */
-function DropdownRadioItem({
+export function DropdownRadioItem({
   children,
   onClick,
   onSelect,
@@ -475,7 +485,7 @@ function DropdownRadioItem({
   value: itemValue,
   asChild = false,
   ...rest
-}: DropdownRadioItemProps) {
+}: DropdownRadioItemProps): ReactElement {
   const { setOpen, triggerRef } = useDropdownContext();
   const closeSiblingSub = useCloseSiblingSub();
   const [highlighted, setHighlighted] = useState(false);
@@ -525,6 +535,7 @@ function DropdownRadioItem({
   );
 }
 
+/** @internal */
 DropdownRadioItem.displayName = "DropdownRadioItem";
 
 /**
@@ -554,12 +565,12 @@ DropdownRadioItem.displayName = "DropdownRadioItem";
  * </Dropdown.CheckboxItem>
  * ```
  */
-function DropdownItemIndicator({
+export function DropdownItemIndicator({
   children,
   asChild = false,
   forceMount = false,
   ...rest
-}: DropdownItemIndicatorProps) {
+}: DropdownItemIndicatorProps): ReactElement | null {
   const context = useContext(DropdownItemIndicatorContext);
   if (!context) {
     throw new Error(
@@ -581,6 +592,7 @@ function DropdownItemIndicator({
   return <span {...indicatorProps}>{children}</span>;
 }
 
+/** @internal */
 DropdownItemIndicator.displayName = "DropdownItemIndicator";
 
 /**
@@ -608,12 +620,12 @@ DropdownItemIndicator.displayName = "DropdownItemIndicator";
  * </Dropdown.Root>
  * ```
  */
-function DropdownSub({
+export function DropdownSub({
   defaultOpen,
   open: controlledOpen,
   onOpenChange,
   children,
-}: DropdownSubProps) {
+}: DropdownSubProps): ReactElement {
   const { open, setOpen } = useDropdownRoot({
     defaultOpen,
     open: controlledOpen,
@@ -650,6 +662,7 @@ function DropdownSub({
   );
 }
 
+/** @internal */
 DropdownSub.displayName = "DropdownSub";
 
 /**
@@ -671,14 +684,14 @@ DropdownSub.displayName = "DropdownSub";
  * Disabled triggers receive `aria-disabled="true"` and ignore both click
  * and the open arrow key.
  */
-function DropdownSubTrigger({
+export function DropdownSubTrigger({
   children,
   onClick,
   onKeyDown,
   disabled,
   asChild = false,
   ...rest
-}: DropdownSubTriggerProps) {
+}: DropdownSubTriggerProps): ReactElement {
   const sub = useDropdownSubContext();
   const { dir } = useDropdownContext();
   const openKey = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
@@ -720,6 +733,7 @@ function DropdownSubTrigger({
   return <li {...subTriggerProps}>{children}</li>;
 }
 
+/** @internal */
 DropdownSubTrigger.displayName = "DropdownSubTrigger";
 
 /**
@@ -736,12 +750,12 @@ DropdownSubTrigger.displayName = "DropdownSubTrigger";
  * to the parent {@link DropdownContent | `Dropdown.Content`} so arrow
  * navigation and typeahead apply to the submenu's items.
  */
-function DropdownSubContent({
+export function DropdownSubContent({
   children,
   onKeyDown,
   asChild = false,
   ...rest
-}: DropdownSubContentProps) {
+}: DropdownSubContentProps): ReactElement {
   const sub = useDropdownSubContext();
   const { dir } = useDropdownContext();
   const closeKey = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
@@ -801,9 +815,11 @@ function DropdownSubContent({
   );
 }
 
+/** @internal */
 DropdownSubContent.displayName = "DropdownSubContent";
 
-type TDropdownCompound = typeof DropdownRoot & {
+/** Type of the {@link Dropdown} compound: the root callable plus its attached sub-components. */
+export type TDropdownCompound = typeof DropdownRoot & {
   Root: typeof DropdownRoot;
   Trigger: typeof DropdownTrigger;
   Content: typeof DropdownContent;
@@ -820,6 +836,15 @@ type TDropdownCompound = typeof DropdownRoot & {
   SubContent: typeof DropdownSubContent;
 };
 
+/**
+ * Headless, accessible **Dropdown** menu — a compound component implementing the
+ * [WAI-ARIA menu-button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/)
+ * 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 (`Dropdown.Trigger`, `Dropdown.Content`, …).
+ */
 const DropdownCompound: TDropdownCompound = Object.assign(DropdownRoot, {
   Root: DropdownRoot,
   Trigger: DropdownTrigger,
@@ -837,6 +862,7 @@ const DropdownCompound: TDropdownCompound = Object.assign(DropdownRoot, {
   SubContent: DropdownSubContent,
 });
 
+/** @internal */
 DropdownCompound.displayName = "Dropdown";
 
 export { DropdownCompound as Dropdown };

package/src/Dropdown/DropdownContext.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 DropdownContextValue = {
   open: boolean;

package/src/Dropdown/DropdownSubContext.ts

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

package/src/Dropdown/__tests__/Dropdown.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 { Dropdown } from "../Dropdown";
 
 describe("Dropdown reading direction", () => {

package/src/Dropdown/hooks/useDropdownContent.ts

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useMemo, KeyboardEventHandler } from "react";
-import { composeEventHandlers } from "../../Slot";
+import { composeEventHandlers } from "../../Slot/index.ts";
 import { MENUITEM_SELECTOR, TYPEAHEAD_RESET_MS } from "../constants";
 import { useDropdownContext } from "./useDropdownContext";
 import { DropdownContentProps } from "../types";

package/src/Dropdown/hooks/useDropdownItem.ts

@@ -1,5 +1,5 @@
 import { MouseEventHandler, useState } from "react";
-import { composeEventHandlers, SlotProps } from "../../Slot";
+import { composeEventHandlers, SlotProps } from "../../Slot/index.ts";
 import { useCloseSiblingSub } from "./useCloseSiblingSub";
 import { useDropdownContext } from "./useDropdownContext";
 import { DropdownItemProps } from "../types";

package/src/Dropdown/hooks/useDropdownRoot.ts

@@ -6,8 +6,8 @@ import {
   useRef,
 } from "react";
 
-import { Direction } from "../../DirectionProvider";
-import { useControllableState } from "../../hooks";
+import { Direction } from "../../DirectionProvider/index.ts";
+import { useControllableState } from "../../hooks/index.ts";
 
 type UseDropdownRootArgs = {
   defaultOpen?: boolean;

package/src/Dropdown/hooks/useDropdownTrigger.ts

@@ -1,5 +1,5 @@
 import { MouseEventHandler } from "react";
-import { composeEventHandlers } from "../../Slot";
+import { composeEventHandlers } from "../../Slot/index.ts";
 import { DropdownTriggerProps } from "../types";
 import { useDropdownContext } from "./useDropdownContext";
 

package/src/Dropdown/index.ts

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