@dotss/tictoccroc 0.0.26 → 0.0.28

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.
Files changed (4) hide show
  1. package/dist/shared/components/Image/Image.mjs +171 -145
  2. package/dist/shared/components/Masonry/Masonry.mjs +183 -159
  3. package/dist/shared/components/Masonry/MasonryBlock/MasonryBlock.mjs +57 -55
  4. package/package.json +5 -4
package/dist/shared/components/Image/Image.mjs CHANGED
@@ -1,129 +1,155 @@
1
- import { jsxs as T, jsx as s, Fragment as p } from "react/jsx-runtime";
2
- import { forwardRef as P, useRef as W, useImperativeHandle as tt, useState as I, useEffect as G } from "react";
3
- import { Flexbox as J, Skeleton as K } from "@dotss/ui";
4
- import et from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
5
- import N from "../../utils/getImageUrl/getImageUrl.mjs";
6
- import Q from "./Image.error.mjs";
7
- const nt = 100, ct = P(
1
+ import { jsxs as U, jsx as c, Fragment as tt } from "react/jsx-runtime";
2
+ import { forwardRef as et, useRef as b, useImperativeHandle as nt, useState as S, useEffect as M } from "react";
3
+ import { Flexbox as z, Skeleton as w } from "@dotss/ui";
4
+ import ot from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
5
+ import R from "../../utils/getImageUrl/getImageUrl.mjs";
6
+ import F from "./Image.error.mjs";
7
+ const it = 100, dt = et(
8
8
  ({
9
- src: j,
10
- width: n,
11
- height: i,
12
- fit: h = "cover",
13
- position: E = "center",
14
- alt: H,
15
- scale: X = 2,
16
- onLoad: $,
17
- onLazyLoad: x,
18
- lazy: O = !1,
19
- borderRadius: f,
20
- disabledResizing: z = !1,
21
- withIntrinsicRatio: M = !1,
22
- enableBlurPlaceholder: c = !1,
23
- enableFallback: R = !1,
24
- enableErrorFallback: U = !0,
25
- renderErrorFallback: a,
26
- wrapperProps: e = {},
27
- onError: V,
28
- ...u
29
- }, Y) => {
30
- const m = W(null), _ = W(!1), y = W(null);
31
- tt(Y, () => y.current);
32
- const [d, Z] = I(!1), [g, v] = I(!1), [S, r] = I(!1), [L, b] = I(!1), q = N({
33
- mode: "original",
34
- src: j,
35
- width: n,
36
- height: i,
37
- fit: h,
38
- position: E,
39
- scale: X,
40
- disabledResizing: z
41
- }), C = c ? N({
9
+ src: l,
10
+ width: e,
11
+ height: o,
12
+ fit: r = "cover",
13
+ position: y = "center",
14
+ alt: V,
15
+ scale: W = 2,
16
+ onLoad: _,
17
+ onLazyLoad: j,
18
+ lazy: q = !1,
19
+ borderRadius: u,
20
+ disabledResizing: L = !1,
21
+ withIntrinsicRatio: A = !1,
22
+ enableBlurPlaceholder: g = !1,
23
+ enableFallback: B = !1,
24
+ enableErrorFallback: D = !0,
25
+ renderErrorFallback: d,
26
+ wrapperProps: n = {},
27
+ onError: G,
28
+ ...C
29
+ }, p) => {
30
+ const I = b(null), J = b(!1), i = b(null);
31
+ nt(p, () => i.current);
32
+ const [v, k] = S(!1), [E, m] = S(!1), [h, f] = S(!1), [x, P] = S(!1), [K, N] = S(
33
+ R({
34
+ mode: "original",
35
+ src: l,
36
+ width: e,
37
+ height: o,
38
+ fit: r,
39
+ position: y,
40
+ scale: W,
41
+ disabledResizing: L
42
+ })
43
+ ), Q = l == null ? void 0 : l.endsWith(".heic"), T = g ? R({
42
44
  mode: "blur",
43
- src: j,
44
- width: n,
45
- fit: h,
46
- position: E,
45
+ src: l,
46
+ width: e,
47
+ fit: r,
48
+ position: y,
47
49
  scale: 1 / 3,
48
- disabledResizing: z
49
- }) : null, A = (t) => {
50
- v(!0), r(!1), typeof $ == "function" && $(t);
51
- }, B = (t) => {
52
- r(!0), v(!1), typeof V == "function" && V(t.nativeEvent);
53
- }, D = () => b(!0);
54
- return G(() => {
55
- if (O && m.current) {
56
- const t = m.current, F = () => {
50
+ disabledResizing: L
51
+ }) : null, X = (t) => {
52
+ m(!0), f(!1), typeof _ == "function" && _(t);
53
+ }, Y = (t) => {
54
+ typeof G == "function" && G(t.nativeEvent), f(!0), m(!1);
55
+ }, Z = () => P(!0);
56
+ return M(() => {
57
+ if (q && I.current) {
58
+ const t = I.current, H = () => {
57
59
  if (!t) return !1;
58
- const o = t.getBoundingClientRect();
59
- return o.bottom >= 0 && o.top <= (window.innerHeight || document.documentElement.clientHeight) + nt;
60
- }, l = () => {
61
- F() && Z(!0);
62
- }, w = () => {
63
- var o;
64
- (o = window.appScreenContent) == null || o.addEventListener("scroll", l), window.addEventListener("resize", l), window.addEventListener("orientationchange", l);
65
- }, k = () => {
66
- var o;
67
- (o = window.appScreenContent) == null || o.removeEventListener("scroll", l), window.removeEventListener("resize", l), window.removeEventListener("orientationchange", l);
60
+ const a = t.getBoundingClientRect();
61
+ return a.bottom >= 0 && a.top <= (window.innerHeight || document.documentElement.clientHeight) + it;
62
+ }, s = () => {
63
+ H() && k(!0);
64
+ }, O = () => {
65
+ var a;
66
+ (a = window.appScreenContent) == null || a.addEventListener("scroll", s), window.addEventListener("resize", s), window.addEventListener("orientationchange", s);
67
+ }, $ = () => {
68
+ var a;
69
+ (a = window.appScreenContent) == null || a.removeEventListener("scroll", s), window.removeEventListener("resize", s), window.removeEventListener("orientationchange", s);
68
70
  };
69
- return l(), w(), k;
71
+ return s(), O(), $;
70
72
  }
71
- }), G(() => {
72
- typeof x == "function" && d && !_.current && (_.current = !0, x());
73
- }, [x, d]), et(() => {
74
- const t = y.current;
75
- return t != null && t.complete ? t.naturalWidth > 0 ? (t.style.transition = "none", t.style.opacity = "1", v(!0)) : (t.style.opacity = "0", r(!0)) : t && (t.style.transition = "opacity 0.3s", t.style.opacity = "0", t.onload = () => {
76
- t.style.opacity = "1", v(!0), t.onload = null;
73
+ }), M(() => {
74
+ typeof j == "function" && v && !J.current && (J.current = !0, j());
75
+ }, [j, v]), ot(() => {
76
+ const t = i.current;
77
+ return t != null && t.complete ? t.naturalWidth > 0 ? (t.style.transition = "none", t.style.opacity = "1", m(!0)) : (t.style.opacity = "0", f(!0)) : t && (t.style.transition = "opacity 0.3s", t.style.opacity = "0", t.onload = () => {
78
+ t.style.opacity = "1", m(!0), t.onload = null;
77
79
  }, t.onerror = () => {
78
- r(!0), t.onerror = null;
80
+ if (!Q) {
81
+ f(!0), t.onerror = null;
82
+ return;
83
+ }
84
+ f(!1), window.fetch(l).then(async (H) => {
85
+ const s = await H.blob(), O = (await import("heic2any")).default, $ = await O({ blob: s, toType: "image/png" });
86
+ N(URL.createObjectURL($)), i.current.onload = () => {
87
+ t.style.opacity = "1", m(!0), f(!1), i.current.onload = null, i.current.onerror = null;
88
+ }, i.current.onerror = () => {
89
+ f(!0), m(!1), i.current.onload = null, i.current.onerror = null;
90
+ };
91
+ });
79
92
  }), () => {
80
93
  t && (t.onload = null, t.onerror = null);
81
94
  };
82
- }, [d]), O ? /* @__PURE__ */ T(
83
- J,
95
+ }, [v, l, Q]), M(() => {
96
+ N(
97
+ R({
98
+ mode: "original",
99
+ src: l,
100
+ width: e,
101
+ height: o,
102
+ fit: r,
103
+ position: y,
104
+ scale: W,
105
+ disabledResizing: L
106
+ })
107
+ );
108
+ }, [l, e, o, r, y, W, L]), q ? /* @__PURE__ */ U(
109
+ z,
84
110
  {
85
- ...e,
86
- ref: m,
87
- inlineCSS: M ? {
111
+ ...n,
112
+ ref: I,
113
+ inlineCSS: A ? {
88
114
  position: "relative",
89
- paddingTop: `calc(100% / ${n} * ${i})`,
115
+ paddingTop: `calc(100% / ${e} * ${o})`,
90
116
  minWidth: "100%",
91
- borderRadius: f,
117
+ borderRadius: u,
92
118
  overflow: "hidden",
93
- ...e == null ? void 0 : e.inlineCSS
119
+ ...n == null ? void 0 : n.inlineCSS
94
120
  } : {
95
121
  position: "relative",
96
- width: n,
97
- minWidth: n,
98
- height: i,
99
- borderRadius: f,
122
+ width: e,
123
+ minWidth: e,
124
+ height: o,
125
+ borderRadius: u,
100
126
  overflow: "hidden",
101
- ...e == null ? void 0 : e.inlineCSS
127
+ ...n == null ? void 0 : n.inlineCSS
102
128
  },
103
129
  children: [
104
- R && /* @__PURE__ */ s(
105
- K,
130
+ B && /* @__PURE__ */ c(
131
+ w,
106
132
  {
107
133
  width: "100%",
108
134
  height: "100%",
109
- borderRadius: f || 0,
135
+ borderRadius: u || 0,
110
136
  inlineCSS: {
111
137
  position: "absolute",
112
138
  top: 0,
113
139
  left: 0,
114
- opacity: g || c && L ? 0 : 1,
140
+ opacity: E || g && x ? 0 : 1,
115
141
  transition: "opacity 0.3s"
116
142
  }
117
143
  }
118
144
  ),
119
- c && C && d && /* @__PURE__ */ s(
145
+ g && T && v && /* @__PURE__ */ c(
120
146
  "img",
121
147
  {
122
- src: C,
148
+ src: T,
123
149
  alt: "",
124
- width: n,
125
- height: i,
126
- onLoad: D,
150
+ width: e,
151
+ height: o,
152
+ onLoad: Z,
127
153
  draggable: !1,
128
154
  style: {
129
155
  position: "absolute",
@@ -132,27 +158,27 @@ const nt = 100, ct = P(
132
158
  width: "100%",
133
159
  height: "100%",
134
160
  filter: "blur(5px)",
135
- opacity: L && !g ? 1 : 0,
161
+ opacity: x && !E ? 1 : 0,
136
162
  transition: "opacity 0.3s",
137
- objectFit: h,
138
- objectPosition: E
163
+ objectFit: r,
164
+ objectPosition: y
139
165
  }
140
166
  }
141
167
  ),
142
- d && /* @__PURE__ */ T(p, { children: [
143
- /* @__PURE__ */ s(
168
+ v && /* @__PURE__ */ U(tt, { children: [
169
+ /* @__PURE__ */ c(
144
170
  "img",
145
171
  {
146
- ref: y,
147
- src: q,
148
- alt: H,
149
- width: n,
150
- height: i,
151
- onLoad: A,
152
- onError: B,
153
- "aria-hidden": S,
172
+ ref: i,
173
+ src: K,
174
+ alt: V,
175
+ width: e,
176
+ height: o,
177
+ onLoad: X,
178
+ onError: Y,
179
+ "aria-hidden": h,
154
180
  draggable: !1,
155
- ...u,
181
+ ...C,
156
182
  style: {
157
183
  position: "absolute",
158
184
  top: 0,
@@ -160,60 +186,60 @@ const nt = 100, ct = P(
160
186
  width: "100%",
161
187
  height: "100%",
162
188
  transition: "opacity 0.3s",
163
- ...u.style
189
+ ...C.style
164
190
  }
165
191
  }
166
192
  ),
167
- U && S && ((a == null ? void 0 : a()) || /* @__PURE__ */ s(Q, {}))
193
+ D && h && ((d == null ? void 0 : d()) || /* @__PURE__ */ c(F, {}))
168
194
  ] })
169
195
  ]
170
196
  }
171
- ) : /* @__PURE__ */ T(
172
- J,
197
+ ) : /* @__PURE__ */ U(
198
+ z,
173
199
  {
174
- ...e,
175
- ref: m,
176
- inlineCSS: M ? {
200
+ ...n,
201
+ ref: I,
202
+ inlineCSS: A ? {
177
203
  position: "relative",
178
- paddingTop: `calc(100% / ${n} * ${i})`,
204
+ paddingTop: `calc(100% / ${e} * ${o})`,
179
205
  minWidth: "100%",
180
206
  transition: "padding-top 0.2s",
181
- borderRadius: f,
207
+ borderRadius: u,
182
208
  overflow: "hidden",
183
- ...e == null ? void 0 : e.inlineCSS
209
+ ...n == null ? void 0 : n.inlineCSS
184
210
  } : {
185
211
  position: "relative",
186
- width: n,
187
- minWidth: n,
188
- height: i,
189
- borderRadius: f,
212
+ width: e,
213
+ minWidth: e,
214
+ height: o,
215
+ borderRadius: u,
190
216
  overflow: "hidden",
191
- ...e == null ? void 0 : e.inlineCSS
217
+ ...n == null ? void 0 : n.inlineCSS
192
218
  },
193
219
  children: [
194
- R && /* @__PURE__ */ s(
195
- K,
220
+ B && /* @__PURE__ */ c(
221
+ w,
196
222
  {
197
223
  width: "100%",
198
224
  height: "100%",
199
- borderRadius: f || 0,
225
+ borderRadius: u || 0,
200
226
  inlineCSS: {
201
227
  position: "absolute",
202
228
  top: 0,
203
229
  left: 0,
204
- opacity: g || c && L ? 0 : 1,
230
+ opacity: E || g && x ? 0 : 1,
205
231
  transition: "opacity 0.3s"
206
232
  }
207
233
  }
208
234
  ),
209
- c && C && /* @__PURE__ */ s(
235
+ g && T && /* @__PURE__ */ c(
210
236
  "img",
211
237
  {
212
- src: C,
238
+ src: T,
213
239
  alt: "",
214
- width: n,
215
- height: i,
216
- onLoad: D,
240
+ width: e,
241
+ height: o,
242
+ onLoad: Z,
217
243
  draggable: !1,
218
244
  style: {
219
245
  position: "absolute",
@@ -222,24 +248,24 @@ const nt = 100, ct = P(
222
248
  width: "100%",
223
249
  height: "100%",
224
250
  filter: "blur(5px)",
225
- opacity: L && !g ? 1 : 0,
251
+ opacity: x && !E ? 1 : 0,
226
252
  transition: "opacity 0.3s"
227
253
  }
228
254
  }
229
255
  ),
230
- /* @__PURE__ */ s(
256
+ /* @__PURE__ */ c(
231
257
  "img",
232
258
  {
233
- ref: y,
234
- src: q,
235
- alt: H,
236
- width: n,
237
- height: i,
238
- onLoad: A,
239
- onError: B,
240
- "aria-hidden": S,
259
+ ref: i,
260
+ src: K,
261
+ alt: V,
262
+ width: e,
263
+ height: o,
264
+ onLoad: X,
265
+ onError: Y,
266
+ "aria-hidden": h,
241
267
  draggable: !1,
242
- ...u,
268
+ ...C,
243
269
  style: {
244
270
  position: "absolute",
245
271
  top: 0,
@@ -247,16 +273,16 @@ const nt = 100, ct = P(
247
273
  width: "100%",
248
274
  height: "100%",
249
275
  transition: "opacity 0.3s",
250
- ...u.style
276
+ ...C.style
251
277
  }
252
278
  }
253
279
  ),
254
- U && S && ((a == null ? void 0 : a()) || /* @__PURE__ */ s(Q, {}))
280
+ D && h && ((d == null ? void 0 : d()) || /* @__PURE__ */ c(F, {}))
255
281
  ]
256
282
  }
257
283
  );
258
284
  }
259
285
  );
260
286
  export {
261
- ct as default
287
+ dt as default
262
288
  };
package/dist/shared/components/Masonry/Masonry.mjs CHANGED
@@ -1,161 +1,184 @@
1
- import { jsx as z } from "react/jsx-runtime";
2
- import { useState as p, useRef as i, Children as S, isValidElement as j, useEffect as g, cloneElement as q } from "react";
3
- import { Box as V, Flexbox as ct } from "@dotss/ui";
1
+ import { jsx as x } from "react/jsx-runtime";
2
+ import { useState as m, useRef as p, Children as H, isValidElement as V, useEffect as d, cloneElement as $ } from "react";
3
+ import { Box as J, Flexbox as ct } from "@dotss/ui";
4
4
  import lt from "@dotss/ui/core/useTheme";
5
- import { findImageInChildren as x, getHorizontalLayoutRows as ft, getNextIndexHorizontalFromRows as pt, findNextFocusableElement as y } from "./Masonry.utils.mjs";
6
- import $ from "./MasonryBlock/MasonryBlock.mjs";
7
- import J from "../../../teacher/profile/components/ActivityGallery/ActivityGalleryItem/ActivityGalleryItem.mjs";
5
+ import { findImageInChildren as F, getHorizontalLayoutRows as ft, getNextIndexHorizontalFromRows as pt, findNextFocusableElement as A } from "./Masonry.utils.mjs";
6
+ import Q from "./MasonryBlock/MasonryBlock.mjs";
7
+ import Y from "../../../teacher/profile/components/ActivityGallery/ActivityGalleryItem/ActivityGalleryItem.mjs";
8
8
  function kt({
9
- children: A,
10
- columnCount: F = 2,
9
+ children: E,
10
+ columnCount: W = 2,
11
11
  rowCount: B = 2,
12
- spacing: s = 2,
13
- edgeSpacing: d = 0,
14
- direction: b = "vertical",
15
- defaultContainerWidth: Q = 360,
16
- defaultContainerHeight: Y = 0,
17
- ...a
12
+ spacing: c = 2,
13
+ edgeSpacing: b = 0,
14
+ direction: k = "vertical",
15
+ defaultContainerWidth: Z = 360,
16
+ defaultContainerHeight: _ = 0,
17
+ ...l
18
18
  }) {
19
- const { spacing: E } = lt(), [Z, _] = p(Q), [K, O] = p(Y), [H, tt] = p(0), k = 4 / 3, l = (Z - s) / F, f = b === "horizontal" ? (K - s) / B : l * k, o = i(null), u = i([]), R = i([]), T = i(!1), M = i(!0), W = i(0), C = i(0), m = i(0), [h, et] = p(
20
- S.toArray(A).filter(j).filter((e) => e.type === $ || e.type === J)
21
- ), [N, rt] = p(
22
- h.map((e) => {
23
- var t;
24
- return ((t = x(e.props.children)) == null ? void 0 : t.props.src) ?? "";
19
+ const { spacing: T } = lt(), [K, O] = m(Z), [tt, et] = m(_), [N, rt] = m(0), M = 4 / 3, h = (K - c) / W, f = k === "horizontal" ? (tt - c) / B : h * M, a = p(null), g = p([]), R = p([]), D = p(!1), L = p(!0), P = p(0), I = p(0), v = p(0), [w, nt] = m(
20
+ H.toArray(E).filter(V).filter((t) => t.type === Q || t.type === Y)
21
+ ), [y, ot] = m(
22
+ w.map((t) => {
23
+ var e;
24
+ return ((e = F(t.props.children)) == null ? void 0 : e.props.src) ?? "";
25
25
  })
26
- ), [D, nt] = p(
27
- h.map((e) => {
28
- var t;
26
+ ), [z, U] = m(
27
+ w.map((t) => {
28
+ var e;
29
29
  return {
30
- src: ((t = x(e.props.children)) == null ? void 0 : t.props.src) ?? "",
31
- width: e.props.width ?? l,
32
- height: e.props.height ?? f
30
+ src: ((e = F(t.props.children)) == null ? void 0 : e.props.src) ?? "",
31
+ width: t.props.width ?? h,
32
+ height: t.props.height ?? f
33
33
  };
34
34
  })
35
- ), P = h.length, U = (e) => {
36
- var t, r;
37
- T.current = !0, W.current = e.clientX - (((t = o.current) == null ? void 0 : t.offsetLeft) || 0), C.current = ((r = o.current) == null ? void 0 : r.scrollLeft) || 0;
38
- }, X = (e) => {
39
- T.current && (e.currentTarget.style.cursor = "grabbing", o.current && (o.current.scrollLeft = C.current - (e.clientX - o.current.offsetLeft - W.current)));
40
- }, L = (e) => {
35
+ ), X = w.length, G = (t) => {
36
+ var e, r;
37
+ D.current = !0, P.current = t.clientX - (((e = a.current) == null ? void 0 : e.offsetLeft) || 0), I.current = ((r = a.current) == null ? void 0 : r.scrollLeft) || 0;
38
+ }, j = (t) => {
39
+ D.current && (t.currentTarget.style.cursor = "grabbing", a.current && (a.current.scrollLeft = I.current - (t.clientX - a.current.offsetLeft - P.current)));
40
+ }, C = (t) => {
41
41
  var r;
42
- T.current = !1, C.current !== ((r = o.current) == null ? void 0 : r.scrollLeft) ? (e.currentTarget.style.cursor = "grab", M.current = !1, m.current && cancelAnimationFrame(m.current), m.current = requestAnimationFrame(() => {
43
- M.current = !0;
44
- })) : M.current = !0;
45
- }, ot = (e) => (t) => {
46
- t.stopPropagation();
42
+ D.current = !1, I.current !== ((r = a.current) == null ? void 0 : r.scrollLeft) ? (t.currentTarget.style.cursor = "grab", L.current = !1, v.current && cancelAnimationFrame(v.current), v.current = requestAnimationFrame(() => {
43
+ L.current = !0;
44
+ })) : L.current = !0;
45
+ }, st = (t) => (e) => {
46
+ e.stopPropagation();
47
47
  let r = null;
48
- switch (t.key) {
48
+ switch (e.key) {
49
49
  case "ArrowRight":
50
- t.preventDefault(), r = y(t.currentTarget, "right", u.current);
50
+ e.preventDefault(), r = A(e.currentTarget, "right", g.current);
51
51
  break;
52
52
  case "ArrowLeft":
53
- t.preventDefault(), r = y(t.currentTarget, "left", u.current);
53
+ e.preventDefault(), r = A(e.currentTarget, "left", g.current);
54
54
  break;
55
55
  case "ArrowDown":
56
- t.preventDefault(), r = y(t.currentTarget, "down", u.current);
56
+ e.preventDefault(), r = A(e.currentTarget, "down", g.current);
57
57
  break;
58
58
  case "ArrowUp":
59
- t.preventDefault(), r = y(t.currentTarget, "up", u.current);
59
+ e.preventDefault(), r = A(e.currentTarget, "up", g.current);
60
60
  break;
61
61
  case "Enter":
62
62
  case " ": {
63
- t.preventDefault(), t.currentTarget.click();
63
+ e.preventDefault(), e.currentTarget.click();
64
64
  return;
65
65
  }
66
66
  default:
67
67
  return;
68
68
  }
69
- r == null || r.focus(), e == null || e(t);
70
- }, st = (e) => (t) => {
71
- if (t.stopPropagation(), t.key === "Enter" || t.key === " ") {
72
- t.preventDefault(), t.currentTarget.click();
69
+ r == null || r.focus(), t == null || t(e);
70
+ }, at = (t) => (e) => {
71
+ if (e.stopPropagation(), e.key === "Enter" || e.key === " ") {
72
+ e.preventDefault(), e.currentTarget.click();
73
73
  return;
74
74
  }
75
- const r = Number(t.currentTarget.getAttribute("aria-posinset")) - 1, n = t.key.replace("Arrow", "").toLowerCase();
76
- if (!["left", "right", "up", "down"].includes(n)) {
77
- e == null || e(t);
75
+ const r = Number(e.currentTarget.getAttribute("aria-posinset")) - 1, o = e.key.replace("Arrow", "").toLowerCase();
76
+ if (!["left", "right", "up", "down"].includes(o)) {
77
+ t == null || t(e);
78
78
  return;
79
79
  }
80
- t.preventDefault();
81
- const v = pt(
80
+ e.preventDefault();
81
+ const s = pt(
82
82
  R.current,
83
83
  r,
84
- n
85
- ), w = u.current[v ?? -1];
86
- w == null || w.focus(), e == null || e(t);
87
- }, at = (e) => (t) => {
88
- u.current[e] = t;
89
- }, it = (e, t, r) => (n) => {
90
- R.current[t] || (R.current[t] = []), u.current[e] = n, R.current[t][r] = n;
91
- }, G = (e) => (t) => {
92
- tt(Number(t.currentTarget.getAttribute("aria-posinset")) - 1), e == null || e(t);
84
+ o
85
+ ), i = g.current[s ?? -1];
86
+ i == null || i.focus(), t == null || t(e);
87
+ }, it = (t) => (e) => {
88
+ g.current[t] = e;
89
+ }, ut = (t, e, r) => (o) => {
90
+ R.current[e] || (R.current[e] = []), g.current[t] = o, R.current[e][r] = o;
91
+ }, q = (t) => (e) => {
92
+ rt(Number(e.currentTarget.getAttribute("aria-posinset")) - 1), t == null || t(e);
93
93
  };
94
- if (g(() => {
95
- const e = o.current, t = (r) => {
96
- M.current || r.stopPropagation();
94
+ if (d(() => {
95
+ const t = a.current, e = (r) => {
96
+ L.current || r.stopPropagation();
97
97
  };
98
- return e == null || e.addEventListener("click", t), () => {
99
- e == null || e.removeEventListener("click", t);
98
+ return t == null || t.addEventListener("click", e), () => {
99
+ t == null || t.removeEventListener("click", e);
100
100
  };
101
- }, []), g(() => {
102
- const e = o.current, t = (r) => {
101
+ }, []), d(() => {
102
+ const t = a.current, e = (r) => {
103
103
  r.stopPropagation();
104
104
  };
105
- return e == null || e.addEventListener("touchmove", t), () => {
106
- e == null || e.removeEventListener("touchmove", t);
105
+ return t == null || t.addEventListener("touchmove", e), () => {
106
+ t == null || t.removeEventListener("touchmove", e);
107
107
  };
108
- }, []), g(() => {
109
- const e = S.toArray(A).filter(j).filter((r) => r.type === $ || r.type === J), t = e.map((r) => {
110
- var n;
111
- return ((n = x(r.props.children)) == null ? void 0 : n.props.src) ?? "";
108
+ }, []), d(() => {
109
+ const t = H.toArray(E).filter(V).filter((r) => r.type === Q || r.type === Y), e = t.map((r) => {
110
+ var o;
111
+ return ((o = F(r.props.children)) == null ? void 0 : o.props.src) ?? "";
112
112
  }).filter(Boolean);
113
- et(e), rt(t);
114
- }, [A]), g(() => {
115
- f <= 0 || N.forEach((e) => {
116
- const t = new window.Image();
117
- t.src = e, t.onload = () => {
118
- nt(
119
- (r) => r.map((n) => (n.src === e && (n.width = t.width / t.height * (n.height ?? f), n.height = n.height ?? f), n))
120
- ), t.onload = null;
121
- }, t.onerror = () => {
122
- t.onload = null;
113
+ nt(t), ot(e);
114
+ }, [E]), d(() => {
115
+ if (f <= 0 || y.length === 0) return;
116
+ const t = {};
117
+ let e = 0;
118
+ const r = y.length;
119
+ y.forEach((o) => {
120
+ const s = new window.Image();
121
+ s.src = o, s.onload = () => {
122
+ t[o] = {
123
+ imgWidth: s.width,
124
+ imgHeight: s.height
125
+ }, e++, e === r && U(
126
+ (i) => i.map((n) => {
127
+ const u = t[n.src];
128
+ return u ? {
129
+ ...n,
130
+ width: u.imgWidth / u.imgHeight * (n.height ?? f),
131
+ height: n.height ?? f
132
+ } : n;
133
+ })
134
+ ), s.onload = null;
135
+ }, s.onerror = () => {
136
+ e++, e === r && U(
137
+ (i) => i.map((n) => {
138
+ const u = t[n.src];
139
+ return u ? {
140
+ ...n,
141
+ width: u.imgWidth / u.imgHeight * (n.height ?? f),
142
+ height: n.height ?? f
143
+ } : n;
144
+ })
145
+ ), s.onload = null;
123
146
  };
124
147
  });
125
- }, [N, f]), g(() => {
126
- const e = () => {
127
- var t, r, n;
128
- _(((r = (t = o.current) == null ? void 0 : t.parentElement) == null ? void 0 : r.offsetWidth) ?? 0), O(((n = o.current) == null ? void 0 : n.offsetHeight) ?? 0);
148
+ }, [y, f]), d(() => {
149
+ const t = () => {
150
+ var e, r, o;
151
+ O(((r = (e = a.current) == null ? void 0 : e.parentElement) == null ? void 0 : r.offsetWidth) ?? 0), et(((o = a.current) == null ? void 0 : o.offsetHeight) ?? 0);
129
152
  };
130
- return e(), window.addEventListener("resize", e), () => {
131
- window.removeEventListener("resize", e);
153
+ return t(), window.addEventListener("resize", t), () => {
154
+ window.removeEventListener("resize", t);
132
155
  };
133
- }, []), g(() => () => {
134
- m.current && cancelAnimationFrame(m.current);
135
- }, []), b === "horizontal") {
136
- const e = ft(
137
- D,
138
- h,
156
+ }, []), d(() => () => {
157
+ v.current && cancelAnimationFrame(v.current);
158
+ }, []), k === "horizontal") {
159
+ const t = ft(
160
+ z,
161
+ w,
139
162
  B,
140
- l * k / 2
163
+ h * M / 2
141
164
  );
142
- let t = l * k / 2;
143
- t = t <= 0 ? 120 : t;
165
+ let e = h * M / 2;
166
+ e = e <= 0 ? 120 : e;
144
167
  let r = 0;
145
- return /* @__PURE__ */ z(
146
- V,
168
+ return /* @__PURE__ */ x(
169
+ J,
147
170
  {
148
- ref: o,
171
+ ref: a,
149
172
  role: "list",
150
173
  "aria-label": "콘텐츠",
151
174
  "aria-orientation": "horizontal",
152
- onMouseDown: U,
153
- onMouseMove: X,
154
- onMouseUp: L,
155
- onMouseLeave: L,
156
- pl: d,
157
- pr: d,
158
- ...a,
175
+ onMouseDown: G,
176
+ onMouseMove: j,
177
+ onMouseUp: C,
178
+ onMouseLeave: C,
179
+ pl: b,
180
+ pr: b,
181
+ ...l,
159
182
  inlineCSS: {
160
183
  display: "grid",
161
184
  position: "relative",
@@ -168,74 +191,75 @@ function kt({
168
191
  "&::-webkit-scrollbar": {
169
192
  display: "none"
170
193
  },
171
- ...a == null ? void 0 : a.inlineCSS
194
+ ...l == null ? void 0 : l.inlineCSS
172
195
  },
173
- children: e.map((n, v) => {
174
- const w = v === e.length - 1;
175
- return /* @__PURE__ */ z(ct, { gap: s, children: n.map((c, ut) => {
176
- const I = r++;
177
- return q(c, {
178
- setInnerRef: it(I, v, ut),
179
- tabIndex: I === H ? 0 : -1,
196
+ children: t.map((o, s) => {
197
+ const i = s === t.length - 1;
198
+ return /* @__PURE__ */ x(ct, { gap: c, children: o.map((n, u) => {
199
+ const S = r++;
200
+ return $(n, {
201
+ setInnerRef: ut(S, s, u),
202
+ tabIndex: S === N ? 0 : -1,
180
203
  role: "listitem",
181
- "aria-posinset": I + 1,
182
- "aria-setsize": P,
183
- width: c.props.width ?? t,
184
- height: c.props.height ?? f,
185
- direction: b,
186
- spacing: s,
187
- sourceMetadata: D,
188
- onKeyDown: st(c.props.onKeyDown),
189
- onFocus: G(c.props.onFocus),
204
+ "aria-posinset": S + 1,
205
+ "aria-setsize": X,
206
+ width: n.props.width ?? e,
207
+ height: n.props.height ?? f,
208
+ direction: k,
209
+ spacing: c,
210
+ sourceMetadata: z,
211
+ onKeyDown: at(n.props.onKeyDown),
212
+ onFocus: q(n.props.onFocus),
190
213
  style: {
191
- marginBottom: w ? 0 : E.content(s),
192
- ...c.props.style
214
+ marginBottom: i ? 0 : T.content(c),
215
+ ...n.props.style
193
216
  },
194
- ...c.props
217
+ ...n.props
195
218
  });
196
- }) }, `masonry-row-${v}`);
219
+ }) }, `masonry-row-${s}`);
197
220
  })
198
221
  }
199
222
  );
200
223
  }
201
- return /* @__PURE__ */ z(
202
- V,
224
+ return /* @__PURE__ */ x(
225
+ J,
203
226
  {
204
- ref: o,
227
+ ref: a,
205
228
  role: "list",
206
229
  "aria-label": "콘텐츠",
207
230
  "aria-orientation": "vertical",
208
- onMouseDown: U,
209
- onMouseMove: X,
210
- onMouseUp: L,
211
- onMouseLeave: L,
212
- pt: d,
213
- pb: d,
214
- ...a,
231
+ onMouseDown: G,
232
+ onMouseMove: j,
233
+ onMouseUp: C,
234
+ onMouseLeave: C,
235
+ pt: b,
236
+ pb: b,
237
+ ...l,
215
238
  inlineCSS: {
216
239
  width: "100%",
217
240
  position: "relative",
218
- columnCount: F,
219
- columnGap: E.content(s),
220
- marginTop: -E.content(s),
221
- ...a == null ? void 0 : a.inlineCSS
241
+ transform: "translate3d(0, 0, 0)",
242
+ columnCount: W,
243
+ columnGap: T.content(c),
244
+ marginTop: -T.content(c),
245
+ ...l == null ? void 0 : l.inlineCSS
222
246
  },
223
- children: S.map(
224
- h,
225
- (e, t) => q(e, {
226
- setInnerRef: at(t),
247
+ children: H.map(
248
+ w,
249
+ (t, e) => $(t, {
250
+ setInnerRef: it(e),
227
251
  role: "listitem",
228
- tabIndex: t === H ? 0 : -1,
229
- "aria-posinset": t + 1,
230
- "aria-setsize": P,
231
- width: e.props.width ?? l,
232
- height: e.props.height ?? l * k / 2,
233
- direction: b,
234
- spacing: s,
235
- sourceMetadata: D,
236
- onKeyDown: ot(e.props.onKeyDown),
237
- onFocus: G(e.props.onFocus),
238
- ...e.props
252
+ tabIndex: e === N ? 0 : -1,
253
+ "aria-posinset": e + 1,
254
+ "aria-setsize": X,
255
+ width: t.props.width ?? h,
256
+ height: t.props.height ?? h * M / 2,
257
+ direction: k,
258
+ spacing: c,
259
+ sourceMetadata: z,
260
+ onKeyDown: st(t.props.onKeyDown),
261
+ onFocus: q(t.props.onFocus),
262
+ ...t.props
239
263
  })
240
264
  )
241
265
  }
package/dist/shared/components/Masonry/MasonryBlock/MasonryBlock.mjs CHANGED
@@ -1,84 +1,87 @@
1
- import { jsxs as w, jsx as g } from "react/jsx-runtime";
2
- import { forwardRef as I, useState as u, useRef as A, useImperativeHandle as B, useEffect as m, Children as F, isValidElement as W, cloneElement as z } from "react";
3
- import { Flexbox as s, Skeleton as N } from "@dotss/ui";
4
- import D from "@dotss/ui/core/useTheme";
5
- import L from "../../Image/Image.mjs";
6
- import { findImageInChildren as V } from "../Masonry.utils.mjs";
7
- const P = I(
1
+ import { jsxs as C, jsx as S } from "react/jsx-runtime";
2
+ import { forwardRef as B, useMemo as x, useState as v, useRef as F, useImperativeHandle as W, useEffect as y, Children as z, isValidElement as N, cloneElement as D } from "react";
3
+ import { Flexbox as l, Skeleton as L } from "@dotss/ui";
4
+ import V from "@dotss/ui/core/useTheme";
5
+ import $ from "../../Image/Image.mjs";
6
+ import { findImageInChildren as q } from "../Masonry.utils.mjs";
7
+ const U = B(
8
8
  ({
9
- children: S,
9
+ children: s,
10
10
  width: c = 0,
11
- height: d = 0,
12
- spacing: C = 2,
13
- borderRadius: r = 0,
14
- direction: v = "vertical",
15
- setInnerRef: l,
16
- sourceMetadata: f,
11
+ height: h = 0,
12
+ spacing: T = 2,
13
+ borderRadius: o = 0,
14
+ direction: b = "vertical",
15
+ setInnerRef: t,
16
+ sourceMetadata: r,
17
17
  ...e
18
- }, x) => {
18
+ }, E) => {
19
19
  var k;
20
- const { spacing: T } = D(), p = V(S), y = (k = p == null ? void 0 : p.props) == null ? void 0 : k.src, i = f == null ? void 0 : f.find((n) => n.src === y), [t, E] = u((i == null ? void 0 : i.width) ?? c ?? 0), [o, j] = u((i == null ? void 0 : i.height) ?? d ?? 0), [a, b] = u(!1), h = A(null);
21
- B(x, () => h.current);
22
- const H = (n) => {
23
- n.propertyName !== "padding-top" && n.propertyName !== "padding-left" || b(!0);
20
+ const { spacing: j } = V(), f = x(() => q(s), [s]), p = (k = f == null ? void 0 : f.props) == null ? void 0 : k.src, i = x(
21
+ () => r == null ? void 0 : r.find((n) => n.src === p),
22
+ [r, p]
23
+ ), [g, H] = v((i == null ? void 0 : i.width) ?? c ?? 0), [d, I] = v((i == null ? void 0 : i.height) ?? h ?? 0), [w, m] = v(!1), u = F(null);
24
+ W(E, () => u.current);
25
+ const A = (n) => {
26
+ n.propertyName !== "padding-top" && n.propertyName !== "padding-left" || m(!0);
24
27
  };
25
- return m(() => {
26
- E((i == null ? void 0 : i.width) ?? c ?? 0), j((i == null ? void 0 : i.height) ?? d ?? 0);
27
- }, [c, d, i == null ? void 0 : i.width, i == null ? void 0 : i.height]), m(() => {
28
- if (!t || !o) return;
28
+ return y(() => {
29
+ H((i == null ? void 0 : i.width) ?? c ?? 0), I((i == null ? void 0 : i.height) ?? h ?? 0);
30
+ }, [c, h, i == null ? void 0 : i.width, i == null ? void 0 : i.height]), y(() => {
31
+ if (!(i != null && i.width) || !(i != null && i.height)) return;
29
32
  const n = setTimeout(() => {
30
- b(!0);
33
+ m(!0);
31
34
  }, 500);
32
35
  return () => {
33
36
  clearTimeout(n);
34
37
  };
35
- }, [t, o]), m(() => {
36
- l == null || l(h.current);
37
- }, [l]), /* @__PURE__ */ w(
38
- s,
38
+ }, [i == null ? void 0 : i.width, i == null ? void 0 : i.height]), y(() => {
39
+ t == null || t(u.current);
40
+ }, [t]), /* @__PURE__ */ C(
41
+ l,
39
42
  {
40
- ref: h,
43
+ ref: u,
41
44
  flexDirection: "column",
42
45
  ...e,
43
46
  inlineCSS: {
47
+ transform: "translate3d(0, 0, 0)",
44
48
  breakInside: "avoid",
45
49
  ...e == null ? void 0 : e.inlineCSS
46
50
  },
47
51
  children: [
48
- v === "vertical" && /* @__PURE__ */ g(
49
- s,
52
+ b === "vertical" && /* @__PURE__ */ S(
53
+ l,
50
54
  {
51
55
  inlineCSS: {
52
- minHeight: T.content(C)
56
+ minHeight: j.content(T)
53
57
  }
54
58
  }
55
59
  ),
56
- /* @__PURE__ */ g(
57
- s,
60
+ /* @__PURE__ */ S(
61
+ l,
58
62
  {
59
- onTransitionEnd: H,
63
+ onTransitionEnd: A,
60
64
  inlineCSS: {
61
65
  position: "relative",
62
66
  overflow: "hidden",
63
67
  scrollbarWidth: "none",
64
- transform: "translate3d(0, 0, 0)",
65
68
  "&::-webkit-scrollbar": {
66
69
  display: "none"
67
70
  },
68
71
  ...e == null ? void 0 : e.inlineCSS
69
72
  },
70
- style: v === "vertical" ? {
71
- borderRadius: r,
72
- paddingTop: `calc(${o / t} * 100%)`,
73
+ style: b === "vertical" ? {
74
+ borderRadius: o,
75
+ paddingTop: `calc(${d / g} * 100%)`,
73
76
  transition: "padding-top 0.3s 0.1s"
74
77
  } : {
75
- borderRadius: r,
76
- paddingLeft: t,
77
- paddingTop: o,
78
+ borderRadius: o,
79
+ paddingLeft: g,
80
+ paddingTop: d,
78
81
  transition: "padding-top 0.3s 0.1s, padding-left 0.3s 0.1s"
79
82
  },
80
- children: /* @__PURE__ */ w(
81
- s,
83
+ children: /* @__PURE__ */ C(
84
+ l,
82
85
  {
83
86
  inlineCSS: {
84
87
  position: "absolute",
@@ -87,32 +90,31 @@ const P = I(
87
90
  width: "100%",
88
91
  height: "100%",
89
92
  overflow: "hidden",
90
- transform: "translate3d(0, 0, 0)",
91
- borderRadius: r,
93
+ borderRadius: o,
92
94
  transition: "border-radius 0.3s 0.1s",
93
95
  zIndex: 1
94
96
  },
95
97
  children: [
96
- /* @__PURE__ */ g(
97
- N,
98
+ /* @__PURE__ */ S(
99
+ L,
98
100
  {
99
- borderRadius: r,
101
+ borderRadius: o,
100
102
  inlineCSS: {
101
103
  position: "absolute",
102
104
  top: 0,
103
105
  left: 0,
104
106
  width: "100%",
105
107
  height: "100%",
106
- opacity: !y || a ? 0 : 1,
108
+ opacity: !p || w ? 0 : 1,
107
109
  transition: "opacity 0.3s 0.1s",
108
- pointerEvents: a ? "none" : void 0,
110
+ pointerEvents: w ? "none" : void 0,
109
111
  zIndex: 2
110
112
  }
111
113
  }
112
114
  ),
113
- F.toArray(S).filter(W).map((n) => n.type === L || n.type === "img" ? z(n, {
114
- width: t,
115
- height: o,
115
+ z.toArray(s).filter(N).map((n) => n.type === $ || n.type === "img" ? D(n, {
116
+ width: g,
117
+ height: d,
116
118
  draggable: !1,
117
119
  style: {
118
120
  overflow: "hidden",
@@ -133,5 +135,5 @@ const P = I(
133
135
  }
134
136
  );
135
137
  export {
136
- P as default
138
+ U as default
137
139
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dotss/tictoccroc",
3
3
  "type": "module",
4
- "version": "0.0.26",
4
+ "version": "0.0.28",
5
5
  "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
6
6
  "main": "./dist/index.mjs",
7
7
  "module": "./dist/index.mjs",
@@ -95,8 +95,8 @@
95
95
  "@vitejs/plugin-react-swc": "^3.10.0",
96
96
  "eslint-plugin-storybook": "^9.0.4",
97
97
  "glob": "^10.4.2",
98
- "react": "^18.3.1",
99
- "react-dom": "^18.3.1",
98
+ "react": "^19.0.0",
99
+ "react-dom": "^19.0.0",
100
100
  "storybook": "^9.0.4",
101
101
  "vite-plugin-dts": "^4.5.4",
102
102
  "vitest": "^1.6.0"
@@ -107,7 +107,8 @@
107
107
  "@emotion/styled": "^11.14.0",
108
108
  "dayjs": "^1.11.13",
109
109
  "react": "^18.0.0 || 19.0.0",
110
- "react-dom": "^18.0.0 || 19.0.0"
110
+ "react-dom": "^18.0.0 || 19.0.0",
111
+ "heic2any": "^0.0.4"
111
112
  },
112
113
  "publishConfig": {
113
114
  "access": "public"