-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Popover: refactor to TypeScript #43823
Merged
+582
−311
Merged
Changes from 1 commit
Commits
Show all changes
49 commits
Select commit
Hold shift + click to select a range
867c532
Rename files
ciampo a911e6a
First iteration of Popover props
ciampo ddfe57b
Add types to component and default export
ciampo 7f4059b
Type AnimatedWrapper, refactor logic to always render a `motion.div`
ciampo ed5ace4
Remove unnused props from `ArrowTriangle`
ciampo e2f18b7
Use intermediate variable for flip/resize fallback values when `__uns…
ciampo 742c830
Type PopoverSlot
ciampo 0fd0d43
Type resize middleware
ciampo c095b2f
Type onDialogClose & related
ciampo b984ff7
Type middleware array
ciampo 6263832
Split and export different anchor ref types
ciampo 702f95c
Type ownerDocument ev listeners useEffect
ciampo d9cde6d
Type internal state and ref callbacks
ciampo 9ff0b8b
Type mergedFloatingRef
ciampo 67afd28
Fix type error in AnimatedWrapper s style
ciampo eccc7ca
Type arrow styles
ciampo 0c8c527
Simplify position pro definition
ciampo a7d16d3
Type placement-based utils
ciampo 39eb435
Type getFrameOffset
ciampo 6e46741
Type getReferenceOwnerDocument
ciampo b2698a0
Make top and bottom props on anchorRef mandatory
ciampo 62555b5
Type getReferenceElement
ciampo 4b9aa59
anchorRef.startContainer is never undefined
ciampo 3d60bf9
No need to optional-chain anchorRef.current.ownerDocument
ciampo 79c0918
Remove TODO
ciampo 7b82718
Fix getFrameOffset signature
ciampo 5feac47
Simplify anchorRef types
ciampo 0d69c6e
Add type descriptions
ciampo 448a8b0
Type `useDialog` hook
ciampo 248522b
Add @deprecated tag for the range prop
ciampo f885dd3
Type Storybook examples
ciampo 64b218f
refactor BorderControl and BorderBoxControl
ciampo 3102956
Add JSDoc description and example snippet to exported component
ciampo 92c96e5
Add `placement` s default value
ciampo b571090
README
ciampo bf068e9
CHANGELOGs
ciampo 969bd60
Refine `position` types
ciampo dec13b2
Type the `shift` prop, mark `__unstableShift` as deprecated
ciampo fabedfa
focusOnMount typo
ciampo 031fea4
Fix onFocusOutside README type
ciampo bf84afb
fix getAnchorRect README type
ciampo 6c24c7b
Fix anchorRef README type
ciampo 8261fdf
Fix children README type
ciampo e4807e0
Fix isAlternate README type
ciampo 27875f8
Remove unstable props from README, add deprecated range prop
ciampo 5754ee1
Improve focusOnMount types on derived components
ciampo 25d4391
Do not display controls for `children` prop
ciampo 78a25e8
Storybook feedback
ciampo dac81ea
Restore they way popoverProps was passed in BorderControl
ciampo File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Type getReferenceElement
- Loading branch information
commit 62555b52e81a12e1750440b078f1c56aa383dce3
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,6 +3,7 @@ | |
*/ | ||
// eslint-disable-next-line no-restricted-imports | ||
import type { MotionProps } from 'framer-motion'; | ||
import type { ReferenceType } from '@floating-ui/react-dom'; | ||
|
||
/** | ||
* Internal dependencies | ||
|
@@ -165,27 +166,28 @@ export const getReferenceOwnerDocument = ( { | |
}; | ||
|
||
export const getReferenceElement = ( { | ||
// @ts-ignore | ||
anchorRef, | ||
// @ts-ignore | ||
anchorRect, | ||
// @ts-ignore | ||
getAnchorRect, | ||
// @ts-ignore | ||
fallbackReferenceElement, | ||
} ) => { | ||
/** @type {import('@floating-ui/react-dom').ReferenceType | undefined} */ | ||
let referenceElement; | ||
}: Pick< PopoverProps, 'anchorRef' | 'anchorRect' | 'getAnchorRect' > & { | ||
fallbackReferenceElement: Element | null; | ||
} ): ReferenceType | null => { | ||
let referenceElement = null; | ||
|
||
if ( anchorRef?.top ) { | ||
if ( ( anchorRef as PopoverAnchorRefTopBottom | undefined )?.top ) { | ||
// Create a virtual element for the ref. The expectation is that | ||
// if anchorRef.top is defined, then anchorRef.bottom is defined too. | ||
// Seems to be used by the block toolbar, when multiple blocks are selected | ||
// (top and bottom blocks are used to calculate the resulting rect). | ||
referenceElement = { | ||
getBoundingClientRect() { | ||
const topRect = anchorRef.top.getBoundingClientRect(); | ||
const bottomRect = anchorRef.bottom.getBoundingClientRect(); | ||
const topRect = ( | ||
anchorRef as PopoverAnchorRefTopBottom | ||
).top.getBoundingClientRect(); | ||
const bottomRect = ( | ||
anchorRef as PopoverAnchorRefTopBottom | ||
).bottom.getBoundingClientRect(); | ||
return new window.DOMRect( | ||
topRect.x, | ||
topRect.y, | ||
|
@@ -194,13 +196,15 @@ export const getReferenceElement = ( { | |
); | ||
}, | ||
}; | ||
} else if ( anchorRef?.current ) { | ||
} else if ( | ||
( anchorRef as PopoverAnchorRefReference | undefined )?.current | ||
) { | ||
// Standard React ref. | ||
referenceElement = anchorRef.current; | ||
} else if ( anchorRef ) { | ||
referenceElement = ( anchorRef as PopoverAnchorRefReference ).current; | ||
} else if ( anchorRef as PopoverAnchorRefElement | undefined ) { | ||
// If `anchorRef` holds directly the element's value (no `current` key) | ||
// This is a weird scenario and should be deprecated. | ||
referenceElement = anchorRef; | ||
referenceElement = anchorRef as PopoverAnchorRefElement; | ||
} else if ( anchorRect ) { | ||
// Create a virtual element for the ref. | ||
referenceElement = { | ||
|
@@ -224,8 +228,9 @@ export const getReferenceElement = ( { | |
} else if ( fallbackReferenceElement ) { | ||
// If no explicit ref is passed via props, fall back to | ||
// anchoring to the popover's parent node. | ||
referenceElement = fallbackReferenceElement.parentNode; | ||
referenceElement = fallbackReferenceElement.parentElement; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Runtime change: using |
||
} | ||
|
||
return referenceElement; | ||
// Convert any `undefined` value to `null`. | ||
return referenceElement ?? null; | ||
}; |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Runtime change: function return type changed to
null
instead ofundefined
, in order to match@floating-ui
'ssetReference
function signature (used in thePopover
component)