(
- (
- { className, children, leadingIcon, trailingIcon, type = "item", ...props },
- ref,
- ) => (
-
- {type == "select" && }
- {leadingIcon && {leadingIcon}}
- {children}
- {trailingIcon && (
- {trailingIcon}
- )}
-
- ),
-);
diff --git a/packages/raystack/components/dropdown-menu/dropdown-menu-content.tsx b/packages/raystack/components/dropdown-menu/dropdown-menu-content.tsx
deleted file mode 100644
index 0d72a03a8..000000000
--- a/packages/raystack/components/dropdown-menu/dropdown-menu-content.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client';
-
-import { Menu, MenuProps, useMenuContext } from '@ariakit/react';
-import { Combobox, ComboboxList } from '@ariakit/react';
-import { cx } from 'class-variance-authority';
-import { Slot, VisuallyHidden } from 'radix-ui';
-import { ElementRef, forwardRef, useEffect, useRef, useState } from 'react';
-import { useDropdownContext } from './dropdown-menu-root';
-import styles from './dropdown-menu.module.css';
-import { WithAsChild } from './types';
-
-export interface MenuContentProps extends WithAsChild {
- searchPlaceholder?: string;
-}
-
-export const DropdownMenuContent = forwardRef<
- ElementRef,
- MenuContentProps
->(
- (
- { className, children, asChild, searchPlaceholder = 'Search...', ...props },
- ref
- ) => {
- const menu = useMenuContext();
- const { autocomplete } = useDropdownContext();
- const isSubMenu = !!menu?.parent;
- const comboboxRef = useRef(null);
- const visuallyHiddenRef = useRef(null);
- const [isInsideRadixDialog, setIsInsideRadixDialog] = useState(false);
-
- /*
- * This is a workaround to fix focus lock issue when the dropdown menu is inside a Radix Dialog.
- * TODO: Use Radix.Popover for the dropdown popover
- */
- useEffect(() => {
- setIsInsideRadixDialog(
- !!visuallyHiddenRef.current?.closest("[role='dialog']")
- );
- }, []);
-
- return (
- <>
-
- : undefined}
- {...props}
- >
- {autocomplete ? (
- <>
- {
- if (
- document &&
- document.activeElement !== comboboxRef.current
- )
- comboboxRef.current?.focus();
- }}
- />
-
- {children}
-
-
- ) : (
- children
- )}
-
-
- );
- }
-);
diff --git a/packages/raystack/components/dropdown-menu/dropdown-menu-item.tsx b/packages/raystack/components/dropdown-menu/dropdown-menu-item.tsx
deleted file mode 100644
index 20035f807..000000000
--- a/packages/raystack/components/dropdown-menu/dropdown-menu-item.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-'use client';
-
-import { MenuItem, MenuItemProps, useMenuContext } from '@ariakit/react';
-import { ComboboxItem, ComboboxItemProps } from '@ariakit/react';
-import { Slot } from 'radix-ui';
-import { forwardRef } from 'react';
-import { Cell, CellBaseProps } from './cell';
-import { useDropdownContext } from './dropdown-menu-root';
-import { WithAsChild } from './types';
-import { getMatch } from './utils';
-
-export interface DropdownMenuItemProps
- extends WithAsChild,
- CellBaseProps {
- forceRender?: 'combobox' | 'auto';
- value?: string;
-}
-
-export const DropdownMenuItem = forwardRef<
- HTMLDivElement,
- DropdownMenuItemProps
->(({ children, asChild, forceRender, value, ...props }, ref) => {
- const { autocomplete, searchValue, shouldFilter } = useDropdownContext();
- const menu = useMenuContext();
-
- const defaultProps: MenuItemProps = {
- ref,
- focusOnHover: true,
- blurOnHoverEnd: false,
- render: asChild ? : | ,
- ...props
- };
-
- // In auto mode, hide items that don't match the search value
- if (!forceRender && shouldFilter && !getMatch(value, children, searchValue)) {
- return null;
- }
-
- if (forceRender === 'combobox' || autocomplete) {
- const comboboxProps = defaultProps as ComboboxItemProps;
- return (
- {
- // Make sure that clicking on a combobox item that opens a nested
- // menu/dialog does not close the menu.
- const expandable = event.currentTarget.hasAttribute('aria-expanded');
- if (expandable) return false;
- // By default, clicking on a ComboboxItem only closes its own popover.
- // However, since we're in a menu context, we also close all parent
- // menus.
- menu?.hideAll();
- return true;
- }}
- >
- {children}
-
- );
- }
-
- return ;
-});
diff --git a/packages/raystack/components/dropdown-menu/dropdown-menu-misc.tsx b/packages/raystack/components/dropdown-menu/dropdown-menu-misc.tsx
deleted file mode 100644
index 4f905d197..000000000
--- a/packages/raystack/components/dropdown-menu/dropdown-menu-misc.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client';
-
-import {
- MenuGroup,
- MenuGroupLabel,
- MenuGroupLabelProps,
- MenuGroupProps,
- MenuSeparator,
- MenuSeparatorProps
-} from '@ariakit/react';
-import { cx } from 'class-variance-authority';
-import { Slot } from 'radix-ui';
-import {
- ElementRef,
- Fragment,
- HTMLAttributes,
- ReactNode,
- forwardRef
-} from 'react';
-import { useDropdownContext } from './dropdown-menu-root';
-import styles from './dropdown-menu.module.css';
-import { WithAsChild } from './types';
-
-export const DropdownMenuGroup = forwardRef<
- ElementRef,
- WithAsChild
->(({ className, asChild, ...props }, ref) => {
- const { shouldFilter } = useDropdownContext();
-
- return (
- : asChild ? : undefined}
- {...props}
- />
- );
-});
-
-export const DropdownMenuLabel = forwardRef<
- ElementRef,
- WithAsChild
->(({ className, asChild, ...props }, ref) => {
- const { shouldFilter } = useDropdownContext();
-
- if (shouldFilter) {
- return null;
- }
-
- return (
- : undefined}
- {...props}
- />
- );
-});
-
-export const DropdownMenuSeparator = forwardRef<
- ElementRef,
- WithAsChild
->(({ className, asChild, ...props }, ref) => {
- const { shouldFilter } = useDropdownContext();
-
- if (shouldFilter) {
- return null;
- }
-
- return (
- : }
- {...props}
- />
- );
-});
-
-export const DropdownMenuEmptyState = forwardRef<
- HTMLDivElement,
- HTMLAttributes & {
- children: ReactNode;
- }
->(({ className, children, ...props }, ref) => (
-
- {children}
-
-));
diff --git a/packages/raystack/components/dropdown-menu/dropdown-menu-root.tsx b/packages/raystack/components/dropdown-menu/dropdown-menu-root.tsx
deleted file mode 100644
index e1cdd77bb..000000000
--- a/packages/raystack/components/dropdown-menu/dropdown-menu-root.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-'use client';
-
-import {
- ComboboxProvider,
- MenuProvider,
- MenuProviderProps
-} from '@ariakit/react';
-import { createContext, useCallback, useContext, useState } from 'react';
-
-interface CommonProps {
- autocomplete?: boolean;
- autocompleteMode?: 'auto' | 'manual';
- searchValue?: string;
-}
-
-interface DropdownContextValue extends CommonProps {
- parent?: CommonProps;
-}
-
-interface UseDropdownContext extends DropdownContextValue {
- shouldFilter?: boolean;
- parent?: CommonProps & {
- shouldFilter?: boolean;
- };
-}
-
-/**
- Root context to manage the Dropdown control
- @remarks Only for internal usage.
- */
-
-export const DropdownContext = createContext(
- undefined
-);
-
-export const useDropdownContext = (): UseDropdownContext => {
- const context = useContext(DropdownContext);
- if (!context) return {};
-
- const shouldFilter = !!(
- context?.autocomplete &&
- context?.autocompleteMode === 'auto' &&
- context?.searchValue?.length
- );
-
- const shouldFilterParent = !!(
- context?.parent?.autocomplete &&
- context?.parent?.autocompleteMode === 'auto' &&
- context?.parent?.searchValue?.length
- );
-
- return {
- ...context,
- shouldFilter,
- parent: context?.parent && {
- ...context.parent,
- shouldFilter: shouldFilterParent
- }
- };
-};
-
-export interface BaseMenuProviderProps
- extends Omit {
- onOpenChange?: MenuProviderProps['setOpen'];
-}
-
-export interface NormalDropdownMenuRootProps extends BaseMenuProviderProps {
- autocomplete?: false;
- autocompleteMode?: never;
- searchValue?: never;
- onSearch?: never;
- defaultSearchValue?: never;
-}
-
-export interface AutocompleteDropdownMenuRootProps
- extends BaseMenuProviderProps,
- CommonProps {
- autocomplete: true;
- onSearch?: (value: string) => void;
- defaultSearchValue?: string;
-}
-
-export type DropdownMenuRootProps =
- | NormalDropdownMenuRootProps
- | AutocompleteDropdownMenuRootProps;
-
-export const DropdownMenuRoot = ({
- autocomplete,
- autocompleteMode = 'auto',
- searchValue: providedSearchValue,
- onSearch,
- focusLoop = true,
- defaultSearchValue = '',
- onOpenChange,
- ...props
-}: DropdownMenuRootProps) => {
- const [internalSearchValue, setInternalSearchValue] =
- useState(defaultSearchValue);
- const dropdownContext = useDropdownContext();
-
- const searchValue = providedSearchValue ?? internalSearchValue;
-
- const setValue = useCallback(
- (value: string) => {
- setInternalSearchValue(value);
- onSearch?.(value);
- },
- [onSearch]
- );
-
- const element = (
-
- );
-
- return (
-
- {autocomplete ? (
-
- {element}
-
- ) : (
- element
- )}
-
- );
-};
diff --git a/packages/raystack/components/dropdown-menu/dropdown-menu-trigger.tsx b/packages/raystack/components/dropdown-menu/dropdown-menu-trigger.tsx
deleted file mode 100644
index e0226559b..000000000
--- a/packages/raystack/components/dropdown-menu/dropdown-menu-trigger.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-'use client';
-
-import { MenuButton, MenuButtonProps } from '@ariakit/react';
-import { Slot } from 'radix-ui';
-import { PointerEvent, forwardRef } from 'react';
-import { TriangleRightIcon } from '~/icons';
-import { DropdownMenuItem, DropdownMenuItemProps } from './dropdown-menu-item';
-import { useDropdownContext } from './dropdown-menu-root';
-import { WithAsChild } from './types';
-import { getMatch } from './utils';
-
-export interface DropdownMenuTriggerProps extends WithAsChild {
- stopPropagation?: boolean;
-}
-
-export const DropdownMenuTrigger = forwardRef<
- HTMLButtonElement,
- DropdownMenuTriggerProps
->(({ children, asChild, stopPropagation = true, onClick, ...props }, ref) => {
- return (
- : undefined}
- onClick={(
- e: PointerEvent & PointerEvent
- ) => {
- if (stopPropagation) e.stopPropagation();
- onClick?.(e);
- }}
- {...props}
- >
- {children}
-
- );
-});
-
-export interface DropdownMenuTriggerItemProps extends DropdownMenuItemProps {}
-
-/**
- * `TriggerItem` is a helper component that renders a `Trigger` as a `MenuItem`.
- */
-export const DropdownMenuTriggerItem = forwardRef<
- HTMLButtonElement,
- DropdownMenuTriggerItemProps
->(
- (
- { children, value, trailingIcon = , ...props },
- ref
- ) => {
- const { parent } = useDropdownContext();
-
- if (
- parent?.shouldFilter &&
- !getMatch(value, children, parent?.searchValue)
- ) {
- return null;
- }
-
- return (
-
- }
- >
- {children}
-
- );
- }
-);
diff --git a/packages/raystack/components/dropdown-menu/dropdown-menu.tsx b/packages/raystack/components/dropdown-menu/dropdown-menu.tsx
deleted file mode 100644
index 3c3dc3d8f..000000000
--- a/packages/raystack/components/dropdown-menu/dropdown-menu.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { DropdownMenuRoot } from "./dropdown-menu-root";
-import { DropdownMenuContent } from "./dropdown-menu-content";
-import { DropdownMenuItem } from "./dropdown-menu-item";
-import {
- DropdownMenuTrigger,
- DropdownMenuTriggerItem,
-} from "./dropdown-menu-trigger";
-import {
- DropdownMenuEmptyState,
- DropdownMenuGroup,
- DropdownMenuLabel,
- DropdownMenuSeparator,
-} from "./dropdown-menu-misc";
-
-export const DropdownMenu = Object.assign(DropdownMenuRoot, {
- Trigger: DropdownMenuTrigger,
- /**
- * `TriggerItem` is a helper component that renders a `Trigger` as a `MenuItem`.
- */
- TriggerItem: DropdownMenuTriggerItem,
- Content: DropdownMenuContent,
- Item: DropdownMenuItem,
- Group: DropdownMenuGroup,
- Label: DropdownMenuLabel,
- Separator: DropdownMenuSeparator,
- EmptyState: DropdownMenuEmptyState,
-});
diff --git a/packages/raystack/components/dropdown-menu/index.ts b/packages/raystack/components/dropdown-menu/index.ts
deleted file mode 100644
index 58d32ff11..000000000
--- a/packages/raystack/components/dropdown-menu/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { DropdownMenu } from "./dropdown-menu";
diff --git a/packages/raystack/components/dropdown-menu/types.ts b/packages/raystack/components/dropdown-menu/types.ts
deleted file mode 100644
index 99ac57a5a..000000000
--- a/packages/raystack/components/dropdown-menu/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type WithAsChild = Omit & {
- asChild?: boolean;
-};
diff --git a/packages/raystack/components/dropdown-menu/utils.ts b/packages/raystack/components/dropdown-menu/utils.ts
deleted file mode 100644
index 8d8a54053..000000000
--- a/packages/raystack/components/dropdown-menu/utils.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ReactNode } from 'react';
-
-export const getMatch = (
- value?: any,
- children?: ReactNode,
- search?: string
-) => {
- if (!search?.length) return true;
- const childrenValue = getChildrenValue(children)?.toLowerCase();
-
- return (
- value?.toLowerCase().includes(search.toLowerCase()) ||
- childrenValue?.includes(search.toLowerCase())
- );
-};
-
-export const getChildrenValue = (children?: ReactNode) => {
- if (typeof children === 'string') return children;
- if (typeof children === 'object' && children !== null) {
- return children.toString();
- }
- return null;
-};
diff --git a/packages/raystack/components/menu/__tests__/menu.test.tsx b/packages/raystack/components/menu/__tests__/menu.test.tsx
new file mode 100644
index 000000000..ceb2617c1
--- /dev/null
+++ b/packages/raystack/components/menu/__tests__/menu.test.tsx
@@ -0,0 +1,137 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { Button } from '../../button/button';
+import { Menu } from '../menu';
+import { MenuRootProps } from '../menu-root';
+
+// Mock scrollIntoView for test environment
+Object.defineProperty(Element.prototype, 'scrollIntoView', {
+ value: vi.fn(),
+ writable: true
+});
+
+// String constants
+const TRIGGER_TEXT = 'Open Menu';
+const MENU_ITEMS = [
+ { id: 'profile', label: 'Profile' },
+ { id: 'settings', label: 'Settings' },
+ { id: 'billing', label: 'Billing' },
+ { id: 'team', label: 'Team' },
+ { id: 'logout', label: 'Logout' }
+];
+
+const BasicDropdown = ({
+ onClick,
+ children,
+ ...props
+}: MenuRootProps & { onClick?: (value: string) => void }) => {
+ return (
+
+ );
+};
+
+const renderAndOpenDropdown = async (Dropdown: React.ReactElement) => {
+ await fireEvent.click(render(Dropdown).getByText(TRIGGER_TEXT));
+};
+
+describe('Menu', () => {
+ describe('Basic Rendering', () => {
+ it('renders dropdown trigger', () => {
+ render();
+ expect(screen.getByText(TRIGGER_TEXT)).toBeInTheDocument();
+ });
+
+ it('renders with custom className on trigger', () => {
+ render(
+
+ );
+
+ const trigger = screen.getByText('Custom Trigger');
+ expect(trigger).toHaveClass('custom-trigger');
+ });
+
+ it('does not show content initially', () => {
+ render();
+ MENU_ITEMS.forEach(item => {
+ expect(screen.queryByText(item.label)).not.toBeInTheDocument();
+ });
+ });
+
+ it('shows content when opened', async () => {
+ await renderAndOpenDropdown();
+
+ expect(screen.getByRole('menu')).toBeInTheDocument();
+ MENU_ITEMS.forEach(item => {
+ expect(screen.getByText(item.label)).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('Trigger Interaction', () => {
+ it('opens menu when trigger is clicked', async () => {
+ await renderAndOpenDropdown();
+
+ expect(screen.getByRole('menu')).toBeInTheDocument();
+ expect(screen.getByText(MENU_ITEMS[0].label)).toBeInTheDocument();
+ });
+ });
+
+ describe('Menu Items', () => {
+ it('handles item clicks with onClick', async () => {
+ const onClick = vi.fn();
+
+ await renderAndOpenDropdown();
+
+ const item = screen.getByText(MENU_ITEMS[0].label);
+ fireEvent.click(item);
+
+ expect(onClick).toHaveBeenCalled();
+ });
+
+ it('supports disabled items', async () => {
+ const onClick = vi.fn();
+
+ await renderAndOpenDropdown(
+
+
+ Disabled Item
+
+
+ );
+
+ const disabledItem = screen.getByTestId('disabled-item');
+ expect(disabledItem).toHaveAttribute('aria-disabled', 'true');
+ });
+ });
+
+ describe('Controlled State', () => {
+ it('calls onOpenChange when state changes', async () => {
+ const onOpenChange = vi.fn();
+
+ await render();
+
+ const trigger = screen.getByText(TRIGGER_TEXT);
+ fireEvent.click(trigger);
+
+ expect(onOpenChange).toHaveBeenCalled();
+ });
+ });
+});
diff --git a/packages/raystack/components/dropdown-menu/cell.module.css b/packages/raystack/components/menu/cell.module.css
similarity index 94%
rename from packages/raystack/components/dropdown-menu/cell.module.css
rename to packages/raystack/components/menu/cell.module.css
index 1f53c0b30..53f2f5390 100644
--- a/packages/raystack/components/dropdown-menu/cell.module.css
+++ b/packages/raystack/components/menu/cell.module.css
@@ -10,7 +10,8 @@
letter-spacing: var(--rs-letter-spacing-small);
}
-.cell[data-active-item] {
+.cell[data-highlighted],
+.cell[data-popup-open] {
outline: none;
cursor: pointer;
font-weight: var(--rs-font-weight-regular);
diff --git a/packages/raystack/components/menu/cell.tsx b/packages/raystack/components/menu/cell.tsx
new file mode 100644
index 000000000..55652fe87
--- /dev/null
+++ b/packages/raystack/components/menu/cell.tsx
@@ -0,0 +1,28 @@
+import { cx } from 'class-variance-authority';
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import styles from './cell.module.css';
+
+export type CellBaseProps = {
+ leadingIcon?: ReactNode;
+ trailingIcon?: ReactNode;
+};
+export type CellProps = HTMLAttributes &
+ CellBaseProps & {
+ type?: 'select' | 'item';
+ };
+
+export const Cell = forwardRef(
+ (
+ { className, children, leadingIcon, trailingIcon, type = 'item', ...props },
+ ref
+ ) => (
+
+ {leadingIcon && {leadingIcon}}
+ {children}
+ {trailingIcon && (
+ {trailingIcon}
+ )}
+
+ )
+);
+Cell.displayName = 'Menu.Cell';
diff --git a/packages/raystack/components/menu/index.ts b/packages/raystack/components/menu/index.ts
new file mode 100644
index 000000000..01435c7b0
--- /dev/null
+++ b/packages/raystack/components/menu/index.ts
@@ -0,0 +1 @@
+export { Menu } from './menu';
diff --git a/packages/raystack/components/menu/menu-content.tsx b/packages/raystack/components/menu/menu-content.tsx
new file mode 100644
index 000000000..0f2505d84
--- /dev/null
+++ b/packages/raystack/components/menu/menu-content.tsx
@@ -0,0 +1,197 @@
+'use client';
+
+import {
+ Autocomplete as AutocompletePrimitive,
+ Menu as MenuPrimitive
+} from '@base-ui/react';
+import { cx } from 'class-variance-authority';
+import { forwardRef, KeyboardEvent, useCallback, useRef } from 'react';
+import styles from './menu.module.css';
+import { useMenuContext } from './menu-root';
+import {
+ dispatchKeyboardEvent,
+ isElementSubMenuOpen,
+ isElementSubMenuTrigger,
+ KEYCODES
+} from './utils';
+
+export interface MenuContentProps
+ extends Omit<
+ MenuPrimitive.Positioner.Props,
+ 'render' | 'className' | 'style'
+ >,
+ MenuPrimitive.Popup.Props {
+ searchPlaceholder?: string;
+}
+
+export const MenuContent = forwardRef(
+ (
+ {
+ className,
+ children,
+ searchPlaceholder = 'Search...',
+ render,
+ finalFocus,
+ style,
+ sideOffset = 4,
+ align = 'start',
+ onFocus,
+ ...positionerProps
+ },
+ ref
+ ) => {
+ const {
+ autocomplete,
+ inputValue,
+ onInputValueChange,
+ inputRef,
+ isInitialRender,
+ parent
+ } = useMenuContext();
+
+ const focusInput = useCallback(() => {
+ if (document?.activeElement !== inputRef?.current)
+ inputRef?.current?.focus();
+ }, [inputRef]);
+ const highlightedItem = useRef<
+ [index: number, reason: 'keyboard' | 'pointer' | 'none']
+ >([-1, 'none']);
+ const containerRef = useRef(null);
+
+ const highlightFirstItem = useCallback(() => {
+ if (!isInitialRender?.current) return;
+ isInitialRender.current = false;
+ const item = containerRef.current?.querySelector('[role="option"]');
+ if (!item) return;
+ item.dispatchEvent(new PointerEvent('mousemove', { bubbles: true }));
+ }, [isInitialRender]);
+
+ const checkAndOpenSubMenu = useCallback(() => {
+ if (highlightedItem.current[0] === -1) return;
+ const items = containerRef.current?.querySelectorAll('[role="option"]');
+ const item = items?.[highlightedItem.current[0]];
+ if (!item || !isElementSubMenuTrigger(item)) return;
+ dispatchKeyboardEvent(item, KEYCODES.ARROW_RIGHT);
+ }, []);
+
+ const checkAndCloseSubMenu = useCallback(
+ (e: KeyboardEvent) => {
+ if (highlightedItem.current[0] === -1) return;
+ const items = containerRef.current?.querySelectorAll('[role="option"]');
+ const item = items?.[highlightedItem.current[0]];
+ if (
+ !item ||
+ !isElementSubMenuTrigger(item) ||
+ !isElementSubMenuOpen(item)
+ )
+ return;
+ dispatchKeyboardEvent(item, KEYCODES.ESCAPE);
+ e.stopPropagation();
+ },
+ []
+ );
+
+ const blurStaleMenuItem = useCallback((index: number) => {
+ const items = containerRef.current?.querySelectorAll('[role="option"]');
+ const item = items?.[index];
+ if (
+ !item ||
+ !isElementSubMenuTrigger(item) ||
+ !isElementSubMenuOpen(item)
+ )
+ return;
+ dispatchKeyboardEvent(item, KEYCODES.ESCAPE);
+ item.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));
+ }, []);
+
+ return (
+
+
+ {
+ focusInput();
+ e.stopPropagation();
+ highlightFirstItem();
+ onFocus?.(e);
+ }
+ : undefined
+ }
+ >
+ {autocomplete ? (
+ onInputValueChange?.(value)}
+ autoHighlight={!!inputValue?.length}
+ mode='none'
+ loopFocus={false}
+ onItemHighlighted={(value, eventDetails) => {
+ if (
+ highlightedItem.current[1] === 'pointer' &&
+ eventDetails.reason === 'keyboard'
+ ) {
+ // focus moved using keyboard after using pointer
+ blurStaleMenuItem(highlightedItem.current[0]);
+ }
+ highlightedItem.current = [
+ eventDetails.index,
+ eventDetails.reason
+ ];
+ }}
+ >
+ {
+ focusInput();
+ }}
+ onKeyDown={e => {
+ if (e.key === 'ArrowLeft') return;
+ if (e.key === 'Escape') return checkAndCloseSubMenu(e);
+ if (e.key === 'ArrowRight' || e.key === 'Enter')
+ checkAndOpenSubMenu();
+ e.stopPropagation();
+ }}
+ tabIndex={-1}
+ />
+
+ {children}
+
+
+ ) : (
+ children
+ )}
+
+
+
+ );
+ }
+);
+MenuContent.displayName = 'Menu.Content';
+
+export const MenuSubContent = forwardRef(
+ ({ ...props }, ref) =>
+);
+MenuSubContent.displayName = 'Menu.SubContent';
diff --git a/packages/raystack/components/menu/menu-item.tsx b/packages/raystack/components/menu/menu-item.tsx
new file mode 100644
index 000000000..546b66f6c
--- /dev/null
+++ b/packages/raystack/components/menu/menu-item.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import {
+ Autocomplete as AutocompletePrimitive,
+ Menu as MenuPrimitive
+} from '@base-ui/react';
+import { forwardRef } from 'react';
+import { Cell, CellBaseProps } from './cell';
+import { useMenuContext } from './menu-root';
+import { getMatch } from './utils';
+
+export interface MenuItemProps extends MenuPrimitive.Item.Props, CellBaseProps {
+ value?: string;
+}
+
+export const MenuItem = forwardRef(
+ ({ children, value, leadingIcon, trailingIcon, render, ...props }, ref) => {
+ const { autocomplete, inputValue, shouldFilter } = useMenuContext();
+
+ const cell = render ?? (
+ |
+ );
+
+ // In auto mode, hide items that don't match the search value
+ if (shouldFilter && !getMatch(value, children, inputValue)) {
+ return null;
+ }
+
+ if (autocomplete) {
+ return (
+ }
+ {...props}
+ >
+ {children}
+
+ );
+ }
+
+ return (
+ {
+ e.stopPropagation();
+ e.preventDefault();
+ e.preventBaseUIHandler();
+ }}
+ >
+ {children}
+
+ );
+ }
+);
+MenuItem.displayName = 'Menu.Item';
diff --git a/packages/raystack/components/menu/menu-misc.tsx b/packages/raystack/components/menu/menu-misc.tsx
new file mode 100644
index 000000000..929f8b80c
--- /dev/null
+++ b/packages/raystack/components/menu/menu-misc.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { cx } from 'class-variance-authority';
+import { Fragment, forwardRef, HTMLAttributes, ReactNode } from 'react';
+import styles from './menu.module.css';
+import { useMenuContext } from './menu-root';
+
+export const MenuGroup = forwardRef(
+ ({ className, children, ...props }, ref) => {
+ const { shouldFilter } = useMenuContext();
+
+ if (shouldFilter) {
+ return {children};
+ }
+
+ return (
+
+ {children}
+
+ );
+ }
+);
+MenuGroup.displayName = 'Menu.Group';
+
+export const MenuLabel = forwardRef<
+ HTMLDivElement,
+ MenuPrimitive.GroupLabel.Props
+>(({ className, ...props }, ref) => {
+ const { shouldFilter } = useMenuContext();
+
+ if (shouldFilter) {
+ return null;
+ }
+
+ return (
+
+ );
+});
+MenuLabel.displayName = 'Menu.Label';
+
+export const MenuSeparator = forwardRef<
+ HTMLDivElement,
+ HTMLAttributes
+>(({ className, ...props }, ref) => {
+ const { shouldFilter } = useMenuContext();
+
+ if (shouldFilter) {
+ return null;
+ }
+
+ return (
+
+ );
+});
+MenuSeparator.displayName = 'Menu.Separator';
+
+export const MenuEmptyState = forwardRef<
+ HTMLDivElement,
+ HTMLAttributes & {
+ children: ReactNode;
+ }
+>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+));
+MenuEmptyState.displayName = 'Menu.EmptyState';
diff --git a/packages/raystack/components/menu/menu-root.tsx b/packages/raystack/components/menu/menu-root.tsx
new file mode 100644
index 000000000..878cce912
--- /dev/null
+++ b/packages/raystack/components/menu/menu-root.tsx
@@ -0,0 +1,249 @@
+'use client';
+
+import { Menu as MenuPrimitive } from '@base-ui/react';
+import {
+ createContext,
+ useCallback,
+ useContext,
+ useRef,
+ useState
+} from 'react';
+
+interface CommonProps {
+ autocomplete?: boolean;
+ autocompleteMode?: 'auto' | 'manual';
+ inputValue?: string;
+ inputRef?: React.RefObject;
+ contentRef?: React.RefObject;
+ isInitialRender?: React.RefObject;
+ open?: boolean;
+}
+
+interface MenuContextValue extends CommonProps {
+ parent?: CommonProps;
+ onInputValueChange?: (value: string) => void;
+}
+
+interface UseMenuContextReturn extends MenuContextValue {
+ shouldFilter?: boolean;
+ parent?: CommonProps & {
+ shouldFilter?: boolean;
+ };
+}
+
+/**
+ Root context to manage the Menu control
+ @remarks Only for internal usage.
+ */
+export const MenuContext = createContext(
+ undefined
+);
+
+export const useMenuContext = (): UseMenuContextReturn => {
+ const context = useContext(MenuContext);
+ if (!context) return {};
+
+ const shouldFilter = !!(
+ context?.autocomplete &&
+ context?.autocompleteMode === 'auto' &&
+ context?.inputValue?.length
+ );
+
+ const shouldFilterParent = !!(
+ context?.parent?.autocomplete &&
+ context?.parent?.autocompleteMode === 'auto' &&
+ context?.parent?.inputValue?.length
+ );
+
+ return {
+ ...context,
+ shouldFilter,
+ parent: context?.parent && {
+ ...context.parent,
+ shouldFilter: shouldFilterParent
+ }
+ };
+};
+
+export interface MenuRootBaseProps {
+ open?: boolean;
+ defaultOpen?: boolean;
+ onOpenChange?: MenuPrimitive.Root.Props['onOpenChange'];
+ modal?: boolean;
+ loopFocus?: boolean;
+}
+
+export interface NormalMenuRootProps extends MenuPrimitive.Root.Props {
+ autocomplete?: false;
+ autocompleteMode?: never;
+ inputValue?: never;
+ onInputValueChange?: never;
+ defaultInputValue?: never;
+}
+
+export interface AutocompleteMenuRootProps
+ extends MenuPrimitive.Root.Props,
+ CommonProps {
+ autocomplete: true;
+ onInputValueChange?: (value: string) => void;
+ defaultInputValue?: string;
+}
+
+export type MenuRootProps = NormalMenuRootProps | AutocompleteMenuRootProps;
+
+export const MenuRoot = ({
+ autocomplete,
+ autocompleteMode = 'auto',
+ inputValue: providedInputValue,
+ onInputValueChange,
+ defaultInputValue = '',
+ open: providedOpen,
+ onOpenChange,
+ defaultOpen = false,
+ ...props
+}: MenuRootProps) => {
+ const [internalInputValue, setInternalInputValue] =
+ useState(defaultInputValue);
+
+ const [internalOpen, setInternalOpen] = useState(defaultOpen);
+ const open = providedOpen ?? internalOpen;
+ const inputRef = useRef(null);
+ const contentRef = useRef(null);
+ const isInitialRender = useRef(true);
+
+ const inputValue = providedInputValue ?? internalInputValue;
+
+ const setValue = useCallback(
+ (value: string) => {
+ setInternalInputValue(value);
+ onInputValueChange?.(value);
+ },
+ [onInputValueChange]
+ );
+
+ const handleOpenChange: MenuPrimitive.Root.Props['onOpenChange'] =
+ useCallback(
+ (value: boolean, eventDetails: MenuPrimitive.Root.ChangeEventDetails) => {
+ if (!value && autocomplete) {
+ setValue('');
+ isInitialRender.current = true;
+ }
+ setInternalOpen(value);
+ onOpenChange?.(value, eventDetails);
+ },
+ [onOpenChange, setValue, autocomplete]
+ );
+
+ return (
+
+
+
+ );
+};
+MenuRoot.displayName = 'Menu';
+
+export interface NormalMenuSubMenuProps
+ extends MenuPrimitive.SubmenuRoot.Props {
+ autocomplete?: false;
+ autocompleteMode?: never;
+ inputValue?: never;
+ onInputValueChange?: never;
+ defaultInputValue?: never;
+}
+
+export interface AutocompleteMenuSubMenuProps
+ extends MenuPrimitive.SubmenuRoot.Props {
+ autocomplete: true;
+ autocompleteMode?: 'auto' | 'manual';
+ inputValue?: string;
+ onInputValueChange?: (value: string) => void;
+ defaultInputValue?: string;
+}
+
+export type MenuSubMenuProps =
+ | NormalMenuSubMenuProps
+ | AutocompleteMenuSubMenuProps;
+
+export const MenuSubMenu = ({
+ autocomplete,
+ autocompleteMode = 'auto',
+ inputValue: providedInputValue,
+ onInputValueChange,
+ defaultInputValue = '',
+ open: providedOpen,
+ onOpenChange,
+ defaultOpen = false,
+ ...props
+}: MenuSubMenuProps) => {
+ const [internalInputValue, setInternalInputValue] =
+ useState(defaultInputValue);
+ const [internalOpen, setInternalOpen] = useState(defaultOpen);
+ const open = providedOpen ?? internalOpen;
+ const parentContext = useMenuContext();
+ const inputRef = useRef(null);
+ const isInitialRender = useRef(true);
+ const contentRef = useRef(null);
+ const inputValue = providedInputValue ?? internalInputValue;
+
+ const setValue = useCallback(
+ (value: string) => {
+ setInternalInputValue(value);
+ onInputValueChange?.(value);
+ },
+ [onInputValueChange]
+ );
+
+ const handleOpenChange: MenuPrimitive.Root.Props['onOpenChange'] =
+ useCallback(
+ (value: boolean, eventDetails: MenuPrimitive.Root.ChangeEventDetails) => {
+ if (!value && autocomplete) {
+ setValue('');
+ isInitialRender.current = true;
+ }
+ setInternalOpen(value);
+ onOpenChange?.(value, eventDetails);
+ },
+ [onOpenChange, setValue, autocomplete]
+ );
+
+ return (
+
+
+
+ );
+};
+MenuSubMenu.displayName = 'Menu.SubMenu';
diff --git a/packages/raystack/components/menu/menu-trigger.tsx b/packages/raystack/components/menu/menu-trigger.tsx
new file mode 100644
index 000000000..a6ef279e2
--- /dev/null
+++ b/packages/raystack/components/menu/menu-trigger.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import { Autocomplete as AutocompletePrimitive } from '@base-ui/react';
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { forwardRef } from 'react';
+import { TriangleRightIcon } from '~/icons';
+import { Cell, CellBaseProps } from './cell';
+import { useMenuContext } from './menu-root';
+import { getMatch } from './utils';
+
+export interface MenuTriggerProps extends MenuPrimitive.Trigger.Props {
+ stopPropagation?: boolean;
+}
+
+export const MenuTrigger = forwardRef(
+ ({ children, stopPropagation = true, onClick, ...props }, ref) => {
+ return (
+ {
+ if (stopPropagation) e.stopPropagation();
+ onClick?.(e);
+ }}
+ {...props}
+ >
+ {children}
+
+ );
+ }
+);
+MenuTrigger.displayName = 'Menu.Trigger';
+
+export interface MenuSubTriggerProps
+ extends MenuPrimitive.SubmenuTrigger.Props,
+ CellBaseProps {
+ value?: string;
+}
+
+export const MenuSubTrigger = forwardRef(
+ (
+ {
+ children,
+ value,
+ trailingIcon = ,
+ leadingIcon,
+ ...props
+ },
+ ref
+ ) => {
+ const { parent, inputRef } = useMenuContext();
+
+ if (
+ parent?.shouldFilter &&
+ !getMatch(value, children, parent?.inputValue)
+ ) {
+ return null;
+ }
+
+ const cell = | ;
+ return (
+ {
+ if (document?.activeElement !== parent?.inputRef?.current)
+ parent?.inputRef?.current?.focus();
+ props?.onPointerEnter?.(e);
+ }}
+ onKeyDown={e => {
+ requestAnimationFrame(() => {
+ inputRef?.current?.focus();
+ });
+ props?.onKeyDown?.(e);
+ }}
+ />
+ ) : (
+ cell
+ )
+ }
+ {...props}
+ role={parent?.autocomplete ? 'option' : 'menuitem'}
+ data-slot='menu-subtrigger'
+ >
+ {children}
+
+ );
+ }
+);
+MenuSubTrigger.displayName = 'Menu.SubTrigger';
diff --git a/packages/raystack/components/dropdown-menu/dropdown-menu.module.css b/packages/raystack/components/menu/menu.module.css
similarity index 97%
rename from packages/raystack/components/dropdown-menu/dropdown-menu.module.css
rename to packages/raystack/components/menu/menu.module.css
index 29b30396a..880a9c5be 100644
--- a/packages/raystack/components/dropdown-menu/dropdown-menu.module.css
+++ b/packages/raystack/components/menu/menu.module.css
@@ -1,6 +1,8 @@
+.positioner {
+ z-index: var(--rs-z-index-portal);
+}
.content {
overflow: hidden;
- z-index: var(--rs-z-index-portal);
font-weight: var(--rs-font-weight-regular);
font-size: var(--rs-font-size-small);
line-height: var(--rs-line-height-small);
@@ -14,7 +16,7 @@
box-shadow: var(--rs-shadow-lifted);
border: 0.5px solid var(--rs-color-border-base-primary);
color: var(--rs-color-foreground-base-primary);
- min-width: var(--popover-anchor-width);
+ min-width: var(--anchor-width);
}
.content:focus,
.content:focus-visible {
diff --git a/packages/raystack/components/menu/menu.tsx b/packages/raystack/components/menu/menu.tsx
new file mode 100644
index 000000000..51f4d3443
--- /dev/null
+++ b/packages/raystack/components/menu/menu.tsx
@@ -0,0 +1,23 @@
+import { MenuContent, MenuSubContent } from './menu-content';
+import { MenuItem } from './menu-item';
+import {
+ MenuEmptyState,
+ MenuGroup,
+ MenuLabel,
+ MenuSeparator
+} from './menu-misc';
+import { MenuRoot, MenuSubMenu } from './menu-root';
+import { MenuSubTrigger, MenuTrigger } from './menu-trigger';
+
+export const Menu = Object.assign(MenuRoot, {
+ Trigger: MenuTrigger,
+ Content: MenuContent,
+ Item: MenuItem,
+ Group: MenuGroup,
+ Label: MenuLabel,
+ Separator: MenuSeparator,
+ EmptyState: MenuEmptyState,
+ Submenu: MenuSubMenu,
+ SubmenuTrigger: MenuSubTrigger,
+ SubmenuContent: MenuSubContent
+});
diff --git a/packages/raystack/components/menu/utils.ts b/packages/raystack/components/menu/utils.ts
new file mode 100644
index 000000000..ffdf50ee3
--- /dev/null
+++ b/packages/raystack/components/menu/utils.ts
@@ -0,0 +1,59 @@
+import React, { ReactNode } from 'react';
+
+export const getMatch = (
+ value?: string,
+ children?: ReactNode,
+ search?: string
+) => {
+ if (!search?.length) return true;
+ const childrenValue = getChildrenValue(children)?.toLowerCase();
+
+ return !!(
+ value?.toLowerCase().includes(search.toLowerCase()) ||
+ childrenValue?.includes(search.toLowerCase())
+ );
+};
+
+export const getChildrenValue = (children?: ReactNode) => {
+ let value = '';
+ if (!children) return value;
+
+ React.Children.forEach(children, child => {
+ if (typeof child === 'string' || typeof child === 'number') {
+ value += child + ' ';
+ } else if (React.isValidElement<{ children?: ReactNode }>(child)) {
+ value += getChildrenValue(child.props.children) + ' ';
+ }
+ });
+ return value.trim();
+};
+
+export const KEYCODES: Record = {
+ ARROW_RIGHT: ['ArrowRight', 39],
+ ESCAPE: ['Escape', 27]
+};
+
+export const dispatchKeyboardEvent = (
+ element: Element | EventTarget,
+ key: (typeof KEYCODES)[keyof typeof KEYCODES],
+ bubbles: boolean = true
+) => {
+ const [keyName, keyCode] = key;
+ return element.dispatchEvent(
+ new KeyboardEvent('keydown', {
+ key: keyName,
+ code: keyName,
+ keyCode: keyCode,
+ which: keyCode,
+ bubbles
+ })
+ );
+};
+
+export const isElementSubMenuTrigger = (element: Element) => {
+ return element.getAttribute('data-slot') === 'menu-subtrigger';
+};
+
+export const isElementSubMenuOpen = (element: Element) => {
+ return element.hasAttribute('data-popup-open');
+};
diff --git a/packages/raystack/components/select/select-item.tsx b/packages/raystack/components/select/select-item.tsx
index a499d5ee7..6676b655a 100644
--- a/packages/raystack/components/select/select-item.tsx
+++ b/packages/raystack/components/select/select-item.tsx
@@ -5,7 +5,7 @@ import { cx } from 'class-variance-authority';
import { Select as SelectPrimitive } from 'radix-ui';
import { ElementRef, forwardRef, useLayoutEffect } from 'react';
import { Checkbox } from '../checkbox';
-import { getMatch } from '../dropdown-menu/utils';
+import { getMatch } from '../menu/utils';
import { Text } from '../text';
import styles from './select.module.css';
import { useSelectContext } from './select-root';
diff --git a/packages/raystack/index.tsx b/packages/raystack/index.tsx
index 24d5d72e9..20696b59e 100644
--- a/packages/raystack/index.tsx
+++ b/packages/raystack/index.tsx
@@ -28,7 +28,6 @@ export {
useDataTable
} from './components/data-table';
export { Dialog } from './components/dialog';
-export { DropdownMenu } from './components/dropdown-menu';
export { EmptyState } from './components/empty-state';
export { FilterChip } from './components/filter-chip';
export { Flex } from './components/flex';
@@ -41,6 +40,7 @@ export { InputField } from './components/input-field';
export { Label } from './components/label';
export { Link } from './components/link';
export { List } from './components/list';
+export { Menu } from './components/menu';
export { Navbar } from './components/navbar';
export { Popover } from './components/popover';
export { Radio } from './components/radio';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d10663bd6..e952ef018 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11338,7 +11338,6 @@ snapshots:
'@parcel/types': 2.12.0(@parcel/core@2.12.0)
transitivePeerDependencies:
- '@parcel/core'
- - '@swc/helpers'
'@parcel/plugin@2.9.2(@parcel/core@2.12.0)':
dependencies:
@@ -14105,7 +14104,7 @@ snapshots:
'@testing-library/dom@10.4.0':
dependencies:
'@babel/code-frame': 7.26.2
- '@babel/runtime': 7.27.0
+ '@babel/runtime': 7.28.6
'@types/aria-query': 5.0.4
aria-query: 5.3.0
chalk: 4.1.2