@ozen-ui/kit/__inner__/esm/hooks/useMultipleResizeObserver/useMultipleResizeObserver.js

React component library

import { __read, __spreadArray } from "tslib";
import { useEffect } from 'react';
import { useOzenSSR } from '../../components/OzenProvider';
import { isFunction } from '../../utils/isFunction';
import { useCreateResizeObserver } from '../useCreateResizeObserver';
import { useStoredValue } from '../useStoredValue';
export function useMultipleResizeObserver(elements, onChange, options) {
    var ssr = useOzenSSR();
    var observer = useCreateResizeObserver(function (entries) {
        onChange === null || onChange === void 0 ? void 0 : onChange(entries);
    });
    var getElements = function () { return (isFunction(elements) ? elements() : elements); };
    var previousConnectedElements = useStoredValue(function () { return __spreadArray([], __read(getElements()), false); });
    var reconnect = function (isForce) {
        if (isForce === void 0) { isForce = false; }
        var newElements = getElements();
        var hasChangesInElements = (function () {
            if (isForce) {
                return true;
            }
            if (previousConnectedElements.current.length !== newElements.length) {
                return true;
            }
            var hasDifferenceInElements = newElements.some(function (element) {
                return !previousConnectedElements.current.find(function (previousElementsElement) { return previousElementsElement === element; });
            });
            return hasDifferenceInElements;
        })();
        if (!hasChangesInElements) {
            return;
        }
        previousConnectedElements.current = newElements;
        observer === null || observer === void 0 ? void 0 : observer.disconnect();
        newElements === null || newElements === void 0 ? void 0 : newElements.forEach(function (element) {
            if (!element) {
                return;
            }
            observer === null || observer === void 0 ? void 0 : observer.observe(element, options);
        });
    };
    useEffect(function () {
        if (ssr.config.isEnabled) {
            setTimeout(function () {
                reconnect();
            });
        }
        else {
            reconnect();
        }
    }, [elements]);
    return {
        reconnect: reconnect,
    };
}