koval-ui/dist/src/lib/Iframe/Iframe.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsx as r, jsxs as z } from "react/jsx-runtime";
import { forwardRef as C, useState as M, useCallback as O, useMemo as P } from "react";
import T from "classnames";
import { useLocalTheme as _ } from "css-vars-hook";
import a from "./Iframe.module.css.js";
import { convertPermissions as q } from "./convertPermissions.js";
import { SkeletonShape as A } from "../Skeleton/SkeletonShape.js";
const B = C(
  ({
    children: D,
    className: l,
    src: n,
    width: e,
    height: o,
    referrerPolicy: i,
    allowFullScreen: f,
    name: d,
    title: p,
    srcDoc: u,
    loading: N,
    sandboxConfig: m,
    permissionsConfig: t,
    onLoad: c = () => {
    },
    ...L
  }, j) => {
    const [b, x] = M(!1), I = O(
      (s) => {
        c(s), x(!0);
      },
      [c]
    ), R = m && Object.entries(m).filter(([s, y]) => y).map(([s]) => s).join(" "), S = t && q(t), k = P(
      () => ({
        height: o,
        width: e
      }),
      [o, e]
    ), { LocalRoot: v } = _();
    return /* @__PURE__ */ r(v, { theme: k, className: a.sizeContainer, children: /* @__PURE__ */ z("div", { className: a.ratioContainer, children: [
      /* @__PURE__ */ r(
        "iframe",
        {
          ...L,
          className: T(a.iframe, l),
          ref: j,
          onLoad: I,
          loading: N,
          name: d,
          width: e,
          height: o,
          src: n,
          title: p,
          srcDoc: u,
          allow: S,
          referrerPolicy: i,
          allowFullScreen: f,
          sandbox: R
        }
      ),
      !b && /* @__PURE__ */ r(
        A,
        {
          width: e,
          height: o,
          borderRadius: 0,
          className: a.loader
        }
      )
    ] }) });
  }
);
B.displayName = "Iframe";
export {
  B as Iframe
};
//# sourceMappingURL=Iframe.js.map