feat: Add triggerRef and maxHeight to Dropdown

[ernst-dev]

Description

Supplementary to shortcuts in PromptInput:

• Adds triggerRef to allow using the dropdown with a custom trigger without any wrapper elements
• Adds maxHeight to control the size of the dropdown (used in shortcuts to prevent the menu from covering chat bubbles)

Related links, issue #, if available: n/a

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.45%. Comparing base (c5eb583) to head (27860d1).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4365   +/-   ##
=======================================
  Coverage   97.45%   97.45%           
=======================================
  Files         902      902           
  Lines       26469    26474    +5     
  Branches     9540     9546    +6     
=======================================
+ Hits        25795    25800    +5     
+ Misses        668      631   -37     
- Partials        6       43   +37     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[pan-kot]

What problem does this solve? Do we need the external trigger to be a semantic element so that we cannot have a div wrapper around it, or do we need it because the wrapper affects the layout? If the latter is true, we can instead conditionally apply display: contents to the internal wrapper - which should be a cleaner solution.

[ernst-dev]

Over-arching problem which is slightly specific to triggers in shortcuts is that it wraps the trigger with a div element which would be semantically incorrect for shortcut triggers as they are rendered inside paragraph elements. Completely excluding the wrapper means the consumer of dropdown has control over the DOM structure. So this is less about layout and more about semantics and it's a more verbose set up than swapping our the div with a span conditionally.

[pan-kot]

Take a look at the customTriggerBuilder - an internal prop in the ButtonDropdown. Can we use a similar approach here?

interface TriggerProps {
  id: string;
  ref: React.Ref<HTMLElement>;
}

<Dropdown 
  renderTrigger={(triggerProps) => <button className="my-trigger" {...triggerProps} />}
/>

[ernst-dev]

I don't think this makes sense for triggers in shortcuts. It would be quite complex to handle all of the trigger behaviours though a function like that, we need more control over the actual trigger element that the dropdown anchors to so I'm inclined to sticking with the ref approach, but not pulling the ID from it as your suggestion from the other comment.

[ernst-dev]

For reference I experimented by adding a function and seeing how we could use it in shortcuts but it's too complex to control the trigger properly. If the trigger were more static than text in an input then it could work