@payfit/unity-components 3.1.14 → 3.1.15

package/dist/esm/core/components/table/Table.js

@@ -0,0 +1,158 @@
+import { TableContextProvider as e, useTableContext as t } from "./Table.context.js";
+import n, { forwardRef as r, useCallback as i, useImperativeHandle as a, useMemo as o, useRef as s } from "react";
+import { uyMerge as c, uyTv as l } from "@payfit/unity-themes";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useResizeObserver as f } from "usehooks-ts";
+import { useVirtualizer as p } from "@tanstack/react-virtual";
+//#region src/core/components/table/Table.tsx
+var m = l({
+	base: [
+		"uy:w-full uy:border uy:border-solid uy:border-border-neutral uy:rounded-100",
+		"uy:relative uy:flex uy:flex-col uy:overflow-hidden",
+		"uy:min-h-(--uy-table-min-rows)"
+	],
+	variants: { height: {
+		fillSpace: ["uy:h-full"],
+		fixed: ["uy:max-h-(--uy-table-max-rows)"]
+	} },
+	defaultVariants: { height: "fixed" }
+}), h = r(({ minRows: e = 10, maxRows: t, children: n }, r) => /* @__PURE__ */ u("div", {
+	ref: r,
+	className: m({ height: t === void 0 ? "fillSpace" : "fixed" }),
+	"data-unity-slot": "table-root",
+	style: {
+		"--uy-table-min-rows": `calc(var(--uy-spacing-600) * ${e})`,
+		"--uy-table-max-rows": `calc(var(--uy-spacing-600) * ${t})`
+	},
+	children: n
+}));
+h.displayName = "TableRoot";
+var g = l({
+	slots: {
+		wrapper: ["uy:flex-1 uy:bg-surface-neutral", "uy:w-full uy:overflow-x-auto uy:overflow-y-auto"],
+		table: [
+			"uy:relative",
+			"uy:text-left uy:typography-body uy:text-content-neutral uy:border-collapse",
+			"uy:focus:outline-2 uy:focus:outline-utility-focus-ring uy:focus:outline-offset-[-2px]"
+		]
+	},
+	variants: {
+		horizontalScroll: {
+			true: { table: "uy:w-max" },
+			false: {
+				wrapper: "uy:overflow-x-hidden",
+				table: "uy:w-fit"
+			}
+		},
+		layout: {
+			fixed: {
+				wrapper: "uy:overflow-x-hidden",
+				table: "uy:w-full uy:table-fixed"
+			},
+			auto: { table: "uy:min-w-full uy:table-auto" }
+		}
+	},
+	defaultVariants: {
+		horizontalScroll: !0,
+		layout: "auto"
+	}
+}), _ = r((t, r) => {
+	let { children: i, label: c, description: l, isHorizontalScrollEnabled: d = !0, enableVirtualization: f = !1, estimatedRowHeight: m = 40, overscan: h = 5, layout: g = "auto", ..._ } = t, y = s(null), { rowCount: b, columnCount: x } = o(() => {
+		let e = 0, t = 0;
+		return n.Children.forEach(i, (r) => {
+			if (!n.isValidElement(r)) return;
+			let i = n.Children.toArray(r.props.children).filter((e) => n.isValidElement(e));
+			t += i.length, i.forEach((t) => {
+				if (!n.isValidElement(t)) return;
+				let r = n.Children.toArray(t.props.children).filter((e) => n.isValidElement(e));
+				e = Math.max(e, r.length);
+			});
+		}), {
+			rowCount: t,
+			columnCount: e
+		};
+	}, [i]);
+	return a(r, () => ({ scrollToTop: () => {
+		let e = y.current, t = e?.closest("[data-unity-slot=\"table-root\"]"), n;
+		if (t ? n = t : e && (n = e), n) {
+			if (typeof n.scrollTo == "function") {
+				n.scrollTo({
+					top: 0,
+					behavior: "smooth"
+				});
+				return;
+			}
+			n.scrollTop = 0;
+		}
+	} })), /* @__PURE__ */ u(e, {
+		rowCount: b,
+		columnCount: x,
+		virtualizer: p({
+			count: f ? b : 0,
+			getScrollElement: () => y.current,
+			estimateSize: () => m,
+			overscan: h
+		}),
+		enableVirtualization: f,
+		children: /* @__PURE__ */ u(v, {
+			scrollContainerRef: y,
+			rowCount: b,
+			columnCount: x,
+			label: c,
+			description: l,
+			isHorizontalScrollEnabled: d,
+			layout: g,
+			..._,
+			children: i
+		})
+	});
+});
+_.displayName = "Table";
+var v = (e) => {
+	let { children: n, label: r, description: a, scrollContainerRef: s, layout: l, rowCount: p, columnCount: m, onKeyDown: h, isHorizontalScrollEnabled: _ = !0, ...v } = e, { wrapper: y, table: b } = g({
+		horizontalScroll: _,
+		layout: l
+	}), { keyboardNavigation: x } = t(), { tableRef: S, handleTableKeyDown: C } = x, { height: w = 0 } = f({
+		ref: s,
+		box: "border-box"
+	}), T = i((e) => {
+		e.key !== "Tab" && (C(e), h?.(e));
+	}, [C, h]), E = s.current?.closest("[data-unity-slot=\"table-root\"]"), D = o(() => {
+		if (!E || p === 0) return !1;
+		let e = E.clientHeight;
+		return (S.current?.clientHeight ?? 0) / e < .9;
+	}, [
+		E,
+		p,
+		S,
+		w
+	]);
+	return /* @__PURE__ */ d("div", {
+		className: c(y()),
+		ref: s,
+		style: { "--uy-table-has-remaining-space": D ? "1" : "0" },
+		children: [/* @__PURE__ */ d("table", {
+			ref: S,
+			className: c(b()),
+			role: "grid",
+			"aria-rowcount": p,
+			"aria-colcount": m,
+			"aria-label": r,
+			"aria-describedby": a ? `table-desc-${S.current?.id}` : void 0,
+			onKeyDown: T,
+			...v,
+			children: [n, a && /* @__PURE__ */ u("caption", {
+				id: `table-desc-${S.current?.id}`,
+				className: "uy:sr-only",
+				children: a
+			})]
+		}), /* @__PURE__ */ u("div", {
+			className: "uy:sr-only",
+			"aria-live": "polite",
+			children: "Table navigation: Use arrow keys to move between cells. Tab key exits the table. Home and End keys navigate to the first and last cell in a row. Page Up and Page Down move between rows."
+		})]
+	});
+};
+v.displayName = "TableContent";
+//#endregion
+export { _ as Table, h as TableRoot };

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

