@octanejs/radix 0.1.2

package/src/DismissableLayer.ts

@@ -0,0 +1,413 @@
+// Ported from @radix-ui/react-dismissable-layer. A layer that can be dismissed by Escape,
+// pointer-down outside, or focus outside — with a module-level layer stack so nested layers
+// dismiss top-down, optional body pointer-events disabling (modal), branches (outside
+// elements that shouldn't dismiss), and dismissable "surfaces" (e.g. a dialog overlay —
+// pressing one dismisses even if it stops propagation). React's context-with-default (no
+// Provider is ever rendered for it in Radix) → a module-level singleton; `useCallbackRef`/
+// `useEffectEvent` → octane `useEffectEvent`; discrete custom-event dispatch → flushSync.
+import { createElement, useEffect, useEffectEvent, useRef, useState } from 'octane';
+
+import { composeEventHandlers } from './compose-event-handlers';
+import { useComposedRefs } from './compose-refs';
+import { S, subSlot } from './internal';
+import { dispatchDiscreteCustomEvent, Primitive } from './Primitive';
+
+const CONTEXT_UPDATE = 'dismissableLayer.update';
+const POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';
+const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';
+
+let originalBodyPointerEvents: string;
+
+// Radix models this as React context but never renders a Provider — every consumer sees
+// the module-level default. Port it as a plain singleton.
+const layerContext = {
+	layers: new Set<HTMLElement>(),
+	layersWithOutsidePointerEventsDisabled: new Set<HTMLElement>(),
+	branches: new Set<HTMLElement>(),
+	// Outside elements that belong to a layer's own dismiss affordance (eg, a dialog
+	// overlay). Pressing them should dismiss the layer regardless of whether or not they
+	// stop propagation.
+	dismissableSurfaces: new Set<HTMLElement>(),
+};
+
+export function DismissableLayer(props: any): any {
+	const slot = S('DismissableLayer');
+	const {
+		disableOutsidePointerEvents = false,
+		deferPointerDownOutside = false,
+		onEscapeKeyDown,
+		onPointerDownOutside,
+		onFocusOutside,
+		onInteractOutside,
+		onDismiss,
+		ref: forwardedRef,
+		...layerProps
+	} = props ?? {};
+	const context = layerContext;
+	const [node, setNode] = useState<HTMLElement | null>(null, subSlot(slot, 'node'));
+	const ownerDocument = node?.ownerDocument ?? globalThis?.document;
+	const [, force] = useState({}, subSlot(slot, 'force'));
+	const composedRefs = useComposedRefs(forwardedRef, setNode, subSlot(slot, 'refs'));
+
+	const layers = Array.from(context.layers);
+	const [highestLayerWithOutsidePointerEventsDisabled] = [
+		...context.layersWithOutsidePointerEventsDisabled,
+	].slice(-1);
+	const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(
+		highestLayerWithOutsidePointerEventsDisabled,
+	);
+	const index = node ? layers.indexOf(node) : -1;
+	const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
+	const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
+
+	const isDeferredPointerDownOutsideRef = useRef(false, subSlot(slot, 'deferred'));
+	const pointerDownOutside = usePointerDownOutside(
+		(event: any) => {
+			const target = event.target;
+			if (!(target instanceof Node)) return;
+			const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
+			if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
+			onPointerDownOutside?.(event);
+			onInteractOutside?.(event);
+			if (!event.defaultPrevented) onDismiss?.();
+		},
+		{
+			ownerDocument,
+			deferPointerDownOutside,
+			isDeferredPointerDownOutsideRef,
+			dismissableSurfaces: context.dismissableSurfaces,
+		},
+		subSlot(slot, 'pdo'),
+	);
+
+	const focusOutside = useFocusOutside(
+		(event: any) => {
+			if (deferPointerDownOutside && isDeferredPointerDownOutsideRef.current) return;
+			const target = event.target;
+			const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
+			if (isFocusInBranch) return;
+			onFocusOutside?.(event);
+			onInteractOutside?.(event);
+			if (!event.defaultPrevented) onDismiss?.();
+		},
+		ownerDocument,
+		subSlot(slot, 'fo'),
+	);
+
+	const isHighestLayer = node ? index === layers.length - 1 : false;
+	const handleKeyDown = useEffectEvent(
+		(event: KeyboardEvent) => {
+			if (event.key !== 'Escape') return;
+			onEscapeKeyDown?.(event);
+			if (!event.defaultPrevented && onDismiss) {
+				event.preventDefault();
+				onDismiss();
+			}
+		},
+		subSlot(slot, 'esc'),
+	);
+
+	useEffect(
+		() => {
+			if (!isHighestLayer) return;
+			ownerDocument.addEventListener('keydown', handleKeyDown, { capture: true });
+			return () => ownerDocument.removeEventListener('keydown', handleKeyDown, { capture: true });
+		},
+		[ownerDocument, isHighestLayer],
+		subSlot(slot, 'e:esc'),
+	);
+
+	useEffect(
+		() => {
+			if (!node) return;
+			if (disableOutsidePointerEvents) {
+				if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+					originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
+					ownerDocument.body.style.pointerEvents = 'none';
+				}
+				context.layersWithOutsidePointerEventsDisabled.add(node);
+			}
+			context.layers.add(node);
+			dispatchUpdate();
+			return () => {
+				if (disableOutsidePointerEvents) {
+					context.layersWithOutsidePointerEventsDisabled.delete(node);
+					if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+						ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+					}
+				}
+			};
+		},
+		[node, ownerDocument, disableOutsidePointerEvents],
+		subSlot(slot, 'e:layer'),
+	);
+
+	useEffect(
+		() => {
+			return () => {
+				if (!node) return;
+				context.layers.delete(node);
+				context.layersWithOutsidePointerEventsDisabled.delete(node);
+				dispatchUpdate();
+			};
+		},
+		[node],
+		subSlot(slot, 'e:cleanup'),
+	);
+
+	useEffect(
+		() => {
+			const handleUpdate = (): void => force({});
+			document.addEventListener(CONTEXT_UPDATE, handleUpdate);
+			return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
+		},
+		[],
+		subSlot(slot, 'e:update'),
+	);
+
+	return createElement(Primitive.div, {
+		...layerProps,
+		ref: composedRefs,
+		style: {
+			pointerEvents: isBodyPointerEventsDisabled
+				? isPointerEventsEnabled
+					? 'auto'
+					: 'none'
+				: undefined,
+			...props.style,
+		},
+		onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
+		onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
+		onPointerDownCapture: composeEventHandlers(
+			props.onPointerDownCapture,
+			pointerDownOutside.onPointerDownCapture,
+		),
+	});
+}
+
+export function DismissableLayerBranch(props: any): any {
+	const slot = S('DismissableLayerBranch');
+	const { ref: forwardedRef, ...branchProps } = props ?? {};
+	const ref = useRef<HTMLElement | null>(null, subSlot(slot, 'ref'));
+	const composedRefs = useComposedRefs(forwardedRef, ref, subSlot(slot, 'refs'));
+	useEffect(
+		() => {
+			const node = ref.current;
+			if (node) {
+				layerContext.branches.add(node);
+				return () => {
+					layerContext.branches.delete(node);
+				};
+			}
+		},
+		[],
+		subSlot(slot, 'e:branch'),
+	);
+	return createElement(Primitive.div, { ...branchProps, ref: composedRefs });
+}
+
+/** Register an element as a layer's own dismiss affordance (e.g. a dialog overlay). */
+export function useDismissableLayerSurface(...args: any[]): (node: HTMLElement | null) => void {
+	const slotArg = args[args.length - 1];
+	const slot = typeof slotArg === 'symbol' ? slotArg : S('useDismissableLayerSurface');
+	const [node, setNode] = useState<HTMLElement | null>(null, subSlot(slot, 'node'));
+	useEffect(
+		() => {
+			if (!node) return;
+			layerContext.dismissableSurfaces.add(node);
+			return () => {
+				layerContext.dismissableSurfaces.delete(node);
+			};
+		},
+		[node],
+		subSlot(slot, 'e:surface'),
+	);
+	return setNode;
+}
+
+/**
+ * Listens for `pointerdown` outside the layer subtree. Radix's semantics preserved:
+ * a capture-phase flag distinguishes inside-the-component-tree pointerdowns (portals
+ * included, since octane events bubble the LOGICAL tree) from true outside presses, and
+ * `deferPointerDownOutside` waits for the paired `click` so an outside handler that
+ * `stopPropagation()`s (an "intercepted" interaction) doesn't dismiss.
+ */
+function usePointerDownOutside(
+	onPointerDownOutside: (event: any) => void,
+	args: {
+		ownerDocument: Document;
+		deferPointerDownOutside: boolean;
+		isDeferredPointerDownOutsideRef: { current: boolean };
+		dismissableSurfaces: Set<HTMLElement>;
+	},
+	slot: symbol | undefined,
+): { onPointerDownCapture: () => void } {
+	const {
+		ownerDocument,
+		deferPointerDownOutside,
+		isDeferredPointerDownOutsideRef,
+		dismissableSurfaces,
+	} = args;
+	const handlePointerDownOutside = useEffectEvent(onPointerDownOutside, subSlot(slot, 'cb'));
+	const isPointerInsideReactTreeRef = useRef(false, subSlot(slot, 'inside'));
+	const isPointerDownOutsideRef = useRef(false, subSlot(slot, 'outside'));
+	const interceptedRef = useRef(new Map<string, boolean>(), subSlot(slot, 'intercepted'));
+	const handleClickRef = useRef<() => void>(() => {}, subSlot(slot, 'click'));
+
+	useEffect(
+		() => {
+			function resetOutsideInteraction(): void {
+				isPointerDownOutsideRef.current = false;
+				isDeferredPointerDownOutsideRef.current = false;
+				interceptedRef.current.clear();
+			}
+			function isOutsideInteractionIntercepted(): boolean {
+				return Array.from(interceptedRef.current.values()).some(Boolean);
+			}
+			function handleInteractionCapture(event: Event): void {
+				if (!isPointerDownOutsideRef.current) return;
+				const target = event.target;
+				const isDismissableSurface =
+					target instanceof Node &&
+					[...dismissableSurfaces].some((surface) => surface.contains(target));
+				if (!isDismissableSurface) {
+					interceptedRef.current.set(event.type, true);
+				}
+				if (event.type === 'click') {
+					window.setTimeout(() => {
+						if (isPointerDownOutsideRef.current) {
+							handleClickRef.current();
+						}
+					}, 0);
+				}
+			}
+			function handleInteractionBubble(event: Event): void {
+				if (isPointerDownOutsideRef.current) {
+					interceptedRef.current.set(event.type, false);
+				}
+			}
+			const handlePointerDown = (event: PointerEvent): void => {
+				if (event.target && !isPointerInsideReactTreeRef.current) {
+					const eventDetail = { originalEvent: event };
+					const handleAndDispatchPointerDownOutsideEvent = (): void => {
+						ownerDocument.removeEventListener('click', handleClickRef.current);
+						const wasIntercepted = isOutsideInteractionIntercepted();
+						resetOutsideInteraction();
+						if (!wasIntercepted) {
+							handleAndDispatchCustomEvent(
+								POINTER_DOWN_OUTSIDE,
+								handlePointerDownOutside,
+								eventDetail,
+								{ discrete: true },
+							);
+						}
+					};
+					isPointerDownOutsideRef.current = true;
+					isDeferredPointerDownOutsideRef.current = deferPointerDownOutside && event.button === 0;
+					interceptedRef.current.clear();
+					if (!deferPointerDownOutside || event.button !== 0) {
+						handleAndDispatchPointerDownOutsideEvent();
+					} else {
+						ownerDocument.removeEventListener('click', handleClickRef.current);
+						handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
+						ownerDocument.addEventListener('click', handleClickRef.current, { once: true });
+					}
+				} else {
+					ownerDocument.removeEventListener('click', handleClickRef.current);
+					resetOutsideInteraction();
+				}
+				isPointerInsideReactTreeRef.current = false;
+			};
+			const outsideInteractionEvents = [
+				'pointerup',
+				'mousedown',
+				'mouseup',
+				'touchstart',
+				'touchend',
+				'click',
+			];
+			for (const eventName of outsideInteractionEvents) {
+				ownerDocument.addEventListener(eventName, handleInteractionCapture, true);
+				ownerDocument.addEventListener(eventName, handleInteractionBubble);
+			}
+			// Avoid the open-click itself registering as "outside" (it happened before mount).
+			const timerId = window.setTimeout(() => {
+				ownerDocument.addEventListener('pointerdown', handlePointerDown as any);
+			}, 0);
+			return () => {
+				window.clearTimeout(timerId);
+				ownerDocument.removeEventListener('pointerdown', handlePointerDown as any);
+				ownerDocument.removeEventListener('click', handleClickRef.current);
+				for (const eventName of outsideInteractionEvents) {
+					ownerDocument.removeEventListener(eventName, handleInteractionCapture, true);
+					ownerDocument.removeEventListener(eventName, handleInteractionBubble);
+				}
+			};
+		},
+		[ownerDocument, deferPointerDownOutside],
+		subSlot(slot, 'e:pdo'),
+	);
+
+	return {
+		// ensures we check the COMPONENT tree (not just DOM tree) — capture on the layer.
+		onPointerDownCapture: () => {
+			isPointerInsideReactTreeRef.current = true;
+		},
+	};
+}
+
+/** Listens for `focusin` outside the layer subtree. */
+function useFocusOutside(
+	onFocusOutside: (event: any) => void,
+	ownerDocument: Document,
+	slot: symbol | undefined,
+): { onFocusCapture: () => void; onBlurCapture: () => void } {
+	const handleFocusOutside = useEffectEvent(onFocusOutside, subSlot(slot, 'cb'));
+	const isFocusInsideReactTreeRef = useRef(false, subSlot(slot, 'inside'));
+	useEffect(
+		() => {
+			const handleFocus = (event: FocusEvent): void => {
+				if (event.target && !isFocusInsideReactTreeRef.current) {
+					const eventDetail = { originalEvent: event };
+					handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
+						discrete: false,
+					});
+				}
+			};
+			ownerDocument.addEventListener('focusin', handleFocus);
+			return () => ownerDocument.removeEventListener('focusin', handleFocus);
+		},
+		[ownerDocument],
+		subSlot(slot, 'e:fo'),
+	);
+	return {
+		onFocusCapture: () => {
+			isFocusInsideReactTreeRef.current = true;
+		},
+		onBlurCapture: () => {
+			isFocusInsideReactTreeRef.current = false;
+		},
+	};
+}
+
+function dispatchUpdate(): void {
+	document.dispatchEvent(new CustomEvent(CONTEXT_UPDATE));
+}
+
+function handleAndDispatchCustomEvent(
+	name: string,
+	handler: ((event: any) => void) | undefined,
+	detail: { originalEvent: Event },
+	{ discrete }: { discrete: boolean },
+): void {
+	const target = detail.originalEvent.target as EventTarget;
+	const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
+	if (handler) target.addEventListener(name, handler as any, { once: true });
+	if (discrete) {
+		dispatchDiscreteCustomEvent(target, event);
+	} else {
+		target.dispatchEvent(event);
+	}
+}
+
+export { DismissableLayer as Root, DismissableLayerBranch as Branch };

