Skip to content
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
merged 49 commits into from
Sep 6, 2022
Merged
Changes from 1 commit
Commits
Show all changes
49 commits
Select commit Hold shift + click to select a range
867c532
Rename files
ciampo Sep 2, 2022
a911e6a
First iteration of Popover props
ciampo Sep 2, 2022
ddfe57b
Add types to component and default export
ciampo Sep 2, 2022
7f4059b
Type AnimatedWrapper, refactor logic to always render a `motion.div`
ciampo Sep 2, 2022
ed5ace4
Remove unnused props from `ArrowTriangle`
ciampo Sep 2, 2022
e2f18b7
Use intermediate variable for flip/resize fallback values when `__uns…
ciampo Sep 2, 2022
742c830
Type PopoverSlot
ciampo Sep 2, 2022
0fd0d43
Type resize middleware
ciampo Sep 2, 2022
c095b2f
Type onDialogClose & related
ciampo Sep 2, 2022
b984ff7
Type middleware array
ciampo Sep 2, 2022
6263832
Split and export different anchor ref types
ciampo Sep 2, 2022
702f95c
Type ownerDocument ev listeners useEffect
ciampo Sep 2, 2022
d9cde6d
Type internal state and ref callbacks
ciampo Sep 2, 2022
9ff0b8b
Type mergedFloatingRef
ciampo Sep 2, 2022
67afd28
Fix type error in AnimatedWrapper s style
ciampo Sep 2, 2022
eccc7ca
Type arrow styles
ciampo Sep 2, 2022
0c8c527
Simplify position pro definition
ciampo Sep 2, 2022
a7d16d3
Type placement-based utils
ciampo Sep 2, 2022
39eb435
Type getFrameOffset
ciampo Sep 2, 2022
6e46741
Type getReferenceOwnerDocument
ciampo Sep 2, 2022
b2698a0
Make top and bottom props on anchorRef mandatory
ciampo Sep 2, 2022
62555b5
Type getReferenceElement
ciampo Sep 2, 2022
4b9aa59
anchorRef.startContainer is never undefined
ciampo Sep 2, 2022
3d60bf9
No need to optional-chain anchorRef.current.ownerDocument
ciampo Sep 2, 2022
79c0918
Remove TODO
ciampo Sep 2, 2022
7b82718
Fix getFrameOffset signature
ciampo Sep 2, 2022
5feac47
Simplify anchorRef types
ciampo Sep 4, 2022
0d69c6e
Add type descriptions
ciampo Sep 4, 2022
448a8b0
Type `useDialog` hook
ciampo Sep 4, 2022
248522b
Add @deprecated tag for the range prop
ciampo Sep 4, 2022
f885dd3
Type Storybook examples
ciampo Sep 4, 2022
64b218f
refactor BorderControl and BorderBoxControl
ciampo Sep 4, 2022
3102956
Add JSDoc description and example snippet to exported component
ciampo Sep 4, 2022
92c96e5
Add `placement` s default value
ciampo Sep 4, 2022
b571090
README
ciampo Sep 4, 2022
bf068e9
CHANGELOGs
ciampo Sep 5, 2022
969bd60
Refine `position` types
ciampo Sep 5, 2022
dec13b2
Type the `shift` prop, mark `__unstableShift` as deprecated
ciampo Sep 5, 2022
fabedfa
focusOnMount typo
ciampo Sep 6, 2022
031fea4
Fix onFocusOutside README type
ciampo Sep 6, 2022
bf84afb
fix getAnchorRect README type
ciampo Sep 6, 2022
6c24c7b
Fix anchorRef README type
ciampo Sep 6, 2022
8261fdf
Fix children README type
ciampo Sep 6, 2022
e4807e0
Fix isAlternate README type
ciampo Sep 6, 2022
27875f8
Remove unstable props from README, add deprecated range prop
ciampo Sep 6, 2022
5754ee1
Improve focusOnMount types on derived components
ciampo Sep 6, 2022
25d4391
Do not display controls for `children` prop
ciampo Sep 6, 2022
78a25e8
Storybook feedback
ciampo Sep 6, 2022
dac81ea
Restore they way popoverProps was passed in BorderControl
ciampo Sep 6, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Type getReferenceElement
ciampo committed Sep 6, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 62555b52e81a12e1750440b078f1c56aa383dce3
37 changes: 21 additions & 16 deletions packages/components/src/popover/utils.ts
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;
Copy link
Contributor Author

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 of undefined, in order to match @floating-ui's setReference function signature (used in the Popover component)

} ): 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;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Runtime change: using parentElement instead of parentNode, since Nodes don't have the getBoundingClientRect() function and therefore can't be used as the popover's reference (anchor)

}

return referenceElement;
// Convert any `undefined` value to `null`.
return referenceElement ?? null;
};