@payfit/unity-components 2.47.4 → 2.47.6

package/dist/esm/components/table/hooks/useTableKeyboardNavigation.js

@@ -1,209 +1,181 @@
-import { useState as I, useRef as M, useCallback as i } from "react";
-const U = 'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])';
-function O() {
-  const [m, A] = I({
-    rowIndex: 0,
-    colIndex: 0
-  }), a = M(null), d = i(
-    (e, t, s) => {
-      const c = e.querySelectorAll(
-        U
-      );
-      if (c.length > 0) {
-        const n = c[0];
-        return A({ rowIndex: t, colIndex: s }), requestAnimationFrame(() => {
-          n.focus({ preventScroll: !1 });
-        }), !0;
-      }
-      return !1;
-    },
-    [A]
-  ), b = i(
-    (e, t, s) => {
-      if (!a.current) return null;
-      const c = Array.from(a.current.querySelectorAll("tr"));
-      if (e < 0 || e >= c.length) return null;
-      const n = c[e];
-      if (!n) return null;
-      const r = Array.from(n.querySelectorAll("td, th"));
-      if (s === "right") {
-        for (let o = t + 1; o < r.length; o++)
-          if (r[o].dataset.focusable !== "false")
-            return { rowIndex: e, colIndex: o };
-      } else
-        for (let o = t - 1; o >= 0; o--)
-          if (r[o].dataset.focusable !== "false")
-            return { rowIndex: e, colIndex: o };
-      return null;
-    },
-    []
-  ), l = i(
-    (e, t, s) => {
-      if (!a.current) return;
-      const c = Array.from(a.current.querySelectorAll("tr"));
-      if (e < 0 || e >= c.length) return;
-      const n = c[e];
-      if (!n) return;
-      const r = Array.from(n.querySelectorAll("td, th"));
-      if (t < 0 || t >= r.length) return;
-      const o = r[t];
-      if (!(o.dataset.focusable !== "false")) {
-        if (d(o, e, t))
-          return;
-        if (s) {
-          const f = b(
-            e,
-            t,
-            s
-          );
-          if (f) {
-            l(f.rowIndex, f.colIndex);
-            return;
-          }
-        }
-        return;
-      }
-      A({ rowIndex: e, colIndex: t }), requestAnimationFrame(() => {
-        document.activeElement !== o && o.focus({ preventScroll: !1 });
-      });
-    },
-    [A, d, b]
-  ), v = i(
-    (e) => {
-      if (!a.current) return;
-      const t = Array.from(a.current.querySelectorAll("tr"));
-      e < 0 || e >= t.length || !t[e] || l(e, 0);
-    },
-    [l]
-  ), S = i(
-    (e) => {
-      e.target === e.currentTarget && (e.preventDefault(), requestAnimationFrame(() => {
-        l(0, 0);
-      }));
-    },
-    [l]
-  ), k = i(
-    (e) => {
-      const t = e.target, s = e.currentTarget;
-      if (t !== s)
-        return;
-      const c = t.closest("tr");
-      if (!c || !a.current) return;
-      const r = Array.from(a.current.querySelectorAll("tr")).indexOf(c), u = Array.from(c.querySelectorAll("td, th")).indexOf(t);
-      r >= 0 && u >= 0 && (A({ rowIndex: r, colIndex: u }), requestAnimationFrame(() => {
-        a.current && (a.current.querySelectorAll("td, th").forEach((f) => {
-          f.setAttribute("tabindex", "-1");
-        }), t.setAttribute("tabindex", "0"));
-      }));
-    },
-    [A]
-  ), q = i(
-    (e, t) => m.rowIndex === e && m.colIndex === t,
-    [m]
-  ), D = i(
-    (e) => {
-      if (e.key !== "Tab" && e.target === e.currentTarget && a.current)
-        switch (e.key) {
-          case "ArrowDown":
-          case "ArrowRight":
-            e.preventDefault(), l(0, 0);
-            break;
-          case "Home":
-            e.preventDefault(), l(0, 0);
-            break;
-          case "End":
-            e.preventDefault();
-            const t = Array.from(a.current.querySelectorAll("tr")), s = t.length - 1;
-            if (s >= 0) {
-              const c = t[s];
-              if (!c) break;
-              const n = Array.from(c.querySelectorAll("td, th"));
-              l(s, n.length - 1);
-            }
-            break;
-        }
-    },
-    [l]
-  ), x = i(
-    (e) => {
-      if (e.key === "RawTab" || !a.current) return;
-      let t = e.currentTarget;
-      const s = e.target;
-      if (s !== t) {
-        const f = s.closest("td, th");
-        f && (t = f);
-      }
-      const c = t.closest("tr");
-      if (!c) return;
-      const n = Array.from(a.current.querySelectorAll("tr")), r = n.indexOf(c), o = Array.from(c.querySelectorAll("td, th")), u = o.indexOf(t);
-      switch (e.key) {
-        case "ArrowRight":
-          e.preventDefault(), u < o.length - 1 ? l(r, u + 1, "right") : l(r, 0, "right");
-          break;
-        case "ArrowLeft":
-          e.preventDefault(), u > 0 ? l(r, u - 1, "left") : l(r, o.length - 1, "left");
-          break;
-        case "ArrowDown":
-          if (e.preventDefault(), r < n.length - 1) {
-            const h = n[r + 1];
-            if (!h) break;
-            const g = Array.from(h.querySelectorAll("td, th")), y = Math.min(u, g.length - 1);
-            l(r + 1, y);
-          }
-          break;
-        case "ArrowUp":
-          if (e.preventDefault(), r > 0) {
-            const h = n[r - 1];
-            if (!h) break;
-            const g = Array.from(h.querySelectorAll("td, th")), y = Math.min(u, g.length - 1);
-            l(r - 1, y);
-          }
-          break;
-        case "Home":
-          e.preventDefault(), e.ctrlKey ? l(0, 0) : l(r, 0);
-          break;
-        case "End":
-          if (e.preventDefault(), e.ctrlKey) {
-            const h = n.length - 1, g = n[h];
-            if (!g) break;
-            const y = Array.from(g.querySelectorAll("td, th"));
-            l(h, y.length - 1);
-          } else
-            l(r, o.length - 1);
-          break;
-        case "PageUp":
-          e.preventDefault();
-          const f = Math.max(0, r - 5), w = n[f];
-          if (!w) break;
-          const R = Array.from(w.querySelectorAll("td, th")), E = Math.min(u, R.length - 1);
-          l(f, E);
-          break;
-        case "PageDown":
-          e.preventDefault();
-          const p = Math.min(n.length - 1, r + 5), C = n[p];
-          if (!C) break;
-          const T = Array.from(
-            C.querySelectorAll("td, th")
-          ), F = Math.min(u, T.length - 1);
-          l(p, F);
-          break;
-      }
-    },
-    [l]
-  );
-  return {
-    focusedCell: m,
-    setFocusedCell: A,
-    isCellFocused: q,
-    handleCellKeyDown: x,
-    handleTableKeyDown: D,
-    handleTableFocus: S,
-    handleCellFocus: k,
-    tableRef: a,
-    focusCell: l,
-    focusRow: v
-  };
+import { useCallback as e, useRef as t, useState as n } from "react";
+//#region src/components/table/hooks/useTableKeyboardNavigation.ts
+var r = "input, button, select, textarea, a[href], [tabindex]:not([tabindex=\"-1\"])";
+function i() {
+	let [i, a] = n({
+		rowIndex: 0,
+		colIndex: 0
+	}), o = t(null), s = e((e, t, n) => {
+		let i = e.querySelectorAll(r);
+		if (i.length > 0) {
+			let e = i[0];
+			return a({
+				rowIndex: t,
+				colIndex: n
+			}), requestAnimationFrame(() => {
+				e.focus({ preventScroll: !1 });
+			}), !0;
+		}
+		return !1;
+	}, [a]), c = e((e, t, n) => {
+		if (!o.current) return null;
+		let r = Array.from(o.current.querySelectorAll("tr"));
+		if (e < 0 || e >= r.length) return null;
+		let i = r[e];
+		if (!i) return null;
+		let a = Array.from(i.querySelectorAll("td, th"));
+		if (n === "right") {
+			for (let n = t + 1; n < a.length; n++) if (a[n].dataset.focusable !== "false") return {
+				rowIndex: e,
+				colIndex: n
+			};
+		} else for (let n = t - 1; n >= 0; n--) if (a[n].dataset.focusable !== "false") return {
+			rowIndex: e,
+			colIndex: n
+		};
+		return null;
+	}, []), l = e((e, t, n) => {
+		if (!o.current) return;
+		let r = Array.from(o.current.querySelectorAll("tr"));
+		if (e < 0 || e >= r.length) return;
+		let i = r[e];
+		if (!i) return;
+		let u = Array.from(i.querySelectorAll("td, th"));
+		if (t < 0 || t >= u.length) return;
+		let d = u[t];
+		if (d.dataset.focusable === "false") {
+			if (s(d, e, t)) return;
+			if (n) {
+				let r = c(e, t, n);
+				if (r) {
+					l(r.rowIndex, r.colIndex);
+					return;
+				}
+			}
+			return;
+		}
+		a({
+			rowIndex: e,
+			colIndex: t
+		}), requestAnimationFrame(() => {
+			document.activeElement !== d && d.focus({ preventScroll: !1 });
+		});
+	}, [
+		a,
+		s,
+		c
+	]), u = e((e) => {
+		if (!o.current) return;
+		let t = Array.from(o.current.querySelectorAll("tr"));
+		e < 0 || e >= t.length || t[e] && l(e, 0);
+	}, [l]), d = e((e) => {
+		e.target === e.currentTarget && (e.preventDefault(), requestAnimationFrame(() => {
+			l(0, 0);
+		}));
+	}, [l]), f = e((e) => {
+		let t = e.target;
+		if (t !== e.currentTarget) return;
+		let n = t.closest("tr");
+		if (!n || !o.current) return;
+		let r = Array.from(o.current.querySelectorAll("tr")).indexOf(n), i = Array.from(n.querySelectorAll("td, th")).indexOf(t);
+		r >= 0 && i >= 0 && (a({
+			rowIndex: r,
+			colIndex: i
+		}), requestAnimationFrame(() => {
+			o.current && (o.current.querySelectorAll("td, th").forEach((e) => {
+				e.setAttribute("tabindex", "-1");
+			}), t.setAttribute("tabindex", "0"));
+		}));
+	}, [a]), p = e((e, t) => i.rowIndex === e && i.colIndex === t, [i]), m = e((e) => {
+		if (e.key !== "Tab" && e.target === e.currentTarget && o.current) switch (e.key) {
+			case "ArrowDown":
+			case "ArrowRight":
+				e.preventDefault(), l(0, 0);
+				break;
+			case "Home":
+				e.preventDefault(), l(0, 0);
+				break;
+			case "End":
+				e.preventDefault();
+				let t = Array.from(o.current.querySelectorAll("tr")), n = t.length - 1;
+				if (n >= 0) {
+					let e = t[n];
+					if (!e) break;
+					l(n, Array.from(e.querySelectorAll("td, th")).length - 1);
+				}
+				break;
+		}
+	}, [l]);
+	return {
+		focusedCell: i,
+		setFocusedCell: a,
+		isCellFocused: p,
+		handleCellKeyDown: e((e) => {
+			if (e.key === "RawTab" || !o.current) return;
+			let t = e.currentTarget, n = e.target;
+			if (n !== t) {
+				let e = n.closest("td, th");
+				e && (t = e);
+			}
+			let r = t.closest("tr");
+			if (!r) return;
+			let i = Array.from(o.current.querySelectorAll("tr")), a = i.indexOf(r), s = Array.from(r.querySelectorAll("td, th")), c = s.indexOf(t);
+			switch (e.key) {
+				case "ArrowRight":
+					e.preventDefault(), c < s.length - 1 ? l(a, c + 1, "right") : l(a, 0, "right");
+					break;
+				case "ArrowLeft":
+					e.preventDefault(), c > 0 ? l(a, c - 1, "left") : l(a, s.length - 1, "left");
+					break;
+				case "ArrowDown":
+					if (e.preventDefault(), a < i.length - 1) {
+						let e = i[a + 1];
+						if (!e) break;
+						let t = Array.from(e.querySelectorAll("td, th")), n = Math.min(c, t.length - 1);
+						l(a + 1, n);
+					}
+					break;
+				case "ArrowUp":
+					if (e.preventDefault(), a > 0) {
+						let e = i[a - 1];
+						if (!e) break;
+						let t = Array.from(e.querySelectorAll("td, th")), n = Math.min(c, t.length - 1);
+						l(a - 1, n);
+					}
+					break;
+				case "Home":
+					e.preventDefault(), e.ctrlKey ? l(0, 0) : l(a, 0);
+					break;
+				case "End":
+					if (e.preventDefault(), e.ctrlKey) {
+						let e = i.length - 1, t = i[e];
+						if (!t) break;
+						l(e, Array.from(t.querySelectorAll("td, th")).length - 1);
+					} else l(a, s.length - 1);
+					break;
+				case "PageUp":
+					e.preventDefault();
+					let t = Math.max(0, a - 5), n = i[t];
+					if (!n) break;
+					let r = Array.from(n.querySelectorAll("td, th"));
+					l(t, Math.min(c, r.length - 1));
+					break;
+				case "PageDown":
+					e.preventDefault();
+					let o = Math.min(i.length - 1, a + 5), u = i[o];
+					if (!u) break;
+					let d = Array.from(u.querySelectorAll("td, th"));
+					l(o, Math.min(c, d.length - 1));
+					break;
+			}
+		}, [l]),
+		handleTableKeyDown: m,
+		handleTableFocus: d,
+		handleCellFocus: f,
+		tableRef: o,
+		focusCell: l,
+		focusRow: u
+	};
 }
-export {
-  O as useTableKeyboardNavigation
-};
+//#endregion
+export { i as useTableKeyboardNavigation };

package/dist/esm/components/table/parts/TableBody.js

@@ -1,104 +1,81 @@
-import { jsx as r } from "react/jsx-runtime";
-import y, { forwardRef as b, Children as f, cloneElement as g } from "react";
-import { uyTv as _ } from "@payfit/unity-themes";
-import { useTableContext as x } from "../Table.context.js";
-const C = _({
-  base: ["uy:transition-all uy:duration-200 uy:ease-in-out uy:relative"],
-  variants: {
-    isEmpty: {
-      true: ["uy:h-[var(--uy-table-min-rows)]"],
-      false: [
-        "uy:[&_tr:last-child]:border-b",
-        "uy:[&_tr:last-child]:border-b-[length:calc(1px*var(--uy-table-has-remaining-space,0))]"
-      ]
-    }
-  }
-}), E = ({
-  children: c,
-  hasDataStateContent: p,
-  enableVirtualization: u,
-  virtualizer: a
-}) => {
-  if (p)
-    return [];
-  if (u && a) {
-    const t = a.getVirtualItems(), d = a.getTotalSize(), m = t[0], l = t[t.length - 1], o = m ? m.start : 0, s = l ? d - l.end : 0, e = [];
-    return o > 0 && e.push(
-      /* @__PURE__ */ r(
-        "tr",
-        {
-          "aria-hidden": "true",
-          style: { border: 0, borderBottom: 0 },
-          children: /* @__PURE__ */ r(
-            "td",
-            {
-              colSpan: 1e3,
-              style: { height: o, padding: 0, border: 0 }
-            }
-          )
-        },
-        "__spacer-top__"
-      )
-    ), t.forEach((i) => {
-      const n = y.Children.toArray(c)[i.index];
-      y.isValidElement(n) && e.push(
-        y.cloneElement(n, {
-          key: i.index,
-          rowIndex: i.index,
-          ref: (h) => {
-            h && a.measureElement(h);
-          }
-        })
-      );
-    }), s > 0 && e.push(
-      /* @__PURE__ */ r(
-        "tr",
-        {
-          "aria-hidden": "true",
-          style: { border: 0, borderBottom: 0 },
-          children: /* @__PURE__ */ r(
-            "td",
-            {
-              colSpan: 1e3,
-              style: { height: s, padding: 0, border: 0 }
-            }
-          )
-        },
-        "__spacer-bottom__"
-      )
-    ), e;
-  }
-  return f.map(c, (t, d) => y.isValidElement(t) ? g(
-    t,
-    {
-      rowIndex: d,
-      ...t.props
-    }
-  ) : t);
-}, T = b(
-  ({ children: c, renderEmptyState: p, renderDataState: u, ...a }, t) => {
-    const { virtualizer: d, enableVirtualization: m } = x(), l = u ? u() : void 0, o = l !== void 0, s = E({
-      children: c,
-      hasDataStateContent: o,
-      enableVirtualization: m,
-      virtualizer: d
-    }), e = !s || s.length === 0 || o, i = e && p ? p() : null;
-    let n = null;
-    return o ? n = l : e && i && (n = i), /* @__PURE__ */ r(
-      "tbody",
-      {
-        ref: t,
-        className: C({ isEmpty: e }),
-        "data-dd-privacy": "mask",
-        "data-empty": e || o || void 0,
-        ...a,
-        children: n ? /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r("td", { colSpan: 1e3, className: "uy:p-0", children: n }) }) : s
-      }
-    );
-  }
-);
-T.displayName = "TableBody";
-export {
-  T as TableBody,
-  C as tableBody
-};
+import { useTableContext as e } from "../Table.context.js";
+import t, { Children as n, cloneElement as r, forwardRef as i } from "react";
+import { uyTv as a } from "@payfit/unity-themes";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/table/parts/TableBody.tsx
+var s = a({
+	base: ["uy:transition-all uy:duration-200 uy:ease-in-out uy:relative"],
+	variants: { isEmpty: {
+		true: ["uy:h-[var(--uy-table-min-rows)]"],
+		false: ["uy:[&_tr:last-child]:border-b", "uy:[&_tr:last-child]:border-b-[length:calc(1px*var(--uy-table-has-remaining-space,0))]"]
+	} }
+}), c = ({ children: e, hasDataStateContent: i, enableVirtualization: a, virtualizer: s }) => {
+	if (i) return [];
+	if (a && s) {
+		let n = s.getVirtualItems(), r = s.getTotalSize(), i = n[0], a = n[n.length - 1], c = i ? i.start : 0, l = a ? r - a.end : 0, u = [];
+		return c > 0 && u.push(/* @__PURE__ */ o("tr", {
+			"aria-hidden": "true",
+			style: {
+				border: 0,
+				borderBottom: 0
+			},
+			children: /* @__PURE__ */ o("td", {
+				colSpan: 1e3,
+				style: {
+					height: c,
+					padding: 0,
+					border: 0
+				}
+			})
+		}, "__spacer-top__")), n.forEach((n) => {
+			let r = t.Children.toArray(e)[n.index];
+			t.isValidElement(r) && u.push(t.cloneElement(r, {
+				key: n.index,
+				rowIndex: n.index,
+				ref: (e) => {
+					e && s.measureElement(e);
+				}
+			}));
+		}), l > 0 && u.push(/* @__PURE__ */ o("tr", {
+			"aria-hidden": "true",
+			style: {
+				border: 0,
+				borderBottom: 0
+			},
+			children: /* @__PURE__ */ o("td", {
+				colSpan: 1e3,
+				style: {
+					height: l,
+					padding: 0,
+					border: 0
+				}
+			})
+		}, "__spacer-bottom__")), u;
+	}
+	return n.map(e, (e, n) => t.isValidElement(e) ? r(e, {
+		rowIndex: n,
+		...e.props
+	}) : e);
+}, l = i(({ children: t, renderEmptyState: n, renderDataState: r, ...i }, a) => {
+	let { virtualizer: l, enableVirtualization: u } = e(), d = r ? r() : void 0, f = d !== void 0, p = c({
+		children: t,
+		hasDataStateContent: f,
+		enableVirtualization: u,
+		virtualizer: l
+	}), m = !p || p.length === 0 || f, h = m && n ? n() : null, g = null;
+	return f ? g = d : m && h && (g = h), /* @__PURE__ */ o("tbody", {
+		ref: a,
+		className: s({ isEmpty: m }),
+		"data-dd-privacy": "mask",
+		"data-empty": m || f || void 0,
+		...i,
+		children: g ? /* @__PURE__ */ o("tr", { children: /* @__PURE__ */ o("td", {
+			colSpan: 1e3,
+			className: "uy:p-0",
+			children: g
+		}) }) : p
+	});
+});
+l.displayName = "TableBody";
+//#endregion
+export { l as TableBody, s as tableBody };