@devgateway/dvz-ui-react/dist/esm/layout/FlexWrapDetector.js

A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.

import { jsxs as x } from "react/jsx-runtime";
import { useRef as b, useState as h, useCallback as p, useEffect as c } from "react";
import l from "../utils/deviceType.js";
const R = ({ children: f, onWrapChange: o, className: u }) => {
  const e = b(null), [t, d] = h(0), a = l() === "mobile" || l() === "tablet" || l() === "midTablet", i = p(() => {
    e.current && (e.current.style.setProperty("display", "flex", "important"), t > 0 || a ? e.current.style.setProperty(
      "flex-wrap",
      "wrap",
      "important"
    ) : e.current.style.setProperty(
      "flex-wrap",
      "nowrap",
      "important"
    ));
  }, [t, a]), r = p(() => {
    const n = e.current;
    let s = 0;
    if (n && n.children.length > 1) {
      const m = n.children[0].getBoundingClientRect().top;
      Array.from(n.children).forEach((w, y) => {
        y > 0 && w.getBoundingClientRect().top > m && s++;
      });
    }
    s !== t && d(s);
  }, [t]);
  return c(() => (r(), window.addEventListener("resize", r), () => window.removeEventListener("resize", r)), [r]), c(() => {
    o && o(t);
  }, [t, o]), c(() => {
    i();
  }, [i]), /* @__PURE__ */ x("div", { ref: e, className: u, children: [
    i(),
    f
  ] });
};
export {
  R as default
};