@lablup/ui-common 0.1.0-alpha.2 → 0.1.0-alpha.21

package/dist/components/DataTable/DataTable2.js

@@ -1,45 +1,41 @@
 /* empty css          */
-import { memo as e, useCallback as t, useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { memo as e, useCallback as t, useEffect as n, useLayoutEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/DataTable/DataTable.tsx
-var c = "dataTable";
-function l(e) {
-	return `${c}.${e}`;
+var l = [
+	"a",
+	"button",
+	"input",
+	"select",
+	"textarea",
+	"summary",
+	"label",
+	"[contenteditable='true']",
+	"[role='button']",
+	"[role='link']",
+	"[tabindex]:not([tabindex='-1'])"
+].join(",");
+function u(e, t) {
+	if (!(e instanceof Element) || !(t instanceof Element)) return !1;
+	let n = e.closest(l);
+	return n !== null && n !== t && t.contains(n);
 }
-function u(e) {
-	if (!e || typeof window > "u") return {
-		widths: {},
-		visibility: {}
+var ee = {
+	widths: {},
+	visibility: {}
+}, te = 16, d = 1200;
+function f(e) {
+	let t = Math.max(0, e.minWidth ?? 80), n = e.maxWidth ?? d;
+	return {
+		min: t,
+		max: Math.max(t, Number.isFinite(n) ? Math.max(t, n) : d)
 	};
-	try {
-		let t = window.localStorage.getItem(l(e));
-		if (!t) return {
-			widths: {},
-			visibility: {}
-		};
-		let n = JSON.parse(t);
-		if (typeof n != "object" || !n) return {
-			widths: {},
-			visibility: {}
-		};
-		let r = n;
-		return {
-			widths: typeof r.widths == "object" && r.widths !== null ? r.widths : {},
-			visibility: typeof r.visibility == "object" && r.visibility !== null ? r.visibility : {}
-		};
-	} catch {
-		return {
-			widths: {},
-			visibility: {}
-		};
-	}
 }
-function d(e, t) {
-	if (!(!e || typeof window > "u")) try {
-		window.localStorage.setItem(l(e), JSON.stringify(t));
-	} catch {}
+function p(e, t) {
+	let { min: n, max: r } = f(e);
+	return Math.min(r, Math.max(n, Math.round(t)));
 }
-function f(e, t) {
+function ne(e, t) {
 	let n = e.map((e, t) => ({
 		row: e,
 		i: t
@@ -49,7 +45,7 @@ function f(e, t) {
 		return r === 0 ? e.i - n.i : r;
 	}), n.map(({ row: e }) => e);
 }
-function p(e, t) {
+function re(e, t) {
 	let { sortComparator: n } = e;
 	if (n) return (e, r) => n(e, r, t);
 	let r = e.sortValueAccessor;
@@ -66,201 +62,277 @@ function m(e, t, n) {
 	if (e.sortable) return e.id === t ? n === "asc" ? "ascending" : "descending" : "none";
 }
 function h({ direction: e }) {
-	return e === "none" ? /* @__PURE__ */ o("span", {
+	return e === "none" ? /* @__PURE__ */ s("span", {
 		className: "data-table__sort-icon data-table__sort-icon--none",
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ s("svg", {
+		children: /* @__PURE__ */ c("svg", {
 			width: "10",
 			height: "14",
 			viewBox: "0 0 10 14",
 			fill: "none",
 			xmlns: "http://www.w3.org/2000/svg",
-			children: [/* @__PURE__ */ o("path", {
+			children: [/* @__PURE__ */ s("path", {
 				d: "M5 1L1 5H9L5 1Z",
 				fill: "currentColor",
 				opacity: "0.35"
-			}), /* @__PURE__ */ o("path", {
+			}), /* @__PURE__ */ s("path", {
 				d: "M5 13L9 9H1L5 13Z",
 				fill: "currentColor",
 				opacity: "0.35"
 			})]
 		})
-	}) : e === "asc" ? /* @__PURE__ */ o("span", {
+	}) : e === "asc" ? /* @__PURE__ */ s("span", {
 		className: "data-table__sort-icon data-table__sort-icon--asc",
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ s("svg", {
+		children: /* @__PURE__ */ c("svg", {
 			width: "10",
 			height: "14",
 			viewBox: "0 0 10 14",
 			fill: "none",
 			xmlns: "http://www.w3.org/2000/svg",
-			children: [/* @__PURE__ */ o("path", {
+			children: [/* @__PURE__ */ s("path", {
 				d: "M5 1L1 5H9L5 1Z",
 				fill: "currentColor"
-			}), /* @__PURE__ */ o("path", {
+			}), /* @__PURE__ */ s("path", {
 				d: "M5 13L9 9H1L5 13Z",
 				fill: "currentColor",
 				opacity: "0.25"
 			})]
 		})
-	}) : /* @__PURE__ */ o("span", {
+	}) : /* @__PURE__ */ s("span", {
 		className: "data-table__sort-icon data-table__sort-icon--desc",
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ s("svg", {
+		children: /* @__PURE__ */ c("svg", {
 			width: "10",
 			height: "14",
 			viewBox: "0 0 10 14",
 			fill: "none",
 			xmlns: "http://www.w3.org/2000/svg",
-			children: [/* @__PURE__ */ o("path", {
+			children: [/* @__PURE__ */ s("path", {
 				d: "M5 1L1 5H9L5 1Z",
 				fill: "currentColor",
 				opacity: "0.25"
-			}), /* @__PURE__ */ o("path", {
+			}), /* @__PURE__ */ s("path", {
 				d: "M5 13L9 9H1L5 13Z",
 				fill: "currentColor"
 			})]
 		})
 	});
 }
-function g({ columns: e, rows: c, getRowKey: l, emptyState: g, loadingState: _, loading: v = !1, persistKey: y, className: b = "", ariaLabel: x = "Data table", testId: S, onRowClick: C, sortColumnId: w, sortDirection: T, onSortChange: E }) {
-	let [D, O] = a(() => u(y));
+function g({ columns: e, rows: l, getRowKey: d, emptyState: g, loadingState: _, loading: ie = !1, columnState: v, onColumnStateChange: y, className: b = "", ariaLabel: x = "Data table", resizeHandleLabel: S = (e) => `Resize ${e.id} column`, resizeValueText: C = (e) => `${String(e)} pixels`, testId: w, onRowClick: T, isRowClickable: E, rowClassName: D, sortColumnId: O, sortDirection: k, onSortChange: A }) {
+	let [j, M] = o(() => v ?? ee);
 	n(() => {
-		O(u(y));
-	}, [y]);
-	let k = w !== void 0 || T !== void 0, [A, j] = a(void 0), [M, N] = a(void 0), P = k ? w : A, F = k ? T : M, I = t((e) => {
+		v && M(v);
+	}, [v]);
+	let N = O !== void 0 || k !== void 0, [ae, oe] = o(void 0), [P, F] = o(void 0), I = N ? O : ae, L = N ? k : P, R = t((e) => {
 		if (!e.sortable) return;
 		let t, n;
-		P === e.id ? F === (e.defaultSortDirection ?? "asc") ? (t = e.id, n = F === "asc" ? "desc" : "asc") : (t = void 0, n = void 0) : (t = e.id, n = e.defaultSortDirection ?? "asc"), k || (j(t), N(n)), E?.(t, n);
+		I === e.id ? L === (e.defaultSortDirection ?? "asc") ? (t = e.id, n = L === "asc" ? "desc" : "asc") : (t = void 0, n = void 0) : (t = e.id, n = e.defaultSortDirection ?? "asc"), N || (oe(t), F(n)), A?.(t, n);
 	}, [
-		P,
-		F,
-		k,
-		E
-	]), L = r(() => e.filter((e) => e.alwaysVisible ? !0 : D.visibility[e.id] !== !1), [e, D.visibility]), R = t((e) => {
-		let t = D.widths[e.id];
-		return typeof t == "number" && t > 0 ? t : e.initialWidth;
-	}, [D.widths]), z = i(null), B = t((e, t, n) => {
-		if (t.noResize) return;
-		e.preventDefault(), e.stopPropagation(), z.current = {
-			columnId: t.id,
-			startX: e.clientX,
-			startWidth: n,
-			minWidth: t.minWidth ?? 80
-		};
-		let r = (e) => {
-			let t = z.current;
-			if (!t) return;
-			let n = e.clientX - t.startX, r = Math.max(t.minWidth, t.startWidth + n);
-			O((e) => ({
-				...e,
-				widths: {
-					...e.widths,
-					[t.columnId]: r
-				}
-			}));
-		}, i = () => {
-			z.current = null, window.removeEventListener("mousemove", r), window.removeEventListener("mouseup", i);
+		I,
+		L,
+		N,
+		A
+	]), z = i(() => e.filter((e) => e.alwaysVisible ? !0 : j.visibility[e.id] !== !1), [e, j.visibility]), B = t((e) => {
+		let t = j.widths[e.id], n = typeof t == "number" && t > 0 ? t : e.initialWidth;
+		if (n !== void 0) return e.noResize && e.maxWidth === void 0 ? Math.max(n, e.minWidth ?? 0) : p(e, n);
+	}, [j.widths]), V = a(/* @__PURE__ */ new Map()), [H, U] = o({}), W = t((e, t) => {
+		let n = p(e, t);
+		U((t) => t[e.id] === n ? t : {
+			...t,
+			[e.id]: n
+		});
+	}, []), G = t((e, t) => {
+		t ? V.current.set(e, t) : V.current.delete(e);
+	}, []);
+	r(() => {
+		let e = (e, t) => {
+			let n = t.getBoundingClientRect().width;
+			n > 0 && W(e, n);
 		};
-		window.addEventListener("mousemove", r), window.addEventListener("mouseup", i);
+		for (let t of z) {
+			let n = V.current.get(t.id);
+			n && e(t, n);
+		}
+		if (typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver((t) => {
+			for (let n of t) {
+				let t = n.target.dataset.columnId, r = z.find((e) => e.id === t);
+				r && e(r, n.target);
+			}
+		});
+		for (let e of z) {
+			let n = V.current.get(e.id);
+			n && t.observe(n);
+		}
+		return () => t.disconnect();
+	}, [W, z]);
+	let K = a(null), q = t((e, t) => {
+		let n = p(e, t);
+		M((t) => ({
+			...t,
+			widths: {
+				...t.widths,
+				[e.id]: n
+			}
+		})), W(e, n);
+	}, [W]), J = t((e) => {
+		let t = K.current;
+		!t || e !== void 0 && t.pointerId !== e || (K.current = null, t.handle.hasPointerCapture?.(t.pointerId) && t.handle.releasePointerCapture?.(t.pointerId));
 	}, []);
+	n(() => J, [J]);
+	let Y = t((e, t) => {
+		let n = e.parentElement?.getBoundingClientRect().width ?? 0, r = H[t.id] ?? B(t) ?? f(t).min;
+		return p(t, Math.round(n) || r);
+	}, [H, B]), se = t((e, t) => {
+		if (t.noResize || !e.isPrimary || e.button !== 0 || K.current) return;
+		e.preventDefault(), e.stopPropagation();
+		let n = e.currentTarget;
+		K.current = {
+			columnId: t.id,
+			startX: e.clientX,
+			startWidth: Y(n, t),
+			minWidth: f(t).min,
+			maxWidth: f(t).max,
+			pointerId: e.pointerId,
+			handle: n
+		}, n.setPointerCapture?.(e.pointerId);
+	}, [Y]), ce = t((t) => {
+		let n = K.current;
+		if (!n || n.pointerId !== t.pointerId) return;
+		t.preventDefault(), t.stopPropagation();
+		let r = Math.max(n.minWidth, Math.min(n.maxWidth, n.startWidth + t.clientX - n.startX)), i = e.find((e) => e.id === n.columnId);
+		i && q(i, r);
+	}, [e, q]), X = t((e) => {
+		K.current?.pointerId === e.pointerId && (e.preventDefault(), e.stopPropagation(), J(e.pointerId));
+	}, [J]), le = t((e, t) => {
+		if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" && e.key !== "Home") return;
+		e.preventDefault(), e.stopPropagation();
+		let { min: n, max: r } = f(t), i = Y(e.currentTarget, t), a = e.key === "Home" ? n : Math.min(r, Math.max(n, i + (e.key === "ArrowRight" ? te : -16)));
+		q(t, a);
+	}, [Y, q]), Z = a(j);
 	n(() => {
-		d(y, D);
-	}, [y, D]);
-	let V = r(() => {
-		if (!P || !F) return c;
-		let t = e.find((e) => e.id === P);
-		return t?.sortable ? f(c, p(t, F)) : c;
+		Z.current !== j && (Z.current = j, y?.(j));
+	}, [j, y]);
+	let Q = i(() => {
+		if (!I || !L) return l;
+		let t = e.find((e) => e.id === I);
+		return t?.sortable ? ne(l, re(t, L)) : l;
 	}, [
-		c,
+		l,
 		e,
-		P,
-		F
-	]), H = ["data-table", b].filter(Boolean).join(" ");
-	return /* @__PURE__ */ o("div", {
-		className: H,
-		"data-testid": S,
-		children: /* @__PURE__ */ s("table", {
+		I,
+		L
+	]), $ = ["data-table", b].filter(Boolean).join(" ");
+	return /* @__PURE__ */ s("div", {
+		className: $,
+		"data-testid": w,
+		children: /* @__PURE__ */ c("table", {
 			className: "data-table__table",
 			"aria-label": x,
 			role: "table",
-			children: [/* @__PURE__ */ o("thead", {
+			children: [/* @__PURE__ */ s("thead", {
 				className: "data-table__head",
-				children: /* @__PURE__ */ o("tr", {
+				children: /* @__PURE__ */ s("tr", {
 					className: "data-table__row data-table__row--head",
-					children: L.map((e) => {
-						let t = R(e), n = e.sortable && e.id === P;
-						return /* @__PURE__ */ s("th", {
+					children: z.map((e) => {
+						let t = B(e), n = p(e, H[e.id] ?? t ?? f(e).min), r = f(e), i = e.sortable && e.id === I;
+						return /* @__PURE__ */ c("th", {
+							ref: (t) => G(e.id, t),
+							"data-column-id": e.id,
 							scope: "col",
 							className: [
 								"data-table__cell",
 								"data-table__cell--head",
+								!e.noResize && "data-table__cell--resizable",
 								e.sortable && "data-table__cell--sortable",
-								n && "data-table__cell--sort-active",
+								i && "data-table__cell--sort-active",
 								e.className,
 								e.align && `data-table__cell--align-${e.align}`
 							].filter(Boolean).join(" "),
-							style: t ? { width: `${String(t)}px` } : void 0,
-							"aria-sort": m(e, P, F),
+							style: {
+								width: t === void 0 ? void 0 : `${String(t)}px`,
+								minWidth: e.minWidth,
+								maxWidth: e.noResize ? e.maxWidth : r.max
+							},
+							"aria-sort": m(e, I, L),
 							onClick: e.sortable ? () => {
-								I(e);
+								R(e);
 							} : void 0,
 							onKeyDown: e.sortable ? (t) => {
-								(t.key === "Enter" || t.key === " ") && (t.preventDefault(), I(e));
+								(t.key === "Enter" || t.key === " ") && (t.preventDefault(), R(e));
 							} : void 0,
 							tabIndex: e.sortable ? 0 : void 0,
 							children: [
-								/* @__PURE__ */ o("span", {
+								/* @__PURE__ */ s("span", {
 									className: "data-table__head-label",
 									children: e.header
 								}),
-								e.sortable && /* @__PURE__ */ o(h, { direction: n && F ? F : "none" }),
-								!e.noResize && /* @__PURE__ */ o("div", {
+								e.sortable && /* @__PURE__ */ s(h, { direction: i && L ? L : "none" }),
+								!e.noResize && /* @__PURE__ */ s("div", {
 									role: "separator",
 									"aria-orientation": "vertical",
+									"aria-label": S(e),
+									"aria-valuemin": r.min,
+									"aria-valuemax": r.max,
+									"aria-valuenow": n,
+									"aria-valuetext": C(n, e),
+									tabIndex: 0,
 									className: "data-table__resize-handle",
-									onMouseDown: (n) => {
-										B(n, e, t ?? e.minWidth ?? 120);
-									}
+									onClick: (e) => e.stopPropagation(),
+									onPointerDown: (t) => se(t, e),
+									onPointerMove: ce,
+									onPointerUp: X,
+									onPointerCancel: X,
+									onLostPointerCapture: (e) => J(e.pointerId),
+									onKeyDown: (t) => le(t, e)
 								})
 							]
 						}, e.id);
 					})
 				})
-			}), /* @__PURE__ */ o("tbody", {
+			}), /* @__PURE__ */ s("tbody", {
 				className: "data-table__body",
-				children: v ? /* @__PURE__ */ o("tr", {
+				children: ie ? /* @__PURE__ */ s("tr", {
 					className: "data-table__row data-table__row--state",
-					children: /* @__PURE__ */ o("td", {
-						colSpan: L.length || 1,
+					children: /* @__PURE__ */ s("td", {
+						colSpan: z.length || 1,
 						className: "data-table__state-cell",
-						children: _ ?? /* @__PURE__ */ o("div", { className: "data-table__loading" })
+						children: _ ?? /* @__PURE__ */ s("div", { className: "data-table__loading" })
 					})
-				}) : V.length === 0 ? /* @__PURE__ */ o("tr", {
+				}) : Q.length === 0 ? /* @__PURE__ */ s("tr", {
 					className: "data-table__row data-table__row--state",
-					children: /* @__PURE__ */ o("td", {
-						colSpan: L.length || 1,
+					children: /* @__PURE__ */ s("td", {
+						colSpan: z.length || 1,
 						className: "data-table__state-cell",
 						children: g
 					})
-				}) : V.map((e, t) => {
-					let n = l(e, t);
-					return /* @__PURE__ */ o("tr", {
-						className: ["data-table__row", C && "data-table__row--clickable"].filter(Boolean).join(" "),
-						onClick: C ? () => {
-							C(e);
+				}) : Q.map((e, t) => {
+					let n = d(e, t), r = !!(T && (E?.(e, t) ?? !0)), i = D?.(e, t);
+					return /* @__PURE__ */ s("tr", {
+						className: [
+							"data-table__row",
+							r && "data-table__row--clickable",
+							i
+						].filter(Boolean).join(" "),
+						onClick: r ? (t) => {
+							u(t.target, t.currentTarget) || T?.(e);
 						} : void 0,
-						onKeyDown: C ? (t) => {
-							(t.key === "Enter" || t.key === " ") && (t.preventDefault(), C(e));
+						onKeyDown: r ? (t) => {
+							(t.key === "Enter" || t.key === " ") && (u(t.target, t.currentTarget) || (t.preventDefault(), T?.(e)));
 						} : void 0,
-						tabIndex: C ? 0 : void 0,
-						role: C ? "button" : void 0,
-						children: L.map((n) => /* @__PURE__ */ o("td", {
+						tabIndex: r ? 0 : void 0,
+						role: r ? "button" : void 0,
+						children: z.map((n) => /* @__PURE__ */ s("td", {
 							className: [
 								"data-table__cell",
 								n.className,
 								n.align && `data-table__cell--align-${n.align}`
 							].filter(Boolean).join(" "),
+							style: {
+								minWidth: n.minWidth,
+								maxWidth: n.noResize ? n.maxWidth : f(n).max
+							},
 							children: n.render(e, t)
 						}, n.id))
 					}, n);