@@ -0,0 +1,183 @@
+import { useCallback as e, useRef as t, useState as n } from "react";
+//#region src/core/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;
+					let r = Array.from(e.querySelectorAll("td, th"));
+					l(n, r.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;
+						let n = Array.from(t.querySelectorAll("td, th"));
+						l(e, n.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")), o = Math.min(c, r.length - 1);
+					l(t, o);
+					break;
+				case "PageDown":
+					e.preventDefault();
+					let u = Math.min(i.length - 1, a + 5), d = i[u];
+					if (!d) break;
+					let f = Array.from(d.querySelectorAll("td, th")), p = Math.min(c, f.length - 1);
+					l(u, p);
+					break;
+			}
+		}, [l]),
+		handleTableKeyDown: m,
+		handleTableFocus: d,
+		handleCellFocus: f,
+		tableRef: o,
+		focusCell: l,
+		focusRow: u
+	};
+}
+//#endregion
+export { i as useTableKeyboardNavigation };

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

@@ -0,0 +1,81 @@
+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/core/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 };

package/dist/esm/core/components/table/parts/TableCell.js

@@ -0,0 +1,38 @@
+import { useTableContext as e } from "../Table.context.js";
+import { forwardRef as t, memo as n, useMemo as r } from "react";
+import { uyTv as i } from "@payfit/unity-themes";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/core/components/table/parts/TableCell.tsx
+var o = i({
+	base: ["uy:px-200 uy:py-150 uy:text-content-neutral uy:typography-body", "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-[-2px] uy:focus-visible:outline-utility-focus-ring"],
+	variants: { align: {
+		left: "uy:text-left",
+		center: "uy:text-center",
+		right: "uy:text-right"
+	} }
+}), s = n(t(({ children: t, colIndex: n = 0, rowIndex: i = 0, align: s, onKeyDown: c, onFocus: l, className: u, isRowHeader: d = !1, isFocusable: f = !0, ...p }, m) => {
+	let { keyboardNavigation: h } = e(), { isCellFocused: g, handleCellKeyDown: _, handleCellFocus: v } = h, y = r(() => o({
+		align: s,
+		className: u
+	}), [s, u]), b = f && g(i, n);
+	return /* @__PURE__ */ a(d ? "th" : "td", {
+		ref: m,
+		role: d ? "rowheader" : "gridcell",
+		"aria-colindex": n + 1,
+		tabIndex: b ? 0 : -1,
+		"data-focusable": f,
+		className: y,
+		onKeyDown: (e) => {
+			e.key !== "Tab" && (_(e), c?.(e));
+		},
+		onFocus: (e) => {
+			v(e), l?.(e);
+		},
+		"data-dd-privacy": "mask",
+		...p,
+		children: t
+	});
+}));
+s.displayName = "TableCell";
+//#endregion
+export { s as TableCell, o as tableCell };

