@dotss/tictoccroc 0.0.2 → 0.0.3

package/dist/shared/components/Masonry/Masonry.mjs

@@ -1,134 +1,149 @@
-import { jsx as D } from "react/jsx-runtime";
-import { useState as m, useRef as u, Children as T, isValidElement as G, useEffect as l, cloneElement as x } from "react";
-import { Box as j, Flexbox as st } from "@dotss/ui";
-import at from "@dotss/ui/core/useTheme";
-import { findImageInChildren as ut, getHorizontalLayoutRows as it, getNextIndexHorizontalFromRows as ct, findNextFocusableElement as M } from "./Masonry.utils.mjs";
-import q from "./MasonryBlock/MasonryBlock.mjs";
-import V from "../../../teacher/profile/components/ActivityGallery/ActivityGalleryItem/ActivityGalleryItem.mjs";
-function wt({
-  children: h,
-  columnCount: z = 2,
-  rowCount: S = 2,
-  spacing: c = 2,
-  edgeSpacing: v = 0,
-  direction: w = "vertical",
-  defaultContainerWidth: $ = 0,
-  defaultContainerHeight: J = 0,
-  ...d
+import { jsx as T } from "react/jsx-runtime";
+import { useState as p, useRef as i, Children as x, isValidElement as G, useEffect as g, cloneElement as j } from "react";
+import { Box as q, Flexbox as ct } from "@dotss/ui";
+import ut from "@dotss/ui/core/useTheme";
+import { findImageInChildren as z, getHorizontalLayoutRows as lt, getNextIndexHorizontalFromRows as ft, findNextFocusableElement as L } from "./Masonry.utils.mjs";
+import V from "./MasonryBlock/MasonryBlock.mjs";
+import $ from "../../../teacher/profile/components/ActivityGallery/ActivityGalleryItem/ActivityGalleryItem.mjs";
+function bt({
+  children: y,
+  columnCount: S = 2,
+  rowCount: F = 2,
+  spacing: u = 2,
+  edgeSpacing: d = 0,
+  direction: v = "vertical",
+  defaultContainerWidth: J = 360,
+  defaultContainerHeight: Q = 0,
+  ...a
 }) {
-  const { spacing: y } = at(), [Q, Y] = m($), [Z, _] = m(J), [F, K] = m(0), o = u(null), i = u([]), b = u([]), A = u(!1), R = u(!0), H = u(0), E = u(0), f = u(0), k = 4 / 3, p = (Q - c) / z, g = w === "horizontal" ? (Z - c) / S : p * k, [I, B] = m(
-    T.toArray(h).filter(G).filter((t) => t.type === q || t.type === V)
-  ), [W, O] = m([]), N = I.length, P = (t) => {
-    var r, e;
-    A.current = !0, H.current = t.clientX - (((r = o.current) == null ? void 0 : r.offsetLeft) || 0), E.current = ((e = o.current) == null ? void 0 : e.scrollLeft) || 0;
-  }, U = (t) => {
-    A.current && (t.currentTarget.style.cursor = "grabbing", o.current && (o.current.scrollLeft = E.current - (t.clientX - o.current.offsetLeft - H.current)));
-  }, L = (t) => {
-    var e;
-    A.current = !1, E.current !== ((e = o.current) == null ? void 0 : e.scrollLeft) ? (t.currentTarget.style.cursor = "grab", R.current = !1, f.current && cancelAnimationFrame(f.current), f.current = requestAnimationFrame(() => {
-      R.current = !0;
-    })) : R.current = !0;
-  }, tt = (t) => (r) => {
-    r.stopPropagation();
-    let e = null;
-    switch (r.key) {
+  const { spacing: A } = ut(), [Y, Z] = p(J), [_, K] = p(Q), [H, O] = p(0), w = 4 / 3, l = (Y - u) / S, f = v === "horizontal" ? (_ - u) / F : l * w, o = i(null), c = i([]), b = i([]), E = i(!1), k = i(!0), B = i(0), I = i(0), m = i(0), [h, tt] = p(
+    x.toArray(y).filter(G).filter((e) => e.type === V || e.type === $)
+  ), [W, et] = p(
+    h.map((e) => {
+      var t;
+      return ((t = z(e.props.children)) == null ? void 0 : t.props.src) ?? "";
+    })
+  ), [C, rt] = p(
+    h.map((e) => {
+      var t;
+      return {
+        src: ((t = z(e.props.children)) == null ? void 0 : t.props.src) ?? "",
+        width: e.props.width ?? l,
+        height: e.props.height ?? f
+      };
+    })
+  ), N = h.length, P = (e) => {
+    var t, r;
+    E.current = !0, B.current = e.clientX - (((t = o.current) == null ? void 0 : t.offsetLeft) || 0), I.current = ((r = o.current) == null ? void 0 : r.scrollLeft) || 0;
+  }, U = (e) => {
+    E.current && (e.currentTarget.style.cursor = "grabbing", o.current && (o.current.scrollLeft = I.current - (e.clientX - o.current.offsetLeft - B.current)));
+  }, M = (e) => {
+    var r;
+    E.current = !1, I.current !== ((r = o.current) == null ? void 0 : r.scrollLeft) ? (e.currentTarget.style.cursor = "grab", k.current = !1, m.current && cancelAnimationFrame(m.current), m.current = requestAnimationFrame(() => {
+      k.current = !0;
+    })) : k.current = !0;
+  }, nt = (e) => (t) => {
+    t.stopPropagation();
+    let r = null;
+    switch (t.key) {
       case "ArrowRight":
-        r.preventDefault(), e = M(r.currentTarget, "right", i.current);
+        t.preventDefault(), r = L(t.currentTarget, "right", c.current);
         break;
       case "ArrowLeft":
-        r.preventDefault(), e = M(r.currentTarget, "left", i.current);
+        t.preventDefault(), r = L(t.currentTarget, "left", c.current);
         break;
       case "ArrowDown":
-        r.preventDefault(), e = M(r.currentTarget, "down", i.current);
+        t.preventDefault(), r = L(t.currentTarget, "down", c.current);
         break;
       case "ArrowUp":
-        r.preventDefault(), e = M(r.currentTarget, "up", i.current);
+        t.preventDefault(), r = L(t.currentTarget, "up", c.current);
         break;
       case "Enter":
       case " ": {
-        r.preventDefault(), r.currentTarget.click();
+        t.preventDefault(), t.currentTarget.click();
         return;
       }
       default:
         return;
     }
-    e == null || e.focus(), t == null || t(r);
-  }, rt = (t) => (r) => {
-    if (r.stopPropagation(), r.key === "Enter" || r.key === " ") {
-      r.preventDefault(), r.currentTarget.click();
+    r == null || r.focus(), e == null || e(t);
+  }, ot = (e) => (t) => {
+    if (t.stopPropagation(), t.key === "Enter" || t.key === " ") {
+      t.preventDefault(), t.currentTarget.click();
       return;
     }
-    const e = Number(r.currentTarget.getAttribute("aria-posinset")) - 1, n = r.key.replace("Arrow", "").toLowerCase();
+    const r = Number(t.currentTarget.getAttribute("aria-posinset")) - 1, n = t.key.replace("Arrow", "").toLowerCase();
     if (!["left", "right", "up", "down"].includes(n)) {
-      t == null || t(r);
+      e == null || e(t);
       return;
     }
-    r.preventDefault();
-    const a = ct(
+    t.preventDefault();
+    const R = ft(
       b.current,
-      e,
+      r,
       n
-    ), s = i.current[a ?? -1];
-    s == null || s.focus(), t == null || t(r);
-  }, et = (t) => (r) => {
-    i.current[t] = r;
-  }, nt = (t, r, e) => (n) => {
-    b.current[r] || (b.current[r] = []), i.current[t] = n, b.current[r][e] = n;
-  }, X = (t) => (r) => {
-    K(Number(r.currentTarget.getAttribute("aria-posinset")) - 1), t == null || t(r);
+    ), s = c.current[R ?? -1];
+    s == null || s.focus(), e == null || e(t);
+  }, st = (e) => (t) => {
+    c.current[e] = t;
+  }, at = (e, t, r) => (n) => {
+    b.current[t] || (b.current[t] = []), c.current[e] = n, b.current[t][r] = n;
+  }, X = (e) => (t) => {
+    O(Number(t.currentTarget.getAttribute("aria-posinset")) - 1), e == null || e(t);
   };
-  if (l(() => {
-    const t = o.current, r = (e) => {
-      R.current || e.stopPropagation();
+  if (g(() => {
+    const e = o.current, t = (r) => {
+      k.current || r.stopPropagation();
     };
-    return t == null || t.addEventListener("click", r), () => {
-      t == null || t.removeEventListener("click", r);
+    return e == null || e.addEventListener("click", t), () => {
+      e == null || e.removeEventListener("click", t);
     };
-  }, []), l(() => {
-    const t = o.current, r = (e) => {
-      e.stopPropagation();
+  }, []), g(() => {
+    const e = o.current, t = (r) => {
+      r.stopPropagation();
     };
-    return t == null || t.addEventListener("touchmove", r), () => {
-      t == null || t.removeEventListener("touchmove", r);
+    return e == null || e.addEventListener("touchmove", t), () => {
+      e == null || e.removeEventListener("touchmove", t);
     };
-  }, []), l(() => {
-    const t = T.toArray(h).filter(G).filter((e) => e.type === q || e.type === V), r = t.map((e) => {
+  }, []), g(() => {
+    const e = x.toArray(y).filter(G).filter((r) => r.type === V || r.type === $), t = e.map((r) => {
       var n;
-      return ((n = ut(e.props.children)) == null ? void 0 : n.props.src) ?? "";
+      return ((n = z(r.props.children)) == null ? void 0 : n.props.src) ?? "";
     }).filter(Boolean);
-    B(t), O(r);
-  }, [h]), l(() => {
-    g <= 0 || W.forEach((t, r) => {
-      const e = new window.Image();
-      e.src = t, e.onload = () => {
-        B(
-          (n) => n.map((a, s) => s === r ? x(a, {
-            ...a.props,
-            width: a.props.width ?? e.width / e.height * (a.props.height ?? g),
-            height: a.props.height ?? g
-          }) : a)
-        ), e.onload = null;
-      }, e.onerror = () => {
-        e.onload = null;
+    tt(e), et(t);
+  }, [y]), g(() => {
+    f <= 0 || W.forEach((e) => {
+      const t = new window.Image();
+      t.src = e, t.onload = () => {
+        rt(
+          (r) => r.map((n) => (n.src === e && (n.width = t.width / t.height * (n.height ?? f), n.height = n.height ?? f), n))
+        ), t.onload = null;
+      }, t.onerror = () => {
+        t.onload = null;
       };
     });
-  }, [h, W, g]), l(() => {
-    const t = () => {
-      var r, e, n;
-      Y(((e = (r = o.current) == null ? void 0 : r.parentElement) == null ? void 0 : e.offsetWidth) ?? 0), _(((n = o.current) == null ? void 0 : n.offsetHeight) ?? 0);
+  }, [W, f]), g(() => {
+    const e = () => {
+      var t, r, n;
+      Z(((r = (t = o.current) == null ? void 0 : t.parentElement) == null ? void 0 : r.offsetWidth) ?? 0), K(((n = o.current) == null ? void 0 : n.offsetHeight) ?? 0);
     };
-    return t(), window.addEventListener("resize", t), () => {
-      window.removeEventListener("resize", t);
+    return e(), window.addEventListener("resize", e), () => {
+      window.removeEventListener("resize", e);
     };
-  }, []), l(() => () => {
-    f.current && cancelAnimationFrame(f.current);
-  }, []), w === "horizontal") {
-    const t = it(I, S, p * k / 2);
-    let r = p * k / 2;
-    r = r < 0 ? 120 : r;
-    let e = 0;
-    return /* @__PURE__ */ D(
-      j,
+  }, []), g(() => () => {
+    m.current && cancelAnimationFrame(m.current);
+  }, []), v === "horizontal") {
+    const e = lt(
+      C,
+      h,
+      F,
+      l * w / 2
+    );
+    let t = l * w / 2;
+    t = t <= 0 ? 120 : t;
+    let r = 0;
+    return /* @__PURE__ */ T(
+      q,
       {
         ref: o,
         role: "list",
@@ -136,11 +151,13 @@ function wt({
         "aria-orientation": "horizontal",
         onMouseDown: P,
         onMouseMove: U,
-        onMouseUp: L,
-        onMouseLeave: L,
-        pl: v,
-        pr: v,
+        onMouseUp: M,
+        onMouseLeave: M,
+        pl: d,
+        pr: d,
+        ...a,
         inlineCSS: {
+          display: "grid",
           position: "relative",
           width: "100%",
           height: "100%",
@@ -151,31 +168,31 @@ function wt({
           "&::-webkit-scrollbar": {
             display: "none"
           },
-          ...d.inlineCSS
+          ...a == null ? void 0 : a.inlineCSS
         },
-        ...d,
-        children: t.map((n, a) => /* @__PURE__ */ D(st, { gap: c, children: n.map((s, ot) => {
-          const C = e++;
-          return x(s, {
-            setInnerRef: nt(C, a, ot),
-            tabIndex: C === F ? 0 : -1,
+        children: e.map((n, R) => /* @__PURE__ */ T(ct, { gap: u, children: n.map((s, it) => {
+          const D = r++;
+          return j(s, {
+            setInnerRef: at(D, R, it),
+            tabIndex: D === H ? 0 : -1,
             role: "listitem",
-            "aria-posinset": C + 1,
+            "aria-posinset": D + 1,
             "aria-setsize": N,
-            width: s.props.width ?? r,
-            height: s.props.height ?? g,
-            spacing: y.content(c),
-            direction: w,
-            onKeyDown: rt(s.props.onKeyDown),
+            width: s.props.width ?? t,
+            height: s.props.height ?? f,
+            spacing: A.content(u),
+            direction: v,
+            sourceMetadata: C,
+            onKeyDown: ot(s.props.onKeyDown),
             onFocus: X(s.props.onFocus),
             ...s.props
           });
-        }) }, `masonry-row-${a}`))
+        }) }, `masonry-row-${R}`))
       }
     );
   }
-  return /* @__PURE__ */ D(
-    j,
+  return /* @__PURE__ */ T(
+    q,
     {
       ref: o,
       role: "list",
@@ -183,38 +200,39 @@ function wt({
       "aria-orientation": "vertical",
       onMouseDown: P,
       onMouseMove: U,
-      onMouseUp: L,
-      onMouseLeave: L,
-      pt: v,
-      pb: v,
+      onMouseUp: M,
+      onMouseLeave: M,
+      pt: d,
+      pb: d,
+      ...a,
       inlineCSS: {
         width: "100%",
         position: "relative",
-        columnCount: z,
-        columnGap: y.content(c),
-        ...d.inlineCSS
+        columnCount: S,
+        columnGap: A.content(u),
+        ...a == null ? void 0 : a.inlineCSS
       },
-      ...d,
-      children: T.map(
-        I,
-        (t, r) => x(t, {
-          setInnerRef: et(r),
+      children: x.map(
+        h,
+        (e, t) => j(e, {
+          setInnerRef: st(t),
           role: "listitem",
-          tabIndex: r === F ? 0 : -1,
-          "aria-posinset": r + 1,
+          tabIndex: t === H ? 0 : -1,
+          "aria-posinset": t + 1,
           "aria-setsize": N,
-          width: t.props.width ?? p,
-          height: t.props.height ?? p * k / 2,
-          spacing: y.content(c),
-          direction: w,
-          onKeyDown: tt(t.props.onKeyDown),
-          onFocus: X(t.props.onFocus),
-          ...t.props
+          width: e.props.width ?? l,
+          height: e.props.height ?? l * w / 2,
+          spacing: A.content(u),
+          direction: v,
+          sourceMetadata: C,
+          onKeyDown: nt(e.props.onKeyDown),
+          onFocus: X(e.props.onFocus),
+          ...e.props
         })
       )
     }
   );
 }
 export {
-  wt as default
+  bt as default
 };

package/dist/shared/components/Masonry/Masonry.utils.d.ts

@@ -1,7 +1,11 @@
 import { ReactElement, ReactNode } from 'react';
 import { ImageProps } from '../Image';
 import { MasonryBlockProps } from './MasonryBlock';
-export declare function getHorizontalLayoutRows(blocks: ReactElement<MasonryBlockProps>[], rowCount: number, fallbackWidth: number): ReactElement<MasonryBlockProps, string | import('react').JSXElementConstructor<any>>[][];
+export declare function getHorizontalLayoutRows(images: {
+    src: string;
+    width: number;
+    height: number;
+}[], blocks: ReactElement<MasonryBlockProps>[], rowCount: number, fallbackWidth: number): ReactElement<MasonryBlockProps, string | import('react').JSXElementConstructor<any>>[][];
 export declare function findNextFocusableElement(currentElement: HTMLDivElement, keyDirection: 'left' | 'right' | 'up' | 'down', candidates: (HTMLDivElement | null)[]): HTMLDivElement | null;
 export declare function getNextIndexHorizontalFromRows(rows: HTMLDivElement[][], currentIndex: number, keyDirection: 'up' | 'down' | 'left' | 'right'): number | null;
 export declare function findImageInChildren(children: ReactNode): ReactElement<ImageProps> | null;

package/dist/shared/components/Masonry/Masonry.utils.mjs

@@ -1,76 +1,77 @@
 import { Children as M, isValidElement as y } from "react";
 import E from "../Image/Image.mjs";
-function X(n, r, e) {
-  const o = Array.from({ length: r }, () => []), t = Array(r).fill(0);
-  return n.forEach((c) => {
-    const g = t.indexOf(Math.min(...t));
-    o[g].push(c), t[g] += c.props.width ?? e;
-  }), o;
+function B(n, c, e, s) {
+  const t = Array.from({ length: e }, () => []), o = Array(e).fill(0);
+  return c.forEach((h) => {
+    var g;
+    const a = ((g = I(h.props.children)) == null ? void 0 : g.props.src) ?? "", u = n.find((m) => m.src === a), l = o.indexOf(Math.min(...o));
+    t[l].push(h), o[l] += (u == null ? void 0 : u.width) ?? s;
+  }), t;
 }
-function B(n, r, e) {
-  const o = n.getBoundingClientRect(), t = (o.left + o.right) / 2, c = (o.top + o.bottom) / 2;
-  let g = null, h = 1 / 0;
+function w(n, c, e) {
+  const s = n.getBoundingClientRect(), t = (s.left + s.right) / 2, o = (s.top + s.bottom) / 2;
+  let h = null, a = 1 / 0;
   for (const u of e) {
     if (!u || u === n) continue;
-    const s = u.getBoundingClientRect(), R = (s.left + s.right) / 2, C = (s.top + s.bottom) / 2, a = R - t, i = C - c, l = Math.abs(i) < s.height * 0.75, f = Math.abs(a) < s.width * 0.75, m = r === "right" && a > 0 && l || r === "left" && a < 0 && l || r === "down" && i > 0 && f || r === "up" && i < 0 && f, d = Math.hypot(a, i);
-    m && d < h && (h = d, g = u);
+    const l = u.getBoundingClientRect(), g = (l.left + l.right) / 2, m = (l.top + l.bottom) / 2, d = g - t, r = m - o, i = Math.abs(r) < l.height * 0.75, f = Math.abs(d) < l.width * 0.75, p = c === "right" && d > 0 && i || c === "left" && d < 0 && i || c === "down" && r > 0 && f || c === "up" && r < 0 && f, b = Math.hypot(d, r);
+    p && b < a && (a = b, h = u);
   }
-  return g;
+  return h;
 }
-function w(n, r, e) {
-  var s, R, C, a;
-  if (!n.length || r < 0) return null;
-  const o = n.length;
-  let t = -1, c = -1;
-  for (let i = 0; i < o; i++) {
-    for (let l = 0; l < n[i].length; l++) {
-      const f = n[i][l];
-      if (Number(f == null ? void 0 : f.getAttribute("aria-posinset")) - 1 === r) {
-        t = i, c = l;
+function x(n, c, e) {
+  var l, g, m, d;
+  if (!n.length || c < 0) return null;
+  const s = n.length;
+  let t = -1, o = -1;
+  for (let r = 0; r < s; r++) {
+    for (let i = 0; i < n[r].length; i++) {
+      const f = n[r][i];
+      if (Number(f == null ? void 0 : f.getAttribute("aria-posinset")) - 1 === c) {
+        t = r, o = i;
         break;
       }
     }
     if (t !== -1) break;
   }
-  if (t === -1 || c === -1) return null;
-  const h = n[t][c].getBoundingClientRect(), u = (h.left + h.right) / 2;
-  if (e === "left" && c > 0)
-    return Number((s = n[t][c - 1]) == null ? void 0 : s.getAttribute("aria-posinset")) - 1;
-  if (e === "right" && c < n[t].length - 1)
-    return Number((R = n[t][c + 1]) == null ? void 0 : R.getAttribute("aria-posinset")) - 1;
+  if (t === -1 || o === -1) return null;
+  const a = n[t][o].getBoundingClientRect(), u = (a.left + a.right) / 2;
+  if (e === "left" && o > 0)
+    return Number((l = n[t][o - 1]) == null ? void 0 : l.getAttribute("aria-posinset")) - 1;
+  if (e === "right" && o < n[t].length - 1)
+    return Number((g = n[t][o + 1]) == null ? void 0 : g.getAttribute("aria-posinset")) - 1;
   if (e === "up" && t > 0) {
-    const i = n[t - 1];
-    let l = 0, f = 1 / 0;
-    return i.forEach((m, d) => {
-      const p = m.getBoundingClientRect(), A = (p.left + p.right) / 2, b = Math.abs(u - A);
-      b < f && (f = b, l = d);
-    }), Number((C = i[l]) == null ? void 0 : C.getAttribute("aria-posinset")) - 1;
+    const r = n[t - 1];
+    let i = 0, f = 1 / 0;
+    return r.forEach((p, b) => {
+      const R = p.getBoundingClientRect(), A = (R.left + R.right) / 2, C = Math.abs(u - A);
+      C < f && (f = C, i = b);
+    }), Number((m = r[i]) == null ? void 0 : m.getAttribute("aria-posinset")) - 1;
   }
-  if (e === "down" && t < o - 1) {
-    const i = n[t + 1];
-    let l = 0, f = 1 / 0;
-    return i.forEach((m, d) => {
-      const p = m.getBoundingClientRect(), A = (p.left + p.right) / 2, b = Math.abs(u - A);
-      b < f && (f = b, l = d);
-    }), Number((a = i[l]) == null ? void 0 : a.getAttribute("aria-posinset")) - 1;
+  if (e === "down" && t < s - 1) {
+    const r = n[t + 1];
+    let i = 0, f = 1 / 0;
+    return r.forEach((p, b) => {
+      const R = p.getBoundingClientRect(), A = (R.left + R.right) / 2, C = Math.abs(u - A);
+      C < f && (f = C, i = b);
+    }), Number((d = r[i]) == null ? void 0 : d.getAttribute("aria-posinset")) - 1;
   }
   return null;
 }
-function x(n) {
-  const r = M.toArray(n).filter(y).find((e) => e.type === E || e.type === "img");
-  if (r)
-    return r;
+function I(n) {
+  const c = M.toArray(n).filter(y).find((e) => e.type === E || e.type === "img");
+  if (c)
+    return c;
   for (const e of M.toArray(n))
     if (y(e) && e.props && e.props.children) {
-      const o = M.toArray(e.props.children).filter(y).find((t) => t.type === E || t.type === "img");
-      if (o)
-        return o;
+      const s = M.toArray(e.props.children).filter(y).find((t) => t.type === E || t.type === "img");
+      if (s)
+        return s;
     }
   return null;
 }
 export {
-  x as findImageInChildren,
-  B as findNextFocusableElement,
-  X as getHorizontalLayoutRows,
-  w as getNextIndexHorizontalFromRows
+  I as findImageInChildren,
+  w as findNextFocusableElement,
+  B as getHorizontalLayoutRows,
+  x as getNextIndexHorizontalFromRows
 };

package/dist/shared/components/Masonry/MasonryBlock/MasonryBlock.d.ts

@@ -5,6 +5,11 @@ export interface MasonryBlockProps extends FlexboxProps {
     height?: number;
     borderRadius?: number | string;
     direction?: 'horizontal' | 'vertical';
+    sourceMetadata?: {
+        src: string;
+        width: number;
+        height: number;
+    }[];
     setInnerRef?: (ref: HTMLDivElement | null) => void;
 }
 declare const MasonryBlock: import('react').ForwardRefExoticComponent<Omit<MasonryBlockProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;