DirectionProvider
Turns the catalogue right-to-left, and the CSS is the easy half.
@stellaria/nebula-webDirectionProviderPropsPreview
It does two things, and the second is the one that matters.
- It sets
diron a container, which is the obvious part. - It wraps the subtree in React Aria's
I18nProviderwith an RTL locale, which is what actually makes the catalogue work backwards.
Why the attribute alone is not enough
Set dir="rtl" by hand and the CSS flips — the logical properties do their job. React Aria keeps
thinking in LTR: the arrow keys of a listbox move to the wrong side, a Popover with
placement="start" resolves to the left, and keyboard reordering computes the wrong index. Every
directional decision in Aria comes from its locale, not from the attribute.
That is the whole reason this is a component and not a line of CSS.
Props
5| Prop | Type | Default |
|---|---|---|
children requiredThe subtree that inherits the direction. It is wrapped in a `div` carrying `dir`, so this provider adds an element — placing it between a flex or grid container and its items breaks the layout. | ReactNode | — |
defaultDirection Where the direction starts when nothing controls it. Ignored once `direction` is passed. | Direction | "ltr" |
detectFromDocument Reads `dir` off the document element once on mount and adopts it. For an app whose direction is decided server-side on the `html` tag; it only ever reads, and never writes back. | boolean | false |
direction The direction, controlled. Passing it pins the value: `detectFromDocument` and the context's own `setDirection` still fire `onDirectionChange`, but nothing moves until you change this. | Direction | — |
onDirectionChange Fires with the direction being moved to, in both modes. In controlled mode it is the only signal you get, since the provider will not move on its own. | ((direction: Direction) => void) | — |