@ably/ui 17.13.0-dev.5fce2b67 → 17.13.0-dev.d6a24f68
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useState,useEffect,useRef}from"react";export function useContentHeight(ref,initialHeight=0){const[contentHeight,setContentHeight]=useState(initialHeight);const observerRef=useRef(null);useEffect(()=>{const element=ref.current;if(!element){return}observerRef.current=new ResizeObserver(entries=>{requestAnimationFrame(()=>{const entry=entries[0];if(entry&&entry.contentRect){const newHeight=Math.round(entry.contentRect.height);setContentHeight(newHeight)}})});observerRef.current.observe(element);return()=>{observerRef.current?.disconnect();observerRef.current=null}},[ref]);return contentHeight}
|
|
1
|
+
import{useState,useEffect,useRef}from"react";export function useContentHeight(ref,initialHeight=0){const[contentHeight,setContentHeight]=useState(initialHeight);const observerRef=useRef(null);const rafIdRef=useRef(null);useEffect(()=>{const element=ref.current;if(!element){return}let isMounted=true;observerRef.current=new ResizeObserver(entries=>{if(rafIdRef.current!==null){cancelAnimationFrame(rafIdRef.current)}rafIdRef.current=requestAnimationFrame(()=>{rafIdRef.current=null;if(!isMounted)return;const entry=entries[0];if(entry&&entry.contentRect){const newHeight=Math.round(entry.contentRect.height);setContentHeight(newHeight)}})});observerRef.current.observe(element);return()=>{isMounted=false;if(rafIdRef.current!==null){cancelAnimationFrame(rafIdRef.current);rafIdRef.current=null}observerRef.current?.disconnect();observerRef.current=null}},[ref]);return contentHeight}
|
|
2
2
|
//# sourceMappingURL=use-content-height.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/hooks/use-content-height.ts"],"sourcesContent":["import { useState, useEffect, useRef, RefObject } from \"react\";\n\n/**\n * Custom hook that tracks the content height of an element using ResizeObserver.\n * This eliminates forced reflows by using the browser's native resize observation API\n * instead of synchronous clientHeight/getBoundingClientRect queries.\n *\n * @param ref - React ref to the element to observe\n * @param initialHeight - Initial height value (default: 0)\n * @returns Current content height in pixels\n */\nexport function useContentHeight(\n ref: RefObject<HTMLElement>,\n initialHeight = 0,\n): number {\n const [contentHeight, setContentHeight] = useState<number>(initialHeight);\n const observerRef = useRef<ResizeObserver | null>(null);\n\n useEffect(() => {\n const element = ref.current;\n\n if (!element) {\n return;\n }\n\n observerRef.current = new ResizeObserver((entries) => {\n requestAnimationFrame(() => {\n const entry = entries[0];\n if (entry && entry.contentRect) {\n const newHeight = Math.round(entry.contentRect.height);\n setContentHeight(newHeight);\n }\n });\n });\n\n observerRef.current.observe(element);\n\n return () => {\n observerRef.current?.disconnect();\n observerRef.current = null;\n };\n }, [ref]);\n\n return contentHeight;\n}\n"],"names":["useState","useEffect","useRef","useContentHeight","ref","initialHeight","contentHeight","setContentHeight","observerRef","element","current","ResizeObserver","entries","requestAnimationFrame","entry","contentRect","newHeight","Math","round","height","observe","disconnect"],"mappings":"AAAA,OAASA,QAAQ,CAAEC,SAAS,CAAEC,MAAM,KAAmB,OAAQ,AAW/D,QAAO,SAASC,iBACdC,GAA2B,CAC3BC,cAAgB,CAAC,EAEjB,KAAM,CAACC,cAAeC,iBAAiB,CAAGP,SAAiBK,eAC3D,MAAMG,YAAcN,OAA8B,
|
|
1
|
+
{"version":3,"sources":["../../../src/core/hooks/use-content-height.ts"],"sourcesContent":["import { useState, useEffect, useRef, RefObject } from \"react\";\n\n/**\n * Custom hook that tracks the content height of an element using ResizeObserver.\n * This eliminates forced reflows by using the browser's native resize observation API\n * instead of synchronous clientHeight/getBoundingClientRect queries.\n *\n * @param ref - React ref to the element to observe\n * @param initialHeight - Initial height value (default: 0)\n * @returns Current content height in pixels\n */\nexport function useContentHeight(\n ref: RefObject<HTMLElement>,\n initialHeight = 0,\n): number {\n const [contentHeight, setContentHeight] = useState<number>(initialHeight);\n const observerRef = useRef<ResizeObserver | null>(null);\n const rafIdRef = useRef<number | null>(null);\n\n useEffect(() => {\n const element = ref.current;\n\n if (!element) {\n return;\n }\n\n let isMounted = true;\n\n observerRef.current = new ResizeObserver((entries) => {\n // Cancel any pending RAF to avoid stale updates\n if (rafIdRef.current !== null) {\n cancelAnimationFrame(rafIdRef.current);\n }\n\n rafIdRef.current = requestAnimationFrame(() => {\n rafIdRef.current = null;\n // Guard against updates after unmount\n if (!isMounted) return;\n\n const entry = entries[0];\n if (entry && entry.contentRect) {\n const newHeight = Math.round(entry.contentRect.height);\n setContentHeight(newHeight);\n }\n });\n });\n\n observerRef.current.observe(element);\n\n return () => {\n isMounted = false;\n // Cancel pending RAF to prevent setState after unmount\n if (rafIdRef.current !== null) {\n cancelAnimationFrame(rafIdRef.current);\n rafIdRef.current = null;\n }\n observerRef.current?.disconnect();\n observerRef.current = null;\n };\n }, [ref]);\n\n return contentHeight;\n}\n"],"names":["useState","useEffect","useRef","useContentHeight","ref","initialHeight","contentHeight","setContentHeight","observerRef","rafIdRef","element","current","isMounted","ResizeObserver","entries","cancelAnimationFrame","requestAnimationFrame","entry","contentRect","newHeight","Math","round","height","observe","disconnect"],"mappings":"AAAA,OAASA,QAAQ,CAAEC,SAAS,CAAEC,MAAM,KAAmB,OAAQ,AAW/D,QAAO,SAASC,iBACdC,GAA2B,CAC3BC,cAAgB,CAAC,EAEjB,KAAM,CAACC,cAAeC,iBAAiB,CAAGP,SAAiBK,eAC3D,MAAMG,YAAcN,OAA8B,MAClD,MAAMO,SAAWP,OAAsB,MAEvCD,UAAU,KACR,MAAMS,QAAUN,IAAIO,OAAO,CAE3B,GAAI,CAACD,QAAS,CACZ,MACF,CAEA,IAAIE,UAAY,IAEhBJ,CAAAA,YAAYG,OAAO,CAAG,IAAIE,eAAe,AAACC,UAExC,GAAIL,SAASE,OAAO,GAAK,KAAM,CAC7BI,qBAAqBN,SAASE,OAAO,CACvC,CAEAF,SAASE,OAAO,CAAGK,sBAAsB,KACvCP,SAASE,OAAO,CAAG,KAEnB,GAAI,CAACC,UAAW,OAEhB,MAAMK,MAAQH,OAAO,CAAC,EAAE,CACxB,GAAIG,OAASA,MAAMC,WAAW,CAAE,CAC9B,MAAMC,UAAYC,KAAKC,KAAK,CAACJ,MAAMC,WAAW,CAACI,MAAM,EACrDf,iBAAiBY,UACnB,CACF,EACF,GAEAX,YAAYG,OAAO,CAACY,OAAO,CAACb,SAE5B,MAAO,KACLE,UAAY,MAEZ,GAAIH,SAASE,OAAO,GAAK,KAAM,CAC7BI,qBAAqBN,SAASE,OAAO,CACrCF,CAAAA,SAASE,OAAO,CAAG,IACrB,CACAH,YAAYG,OAAO,EAAEa,YACrBhB,CAAAA,YAAYG,OAAO,CAAG,IACxB,CACF,EAAG,CAACP,IAAI,EAER,OAAOE,aACT"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "17.13.0-dev.
|
|
3
|
+
"version": "17.13.0-dev.d6a24f68",
|
|
4
4
|
"description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|