`react-aria-components/Tooltip`: `state.placement` should receive full `Placement` instead of `PlacementAxis`

[unional]

Provide a general summary of the feature here

Currently the state.placement in className or style callback is a PlacementAxis, which only contains top | bottom | left | right.

When the position of the tooltip needs to adjust, it may also need to flip.

e.g. a button at the top-left corner with a tooltip placement='top end' should flip on both axis to bottom start.

Currently we only get bottom which does not provide enough information to adjust the css accordingly.

🤔 Expected Behavior?

state.placement contain full Placement information.

😯 Current Behavior

state.placement only contains PlacementAxis values.

By the way, do you know in what case state.placement will contain the value center?

💁 Possible Solution

No response

🔦 Context

The solution is not complete.

💻 Examples

No response

🧢 Your Company/Team

Palo Alto Networks

🕷 Tracking Issue

No response

[unional]

Example for all 4 corners:

Note that related to #6505, I have isOpen but it is not rendered in this case because the positions are off screen.

[unional]

One more thing I notice is state.placement can be undefined. This happens when it is first created and also when isOpen changes.

But the type didn't mention that.

export interface TooltipRenderProps {
    /**
     * The placement of the tooltip relative to the trigger.
     * @selector [data-placement="left | right | top | bottom"]
     */
    placement: PlacementAxis;

[snowystinger]

Would you mind providing a reproduction of this to discuss more?

[unional]

While I try to create a repo, I notice that in the other example you share here: https://github.com/adobe/react-spectrum/blob/6e57855257f54738418f98c37efae798bf9fb4ad/packages/react-aria-components/stories/Tooltip.stories.tsx#L116

It is "working" in that example because the offset and the svg are hardcoded:

<Tooltip
  shouldFlip={false}
  offset={7}
  arrowBoundaryOffset={leftTop}
  style={{...}}
  >
  <OverlayArrow>
    <svg style={{...transform: 'rotate(-90deg)'...}} />
  </OverlayArrow>
</Tooltip>

if you try to define a reusable styled component, it wouldn't work:

<Tooltip
  style={(state) => {
    // no `shouldFlip`, and on which axis or both axis
    // `state.placement` no `top start` (as in OP)
    // thus no way to determine `offset` either
  }
  >
  <OverlayArrow>
    <svg style={{ ... no way to determine how to transform ... }}/>
  </OverlayArrow>
</Tooltip>

UPDATE: for children, you can:

<Tooltip>
  {({ placement }) => (
    <OverlayArrow>
      <svg style={{ transform: placement === 'left' ? ... : ... }}/>
    </OverlayArrow>
  )}
</Tooltip>

It works because that transform only needs the 4 directions.