package/dist/esm/core/components/table/parts/TableColumnHeader.js

@@ -0,0 +1,62 @@
+import { Actionable as e } from "../../actionable/Actionable.js";
+import { useTableContext as t } from "../Table.context.js";
+import { forwardRef as n, memo as r } from "react";
+import { uyTv as i } from "@payfit/unity-themes";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/core/components/table/parts/TableColumnHeader.tsx
+var o = i({
+	base: [
+		"uy:align-middle uy:leading-[1.00]",
+		"uy:px-200 uy:py-100 uy:typography-action uy:text-content-neutral",
+		"uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
+		"uy:hover:bg-surface-neutral-hover"
+	],
+	variants: { align: {
+		left: "uy:text-left",
+		center: "uy:text-center",
+		right: "uy:text-right"
+	} }
+}), s = r(n(({ children: n, colIndex: r = 0, rowIndex: i = 0, align: s, onKeyDown: c, onFocus: l, className: u, isFocusable: d = !0, ...f }, p) => {
+	let { keyboardNavigation: m } = t(), { isCellFocused: h, handleCellKeyDown: g, handleCellFocus: _ } = m, v = d && h(i, r), y = (e) => {
+		e.key !== "Tab" && (g(e), c?.(e));
+	};
+	return "onPress" in f ? /* @__PURE__ */ a("th", {
+		ref: p,
+		role: "columnheader",
+		"aria-colindex": r + 1,
+		"data-focusable": d,
+		className: o({
+			align: s,
+			className: u
+		}),
+		"data-dd-privacy": "allow",
+		onKeyDown: y,
+		onFocus: (e) => {
+			_(e), l?.(e);
+		},
+		children: /* @__PURE__ */ a(e, {
+			...f,
+			children: n
+		})
+	}) : /* @__PURE__ */ a("th", {
+		ref: p,
+		role: "columnheader",
+		"aria-colindex": r + 1,
+		tabIndex: v ? 0 : -1,
+		"data-focusable": d,
+		className: o({
+			align: s,
+			className: u
+		}),
+		onKeyDown: y,
+		onFocus: (e) => {
+			_(e), l?.(e);
+		},
+		"data-dd-privacy": "allow",
+		...f,
+		children: n
+	});
+}));
+s.displayName = "TableColumnHeader";
+//#endregion
+export { s as TableColumnHeader, o as tableColumnHeader };

