@solibo/solibo-ui 1.0.7 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/index.css +1 -1
- package/dist/assets/index15.css +1 -1
- package/dist/assets/index19.css +1 -1
- package/dist/assets/index32.css +1 -1
- package/dist/assets/index38.css +1 -1
- package/dist/assets/index39.css +1 -1
- package/dist/assets/index46.css +1 -1
- package/dist/assets/index51.css +1 -1
- package/dist/assets/index8.css +1 -1
- package/dist/assets/index9.css +1 -1
- package/dist/components/card/index.cjs +1 -1
- package/dist/components/card/index.js +45 -45
- package/dist/components/dialog/index.cjs +1 -1
- package/dist/components/dialog/index.cjs.map +1 -1
- package/dist/components/dialog/index.js +39 -37
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/dropdown/index.cjs +1 -1
- package/dist/components/dropdown/index.js +70 -70
- package/dist/components/icon/index.cjs +1 -1
- package/dist/components/icon/index.js +22 -22
- package/dist/components/iframe/index.cjs +1 -1
- package/dist/components/iframe/index.cjs.map +1 -1
- package/dist/components/iframe/index.js +46 -49
- package/dist/components/iframe/index.js.map +1 -1
- package/dist/components/message/index.cjs +1 -1
- package/dist/components/message/index.js +18 -18
- package/dist/components/popover/index.cjs +1 -1
- package/dist/components/popover/index.cjs.map +1 -1
- package/dist/components/popover/index.js +10 -10
- package/dist/components/popover/index.js.map +1 -1
- package/dist/components/search/index.cjs +1 -1
- package/dist/components/search/index.js +29 -29
- package/dist/components/select/index.cjs +1 -1
- package/dist/components/select/index.js +1 -1
- package/dist/components/sortable/index.cjs +1 -1
- package/dist/components/sortable/index.cjs.map +1 -1
- package/dist/components/sortable/index.js +141 -134
- package/dist/components/sortable/index.js.map +1 -1
- package/dist/{index-oL8GYbhj.cjs → index-BPIK2dxs.cjs} +2 -2
- package/dist/{index-oL8GYbhj.cjs.map → index-BPIK2dxs.cjs.map} +1 -1
- package/dist/{index-CMfR_USP.js → index-C_YiNpZP.js} +8 -8
- package/dist/{index-CMfR_USP.js.map → index-C_YiNpZP.js.map} +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +13 -2
- package/dist/index.js +37 -36
- package/dist/tokens.css +3 -1
- package/dist/tokens.json +46 -19
- package/package.json +1 -1
|
@@ -1,33 +1,33 @@
|
|
|
1
1
|
import { jsxs as p, Fragment as pe, jsx as s } from "react/jsx-runtime";
|
|
2
|
-
import { t as
|
|
3
|
-
import fe, { Children as me, isValidElement as
|
|
2
|
+
import { t as V } from "../../classix-DG18itHa.js";
|
|
3
|
+
import fe, { Children as me, isValidElement as w, useRef as I, useId as he, useState as Q, useEffect as z } from "react";
|
|
4
4
|
import { Button as M } from "../button/index.js";
|
|
5
|
-
import { i as
|
|
6
|
-
import { f as
|
|
7
|
-
import { List as
|
|
8
|
-
import { S as
|
|
9
|
-
import '../../assets/index39.css';function
|
|
10
|
-
return typeof t == "string" || typeof t == "number" ? String(t) : Array.isArray(t) ? t.map(
|
|
5
|
+
import { i as _e } from "../../icons-BFgf_lJN.js";
|
|
6
|
+
import { f as ye, I as be } from "../../index-BHgGZxsR.js";
|
|
7
|
+
import { List as ge } from "../list/index.js";
|
|
8
|
+
import { S as we, s as ve, r as ee } from "../../index-C_YiNpZP.js";
|
|
9
|
+
import '../../assets/index39.css';function L(t) {
|
|
10
|
+
return typeof t == "string" || typeof t == "number" ? String(t) : Array.isArray(t) ? t.map(L).join(" ") : w(t) ? L(t.props.children) : "";
|
|
11
11
|
}
|
|
12
|
-
function
|
|
13
|
-
return
|
|
12
|
+
function xe(t) {
|
|
13
|
+
return w(t) && t.type === "option";
|
|
14
|
+
}
|
|
15
|
+
function je(t) {
|
|
16
|
+
return w(t) && t.type === "optgroup";
|
|
14
17
|
}
|
|
15
18
|
function Se(t) {
|
|
16
|
-
return
|
|
19
|
+
return w(t) && t.type === fe.Fragment;
|
|
17
20
|
}
|
|
18
21
|
function Ne(t) {
|
|
19
|
-
return
|
|
20
|
-
}
|
|
21
|
-
function Ce(t) {
|
|
22
|
-
return v(t) && t.type === ve;
|
|
22
|
+
return w(t) && t.type === we;
|
|
23
23
|
}
|
|
24
24
|
function A(t, i, r = !1) {
|
|
25
25
|
const l = [];
|
|
26
26
|
return me.forEach(t, (n) => {
|
|
27
|
-
if (
|
|
27
|
+
if (Se(n))
|
|
28
28
|
l.push(...A(n.props.children, i, r));
|
|
29
|
-
else if (
|
|
30
|
-
const a =
|
|
29
|
+
else if (xe(n)) {
|
|
30
|
+
const a = L(n.props.children).trim(), f = n.props.value != null ? String(n.props.value) : a;
|
|
31
31
|
l.push({
|
|
32
32
|
disabled: r || !!n.props.disabled,
|
|
33
33
|
groupLabel: i,
|
|
@@ -38,28 +38,28 @@ function A(t, i, r = !1) {
|
|
|
38
38
|
text: a,
|
|
39
39
|
value: f
|
|
40
40
|
});
|
|
41
|
-
} else
|
|
41
|
+
} else je(n) && l.push(...A(n.props.children, n.props.label, r || !!n.props.disabled));
|
|
42
42
|
}), l;
|
|
43
43
|
}
|
|
44
|
-
function
|
|
44
|
+
function Ce(t) {
|
|
45
45
|
const i = t.trim();
|
|
46
46
|
if (!i) return null;
|
|
47
47
|
const l = [.../[*?]/.test(i) ? i : `*${i}*`].map((n) => n === "*" ? ".*" : n === "?" ? "." : n.replace(/[|\\{}()[\]^$+.,]/g, "\\$&")).join("");
|
|
48
48
|
return new RegExp(`^${l}$`, "i");
|
|
49
49
|
}
|
|
50
|
-
function
|
|
51
|
-
const r =
|
|
50
|
+
function Ee(t, i) {
|
|
51
|
+
const r = Ce(i), l = t.filter((n) => !n.hidden && !n.isPlaceholder);
|
|
52
52
|
return r ? l.filter((n) => r.test([n.groupLabel, n.text, n.value].filter(Boolean).join(" "))) : l;
|
|
53
53
|
}
|
|
54
|
-
function
|
|
54
|
+
function Ve(t, i) {
|
|
55
55
|
return t.find((r) => r.value === i) ?? t.find((r) => r.isPlaceholder) ?? t[0];
|
|
56
56
|
}
|
|
57
|
-
function
|
|
57
|
+
function Ie(t, i, r) {
|
|
58
58
|
var l, n;
|
|
59
59
|
return i != null ? String(i) : r != null ? String(r) : ((l = t.find((a) => a.selected)) == null ? void 0 : l.value) ?? ((n = t[0]) == null ? void 0 : n.value) ?? "";
|
|
60
60
|
}
|
|
61
|
-
function
|
|
62
|
-
if (
|
|
61
|
+
function Le(t) {
|
|
62
|
+
if (Ne(t)) {
|
|
63
63
|
const {
|
|
64
64
|
children: i,
|
|
65
65
|
placeholder: r,
|
|
@@ -78,14 +78,14 @@ function $e(t) {
|
|
|
78
78
|
props: t.props
|
|
79
79
|
};
|
|
80
80
|
}
|
|
81
|
-
const
|
|
82
|
-
combobox:
|
|
83
|
-
"combobox-input": "_combobox-
|
|
84
|
-
dropdown:
|
|
85
|
-
empty:
|
|
86
|
-
group:
|
|
87
|
-
placeholder:
|
|
88
|
-
filter:
|
|
81
|
+
const $e = "_combobox_18jwy_3", Be = "_dropdown_18jwy_27", ke = "_empty_18jwy_30", De = "_group_18jwy_31", Pe = "_placeholder_18jwy_32", Re = "_filter_18jwy_40", Fe = "_native_18jwy_52", We = "_option_18jwy_62", Qe = "_options_18jwy_84", ze = "_panel_18jwy_108", Me = "_selected_18jwy_132", Ae = "_text_18jwy_136", Ge = "_trigger_18jwy_145", Ke = "_minimal_18jwy_181", Oe = "_inline_18jwy_236", Te = "_label_18jwy_268", o = {
|
|
82
|
+
combobox: $e,
|
|
83
|
+
"combobox-input": "_combobox-input_18jwy_12",
|
|
84
|
+
dropdown: Be,
|
|
85
|
+
empty: ke,
|
|
86
|
+
group: De,
|
|
87
|
+
placeholder: Pe,
|
|
88
|
+
filter: Re,
|
|
89
89
|
native: Fe,
|
|
90
90
|
option: We,
|
|
91
91
|
options: Qe,
|
|
@@ -96,11 +96,11 @@ const Be = "_combobox_1x1gr_3", ke = "_dropdown_1x1gr_27", De = "_empty_1x1gr_30
|
|
|
96
96
|
minimal: Ke,
|
|
97
97
|
inline: Oe,
|
|
98
98
|
label: Te,
|
|
99
|
-
"inline-field": "_inline-
|
|
99
|
+
"inline-field": "_inline-field_18jwy_274"
|
|
100
100
|
};
|
|
101
101
|
function te(t, i) {
|
|
102
102
|
return {
|
|
103
|
-
"--icon-svg":
|
|
103
|
+
"--icon-svg": _e(t).replace("currentColor", i)
|
|
104
104
|
};
|
|
105
105
|
}
|
|
106
106
|
const tt = ({
|
|
@@ -111,32 +111,32 @@ const tt = ({
|
|
|
111
111
|
emptyLabel: n = "No matches found",
|
|
112
112
|
label: a,
|
|
113
113
|
renderOption: f,
|
|
114
|
-
searchPlaceholder:
|
|
114
|
+
searchPlaceholder: $ = "Filter",
|
|
115
115
|
selectedItems: ne,
|
|
116
|
-
variant:
|
|
116
|
+
variant: y = "default",
|
|
117
117
|
...re
|
|
118
118
|
}) => {
|
|
119
|
-
const
|
|
119
|
+
const B = Le(t), {
|
|
120
120
|
defaultValue: le,
|
|
121
|
-
onChange:
|
|
122
|
-
value:
|
|
121
|
+
onChange: k,
|
|
122
|
+
value: D,
|
|
123
123
|
...oe
|
|
124
|
-
} =
|
|
124
|
+
} = B.props, v = ve(oe), G = I(null), K = I(null), x = he(), O = I(null), m = I(null), b = A(B.children), g = D != null, P = Ie(b, D, le), [R, F] = Q(() => P), [c, d] = Q(!1), [j, S] = Q(""), N = g ? String(D) : R, T = {
|
|
125
125
|
default: ee("--colors-semantic-content-secondary"),
|
|
126
126
|
white: ee("--color-white", "white")
|
|
127
|
-
}, q =
|
|
127
|
+
}, q = y === "minimal" ? T.white : T.default, C = Ve(b, N), ie = te("chevron", q), se = te("search", q), H = Ee(b, j), h = j.trim(), E = !!(r && l && h && l.isValid(h)), ae = a && y === "inline" ? ye(a) : a, J = (e) => e ? (f == null ? void 0 : f({
|
|
128
128
|
groupLabel: e.groupLabel,
|
|
129
|
-
isSelected: e.value ===
|
|
129
|
+
isSelected: e.value === N,
|
|
130
130
|
label: e.label,
|
|
131
131
|
text: e.text,
|
|
132
132
|
value: e.value
|
|
133
133
|
})) ?? e.label : "Select an option";
|
|
134
134
|
z(() => {
|
|
135
|
-
!
|
|
136
|
-
}, [
|
|
135
|
+
!g && !b.some((e) => e.value === R) && F(P);
|
|
136
|
+
}, [P, R, g, b]), z(() => {
|
|
137
137
|
var e;
|
|
138
138
|
if (!c) {
|
|
139
|
-
|
|
139
|
+
S("");
|
|
140
140
|
return;
|
|
141
141
|
}
|
|
142
142
|
(e = m.current) == null || e.focus();
|
|
@@ -144,65 +144,65 @@ const tt = ({
|
|
|
144
144
|
if (!c)
|
|
145
145
|
return;
|
|
146
146
|
const e = (u) => {
|
|
147
|
-
var
|
|
148
|
-
(
|
|
147
|
+
var _;
|
|
148
|
+
(_ = K.current) != null && _.contains(u.target) || d(!1);
|
|
149
149
|
};
|
|
150
150
|
return document.addEventListener("mousedown", e), () => {
|
|
151
151
|
document.removeEventListener("mousedown", e);
|
|
152
152
|
};
|
|
153
153
|
}, [c]);
|
|
154
154
|
const ce = (e) => {
|
|
155
|
-
|
|
155
|
+
g || F(e.target.value), k == null || k(e);
|
|
156
156
|
}, W = () => {
|
|
157
157
|
var e;
|
|
158
158
|
d(!1), r || (e = G.current) == null || e.focus();
|
|
159
159
|
}, U = () => {
|
|
160
160
|
var e;
|
|
161
|
-
|
|
161
|
+
S(""), d(!0), (e = m.current) == null || e.focus();
|
|
162
162
|
}, X = () => {
|
|
163
|
-
!l || !
|
|
163
|
+
!l || !E || (l.onCreate(h), U());
|
|
164
164
|
}, ue = (e) => {
|
|
165
165
|
var Z;
|
|
166
|
-
|
|
166
|
+
g || F(e);
|
|
167
167
|
const u = O.current;
|
|
168
168
|
if (!u) {
|
|
169
169
|
W();
|
|
170
170
|
return;
|
|
171
171
|
}
|
|
172
|
-
const
|
|
173
|
-
|
|
172
|
+
const _ = (Z = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, "value")) == null ? void 0 : Z.set;
|
|
173
|
+
_ == null || _.call(u, e), u.dispatchEvent(new Event("change", {
|
|
174
174
|
bubbles: !0
|
|
175
175
|
})), r ? U() : W();
|
|
176
176
|
}, de = (e) => {
|
|
177
|
-
e.key === "Escape" && W(), e.key === "Enter" && e.target === m.current &&
|
|
178
|
-
}, Y = /* @__PURE__ */ p("div", { className:
|
|
179
|
-
/* @__PURE__ */ s("select", { ...
|
|
177
|
+
e.key === "Escape" && W(), e.key === "Enter" && e.target === m.current && E && (e.preventDefault(), X());
|
|
178
|
+
}, Y = /* @__PURE__ */ p("div", { className: V(o.dropdown, y === "inline" && o.inline, y === "minimal" && o.minimal, i), onKeyDown: de, ref: K, ...re, children: [
|
|
179
|
+
/* @__PURE__ */ s("select", { ...v, "aria-hidden": "true", className: o.native, onChange: ce, ref: O, tabIndex: -1, value: N, children: B.children }),
|
|
180
180
|
r ? /* @__PURE__ */ p("div", { className: o.combobox, onClick: () => {
|
|
181
181
|
var e;
|
|
182
182
|
return (e = m.current) == null ? void 0 : e.focus();
|
|
183
183
|
}, children: [
|
|
184
184
|
ne,
|
|
185
|
-
/* @__PURE__ */ s("input", { "aria-autocomplete": "list", "aria-expanded": c, "aria-label":
|
|
186
|
-
|
|
187
|
-
}, onClick: () => d(!0), onFocus: () => d(!0), placeholder:
|
|
188
|
-
] }) : /* @__PURE__ */ s(M, { "aria-expanded": c, "aria-haspopup": "dialog", "aria-labelledby": a ? `${
|
|
185
|
+
/* @__PURE__ */ s("input", { "aria-autocomplete": "list", "aria-expanded": c, "aria-label": v["aria-label"] ?? a ?? $, className: o["combobox-input"], disabled: v.disabled, onChange: (e) => {
|
|
186
|
+
S(e.target.value), d(!0);
|
|
187
|
+
}, onClick: () => d(!0), onFocus: () => d(!0), placeholder: $ || void 0, ref: m, role: "combobox", type: "text", value: j })
|
|
188
|
+
] }) : /* @__PURE__ */ s(M, { "aria-expanded": c, "aria-haspopup": "dialog", "aria-labelledby": a ? `${x} ${x}-value` : void 0, className: V(o.trigger, (C == null ? void 0 : C.isPlaceholder) && o.placeholder), "data-open": c ? "true" : void 0, disabled: v.disabled, onClick: () => d((e) => !e), ref: G, style: ie, variant: "tertiary", children: /* @__PURE__ */ s("span", { className: o.text, id: `${x}-value`, children: J(C) }) }),
|
|
189
189
|
c && /* @__PURE__ */ p("div", { className: o.panel, children: [
|
|
190
|
-
!r && /* @__PURE__ */ s(be, { "aria-label": "Filter", className: o.filter, icon: "search", onChange: (e) =>
|
|
191
|
-
/* @__PURE__ */ p(
|
|
190
|
+
!r && /* @__PURE__ */ s(be, { "aria-label": "Filter", className: o.filter, icon: "search", onChange: (e) => S(e.target.value), placeholder: $, ref: m, style: se, type: "search", value: j }),
|
|
191
|
+
/* @__PURE__ */ p(ge, { "aria-label": "Dropdown", className: o.options, children: [
|
|
192
192
|
H.map((e) => {
|
|
193
|
-
const u = e.value ===
|
|
194
|
-
return /* @__PURE__ */ s("li", { "data-component": "dropdown", children: /* @__PURE__ */ p(M, { "aria-label": u ? `${e.text}, selected` : e.text, className:
|
|
193
|
+
const u = e.value === N;
|
|
194
|
+
return /* @__PURE__ */ s("li", { "data-component": "dropdown", children: /* @__PURE__ */ p(M, { "aria-label": u ? `${e.text}, selected` : e.text, className: V(o.option, u && o.selected), disabled: e.disabled, onClick: () => ue(e.value), variant: "tertiary", children: [
|
|
195
195
|
/* @__PURE__ */ s("span", { className: o.text, children: J(e) }),
|
|
196
196
|
e.groupLabel && /* @__PURE__ */ s("small", { className: o.group, children: e.groupLabel })
|
|
197
197
|
] }) }, `${e.groupLabel ?? "root"}-${e.value}`);
|
|
198
198
|
}),
|
|
199
|
-
|
|
200
|
-
H.length === 0 && !
|
|
199
|
+
E && l && /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(M, { "aria-label": L(l.render(h)) || h, className: o.option, onClick: X, variant: "tertiary", children: /* @__PURE__ */ s("span", { className: o.text, children: l.render(h) }) }) }),
|
|
200
|
+
H.length === 0 && !E && /* @__PURE__ */ s("li", { className: o.empty, children: n })
|
|
201
201
|
] })
|
|
202
202
|
] })
|
|
203
203
|
] });
|
|
204
|
-
return a ? /* @__PURE__ */ p("div", { className:
|
|
205
|
-
/* @__PURE__ */ s("span", { id:
|
|
204
|
+
return a ? /* @__PURE__ */ p("div", { className: V(o.label, y === "inline" && o["inline-field"]), "data-component": "dropdown", children: [
|
|
205
|
+
/* @__PURE__ */ s("span", { id: x, children: ae }),
|
|
206
206
|
Y
|
|
207
207
|
] }) : Y;
|
|
208
208
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index46.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index46.css');const m=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),t=require("../../icons-Dx0NQYLH.cjs"),l="_icon_ihnm9_1",_="_small_ihnm9_10",g="_medium_ihnm9_15",d="_large_ihnm9_20",u="_danger_ihnm9_25",n={icon:l,small:_,medium:g,large:d,danger:u,"gap-right":"_gap-right_ihnm9_29","gap-left":"_gap-left_ihnm9_33"},h={large:n.large,medium:n.medium,small:n.small},p={danger:n.danger},y=({fill:i,gap:e="none",name:o,size:a="medium",variant:s})=>{const c={maskImage:t.iconSVG(o,i??!1)};return m.jsx("span",{"aria-hidden":"true",className:r.t(e!=="none"&&n[`gap-${e}`],h[a],n.icon,s&&p[s]),style:c,"data-component":"icon"})},I=()=>Object.keys(t.iconPaths);exports.Icon=y;exports.Icons=I;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { t as
|
|
3
|
-
import { i, a as l } from "../../icons-BFgf_lJN.js";
|
|
4
|
-
import '../../assets/index46.css';const _ = "
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { t as r } from "../../classix-DG18itHa.js";
|
|
3
|
+
import { i as c, a as l } from "../../icons-BFgf_lJN.js";
|
|
4
|
+
import '../../assets/index46.css';const _ = "_icon_ihnm9_1", g = "_small_ihnm9_10", d = "_medium_ihnm9_15", h = "_large_ihnm9_20", p = "_danger_ihnm9_25", n = {
|
|
5
5
|
icon: _,
|
|
6
6
|
small: g,
|
|
7
|
-
medium:
|
|
8
|
-
large:
|
|
9
|
-
danger:
|
|
10
|
-
"gap-right": "_gap-
|
|
11
|
-
"gap-left": "_gap-
|
|
12
|
-
},
|
|
7
|
+
medium: d,
|
|
8
|
+
large: h,
|
|
9
|
+
danger: p,
|
|
10
|
+
"gap-right": "_gap-right_ihnm9_29",
|
|
11
|
+
"gap-left": "_gap-left_ihnm9_33"
|
|
12
|
+
}, u = {
|
|
13
13
|
large: n.large,
|
|
14
14
|
medium: n.medium,
|
|
15
15
|
small: n.small
|
|
16
|
-
},
|
|
16
|
+
}, f = {
|
|
17
17
|
danger: n.danger
|
|
18
|
-
},
|
|
19
|
-
fill:
|
|
18
|
+
}, k = ({
|
|
19
|
+
fill: a,
|
|
20
20
|
gap: e = "none",
|
|
21
|
-
name:
|
|
22
|
-
size:
|
|
23
|
-
variant:
|
|
21
|
+
name: s,
|
|
22
|
+
size: o = "medium",
|
|
23
|
+
variant: m
|
|
24
24
|
}) => {
|
|
25
|
-
const
|
|
26
|
-
maskImage:
|
|
25
|
+
const i = {
|
|
26
|
+
maskImage: c(s, a ?? !1)
|
|
27
27
|
};
|
|
28
|
-
return /* @__PURE__ */
|
|
29
|
-
},
|
|
28
|
+
return /* @__PURE__ */ t("span", { "aria-hidden": "true", className: r(e !== "none" && n[`gap-${e}`], u[o], n.icon, m && f[m]), style: i, "data-component": "icon" });
|
|
29
|
+
}, x = () => Object.keys(l);
|
|
30
30
|
export {
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
k as Icon,
|
|
32
|
+
x as Icons
|
|
33
33
|
};
|
|
34
34
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index19.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index19.css');const r=require("react/jsx-runtime"),S=require("../../classix-5H4IWnMA.cjs"),s=require("react"),A=require("../button/index.cjs"),N=require("../controls/index.cjs"),z=require("../dialog/index.cjs"),G=require("../header/index.cjs"),R="_wrapper_29z62_1",V="_toolbar_29z62_6",$="_iframe_29z62_12",a={wrapper:R,toolbar:V,iframe:$,"fullscreen-iframe":"_fullscreen-iframe_29z62_18"},d=120,L=12e3,X=8,J=({accessibleLabel:f,autoResize:l=!1,className:v,closeFullscreenLabel:F="Close fullscreen",fullscreenLabel:I="View in fullscreen",hasFullscreenView:O=!0,loading:b="lazy",onLoad:h,referrerPolicy:H="no-referrer",sandbox:y="",srcDoc:w,style:E,...j})=>{const _=s.useRef(null),c=s.useRef(null),i=s.useRef(null),[k,M]=s.useState(d),[T,p]=s.useState(!1),g=s.useCallback(()=>{c.current!==null&&(window.cancelAnimationFrame(c.current),c.current=null),i.current!==null&&(window.clearTimeout(i.current),i.current=null)},[]),x=s.useCallback(()=>{if(!l)return;const t=_.current,e=t==null?void 0:t.contentDocument;if(!t||!e)return;const m=t.style.height;try{t.style.height=`${d}px`;const o=e.querySelector("[data-iframe-content]")??e.body,u=o.getBoundingClientRect(),{body:q,documentElement:C}=e,B=Math.min(Math.max(Math.ceil(Math.max(o.scrollHeight,o.offsetHeight,u.height,q.scrollHeight,q.offsetHeight,C.scrollHeight,C.offsetHeight)+X),d),L);M(B)}catch{}finally{t.style.height=m}},[l]),n=s.useCallback(()=>{!l||c.current!==null||(c.current=window.requestAnimationFrame(()=>{c.current=null,x(),i.current!==null&&window.clearTimeout(i.current),i.current=window.setTimeout(()=>{i.current=null,x()},250)}))},[l,x]),U=t=>{var m,o;n();const e=(m=_.current)==null?void 0:m.contentDocument;Array.from((e==null?void 0:e.images)??[]).forEach(u=>{u.complete||(u.addEventListener("load",n,{once:!0}),u.addEventListener("error",n,{once:!0}))}),(o=e==null?void 0:e.fonts)==null||o.ready.then(n).catch(()=>{}),h==null||h(t)};return s.useEffect(()=>{if(l)return g(),M(d),n(),g},[l,g,n,w]),s.useEffect(()=>{var t;if(l)return window.addEventListener("resize",n),(t=window.visualViewport)==null||t.addEventListener("resize",n),()=>{var e;window.removeEventListener("resize",n),(e=window.visualViewport)==null||e.removeEventListener("resize",n)}},[l,n]),r.jsxs("div",{className:a.wrapper,"data-component":"iframe",children:[O&&r.jsx("div",{className:a.toolbar,children:r.jsx(A.Button,{"aria-expanded":T,"aria-haspopup":"dialog",onClick:()=>p(!0),variant:"tertiary",children:I})}),r.jsx("iframe",{...j,className:S.t(a.iframe,v),loading:b,onLoad:U,ref:_,referrerPolicy:H,sandbox:y,srcDoc:w,style:l?{...E,height:k,minHeight:d}:E,title:f}),T&&r.jsx(z.Dialog,{"aria-label":`${f} fullscreen`,controls:r.jsx(N.Controls,{children:r.jsx(A.Button,{onClick:()=>p(!1),children:F})}),fullscreen:!0,header:r.jsx(G.Header,{children:r.jsx("h2",{children:f})}),open:!0,setOpen:p,children:r.jsx("iframe",{...j,className:S.t(a.iframe,a["fullscreen-iframe"],v),loading:"eager",referrerPolicy:H,sandbox:y,srcDoc:w,title:`${f} fullscreen`})})]})};exports.Iframe=J;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/iframe/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { type ComponentPropsWithoutRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '../button';\nimport { Dialog } from '../dialog';\nimport styles from './styles.module.css';\n\nconst MIN_AUTO_HEIGHT = 120;\nconst MAX_AUTO_HEIGHT = 12000;\nconst AUTO_HEIGHT_BUFFER = 8;\n\nexport type IframeProps = Omit<ComponentPropsWithoutRef<'iframe'>, 'src' | 'srcDoc' | 'title'> & {\n accessibleLabel: string;\n autoResize?: boolean;\n closeFullscreenLabel?: string;\n fullscreenLabel?: string;\n hasFullscreenView?: boolean;\n srcDoc: string;\n};\n\nexport const Iframe = ({\n accessibleLabel,\n autoResize = false,\n className,\n closeFullscreenLabel = 'Close fullscreen',\n fullscreenLabel = 'View in fullscreen',\n hasFullscreenView = true,\n loading = 'lazy',\n onLoad,\n referrerPolicy = 'no-referrer',\n sandbox = '',\n srcDoc,\n style,\n ...props\n}: IframeProps) => {\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const measurementFrameRef = useRef<number | null>(null);\n const followUpMeasurementTimeoutRef = useRef<number | null>(null);\n const [measuredHeight, setMeasuredHeight] = useState(MIN_AUTO_HEIGHT);\n const [isFullscreenOpen, setIsFullscreenOpen] = useState(false);\n\n const clearScheduledMeasurements = useCallback(() => {\n if (measurementFrameRef.current !== null) {\n window.cancelAnimationFrame(measurementFrameRef.current);\n measurementFrameRef.current = null;\n }\n\n if (followUpMeasurementTimeoutRef.current !== null) {\n window.clearTimeout(followUpMeasurementTimeoutRef.current);\n followUpMeasurementTimeoutRef.current = null;\n }\n }, []);\n\n const measureSize = useCallback(() => {\n if (!autoResize) return;\n\n const iframe = iframeRef.current;\n const iframeDocument = iframe?.contentDocument;\n if (!iframe || !iframeDocument) return;\n\n const renderedHeight = iframe.style.height;\n\n try {\n // measure from a stable viewport height so content sized with percentages or\n // viewport units cannot feed the iframe's previous height back into itself\n iframe.style.height = `${MIN_AUTO_HEIGHT}px`;\n\n const content =\n iframeDocument.querySelector<HTMLElement>('[data-iframe-content]') ?? iframeDocument.body;\n const contentRect = content.getBoundingClientRect();\n const { body, documentElement } = iframeDocument;\n const height = Math.min(\n Math.max(\n Math.ceil(\n Math.max(\n content.scrollHeight,\n content.offsetHeight,\n contentRect.height,\n body.scrollHeight,\n body.offsetHeight,\n documentElement.scrollHeight,\n documentElement.offsetHeight\n ) + AUTO_HEIGHT_BUFFER\n ),\n MIN_AUTO_HEIGHT\n ),\n MAX_AUTO_HEIGHT\n );\n\n setMeasuredHeight(height);\n } catch {\n // cross-origin iframe content cannot be measured; retain minimum height\n } finally {\n iframe.style.height = renderedHeight;\n }\n }, [autoResize]);\n\n const scheduleSizeMeasurement = useCallback(() => {\n if (!autoResize || measurementFrameRef.current !== null) return;\n\n measurementFrameRef.current = window.requestAnimationFrame(() => {\n measurementFrameRef.current = null;\n measureSize();\n\n if (followUpMeasurementTimeoutRef.current !== null) {\n window.clearTimeout(followUpMeasurementTimeoutRef.current);\n }\n\n followUpMeasurementTimeoutRef.current = window.setTimeout(() => {\n followUpMeasurementTimeoutRef.current = null;\n measureSize();\n }, 250);\n });\n }, [autoResize, measureSize]);\n\n const handleLoad: NonNullable<IframeProps['onLoad']> = (event) => {\n scheduleSizeMeasurement();\n\n const iframeDocument = iframeRef.current?.contentDocument;\n Array.from(iframeDocument?.images ?? []).forEach((image) => {\n if (image.complete) return;\n image.addEventListener('load', scheduleSizeMeasurement, { once: true });\n image.addEventListener('error', scheduleSizeMeasurement, { once: true });\n });\n iframeDocument?.fonts?.ready.then(scheduleSizeMeasurement).catch(() => undefined);\n\n onLoad?.(event);\n };\n\n useEffect(() => {\n if (!autoResize) return undefined;\n\n clearScheduledMeasurements();\n setMeasuredHeight(MIN_AUTO_HEIGHT);\n scheduleSizeMeasurement();\n\n return clearScheduledMeasurements;\n }, [autoResize, clearScheduledMeasurements, scheduleSizeMeasurement, srcDoc]);\n\n useEffect(() => {\n if (!autoResize) return undefined;\n\n window.addEventListener('resize', scheduleSizeMeasurement);\n window.visualViewport?.addEventListener('resize', scheduleSizeMeasurement);\n\n return () => {\n window.removeEventListener('resize', scheduleSizeMeasurement);\n window.visualViewport?.removeEventListener('resize', scheduleSizeMeasurement);\n };\n }, [autoResize, scheduleSizeMeasurement]);\n\n return (\n <div className={styles.wrapper}>\n {hasFullscreenView && (\n <div className={styles.toolbar}>\n <Button\n aria-expanded={isFullscreenOpen}\n aria-haspopup='dialog'\n onClick={() => setIsFullscreenOpen(true)}\n variant='tertiary'\n >\n {fullscreenLabel}\n </Button>\n </div>\n )}\n <iframe\n {...props}\n className={cx(styles.iframe, className)}\n loading={loading}\n onLoad={handleLoad}\n ref={iframeRef}\n referrerPolicy={referrerPolicy}\n sandbox={sandbox}\n srcDoc={srcDoc}\n style={\n autoResize\n ? {\n ...style,\n height: measuredHeight,\n minHeight: MIN_AUTO_HEIGHT,\n }\n : style\n }\n title={accessibleLabel}\n />\n {isFullscreenOpen && (\n <Dialog\n aria-label={`${accessibleLabel} fullscreen`}\n className={styles['fullscreen-dialog']}\n open\n setOpen={setIsFullscreenOpen}\n >\n <div className={styles['fullscreen-toolbar']}>\n <Button\n autoFocus\n onClick={() => setIsFullscreenOpen(false)}\n >\n {closeFullscreenLabel}\n </Button>\n </div>\n <iframe\n {...props}\n className={cx(styles.iframe, styles['fullscreen-iframe'], className)}\n loading='eager'\n referrerPolicy={referrerPolicy}\n sandbox={sandbox}\n srcDoc={srcDoc}\n title={`${accessibleLabel} fullscreen`}\n />\n </Dialog>\n )}\n </div>\n );\n};\n"],"names":["MIN_AUTO_HEIGHT","MAX_AUTO_HEIGHT","AUTO_HEIGHT_BUFFER","Iframe","accessibleLabel","autoResize","className","closeFullscreenLabel","fullscreenLabel","hasFullscreenView","loading","onLoad","referrerPolicy","sandbox","srcDoc","style","props","iframeRef","useRef","measurementFrameRef","followUpMeasurementTimeoutRef","measuredHeight","setMeasuredHeight","useState","isFullscreenOpen","setIsFullscreenOpen","clearScheduledMeasurements","useCallback","current","window","cancelAnimationFrame","clearTimeout","measureSize","iframe","iframeDocument","contentDocument","renderedHeight","height","content","querySelector","body","contentRect","getBoundingClientRect","documentElement","Math","min","max","ceil","scrollHeight","offsetHeight","scheduleSizeMeasurement","requestAnimationFrame","setTimeout","handleLoad","event","Array","from","images","forEach","image","complete","addEventListener","once","fonts","ready","then","catch","useEffect","visualViewport","removeEventListener","styles","wrapper","toolbar","jsx","Button","cx","minHeight","jsxs","Dialog"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/iframe/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { type ComponentPropsWithoutRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '../button';\nimport { Controls } from '../controls';\nimport { Dialog } from '../dialog';\nimport { Header } from '../header';\nimport styles from './styles.module.css';\n\nconst MIN_AUTO_HEIGHT = 120;\nconst MAX_AUTO_HEIGHT = 12000;\nconst AUTO_HEIGHT_BUFFER = 8;\n\nexport type IframeProps = Omit<ComponentPropsWithoutRef<'iframe'>, 'src' | 'srcDoc' | 'title'> & {\n accessibleLabel: string;\n autoResize?: boolean;\n closeFullscreenLabel?: string;\n fullscreenLabel?: string;\n hasFullscreenView?: boolean;\n srcDoc: string;\n};\n\nexport const Iframe = ({\n accessibleLabel,\n autoResize = false,\n className,\n closeFullscreenLabel = 'Close fullscreen',\n fullscreenLabel = 'View in fullscreen',\n hasFullscreenView = true,\n loading = 'lazy',\n onLoad,\n referrerPolicy = 'no-referrer',\n sandbox = '',\n srcDoc,\n style,\n ...props\n}: IframeProps) => {\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const measurementFrameRef = useRef<number | null>(null);\n const followUpMeasurementTimeoutRef = useRef<number | null>(null);\n const [measuredHeight, setMeasuredHeight] = useState(MIN_AUTO_HEIGHT);\n const [isFullscreenOpen, setIsFullscreenOpen] = useState(false);\n\n const clearScheduledMeasurements = useCallback(() => {\n if (measurementFrameRef.current !== null) {\n window.cancelAnimationFrame(measurementFrameRef.current);\n measurementFrameRef.current = null;\n }\n\n if (followUpMeasurementTimeoutRef.current !== null) {\n window.clearTimeout(followUpMeasurementTimeoutRef.current);\n followUpMeasurementTimeoutRef.current = null;\n }\n }, []);\n\n const measureSize = useCallback(() => {\n if (!autoResize) return;\n\n const iframe = iframeRef.current;\n const iframeDocument = iframe?.contentDocument;\n if (!iframe || !iframeDocument) return;\n\n const renderedHeight = iframe.style.height;\n\n try {\n // measure from a stable viewport height so content sized with percentages or\n // viewport units cannot feed the iframe's previous height back into itself\n iframe.style.height = `${MIN_AUTO_HEIGHT}px`;\n\n const content =\n iframeDocument.querySelector<HTMLElement>('[data-iframe-content]') ?? iframeDocument.body;\n const contentRect = content.getBoundingClientRect();\n const { body, documentElement } = iframeDocument;\n const height = Math.min(\n Math.max(\n Math.ceil(\n Math.max(\n content.scrollHeight,\n content.offsetHeight,\n contentRect.height,\n body.scrollHeight,\n body.offsetHeight,\n documentElement.scrollHeight,\n documentElement.offsetHeight\n ) + AUTO_HEIGHT_BUFFER\n ),\n MIN_AUTO_HEIGHT\n ),\n MAX_AUTO_HEIGHT\n );\n\n setMeasuredHeight(height);\n } catch {\n // cross-origin iframe content cannot be measured; retain minimum height\n } finally {\n iframe.style.height = renderedHeight;\n }\n }, [autoResize]);\n\n const scheduleSizeMeasurement = useCallback(() => {\n if (!autoResize || measurementFrameRef.current !== null) return;\n\n measurementFrameRef.current = window.requestAnimationFrame(() => {\n measurementFrameRef.current = null;\n measureSize();\n\n if (followUpMeasurementTimeoutRef.current !== null) {\n window.clearTimeout(followUpMeasurementTimeoutRef.current);\n }\n\n followUpMeasurementTimeoutRef.current = window.setTimeout(() => {\n followUpMeasurementTimeoutRef.current = null;\n measureSize();\n }, 250);\n });\n }, [autoResize, measureSize]);\n\n const handleLoad: NonNullable<IframeProps['onLoad']> = (event) => {\n scheduleSizeMeasurement();\n\n const iframeDocument = iframeRef.current?.contentDocument;\n Array.from(iframeDocument?.images ?? []).forEach((image) => {\n if (image.complete) return;\n image.addEventListener('load', scheduleSizeMeasurement, { once: true });\n image.addEventListener('error', scheduleSizeMeasurement, { once: true });\n });\n iframeDocument?.fonts?.ready.then(scheduleSizeMeasurement).catch(() => undefined);\n\n onLoad?.(event);\n };\n\n useEffect(() => {\n if (!autoResize) return undefined;\n\n clearScheduledMeasurements();\n setMeasuredHeight(MIN_AUTO_HEIGHT);\n scheduleSizeMeasurement();\n\n return clearScheduledMeasurements;\n }, [autoResize, clearScheduledMeasurements, scheduleSizeMeasurement, srcDoc]);\n\n useEffect(() => {\n if (!autoResize) return undefined;\n\n window.addEventListener('resize', scheduleSizeMeasurement);\n window.visualViewport?.addEventListener('resize', scheduleSizeMeasurement);\n\n return () => {\n window.removeEventListener('resize', scheduleSizeMeasurement);\n window.visualViewport?.removeEventListener('resize', scheduleSizeMeasurement);\n };\n }, [autoResize, scheduleSizeMeasurement]);\n\n return (\n <div className={styles.wrapper}>\n {hasFullscreenView && (\n <div className={styles.toolbar}>\n <Button\n aria-expanded={isFullscreenOpen}\n aria-haspopup='dialog'\n onClick={() => setIsFullscreenOpen(true)}\n variant='tertiary'\n >\n {fullscreenLabel}\n </Button>\n </div>\n )}\n <iframe\n {...props}\n className={cx(styles.iframe, className)}\n loading={loading}\n onLoad={handleLoad}\n ref={iframeRef}\n referrerPolicy={referrerPolicy}\n sandbox={sandbox}\n srcDoc={srcDoc}\n style={\n autoResize\n ? {\n ...style,\n height: measuredHeight,\n minHeight: MIN_AUTO_HEIGHT,\n }\n : style\n }\n title={accessibleLabel}\n />\n {isFullscreenOpen && (\n <Dialog\n aria-label={`${accessibleLabel} fullscreen`}\n controls={\n <Controls>\n <Button onClick={() => setIsFullscreenOpen(false)}>{closeFullscreenLabel}</Button>\n </Controls>\n }\n fullscreen\n header={\n <Header>\n <h2>{accessibleLabel}</h2>\n </Header>\n }\n open\n setOpen={setIsFullscreenOpen}\n >\n <iframe\n {...props}\n className={cx(styles.iframe, styles['fullscreen-iframe'], className)}\n loading='eager'\n referrerPolicy={referrerPolicy}\n sandbox={sandbox}\n srcDoc={srcDoc}\n title={`${accessibleLabel} fullscreen`}\n />\n </Dialog>\n )}\n </div>\n );\n};\n"],"names":["MIN_AUTO_HEIGHT","MAX_AUTO_HEIGHT","AUTO_HEIGHT_BUFFER","Iframe","accessibleLabel","autoResize","className","closeFullscreenLabel","fullscreenLabel","hasFullscreenView","loading","onLoad","referrerPolicy","sandbox","srcDoc","style","props","iframeRef","useRef","measurementFrameRef","followUpMeasurementTimeoutRef","measuredHeight","setMeasuredHeight","useState","isFullscreenOpen","setIsFullscreenOpen","clearScheduledMeasurements","useCallback","current","window","cancelAnimationFrame","clearTimeout","measureSize","iframe","iframeDocument","contentDocument","renderedHeight","height","content","querySelector","body","contentRect","getBoundingClientRect","documentElement","Math","min","max","ceil","scrollHeight","offsetHeight","scheduleSizeMeasurement","requestAnimationFrame","setTimeout","handleLoad","event","Array","from","images","forEach","image","complete","addEventListener","once","fonts","ready","then","catch","useEffect","visualViewport","removeEventListener","styles","wrapper","toolbar","jsx","Button","cx","minHeight","Dialog","Controls","Header"],"mappings":"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"}
|
|
@@ -1,91 +1,88 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as q, jsx as l } from "react/jsx-runtime";
|
|
2
2
|
import { t as O } from "../../classix-DG18itHa.js";
|
|
3
|
-
import { useRef as
|
|
4
|
-
import { Button as
|
|
3
|
+
import { useRef as H, useState as S, useCallback as v, useEffect as U } from "react";
|
|
4
|
+
import { Button as N } from "../button/index.js";
|
|
5
|
+
import { Controls as b } from "../controls/index.js";
|
|
5
6
|
import { Dialog as L } from "../dialog/index.js";
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
iframe:
|
|
11
|
-
"fullscreen-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
accessibleLabel: m,
|
|
7
|
+
import { Header as X } from "../header/index.js";
|
|
8
|
+
import '../../assets/index19.css';const J = "_wrapper_29z62_1", K = "_toolbar_29z62_6", Q = "_iframe_29z62_12", a = {
|
|
9
|
+
wrapper: J,
|
|
10
|
+
toolbar: K,
|
|
11
|
+
iframe: Q,
|
|
12
|
+
"fullscreen-iframe": "_fullscreen-iframe_29z62_18"
|
|
13
|
+
}, u = 120, W = 12e3, Y = 8, ne = ({
|
|
14
|
+
accessibleLabel: f,
|
|
15
15
|
autoResize: n = !1,
|
|
16
16
|
className: E,
|
|
17
17
|
closeFullscreenLabel: k = "Close fullscreen",
|
|
18
|
-
fullscreenLabel:
|
|
19
|
-
hasFullscreenView:
|
|
20
|
-
loading:
|
|
18
|
+
fullscreenLabel: z = "View in fullscreen",
|
|
19
|
+
hasFullscreenView: B = !0,
|
|
20
|
+
loading: G = "lazy",
|
|
21
21
|
onLoad: d,
|
|
22
22
|
referrerPolicy: y = "no-referrer",
|
|
23
23
|
sandbox: M = "",
|
|
24
24
|
srcDoc: h,
|
|
25
25
|
style: T,
|
|
26
|
-
...
|
|
26
|
+
...A
|
|
27
27
|
}) => {
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
}, []), _ =
|
|
28
|
+
const p = H(null), o = H(null), i = H(null), [V, F] = S(u), [x, w] = S(!1), g = v(() => {
|
|
29
|
+
o.current !== null && (window.cancelAnimationFrame(o.current), o.current = null), i.current !== null && (window.clearTimeout(i.current), i.current = null);
|
|
30
|
+
}, []), _ = v(() => {
|
|
31
31
|
if (!n) return;
|
|
32
|
-
const r =
|
|
32
|
+
const r = p.current, e = r == null ? void 0 : r.contentDocument;
|
|
33
33
|
if (!r || !e) return;
|
|
34
|
-
const
|
|
34
|
+
const m = r.style.height;
|
|
35
35
|
try {
|
|
36
36
|
r.style.height = `${u}px`;
|
|
37
|
-
const c = e.querySelector("[data-iframe-content]") ?? e.body,
|
|
38
|
-
body:
|
|
37
|
+
const c = e.querySelector("[data-iframe-content]") ?? e.body, s = c.getBoundingClientRect(), {
|
|
38
|
+
body: C,
|
|
39
39
|
documentElement: I
|
|
40
|
-
} = e,
|
|
41
|
-
|
|
40
|
+
} = e, j = Math.min(Math.max(Math.ceil(Math.max(c.scrollHeight, c.offsetHeight, s.height, C.scrollHeight, C.offsetHeight, I.scrollHeight, I.offsetHeight) + Y), u), W);
|
|
41
|
+
F(j);
|
|
42
42
|
} catch {
|
|
43
43
|
} finally {
|
|
44
|
-
r.style.height =
|
|
44
|
+
r.style.height = m;
|
|
45
45
|
}
|
|
46
|
-
}, [n]), t =
|
|
47
|
-
!n ||
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
}, [n]), t = v(() => {
|
|
47
|
+
!n || o.current !== null || (o.current = window.requestAnimationFrame(() => {
|
|
48
|
+
o.current = null, _(), i.current !== null && window.clearTimeout(i.current), i.current = window.setTimeout(() => {
|
|
49
|
+
i.current = null, _();
|
|
50
50
|
}, 250);
|
|
51
51
|
}));
|
|
52
|
-
}, [n, _]),
|
|
53
|
-
var
|
|
52
|
+
}, [n, _]), $ = (r) => {
|
|
53
|
+
var m, c;
|
|
54
54
|
t();
|
|
55
|
-
const e = (
|
|
56
|
-
Array.from((e == null ? void 0 : e.images) ?? []).forEach((
|
|
57
|
-
|
|
55
|
+
const e = (m = p.current) == null ? void 0 : m.contentDocument;
|
|
56
|
+
Array.from((e == null ? void 0 : e.images) ?? []).forEach((s) => {
|
|
57
|
+
s.complete || (s.addEventListener("load", t, {
|
|
58
58
|
once: !0
|
|
59
|
-
}),
|
|
59
|
+
}), s.addEventListener("error", t, {
|
|
60
60
|
once: !0
|
|
61
61
|
}));
|
|
62
62
|
}), (c = e == null ? void 0 : e.fonts) == null || c.ready.then(t).catch(() => {
|
|
63
63
|
}), d == null || d(r);
|
|
64
64
|
};
|
|
65
|
-
return
|
|
65
|
+
return U(() => {
|
|
66
66
|
if (n)
|
|
67
|
-
return g(),
|
|
68
|
-
}, [n, g, t, h]),
|
|
67
|
+
return g(), F(u), t(), g;
|
|
68
|
+
}, [n, g, t, h]), U(() => {
|
|
69
69
|
var r;
|
|
70
70
|
if (n)
|
|
71
71
|
return window.addEventListener("resize", t), (r = window.visualViewport) == null || r.addEventListener("resize", t), () => {
|
|
72
72
|
var e;
|
|
73
73
|
window.removeEventListener("resize", t), (e = window.visualViewport) == null || e.removeEventListener("resize", t);
|
|
74
74
|
};
|
|
75
|
-
}, [n, t]), /* @__PURE__ */
|
|
76
|
-
|
|
77
|
-
/* @__PURE__ */
|
|
75
|
+
}, [n, t]), /* @__PURE__ */ q("div", { className: a.wrapper, "data-component": "iframe", children: [
|
|
76
|
+
B && /* @__PURE__ */ l("div", { className: a.toolbar, children: /* @__PURE__ */ l(N, { "aria-expanded": x, "aria-haspopup": "dialog", onClick: () => w(!0), variant: "tertiary", children: z }) }),
|
|
77
|
+
/* @__PURE__ */ l("iframe", { ...A, className: O(a.iframe, E), loading: G, onLoad: $, ref: p, referrerPolicy: y, sandbox: M, srcDoc: h, style: n ? {
|
|
78
78
|
...T,
|
|
79
|
-
height:
|
|
79
|
+
height: V,
|
|
80
80
|
minHeight: u
|
|
81
|
-
} : T, title:
|
|
82
|
-
|
|
83
|
-
/* @__PURE__ */ s("div", { className: l["fullscreen-toolbar"], children: /* @__PURE__ */ s(U, { autoFocus: !0, onClick: () => p(!1), children: k }) }),
|
|
84
|
-
/* @__PURE__ */ s("iframe", { ...F, className: O(l.iframe, l["fullscreen-iframe"], E), loading: "eager", referrerPolicy: y, sandbox: M, srcDoc: h, title: `${m} fullscreen` })
|
|
85
|
-
] })
|
|
81
|
+
} : T, title: f }),
|
|
82
|
+
x && /* @__PURE__ */ l(L, { "aria-label": `${f} fullscreen`, controls: /* @__PURE__ */ l(b, { children: /* @__PURE__ */ l(N, { onClick: () => w(!1), children: k }) }), fullscreen: !0, header: /* @__PURE__ */ l(X, { children: /* @__PURE__ */ l("h2", { children: f }) }), open: !0, setOpen: w, children: /* @__PURE__ */ l("iframe", { ...A, className: O(a.iframe, a["fullscreen-iframe"], E), loading: "eager", referrerPolicy: y, sandbox: M, srcDoc: h, title: `${f} fullscreen` }) })
|
|
86
83
|
] });
|
|
87
84
|
};
|
|
88
85
|
export {
|
|
89
|
-
|
|
86
|
+
ne as Iframe
|
|
90
87
|
};
|
|
91
88
|
//# sourceMappingURL=index.js.map
|