feat(selection): introduce selection related hooks and containers

[ryanseddon]

Description

This adds a hook and render-prop container for selection. useSelection and <SelectionContainer>.

Detail

This borrows heavily from @Austin94 exploratory work on a roving tab index hook as opposed to our previous strategy in SelectionContainer of using the aria-activedescendant to control a virtual focus this now just shifts actual browser focus which AFAICT is fine to use either or.

Checklist

• 🌐 Storybook demo is up-to-date (yarn storybook)
• 💂‍♂️ includes new unit tests
• 📝 tested in Chrome, Firefox, Safari, Edge, and IE11

[austingreendev]

This is a great start! Some additional questions:

• How does this work with RTL? I'm assuming we haven't explicitly solved that yet, but we could provide a simple component that uses the useContext hook rather than relying on the styled-components method in react-components.

[austingreendev]

Also, assuming this is just a side-effect of it being WIP, but the focus entrance/exit seems to not align with the selected value.

[ryanseddon]

Thanks for the early feedback @Austin94

How does this work with RTL?

Haven't got to that yet still trying to put the basics in place first.

Also, assuming this is just a side-effect of it being WIP, but the focus entrance/exit seems to not align with the selected value.

Yeah same answer as above

[ryanseddon]

Also, assuming this is just a side-effect of it being WIP, but the focus entrance/exit seems to not align with the selected value.

@Austin94 this is address in 6edbf9c

[ryanseddon]

@Austin94 re: dd12c5f

Reason for removing Locale component is a don't think we should offer it here for two reasons:

• In react-components ThemeProvider will pass down rtl for us and we can just pass along isRtl(props) to the hook
• Outside consumers building upon these hooks will probably have their own context provider to switch RTL

I think this makes rtl less magic and more obvious to people building with this.

[austingreendev]

It think this makes rtl less magic and more obvious to people building with this.

The less magic the better! 🎉

If someone really wanted it they could wrap it with a custom useLocaleAwareSelection hook if they wanted anyway. This all LGTM

[jzempel]

@ryanseddon if not intended for this PR, I'd like to see an issue added for breaking out container-utilities. https://github.com/zendeskgarden/react-containers/pull/9/files#diff-f0f75652389df2f7b7d2744cb63a38aeR14