package/dist/esm/core/components/table/parts/TableEmptyState.js

@@ -0,0 +1,131 @@
+import { Spinner as e } from "../../spinner/Spinner.js";
+import { Button as t } from "../../button/Button.js";
+import { Text as n } from "../../text/Text.js";
+import { EmptyState as r } from "../../empty-state/EmptyState.js";
+import { EmptyStateIcon as i } from "../../empty-state/parts/EmptyStateIcon.js";
+import { EmptyStateContent as a } from "../../empty-state/parts/EmptyStateContent.js";
+import { EmptyStateActions as o } from "../../empty-state/parts/EmptyStateActions.js";
+import { forwardRef as s, useMemo as c } from "react";
+import { uyTv as l } from "@payfit/unity-themes";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { FormattedMessage as f, useIntl as p } from "react-intl";
+//#region src/core/components/table/parts/TableEmptyState.tsx
+var m = l({ slots: {
+	base: "uy:flex uy:flex-col uy:items-center uy:justify-center",
+	wrapper: "uy:max-w-[300px] uy:flex uy:flex-col uy:items-center uy:py-800"
+} }), h = s((e, t) => {
+	let { variant: r, children: i } = e;
+	return /* @__PURE__ */ u(n, {
+		variant: c(() => {
+			switch (r) {
+				case "title": return "bodyStrong";
+				default: return "body";
+			}
+		}, [r]),
+		asElement: c(() => {
+			switch (r) {
+				case "title": return "h6";
+				default: return "p";
+			}
+		}, [r]),
+		ref: t,
+		className: "uy:text-center",
+		children: i
+	});
+});
+h.displayName = "TableEmptyStateText";
+var g = s(({ children: e, className: t, ...n }, r) => {
+	let { base: i, wrapper: a } = m();
+	return /* @__PURE__ */ u("div", {
+		"data-dd-privacy": "allow",
+		...n,
+		ref: r,
+		className: i(),
+		children: /* @__PURE__ */ u("div", {
+			className: a({ className: t }),
+			children: e
+		})
+	});
+});
+g.displayName = "TableEmptyState";
+var _ = () => /* @__PURE__ */ u(g, { children: /* @__PURE__ */ u(e, {
+	size: "medium",
+	label: p().formatMessage({ id: "unity:component:table:empty-state:loading:title" })
+}) }), v = ({ description: e, onButtonPress: n }) => /* @__PURE__ */ d(r, {
+	className: "uy:max-w-[524px] uy:h-[400px] uy:justify-self-center uy:p-300",
+	children: [
+		/* @__PURE__ */ u(i, {
+			icon: "InfoOutlined",
+			variant: "neutral"
+		}),
+		/* @__PURE__ */ u(a, {
+			title: /* @__PURE__ */ u(f, {
+				id: "unity:component:empty-state:waiting-for-data:title",
+				defaultMessage: "No available results yet"
+			}),
+			description: e
+		}),
+		n && /* @__PURE__ */ u(o, { children: /* @__PURE__ */ u(t, {
+			variant: "ghost",
+			onPress: n,
+			children: /* @__PURE__ */ u(f, {
+				id: "unity:component:empty-state:waiting-for-data:button-label",
+				defaultMessage: "Enable settings"
+			})
+		}) })
+	]
+}), y = ({ onButtonPress: e }) => /* @__PURE__ */ d(r, {
+	className: "uy:max-w-[524px] uy:h-[400px] uy:justify-self-center uy:p-300",
+	children: [
+		/* @__PURE__ */ u(i, {
+			icon: "WarningCircleOutlined",
+			variant: "neutral"
+		}),
+		/* @__PURE__ */ u(a, {
+			title: /* @__PURE__ */ u(f, {
+				id: "unity:component:error-state:common:main-title",
+				defaultMessage: "Something went wrong"
+			}),
+			description: /* @__PURE__ */ u(f, {
+				id: "unity:component:error-state:common:main-description-component",
+				defaultMessage: "Please refresh the page or check your connection. We’ve been notified of the issue and are working to resolve it as quickly as possible."
+			})
+		}),
+		e && /* @__PURE__ */ u(o, { children: /* @__PURE__ */ u(t, {
+			variant: "ghost",
+			onPress: e,
+			children: /* @__PURE__ */ u(f, {
+				id: "unity:component:error-state:button:label",
+				defaultMessage: "Go to dashboard"
+			})
+		}) })
+	]
+}), b = ({ onButtonPress: e }) => /* @__PURE__ */ d(r, {
+	className: "uy:max-w-[524px] uy:h-[400px] uy:justify-self-center uy:p-300",
+	children: [
+		/* @__PURE__ */ u(i, {
+			icon: "MagnifyingGlassOutlined",
+			variant: "neutral"
+		}),
+		/* @__PURE__ */ u(a, {
+			title: /* @__PURE__ */ u(f, {
+				id: "unity:component:empty-state:no-search-results:title",
+				defaultMessage: "We didn't find any results"
+			}),
+			description: /* @__PURE__ */ u(f, {
+				id: "unity:component:empty-state:no-search-results:description",
+				defaultMessage: "Try adjusting your search or filters to find what you're looking for."
+			})
+		}),
+		e && /* @__PURE__ */ u(o, { children: /* @__PURE__ */ u(t, {
+			variant: "ghost",
+			onPress: e,
+			children: /* @__PURE__ */ u(f, {
+				id: "unity:component:empty-state:no-search-results:button-label",
+				defaultMessage: "Reset filters"
+			})
+		}) })
+	]
+});
+//#endregion
+export { g as TableEmptyState, y as TableEmptyStateError, _ as TableEmptyStateLoading, v as TableEmptyStateNoData, h as TableEmptyStateText, b as TableNoSearchResults, m as tableEmptyState };

