diff --git a/packages/ui/src/components/AnimatedNumber/PopChildRight.tsx b/packages/ui/src/components/AnimatedNumber/PopChildRight.tsx index e8c8b301..7111691c 100644 --- a/packages/ui/src/components/AnimatedNumber/PopChildRight.tsx +++ b/packages/ui/src/components/AnimatedNumber/PopChildRight.tsx @@ -2,25 +2,25 @@ * Copy of Framer Motion's PopChild, except it uses right: x; instead of left: x; */ -import { MotionConfigContext, useIsPresent } from 'framer-motion' -import * as React from 'react' -import { useRef, useInsertionEffect, useId, useContext } from 'react' +import * as React from "react" +import { useId, useInsertionEffect, useRef } from "react" +import { useIsPresent } from "framer-motion" interface Size { - width: number - height: number - top: number - right: number + width: number + height: number + top: number + right: number } interface Props { - children: React.ReactElement + children: React.ReactElement } interface MeasureProps extends Props { - childRef: React.RefObject - isPresent: boolean - sizeRef: React.RefObject + childRef: React.RefObject + isPresent: boolean + sizeRef: React.RefObject } /** @@ -28,65 +28,65 @@ interface MeasureProps extends Props { * to leverage snapshot lifecycle. */ class PopChildMeasure extends React.Component { - override getSnapshotBeforeUpdate(prevProps: MeasureProps) { - const element = this.props.childRef.current - if (element && prevProps.isPresent && !this.props.isPresent) { - const size = this.props.sizeRef.current! - size.height = element.offsetHeight || 0 - size.width = element.offsetWidth || 0 - size.top = element.offsetTop - size.right = - ((element.offsetParent instanceof HTMLElement ? element.offsetParent : null)?.offsetWidth ?? - 0) - - element.offsetWidth - - element.offsetLeft - } + override getSnapshotBeforeUpdate(prevProps: MeasureProps) { + const element = this.props.childRef.current + if (element && prevProps.isPresent && !this.props.isPresent) { + const size = this.props.sizeRef.current! + size.height = element.offsetHeight || 0 + size.width = element.offsetWidth || 0 + size.top = element.offsetTop + size.right = + ((element.offsetParent instanceof HTMLElement + ? element.offsetParent + : null + )?.offsetWidth ?? 0) - + element.offsetWidth - + element.offsetLeft + } - return null - } + return null + } - /** - * Required with getSnapshotBeforeUpdate to stop React complaining. - */ - override componentDidUpdate() {} + /** + * Required with getSnapshotBeforeUpdate to stop React complaining. + */ + override componentDidUpdate() {} - override render() { - return this.props.children - } + override render() { + return this.props.children + } } export default function PopChildRight({ children }: Props) { - const isPresent = useIsPresent() - const id = useId() - const ref = useRef(null) - const size = useRef({ - width: 0, - height: 0, - top: 0, - right: 0 - }) - const { nonce } = useContext(MotionConfigContext) + const isPresent = useIsPresent() + const id = useId() + const ref = useRef(null) + const size = useRef({ + width: 0, + height: 0, + top: 0, + right: 0, + }) - /** - * We create and inject a style block so we can apply this explicit - * sizing in a non-destructive manner by just deleting the style block. - * - * We can't apply size via render as the measurement happens - * in getSnapshotBeforeUpdate (post-render), likewise if we apply the - * styles directly on the DOM node, we might be overwriting - * styles set via the style prop. - */ - useInsertionEffect(() => { - const { width, height, top, right } = size.current - if (isPresent || !ref.current || !width || !height) return + /** + * We create and inject a style block so we can apply this explicit + * sizing in a non-destructive manner by just deleting the style block. + * + * We can't apply size via render as the measurement happens + * in getSnapshotBeforeUpdate (post-render), likewise if we apply the + * styles directly on the DOM node, we might be overwriting + * styles set via the style prop. + */ + useInsertionEffect(() => { + const { width, height, top, right } = size.current + if (isPresent || !ref.current || !width || !height) return - ref.current.dataset.motionNumberPopId = id + ref.current.dataset.motionNumberPopId = id - const style = document.createElement('style') - if (nonce) style.nonce = nonce - document.head.appendChild(style) - if (style.sheet) { - style.sheet.insertRule(` + const style = document.createElement("style") + document.head.appendChild(style) + if (style.sheet) { + style.sheet.insertRule(` [data-motion-number-pop-id="${id}"] { position: absolute !important; width: ${width}px !important; @@ -95,16 +95,16 @@ export default function PopChildRight({ children }: Props) { right: ${right}px !important; } `) - } + } - return () => { - document.head.removeChild(style) - } - }, [isPresent]) + return () => { + document.head.removeChild(style) + } + }, [isPresent]) - return ( - - {React.cloneElement(children, { ref })} - - ) + return ( + + {React.cloneElement(children, { ref })} + + ) }