framer-motion 12.24.4 → 12.24.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -46,7 +46,13 @@ function PopChild({ children, isPresent, anchorX, root }) {
|
|
|
46
46
|
right: 0,
|
|
47
47
|
});
|
|
48
48
|
const { nonce } = useContext(MotionConfigContext);
|
|
49
|
-
|
|
49
|
+
/**
|
|
50
|
+
* In React 19, refs are passed via props.ref instead of element.ref.
|
|
51
|
+
* We check props.ref first (React 19) and fall back to element.ref (React 18).
|
|
52
|
+
*/
|
|
53
|
+
const childRef = children.props?.ref ??
|
|
54
|
+
children?.ref;
|
|
55
|
+
const composedRef = useComposedRefs(ref, childRef);
|
|
50
56
|
/**
|
|
51
57
|
* We create and inject a style block so we can apply this explicit
|
|
52
58
|
* sizing in a non-destructive manner by just deleting the style block.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopChild.mjs","sources":["../../../../src/components/AnimatePresence/PopChild.tsx"],"sourcesContent":["\"use client\"\n\nimport { isHTMLElement } from \"motion-dom\"\nimport * as React from \"react\"\nimport { useContext, useId, useInsertionEffect, useRef } from \"react\"\n\nimport { MotionConfigContext } from \"../../context/MotionConfigContext\"\nimport { useComposedRefs } from \"../../utils/use-composed-ref\"\n\ninterface Size {\n width: number\n height: number\n top: number\n left: number\n right: number\n}\n\ninterface Props {\n children: React.ReactElement\n isPresent: boolean\n anchorX?: \"left\" | \"right\"\n root?: HTMLElement | ShadowRoot\n}\n\ninterface MeasureProps extends Props {\n childRef: React.RefObject<HTMLElement | null>\n sizeRef: React.RefObject<Size>\n}\n\n/**\n * Measurement functionality has to be within a separate component\n * to leverage snapshot lifecycle.\n */\nclass PopChildMeasure extends React.Component<MeasureProps> {\n getSnapshotBeforeUpdate(prevProps: MeasureProps) {\n const element = this.props.childRef.current\n if (element && prevProps.isPresent && !this.props.isPresent) {\n const parent = element.offsetParent\n const parentWidth = isHTMLElement(parent)\n ? parent.offsetWidth || 0\n : 0\n\n const size = this.props.sizeRef.current!\n size.height = element.offsetHeight || 0\n size.width = element.offsetWidth || 0\n size.top = element.offsetTop\n size.left = element.offsetLeft\n size.right = parentWidth - size.width - size.left\n }\n\n return null\n }\n\n /**\n * Required with getSnapshotBeforeUpdate to stop React complaining.\n */\n componentDidUpdate() {}\n\n render() {\n return this.props.children\n }\n}\n\nexport function PopChild({ children, isPresent, anchorX, root }: Props) {\n const id = useId()\n const ref = useRef<HTMLElement>(null)\n const size = useRef<Size>({\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n right: 0,\n })\n const { nonce } = useContext(MotionConfigContext)\n
|
|
1
|
+
{"version":3,"file":"PopChild.mjs","sources":["../../../../src/components/AnimatePresence/PopChild.tsx"],"sourcesContent":["\"use client\"\n\nimport { isHTMLElement } from \"motion-dom\"\nimport * as React from \"react\"\nimport { useContext, useId, useInsertionEffect, useRef } from \"react\"\n\nimport { MotionConfigContext } from \"../../context/MotionConfigContext\"\nimport { useComposedRefs } from \"../../utils/use-composed-ref\"\n\ninterface Size {\n width: number\n height: number\n top: number\n left: number\n right: number\n}\n\ninterface Props {\n children: React.ReactElement\n isPresent: boolean\n anchorX?: \"left\" | \"right\"\n root?: HTMLElement | ShadowRoot\n}\n\ninterface MeasureProps extends Props {\n childRef: React.RefObject<HTMLElement | null>\n sizeRef: React.RefObject<Size>\n}\n\n/**\n * Measurement functionality has to be within a separate component\n * to leverage snapshot lifecycle.\n */\nclass PopChildMeasure extends React.Component<MeasureProps> {\n getSnapshotBeforeUpdate(prevProps: MeasureProps) {\n const element = this.props.childRef.current\n if (element && prevProps.isPresent && !this.props.isPresent) {\n const parent = element.offsetParent\n const parentWidth = isHTMLElement(parent)\n ? parent.offsetWidth || 0\n : 0\n\n const size = this.props.sizeRef.current!\n size.height = element.offsetHeight || 0\n size.width = element.offsetWidth || 0\n size.top = element.offsetTop\n size.left = element.offsetLeft\n size.right = parentWidth - size.width - size.left\n }\n\n return null\n }\n\n /**\n * Required with getSnapshotBeforeUpdate to stop React complaining.\n */\n componentDidUpdate() {}\n\n render() {\n return this.props.children\n }\n}\n\nexport function PopChild({ children, isPresent, anchorX, root }: Props) {\n const id = useId()\n const ref = useRef<HTMLElement>(null)\n const size = useRef<Size>({\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n right: 0,\n })\n const { nonce } = useContext(MotionConfigContext)\n /**\n * In React 19, refs are passed via props.ref instead of element.ref.\n * We check props.ref first (React 19) and fall back to element.ref (React 18).\n */\n const childRef =\n (children.props as { ref?: React.Ref<HTMLElement> })?.ref ??\n (children as unknown as { ref?: React.Ref<HTMLElement> })?.ref\n const composedRef = useComposedRefs(ref, childRef)\n\n /**\n * We create and inject a style block so we can apply this explicit\n * sizing in a non-destructive manner by just deleting the style block.\n *\n * We can't apply size via render as the measurement happens\n * in getSnapshotBeforeUpdate (post-render), likewise if we apply the\n * styles directly on the DOM node, we might be overwriting\n * styles set via the style prop.\n */\n useInsertionEffect(() => {\n const { width, height, top, left, right } = size.current\n if (isPresent || !ref.current || !width || !height) return\n\n const x = anchorX === \"left\" ? `left: ${left}` : `right: ${right}`\n\n ref.current.dataset.motionPopId = id\n\n const style = document.createElement(\"style\")\n if (nonce) style.nonce = nonce\n\n const parent = root ?? document.head\n parent.appendChild(style)\n\n if (style.sheet) {\n style.sheet.insertRule(`\n [data-motion-pop-id=\"${id}\"] {\n position: absolute !important;\n width: ${width}px !important;\n height: ${height}px !important;\n ${x}px !important;\n top: ${top}px !important;\n }\n `)\n }\n\n return () => {\n if (parent.contains(style)) {\n parent.removeChild(style)\n }\n }\n }, [isPresent])\n\n return (\n <PopChildMeasure isPresent={isPresent} childRef={ref} sizeRef={size}>\n {React.cloneElement(children as any, { ref: composedRef })}\n </PopChildMeasure>\n )\n}\n"],"names":[],"mappings":";;;;;;;;AA6BA;;;AAGG;AACH;AACI;;AAEI;AACI;AACA;AACI;;;;;AAMJ;AACA;AACA;;AAGJ;;AAGJ;;AAEG;AACH;;AAGI;;AAEP;AAEK;AACF;AACA;;AAEI;AACA;AACA;AACA;AACA;AACH;;AAED;;;AAGG;AACH;;;AAKA;;;;;;;;AAQG;;AAEC;;;AAGA;;;AAKA;AAAW;AAEX;AACA;AAEA;AACI;;;;;;;;AAQH;;AAGD;AACI;AACI;;AAER;AACJ;AAEA;AAKJ;;"}
|
|
@@ -5198,7 +5198,13 @@
|
|
|
5198
5198
|
right: 0,
|
|
5199
5199
|
});
|
|
5200
5200
|
const { nonce } = React$1.useContext(MotionConfigContext);
|
|
5201
|
-
|
|
5201
|
+
/**
|
|
5202
|
+
* In React 19, refs are passed via props.ref instead of element.ref.
|
|
5203
|
+
* We check props.ref first (React 19) and fall back to element.ref (React 18).
|
|
5204
|
+
*/
|
|
5205
|
+
const childRef = children.props?.ref ??
|
|
5206
|
+
children?.ref;
|
|
5207
|
+
const composedRef = useComposedRefs(ref, childRef);
|
|
5202
5208
|
/**
|
|
5203
5209
|
* We create and inject a style block so we can apply this explicit
|
|
5204
5210
|
* sizing in a non-destructive manner by just deleting the style block.
|