package/dist/esm/core/components/table/parts/TableHeader.js

@@ -0,0 +1,39 @@
+import e, { forwardRef as t, memo as n, useMemo as r } from "react";
+import { uyTv as i } from "@payfit/unity-themes";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/core/components/table/parts/TableHeader.tsx
+var o = i({ base: [
+	"uy:h-500 uy:bg-surface-neutral-low uy:rounded-tl-100 uy:rounded-tr-100 uy:overflow-hidden",
+	"uy:sticky uy:top-0 uy:z-[1]",
+	"uy:[&_th]:relative uy:[&_th]:after:absolute uy:[&_th]:after:inset-x-0 uy:[&_th]:after:bottom-0",
+	"uy:[&_th]:after:h-px uy:[&_th]:after:bg-border-neutral-enabled uy:[&_th]:after:content-[''] uy:[&_th]:after:pointer-events-none"
+] }), s = n(t(({ children: t, ...n }, i) => {
+	let s = r(() => {
+		let n = (t, n) => {
+			let r = 0;
+			return e.Children.map(t, (t) => {
+				if (!e.isValidElement(t)) return t;
+				let i = t, a = r;
+				return r += i.props.colSpan ?? 1, e.cloneElement(i, {
+					rowIndex: n,
+					colIndex: a,
+					...i.props
+				});
+			});
+		}, r = e.Children.toArray(t);
+		return r.length > 0 && r.every((t) => e.isValidElement(t) && t.type === "tr") ? r.map((t, r) => {
+			let i = t;
+			return e.cloneElement(i, { children: n(i.props.children, r) });
+		}) : /* @__PURE__ */ a("tr", { children: n(t, 0) });
+	}, [t]);
+	return /* @__PURE__ */ a("thead", {
+		ref: i,
+		className: o(),
+		"data-dd-privacy": "allow",
+		...n,
+		children: s
+	});
+}));
+s.displayName = "TableHeader";
+//#endregion
+export { s as TableHeader, o as tableHeader };