Fix/shadow dropdown

[karthiksuki]

Description

Dropdown Usability enhancement

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• [ x] Feature (non-breaking change which adds functionality)
• Improvement (change that would cause existing functionality to not work as expected)
• Code refactoring
• Performance improvements
• Documentation update

Screenshots and Media (if applicable)

Summary by CodeRabbit

• Bug Fixes

  • Improved submenu accessibility with proper semantic button elements.

• Style

  • Enhanced menu styling with stronger borders, rings, and shadows for improved visual contrast and clarity across menu items and submenus.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1c08032e-71fe-4921-85b5-487eb7ea99db

📥 Commits

Reviewing files that changed from the base of the PR and between 0acb32e and 4710307.

📒 Files selected for processing (1)

• packages/ui/src/dropdowns/custom-menu.tsx

---

📝 Walkthrough

Walkthrough

CustomMenu component receives performance optimizations through context memoization, improved accessibility with button elements and event handling adjustments, and enhanced visual styling using stronger border and ring variants across menu components.

Changes

CustomMenu Component Improvements

Layer / File(s)	Summary
Context value memoization for performance packages/ui/src/dropdowns/custom-menu.tsx	Menu and submenu context values containing callbacks are memoized via useMemo and passed to their respective Context.Providers, stabilizing references across renders.
Submenu trigger button refactor packages/ui/src/dropdowns/custom-menu.tsx	Submenu trigger changes from a div-based container to a semantic button element with explicit type="button" and disabled attributes, while retaining click handling and updating associated styling.
Menu accessibility and event handling packages/ui/src/dropdowns/custom-menu.tsx	Menu root switches key event handling from onKeyDownCapture to onKeyDown and adds role="presentation" for proper ARIA semantics.
Visual styling enhancement packages/ui/src/dropdowns/custom-menu.tsx	Menu items, submenu panels, and content wrappers are updated to use stronger border, ring, and shadow style variants instead of subtle ones for increased visual prominence.

🐰 A menu gets a button's grace,
Context memoized in place,
Strong borders now gleam,
Accessibility's dream,
Dropdowns with elegant face! 🎭✨

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is largely incomplete; it lacks detailed explanation of the actual code changes, proper test scenarios, and references to related issues.	Add a comprehensive description of the changes (context memoization, button conversion, styling updates), include test scenarios, and link related issues if applicable.
Title check	❓ Inconclusive	The title 'Fix/shadow dropdown' is vague and lacks clarity about the actual changes made, which include context memoization, button conversion, and styling updates.	Use a more descriptive title that reflects the primary change, such as 'Improve CustomMenu performance and styling with memoization and button updates' or 'Enhance dropdown menu styling and accessibility'.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[karthiksuki]

Fixes: #9095