package/src/DropdownMenu.ts

@@ -0,0 +1,275 @@
+// Ported from @radix-ui/react-dropdown-menu (source:
+// .radix-primitives/packages/react/dropdown-menu/src/dropdown-menu.tsx). A thin,
+// button-triggered wrapper over the shared Menu primitive: Trigger toggles on
+// pointer-down (left button, no ctrl) / Enter / Space / ArrowDown, Content re-namespaces
+// the popper CSS vars and returns focus to the trigger on close (unless the close came
+// from an outside interaction); everything else forwards straight into Menu.
+import { createElement, useCallback, useRef } from 'octane';
+
+import { composeEventHandlers } from './compose-event-handlers';
+import { useComposedRefs } from './compose-refs';
+import { createContextScope } from './context';
+import { S, subSlot } from './internal';
+import * as MenuPrimitive from './Menu';
+import { createMenuScope } from './Menu';
+import { Primitive } from './Primitive';
+import { useControllableState } from './useControllableState';
+import { useId } from './useId';
+
+const DROPDOWN_MENU_NAME = 'DropdownMenu';
+
+const [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(
+	DROPDOWN_MENU_NAME,
+	[createMenuScope],
+);
+export { createDropdownMenuScope };
+const useMenuScope = createMenuScope();
+
+interface DropdownMenuContextValue {
+	triggerId: string;
+	triggerRef: { current: HTMLElement | null };
+	contentId: string;
+	open: boolean;
+	onOpenChange(open: boolean): void;
+	onOpenToggle(): void;
+	modal: boolean;
+}
+
+const [DropdownMenuProvider, useDropdownMenuContext] =
+	createDropdownMenuContext<DropdownMenuContextValue>(DROPDOWN_MENU_NAME);
+
+export function Root(props: any): any {
+	const slot = S('DropdownMenu.Root');
+	const {
+		__scopeDropdownMenu,
+		children,
+		dir,
+		open: openProp,
+		defaultOpen,
+		onOpenChange,
+		modal = true,
+	} = props ?? {};
+	const menuScope = useMenuScope(__scopeDropdownMenu, subSlot(slot, 'menu'));
+	const triggerRef = useRef<HTMLElement | null>(null, subSlot(slot, 'trigger'));
+	const [open, setOpen] = useControllableState<boolean>(
+		{ prop: openProp, defaultProp: defaultOpen ?? false, onChange: onOpenChange },
+		subSlot(slot, 'open'),
+	);
+
+	return createElement(DropdownMenuProvider, {
+		scope: __scopeDropdownMenu,
+		triggerId: useId(subSlot(slot, 'triggerId')),
+		triggerRef,
+		contentId: useId(subSlot(slot, 'contentId')),
+		open,
+		onOpenChange: setOpen,
+		onOpenToggle: useCallback(
+			() => setOpen((prevOpen) => !prevOpen),
+			[setOpen],
+			subSlot(slot, 'toggle'),
+		),
+		modal,
+		children: createElement(MenuPrimitive.Root, {
+			...menuScope,
+			open,
+			onOpenChange: setOpen,
+			dir,
+			modal,
+			children,
+		}),
+	});
+}
+
+export function Trigger(props: any): any {
+	const slot = S('DropdownMenu.Trigger');
+	const { __scopeDropdownMenu, disabled = false, ref: forwardedRef, ...triggerProps } = props ?? {};
+	const context = useDropdownMenuContext('DropdownMenuTrigger', __scopeDropdownMenu);
+	const menuScope = useMenuScope(__scopeDropdownMenu, subSlot(slot, 'menu'));
+	const composedRefs = useComposedRefs(forwardedRef, context.triggerRef, subSlot(slot, 'refs'));
+	return createElement(MenuPrimitive.Anchor, {
+		asChild: true,
+		...menuScope,
+		children: createElement(Primitive.button, {
+			type: 'button',
+			id: context.triggerId,
+			'aria-haspopup': 'menu',
+			'aria-expanded': context.open,
+			'aria-controls': context.open ? context.contentId : undefined,
+			'data-state': context.open ? 'open' : 'closed',
+			'data-disabled': disabled ? '' : undefined,
+			disabled,
+			...triggerProps,
+			ref: composedRefs,
+			onPointerDown: composeEventHandlers(props?.onPointerDown, (event: PointerEvent) => {
+				// only call handler if it's the left button (mousedown gets triggered by all mouse
+				// buttons) but not when the control key is pressed (avoiding MacOS right click)
+				if (!disabled && event.button === 0 && event.ctrlKey === false) {
+					context.onOpenToggle();
+					// prevent trigger focusing when opening
+					// this allows the content to be given focus without competition
+					if (!context.open) event.preventDefault();
+				}
+			}),
+			onKeyDown: composeEventHandlers(props?.onKeyDown, (event: KeyboardEvent) => {
+				if (disabled) return;
+				if (['Enter', ' '].includes(event.key)) context.onOpenToggle();
+				if (event.key === 'ArrowDown') context.onOpenChange(true);
+				// prevent keydown from scrolling window / first focused item to execute
+				// that keydown (inadvertently closing the menu)
+				if (['Enter', ' ', 'ArrowDown'].includes(event.key)) event.preventDefault();
+			}),
+		}),
+	});
+}
+
+export function Portal(props: any): any {
+	const slot = S('DropdownMenu.Portal');
+	const { __scopeDropdownMenu, ...portalProps } = props ?? {};
+	const menuScope = useMenuScope(__scopeDropdownMenu, subSlot(slot, 'menu'));
+	return createElement(MenuPrimitive.Portal, { ...menuScope, ...portalProps });
+}
+
+export function Content(props: any): any {
+	const slot = S('DropdownMenu.Content');
+	const { __scopeDropdownMenu, ...contentProps } = props ?? {};
+	const context = useDropdownMenuContext('DropdownMenuContent', __scopeDropdownMenu);
+	const menuScope = useMenuScope(__scopeDropdownMenu, subSlot(slot, 'menu'));
+	const hasInteractedOutsideRef = useRef(false, subSlot(slot, 'interacted'));
+
+	return createElement(MenuPrimitive.Content, {
+		id: context.contentId,
+		'aria-labelledby': context.triggerId,
+		...menuScope,
+		...contentProps,
+		onCloseAutoFocus: composeEventHandlers(props?.onCloseAutoFocus, (event: Event) => {
+			if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
+			hasInteractedOutsideRef.current = false;
+			// Always prevent auto focus because we either focus manually or want user agent focus
+			event.preventDefault();
+		}),
+		onInteractOutside: composeEventHandlers(props?.onInteractOutside, (event: any) => {
+			const originalEvent = event.detail.originalEvent as PointerEvent;
+			const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+			const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+			if (!context.modal || isRightClick) hasInteractedOutsideRef.current = true;
+		}),
+		style: {
+			...props?.style,
+			// re-namespace exposed content custom properties
+			'--radix-dropdown-menu-content-transform-origin': 'var(--radix-popper-transform-origin)',
+			'--radix-dropdown-menu-content-available-width': 'var(--radix-popper-available-width)',
+			'--radix-dropdown-menu-content-available-height': 'var(--radix-popper-available-height)',
+			'--radix-dropdown-menu-trigger-width': 'var(--radix-popper-anchor-width)',
+			'--radix-dropdown-menu-trigger-height': 'var(--radix-popper-anchor-height)',
+		},
+	});
+}
+
+export function Group(props: any): any {
+	const slot = S('DropdownMenu.Group');
+	const { __scopeDropdownMenu, ...groupProps } = props ?? {};
+	const menuScope = useMenuScope(__scopeDropdownMenu, subSlot(slot, 'menu'));
+	return createElement(MenuPrimitive.Group, { ...menuScope, ...groupProps });
+}
+
+export function Label(props: any): any {
+	const slot = S('DropdownMenu.Label');
+	const { __scopeDropdownMenu, ...labelProps } = props ?? {};
+	const menuScope = useMenuScope(__scopeDropdownMenu, subSlot(slot, 'menu'));
+	return createElement(MenuPrimitive.Label, { ...menuScope, ...labelProps });
+}
+
+export function Item(props: any): any {
+	const slot = S('DropdownMenu.Item');
+	const { __scopeDropdownMenu, ...itemProps } = props ?? {};
+	const menuScope = useMenuScope(__scopeDropdownMenu, subSlot(slot, 'menu'));
+	return createElement(MenuPrimitive.Item, { ...menuScope, ...itemProps });
+}
+
+export function CheckboxItem(props: any): any {
+	const slot = S('DropdownMenu.CheckboxItem');
+	const { __scopeDropdownMenu, ...checkboxItemProps } = props ?? {};
+	const menuScope = useMenuScope(__scopeDropdownMenu, subSlot(slot, 'menu'));
+	return createElement(MenuPrimitive.CheckboxItem, { ...menuScope, ...checkboxItemProps });
+}
+
+export function RadioGroup(props: any): any {
+	const slot = S('DropdownMenu.RadioGroup');
+	const { __scopeDropdownMenu, ...radioGroupProps } = props ?? {};
+	const menuScope = useMenuScope(__scopeDropdownMenu, subSlot(slot, 'menu'));
+	return createElement(MenuPrimitive.RadioGroup, { ...menuScope, ...radioGroupProps });
+}
+
+export function RadioItem(props: any): any {
+	const slot = S('DropdownMenu.RadioItem');
+	const { __scopeDropdownMenu, ...radioItemProps } = props ?? {};
+	const menuScope = useMenuScope(__scopeDropdownMenu, subSlot(slot, 'menu'));
+	return createElement(MenuPrimitive.RadioItem, { ...menuScope, ...radioItemProps });
+}
+
+export function ItemIndicator(props: any): any {
+	const slot = S('DropdownMenu.ItemIndicator');
+	const { __scopeDropdownMenu, ...itemIndicatorProps } = props ?? {};
+	const menuScope = useMenuScope(__scopeDropdownMenu, subSlot(slot, 'menu'));
+	return createElement(MenuPrimitive.ItemIndicator, { ...menuScope, ...itemIndicatorProps });
+}
+
+export function Separator(props: any): any {
+	const slot = S('DropdownMenu.Separator');
+	const { __scopeDropdownMenu, ...separatorProps } = props ?? {};
+	const menuScope = useMenuScope(__scopeDropdownMenu, subSlot(slot, 'menu'));
+	return createElement(MenuPrimitive.Separator, { ...menuScope, ...separatorProps });
+}
+
+export function Arrow(props: any): any {
+	const slot = S('DropdownMenu.Arrow');
+	const { __scopeDropdownMenu, ...arrowProps } = props ?? {};
+	const menuScope = useMenuScope(__scopeDropdownMenu, subSlot(slot, 'menu'));
+	return createElement(MenuPrimitive.Arrow, { ...menuScope, ...arrowProps });
+}
+
+export function Sub(props: any): any {
+	const slot = S('DropdownMenu.Sub');
+	const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props ?? {};
+	const menuScope = useMenuScope(__scopeDropdownMenu, subSlot(slot, 'menu'));
+	const [open, setOpen] = useControllableState<boolean>(
+		{ prop: openProp, defaultProp: defaultOpen ?? false, onChange: onOpenChange },
+		subSlot(slot, 'open'),
+	);
+
+	return createElement(MenuPrimitive.Sub, { ...menuScope, open, onOpenChange: setOpen, children });
+}
+
+export function SubTrigger(props: any): any {
+	const slot = S('DropdownMenu.SubTrigger');
+	const { __scopeDropdownMenu, ...subTriggerProps } = props ?? {};
+	const menuScope = useMenuScope(__scopeDropdownMenu, subSlot(slot, 'menu'));
+	return createElement(MenuPrimitive.SubTrigger, { ...menuScope, ...subTriggerProps });
+}
+
+export function SubContent(props: any): any {
+	const slot = S('DropdownMenu.SubContent');
+	const { __scopeDropdownMenu, ...subContentProps } = props ?? {};
+	const menuScope = useMenuScope(__scopeDropdownMenu, subSlot(slot, 'menu'));
+
+	return createElement(MenuPrimitive.SubContent, {
+		...menuScope,
+		...subContentProps,
+		style: {
+			...props?.style,
+			// re-namespace exposed content custom properties
+			'--radix-dropdown-menu-content-transform-origin': 'var(--radix-popper-transform-origin)',
+			'--radix-dropdown-menu-content-available-width': 'var(--radix-popper-available-width)',
+			'--radix-dropdown-menu-content-available-height': 'var(--radix-popper-available-height)',
+			'--radix-dropdown-menu-trigger-width': 'var(--radix-popper-anchor-width)',
+			'--radix-dropdown-menu-trigger-height': 'var(--radix-popper-anchor-height)',
+		},
+	});
+}
+
+export {
+	Root as DropdownMenu,
+	Trigger as DropdownMenuTrigger,
+	Content as DropdownMenuContent,
+	Item as DropdownMenuItem,
+};