Popper-core: RTL support?

[skitterm]

Does Popper.js have RTL support for placement and offset? I.e. if a popper was set with placement="bottom-start", so it's placed like this:

+--------+
| target |
+-------------+
|             |
|   popper    |
|             |
+-------------+

Would the same popper automatically look like this if displayed on an RTL page?

     +--------+
     | target |
+-------------+
|             |
|   popper    |
|             |
+-------------+

[FezVrasta]

Not out of the box, but it is extremely trivial to write a custom modifier to achieve that.

[FezVrasta]

I think this should work

{
  order: 0,
  enable: true,
  fn: data => {
    const hash = { end: 'start', start: 'end' };
    data.placement = placement.replace(/start|end/g, matched => hash[matched]);
    return data;
  }
}

[skitterm]

Thanks @FezVrasta for the quick help. It would also be awesome if RTL support made it into Popper.js natively. Where support for RTL languages is becoming more important, it'd add another feather in your library's cap to have that 😃

[FezVrasta]

We may add it into V2, but V1 at the moment is so heavy that any additional feature is out of question 🙁

[codylawson]

@FezVrasta Is there any reason your snippet wouldn't work for swapping "left" and "right" placement?

rtl: {
  order: 0,
  enabled: true,
  fn: data => {
    if (this.props.rtl) {
      const hash = {
        end: 'start',
        start: 'end',
        left: 'right',
        right: 'left'
      };
      data.placement = data.placement.replace(
        /start|end|right|left/g,
        matched => hash[matched]
      );
    }
    return data;
  }
}

Resulting UI when placement is set to "right" but modifier sets to "left" for RTL:

It appears the data-placement attribute is being set to the correct value so the arrow displays as expected, but the translate3d isn't accounting for the updated placement and is still shown on the original side of the reference.

It's interesting to note that setting placement to "*-end" is properly changed to "*-start" and the popper is displayed as expected.
UI when placement is set to "bottom-end" and modifier changing it to "bottom-start":