@mantine/hooks/cjs/use-resize-observer/use-resize-observer.cjs.map

A collection of 50+ hooks for state and UI management

{"version":3,"file":"use-resize-observer.cjs","names":[],"sources":["../../src/use-resize-observer/use-resize-observer.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nexport type ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;\n\nconst defaultState: ObserverRect = {\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n  top: 0,\n  left: 0,\n  bottom: 0,\n  right: 0,\n};\n\nexport type UseResizeObserverReturnValue<T extends HTMLElement = any> = [\n  React.RefCallback<T | null>,\n  ObserverRect,\n];\n\nexport function useResizeObserver<T extends HTMLElement = any>(\n  options?: ResizeObserverOptions\n): UseResizeObserverReturnValue<T> {\n  const frameID = useRef(0);\n  const [rect, setRect] = useState<ObserverRect>(defaultState);\n  const observerRef = useRef<ResizeObserver | null>(null);\n\n  const refCallback: React.RefCallback<T | null> = useCallback(\n    (node) => {\n      if (observerRef.current) {\n        observerRef.current.disconnect();\n        observerRef.current = null;\n      }\n\n      if (frameID.current) {\n        cancelAnimationFrame(frameID.current);\n      }\n\n      if (!node) {\n        return;\n      }\n\n      observerRef.current = new ResizeObserver((entries) => {\n        const entry = entries[0];\n        if (entry) {\n          cancelAnimationFrame(frameID.current);\n          frameID.current = requestAnimationFrame(() => {\n            const boxSize = entry.borderBoxSize?.[0] || entry.contentBoxSize?.[0];\n            if (boxSize) {\n              const width = boxSize.inlineSize;\n              const height = boxSize.blockSize;\n              setRect({\n                width,\n                height,\n                x: entry.contentRect.x,\n                y: entry.contentRect.y,\n                top: entry.contentRect.top,\n                left: entry.contentRect.left,\n                bottom: entry.contentRect.bottom,\n                right: entry.contentRect.right,\n              });\n            } else {\n              setRect(entry.contentRect);\n            }\n          });\n        }\n      });\n      observerRef.current.observe(node, options);\n    },\n    [options]\n  );\n\n  return [refCallback, rect] as const;\n}\n\nexport interface UseElementSizeReturnValue<T extends HTMLElement = any> {\n  ref: React.RefCallback<T | null>;\n  width: number;\n  height: number;\n}\n\nexport function useElementSize<T extends HTMLElement = any>(\n  options?: ResizeObserverOptions\n): { ref: React.RefCallback<T | null>; width: number; height: number } {\n  const [ref, { width, height }] = useResizeObserver<T>(options);\n  return { ref, width, height };\n}\n\nexport namespace useResizeObserver {\n  export type ReturnValue<T extends HTMLElement> = UseResizeObserverReturnValue<T>;\n}\n\nexport namespace useElementSize {\n  export type ReturnValue<T extends HTMLElement> = UseElementSizeReturnValue<T>;\n}\n"],"mappings":";;;AAIA,MAAM,eAA6B;CACjC,GAAG;CACH,GAAG;CACH,OAAO;CACP,QAAQ;CACR,KAAK;CACL,MAAM;CACN,QAAQ;CACR,OAAO;CACR;AAOD,SAAgB,kBACd,SACiC;CACjC,MAAM,WAAA,GAAA,MAAA,QAAiB,EAAE;CACzB,MAAM,CAAC,MAAM,YAAA,GAAA,MAAA,UAAkC,aAAa;CAC5D,MAAM,eAAA,GAAA,MAAA,QAA4C,KAAK;AA+CvD,QAAO,EAAA,GAAA,MAAA,cA5CJ,SAAS;AACR,MAAI,YAAY,SAAS;AACvB,eAAY,QAAQ,YAAY;AAChC,eAAY,UAAU;;AAGxB,MAAI,QAAQ,QACV,sBAAqB,QAAQ,QAAQ;AAGvC,MAAI,CAAC,KACH;AAGF,cAAY,UAAU,IAAI,gBAAgB,YAAY;GACpD,MAAM,QAAQ,QAAQ;AACtB,OAAI,OAAO;AACT,yBAAqB,QAAQ,QAAQ;AACrC,YAAQ,UAAU,4BAA4B;KAC5C,MAAM,UAAU,MAAM,gBAAgB,MAAM,MAAM,iBAAiB;AACnE,SAAI,SAAS;MACX,MAAM,QAAQ,QAAQ;MACtB,MAAM,SAAS,QAAQ;AACvB,cAAQ;OACN;OACA;OACA,GAAG,MAAM,YAAY;OACrB,GAAG,MAAM,YAAY;OACrB,KAAK,MAAM,YAAY;OACvB,MAAM,MAAM,YAAY;OACxB,QAAQ,MAAM,YAAY;OAC1B,OAAO,MAAM,YAAY;OAC1B,CAAC;WAEF,SAAQ,MAAM,YAAY;MAE5B;;IAEJ;AACF,cAAY,QAAQ,QAAQ,MAAM,QAAQ;IAE5C,CAAC,QAAQ,CACV,EAEoB,KAAK;;AAS5B,SAAgB,eACd,SACqE;CACrE,MAAM,CAAC,KAAK,EAAE,OAAO,YAAY,kBAAqB,QAAQ;AAC9D,QAAO;EAAE;EAAK;EAAO;EAAQ"}