fix(datetimepickerv2): expose renderInPortal prop to support floating menu as a child

[jessieyan]

Closes #3362

Summary

• expose renderInPortal prop so that use can set it to false for some scenarios

Copied from issue 3362 When the DateTimePickerV2 is rendered inside a scrollable area (inside of the body) it'll scroll along with the content instead of staying fixed in place. This is because DateTimePickerV2 is always rendered in a portal, and positioned absolutely relative to the body. However, when it's in a section that scrolls this positioning is no longer correct. We should expose the renderInPortal prop used on the FlyoutMenu within the DateTimePickerV2 to give consumers the option of rendering it in the portal or not. Additionally, this prop will need to be added to Cards so that they can pass it to the CardToolbar and eventually to the DateTimePicker for instances of cards having a built-in DateTimePicker.

Change List (commits, features, bugs, etc)

• added renderInPortal prop in DateTimePickerV2, Card, TableCard, CardToolBar
• test updates

Acceptance Test (how to verify the PR)

• go to range select or single select story

• set renderInPortal to false, we should see flyout-tooltip is grandchild of date-time-picker-datepicker-flyout-container

• set renderInPortal to true, flyout-tooltip is independent element outside of date-time-picker-datepicker-flyout-container

Things to look for during review

• [ ] Make sure all references to iot or bx class prefix is using the prefix variable
• [ ] (React) All major areas have a data-testid attribute. New test ids should have test written to ensure they are not changed or removed.
• [ ] UI should be checked in RTL mode to ensure the proper handling of layout and text.
• [ ] All strings should be translatable.
• [ ] The code should pass a11y scans (The storybook a11y knob should show no violations). New components should have a11y test written.
• [ ] Unit test should be written and should have a coverage of 90% or higher in all areas.
• [ ] All components should be passing visual regression test. For new styles or components either a visual regression test should be written for all permutations or the base image updated.
• [ ] Changes or new components should either write new or update existing documentation.
• [ ] PR should link and close out an existing issue

[netlify[bot]]

✅ Deploy Preview for carbon-addons-iot-react ready!

Name	Link
🔨 Latest commit	18f53888827b4e198214c49826fce229a41d55bb
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-addons-iot-react/deploys/635ff2fc9d8df500085a35aa
😎 Deploy Preview	https://deploy-preview-3608--carbon-addons-iot-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify[bot]]

✅ Deploy Preview for ai-apps-pal-angular ready!

Name	Link
🔨 Latest commit	18f53888827b4e198214c49826fce229a41d55bb
🔍 Latest deploy log	https://app.netlify.com/sites/ai-apps-pal-angular/deploys/635ff2fc465d820008301b29
😎 Deploy Preview	https://deploy-preview-3608--ai-apps-pal-angular.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[davidicus]

@jessieyan This usually needs to have it rendered in a portal, in order to break out of an overflow:hidden container, like our cards we need to be able to do so and still have the dropdown stay with the trigger. We can either close the portal on scroll or adjust the offset so it scrolls with the element. We have components in the codebase that manipulate the offset that you can try to look for.

[jessieyan]

@jessieyan This usually needs to have it rendered in a portal, in order to break out of an overflow:hidden container, like our cards we need to be able to do so and still have the dropdown stay with the trigger. We can either close the portal on scroll or adjust the offset so it scrolls with the element. We have components in the codebase that manipulate the offset that you can try to look for.

@davidicus Do you mean the offered solution in issue 3362 is not the right solution?

[davidicus]

We can surface a prop to allow people to render in portal or not but we need to have the dropdown not detach even when it is rendered in portal.

[jessieyan]

@davidicus Change this PR to only resolve the issue #3618 which is to enable the auto positioning

[jessieyan]

@davidicus I saw you left a review comment earlier but I couldn't find it in the PR.

[davidicus]

@davidicus I saw you left a review comment earlier but I couldn't find it in the PR.

I had deleted the comment after I saw you were returning a function. Was supposed to be part of the review.

[davidicus]

There is some weird positioning if you set the padding to the storybook container to push the element all the way to the end of the page and then click the dropdown. The dropdown renders on top of element but still causes more scroll. Once you click on the date picker to choose a date it jumps up to the top of the element.

I would expect this to be rendered on top when initially opened. https://deploy-preview-3608--carbon-addons-iot-react.netlify.app/?path=/story/2-watson-iot-experimental-%E2%98%A2%EF%B8%8F-datetimepickerv2--single-select

When there is an overflow hidden on the container and the DateTimePicker dropdown is not rendered in the portal the dropdown is cut off

[davidicus]

Issue with Card component and the DateTimePicker in this story

This PR	Next

[jessieyan]

https://deploy-preview-3608--carbon-addons-iot-react.netlify.app/?path=/story/2-watson-iot-experimental-%E2%98%A2%EF%B8%8F-datetimepickerv2--single-select

I can see if set the padding-left to 80 rem. Then a horizontal bar showed up. The flyout menu will adjust its position if the horizontal bar moves. If set padding-left to 71 rem, The flyout menu will pop up on top of the input and will not move its position.

[jessieyan]

I can see if set the padding-left to 80 rem. Then a horizontal bar showed up. The flyout menu will adjust its position if the horizontal bar moves. If set padding-left to 71 rem, The flyout menu will pop up on top of the input and will not move its position.

Opened #3620