`react-aria-components/Tooltip`: `state.placement` should receive full `Placement` instead of `PlacementAxis` about react-spectrum HOT 4 OPEN

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.

from react-spectrum.

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;

from react-spectrum.

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

from react-spectrum.

While I try to create a repo, I notice that in the other example you share here:

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.

from react-spectrum.