[Feature Request]: Allow specifying more floating menu CSS selectors on Tearsheet component family

[liunate]

The problem

When using <Tearsheet>, we have floating element attached outside of the tearsheet DOM element, and <Tearsheet> does not allow moving focus onto the floating element.

The solution

In the <TearsheetShell> internal component, selectively destructure selectorsFloatingMenus from rest, and join the existing hardcoded selectorsFloatingMenus property value:

// TearsheetShell.js
const { selectorsFloatingMenus, ...restWithoutSelectorsFloatingMenus } = rest;

<ComposedModal
  { 
     ...restWithoutSelectorsFloatingMenus
  }
  selectorsFloatingMenus={[
    `.${carbonPrefix}--overflow-menu-options`,
    `.${carbonPrefix}--tooltip`,
    '.flatpickr-calendar',
    `.${bc}__container`,
     // join `selectorsFloatingMenus` here
]}

Design link

No response

Links to other materials

carbon selectorsFloatingMenus https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management

Owner/main maintainer(s)

Nate(me)

Second/backup maintainer(s)

No response

Product/offering

No response

Business priority

High Priority = pressing release

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate issues

[liunate]

I can work on this if this is considered a possible enhancement 😉