Modal-aware floating elements (popover, select dropdown etc.)

[qroll]

Describe the feature request When rendering Popover or Form.Select as children of a Modal, allow the floating element to display over the Modal

Given the following example:

<Modal show>
  <Modal.Box>
    <div style={{ padding: "3rem 1.5rem" }}>
      <Form.Select
        options={["Option 1"]}
        label={{
          children: "I am a label",
          addon: { type: "popover", content: "I am a popover" },
        }}
      />
    </div>
  </Modal.Box>
</Modal>

It results in:

Observe that the dropdown menu isn't visible even though the input is focused and expanded.

It only works when dropdownZIndex={100000} is set.

Ideally, the dropdown menu would automatically display over the Modal

Additional context These components use floating-ui to handle positioning of the floating elements. Under the hood, they're rendered in the document body and have a default z-index of 50. Meanwhile the Modal is also appended to the document body and has a z-index of 99999.

Since the modal and floating element share the same stacking context, the floating element always renders below the modal.

[qroll]

A possible way to achieve this is using Context so that the child can detect the parent modal. Then the child can increment its default z-index (or set the modal as the root node)

But due to the project build setup, it's sadly not that straightforward to create a shared Context between components in this library (see this issue)