@clubmed/trident-ui/ui/hooks/useResizeObserver.js

Shared ClubMed React UI components

import { useRef as s, useState as O, useEffect as h, useCallback as a, useMemo as B } from "react";
import { R as g } from "../../chunks/ResizeObserver.js";
typeof window < "u" && !window.ResizeObserver && (window.ResizeObserver = g);
function S(e, r, n) {
  return e[r] ? e[r][0] ? e[r][0][n] : (
    // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current
    // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
    e[r][n]
  ) : r === "contentBoxSize" ? e.contentRect[n === "inlineSize" ? "width" : "height"] : void 0;
}
function k(e, r) {
  const n = s(null), c = s(null);
  c.current = r;
  const t = s(null);
  h(() => {
    u();
  });
  const u = a(() => {
    const d = t.current, o = c.current, i = d || (o ? o instanceof Element ? o : o.current : null);
    n.current && n.current.element === i && n.current.subscriber === e || (n.current && n.current.cleanup && n.current.cleanup(), n.current = {
      element: i,
      subscriber: e,
      // Only calling the subscriber, if there's an actual element to report.
      // Setting cleanup to undefined unless a subscriber returns one, as an existing cleanup function would've been just called.
      cleanup: i ? e(i) : void 0
    });
  }, [e]);
  return h(() => () => {
    n.current && n.current.cleanup && (n.current.cleanup(), n.current = null);
  }, []), a(
    (d) => {
      t.current = d, u();
    },
    [u]
  );
}
function H(e = {}) {
  const r = e.onResize, n = s(void 0);
  n.current = r;
  const c = e.round || Math.round, t = s(void 0), [u, d] = O({
    width: void 0,
    height: void 0
  }), o = s(!1);
  h(() => (o.current = !1, () => {
    o.current = !0;
  }), []);
  const i = s({
    width: void 0,
    height: void 0
  }), v = k(
    a(
      (b) => ((!t.current || t.current.box !== e.box || t.current.round !== c) && (t.current = {
        box: e.box,
        round: c,
        instance: new g((E) => {
          const w = E[0], z = e.box === "border-box" ? "borderBoxSize" : e.box === "device-pixel-content-box" ? "devicePixelContentBoxSize" : "contentBoxSize", R = S(w, z, "inlineSize"), x = S(w, z, "blockSize"), l = R ? c(R) : void 0, f = x ? c(x) : void 0;
          if (i.current.width !== l || i.current.height !== f) {
            const m = { width: l, height: f };
            i.current.width = l, i.current.height = f, n.current ? n.current(m) : o.current || d(m);
          }
        })
      }), t.current.instance.observe(b, { box: e.box }), () => {
        t.current && t.current.instance.unobserve(b);
      }),
      [e.box, c]
    ),
    e.ref
  );
  return B(
    () => ({
      ref: v,
      width: u.width,
      height: u.height
    }),
    [v, u.width, u.height]
  );
}
export {
  H as default,
  H as useResizeObserver,
  k as useResolvedElement
};
//# sourceMappingURL=useResizeObserver.js.map