import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useRef, useEffect } from 'react';
//
// I used this as reference
// http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/
//
var ElementResizeListener = function (_a) {
    var onResize = _a.onResize;
    var rafRef = useRef(0);
    var objectRef = useRef(null);
    var onResizeRef = useRef(onResize);
    onResizeRef.current = onResize;
    var _onResize = useCallback(function (e) {
        if (rafRef.current) {
            cancelAnimationFrame(rafRef.current);
        }
        rafRef.current = requestAnimationFrame(function () {
            onResizeRef.current(e);
        });
    }, []);
    var onLoad = useCallback(function () {
        var obj = objectRef.current;
        if (obj && obj.contentDocument && obj.contentDocument.defaultView) {
            obj.contentDocument.defaultView.addEventListener('resize', _onResize);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    useEffect(function () {
        return function () {
            // eslint-disable-next-line react-hooks/exhaustive-deps
            var obj = objectRef.current;
            if (obj && obj.contentDocument && obj.contentDocument.defaultView) {
                obj.contentDocument.defaultView.removeEventListener('resize', _onResize);
            }
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    return (
    // eslint-disable-next-line jsx-a11y/alt-text
    _jsx("object", { onLoad: onLoad, ref: objectRef, tabIndex: -1, type: 'text/html', data: 'about:blank', title: '', style: {
            position: 'absolute',
            top: 0,
            left: 0,
            height: '100%',
            width: '100%',
            pointerEvents: 'none',
            zIndex: -1,
            opacity: 0,
        } }));
};
export default ElementResizeListener;
