[useAnchorPositioning] Add OffsetFunction for sideOffset and alignOffset
#1223
Conversation
atomiks
added
component: select
Netlify deploy preview |
| // Keep these reactive if they're not functions | ||
| const sideOffsetDep = typeof sideOffset !== 'function' ? sideOffset : 0; | ||
| const alignOffsetDep = typeof alignOffset !== 'function' ? alignOffset : 0; | ||
|
|
There was a problem hiding this comment.
Positioning reactivity is lost when they specify a function. We can't tell if they're going to React.useCallback or not - usually the function gets inlined like:
<Popover.Positioner sideOffset={(sizes) => sizes.anchor.height / 2}>So it can't be specified as a dependency as it's always changing. This means if they update the math inside the function, the position won't update live on fast refresh (but it will whenever the anchoring updates at some point)
There was a problem hiding this comment.
If this ever becomes a problem, the sideOffset's argument can include an update callback function that will force updating the layout.
| "type": "number | (data) => number", | ||
| "default": "0", | ||
| "description": "Distance between the anchor and the popup." | ||
| "description": "Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns a number to read the dimensions of the anchor and popup,\nalong with its side and alignment.\n\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.popup`: the dimensions of the popup element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the popup is aligned against.\n- `data.align`: how the popup is aligned relative to the specified side." |
| side: getLogicalSide(sideParam, getSide(currentPlacement), isRtl), | ||
| align: getAlignment(currentPlacement) || 'center', | ||
| anchor: { width: rects.reference.width, height: rects.reference.height }, | ||
| popup: { width: rects.floating.width, height: rects.floating.height }, |
There was a problem hiding this comment.
Technically this is the Positioner element, not Popup, but in practically every case they should be the same since it's a presentational wrapper
github-actions
bot
added
the
PR: out-of-date
atomiks
force-pushed
the
feat/offset-functions
branch
from
5270eaa to
a7c255d
Compare
github-actions
bot
removed
the
PR: out-of-date
|
Is it possible to place a popup outside of the trigger's bounds? <Popover.Positioner
sideOffset={5}
alignOffset={(sizes) => sizes.anchor.width + 5}
align="start"
> |
github-actions
bot
added
the
PR: out-of-date
|
@michaldudak the |
|
OK, it's fine. We could write a few words about it in the docs, so it's not surprising. I miss having a dedicated section per prop/group of props |
Closes #1195