[zero-runtime] Add RTL support

[mnajdova]

Summary

We need to have a way to provide rtl for the zero-runtime. We have to support rtl for partial parts of the app, so we can't depend on it living only in the theme config.

Proposed API

In the emotion based styling solution the RTL is supported trough the ThemeProvider, as a key in the theme (theme.direction). Considering that in the zero-runtime we won’t have ThemeProvider, but only a component that will inject CSS vars, this means that we will need a separate provider specific to rtl.

<RtlProvider>
  {children}
</RtlProvider>

The components that need to support rtl, will read this context, e.g. Drawer, LinearProgress, Menu, MenuList, PaginationItem, Rating, Slider, TablePaginationActions, Tabs, TabsScrollButton, Tooltip.

The rtl value can be propagated as part of the ownerState in the styled call.

Search keywords: rtl, zero-runtime

[brijeshb42]

Context usage makes most sense to me given at some point, server context is also available.

[mnajdova]

I'll work on a POC to see how we can do this.

[oliviertassinari]

Considering that in the zero-runtime we won’t have ThemeProvider

How are we supposed to do default component prop changes? https://mui.com/material-ui/customization/theme-components/#theme-default-props

server context is also available

In theory from emotion-js/emotion#2978 (comment), but never used this in prod.

[brijeshb42]

defaultProps provided in the theme object will be copied over to the output bundle statically (only the serializable stuff for the most part). See this.

[oliviertassinari]

Considering that in the zero-runtime we won’t have ThemeProvider

What about this as well? https://mui.com/material-ui/react-use-media-query/#using-material-uis-breakpoint-helpers. It doesn't seem that static extraction should mean that we drop theme nesting support or the theme provider. Issue opened mui/pigment-css#129.

Just from a migration perspective, this would make it easier.

[oliviertassinari]

A possible selector we can rely on :dir(rtl) { https://developer.mozilla.org/en-US/docs/Web/CSS/:dir: but browser support doesn't look good enough: https://caniuse.com/?search=dir.