flexitablesort 1.0.0

package/dist/index.es.js

@@ -0,0 +1,885 @@
+import e, { createContext as t, forwardRef as n, memo as r, useCallback as i, useContext as a, useEffect as o, useImperativeHandle as s, useMemo as c, useReducer as l, useRef as u } from "react";
+import d from "styled-components";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { createPortal as m } from "react-dom";
+import h from "classnames";
+//#region src/Components/TableContainer/styles.tsx
+var g = d.div`
+  height: 100%;
+
+  &, & .table, & .header, & .thead, & .body, & .ibody,
+  & .draggable, & .tr, & .th, & .td {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  &.is-dragging, &.is-dragging * {
+    user-select: none !important;
+    -webkit-user-select: none !important;
+  }
+`, _ = t(void 0), v = () => {
+	let e = a(_);
+	if (e === void 0) throw Error("useTable must be used within a TableProvider");
+	return e;
+}, y = (e) => {
+	let t = u(!1), n = u(!1), r = u(0), a = u(null), o = i((e, i, s) => {
+		let c = s === "vertical", l = c ? i.scrollHeight - i.clientHeight : i.scrollWidth - i.clientWidth;
+		c ? i.scrollTop += e : i.scrollLeft += e, c && (i.scrollTop >= l || i.scrollTop <= 0) || !c && (i.scrollLeft >= l || i.scrollLeft <= 0) ? a.current !== null && cancelAnimationFrame(a.current) : n.current || t.current ? (a.current = requestAnimationFrame(() => o(e + r.current, i, s)), r.current += e / 1e3) : a.current !== null && cancelAnimationFrame(a.current);
+	}, []);
+	return {
+		startAutoScroll: i((e, i, a) => {
+			let s = a === "vertical";
+			!n.current && !t.current && (s ? n.current = !0 : t.current = !0, r.current = 0, o(e, i, a));
+		}, [o]),
+		stopAutoScroll: i(() => {
+			n.current = !1, t.current = !1, a.current !== null && cancelAnimationFrame(a.current);
+		}, []),
+		isAutoScrollingHorizontal: t,
+		isAutoScrollingVertical: n,
+		BodyScrollHandle: i((t) => {
+			e.headerRef?.current && t.currentTarget && (e.headerRef.current.scrollLeft = t.currentTarget.scrollLeft);
+		}, [e]),
+		HeaderScrollHandle: i((t) => {
+			e.bodyRef?.current && t.currentTarget && (e.bodyRef.current.scrollLeft = t.currentTarget.scrollLeft);
+		}, [e])
+	};
+}, b = (e, t) => {
+	let n = e, r = 0, i = t.length - 1;
+	for (; r < i;) {
+		let e = Math.floor((r + i) / 2), a = t[e];
+		if (a.itemTop <= n && n <= a.itemBottom) return n < a.itemTop + a.height / 2 ? +a.index : +a.index + 1;
+		n < a.itemTop ? i = e - 1 : r = e + 1;
+	}
+	return +t[r].index;
+}, x = (e, t) => {
+	let n = e, r = 0, i = t.length - 1;
+	for (; r < i;) {
+		let e = Math.floor((r + i) / 2), a = t[e];
+		if (a.itemLeft <= n && n <= a.itemRight) return n < a.itemLeft + a.width / 2 ? +a.index : +a.index + 1;
+		n < a.itemLeft ? i = e - 1 : r = e + 1;
+	}
+	return +t[r].index;
+}, S = (e, t, n) => t !== void 0 && e < t || n !== void 0 && e > n, C = "all 450ms cubic-bezier(0.2, 0, 0, 1)", w = (e, t, n, r, a, s) => {
+	let { startAutoScroll: c, stopAutoScroll: l, isAutoScrollingHorizontal: d, isAutoScrollingVertical: f } = y(e), p = u(null), m = u(null), h = u(null), g = u({
+		x: 0,
+		y: 0
+	}), _ = u(null), v = u(null), S = u({
+		width: 0,
+		height: 0
+	}), w = i(() => {
+		let t = e.bodyRef.current;
+		if (!t) return null;
+		let n = t.scrollTop, r = t.getBoundingClientRect().top, i = t.querySelectorAll(".draggable[data-type=\"row\"]"), o = [];
+		for (let e = 0; e < i.length; e++) {
+			let t = i[e];
+			if (t.dataset.index === void 0) continue;
+			let a = t.getBoundingClientRect(), s = a.top - r + n;
+			o.push({
+				height: a.height,
+				itemTop: s,
+				itemBottom: s + a.height,
+				index: t.dataset.index
+			});
+		}
+		let s = a.rowDragRange.start, c = a.rowDragRange.end;
+		return (s || c) && (o = o.filter((e) => (!s || e.index >= s) && (!c || e.index < c))), o;
+	}, [e.bodyRef, a.rowDragRange]), T = i(() => {
+		let t = e.headerRef.current;
+		if (!t || !t.children[0]) return null;
+		let n = Array.from(t.children[0].children).map((e) => {
+			let t = e.getBoundingClientRect();
+			return {
+				left: t.left,
+				width: t.width,
+				itemLeft: t.left,
+				itemRight: t.left + t.width,
+				index: e.dataset.index
+			};
+		}).filter((e) => e.index !== void 0), r = a.columnDragRange?.start, i = a.columnDragRange?.end;
+		return (r !== void 0 || i !== void 0) && (n = n.filter((e) => {
+			let t = +e.index;
+			return (r === void 0 || t >= r) && (i === void 0 || t < i);
+		})), n;
+	}, [e.headerRef, a.columnDragRange]), E = i((t, n, r, i) => {
+		let a = e.placeholderRef?.current;
+		if (!a || !t) {
+			a && (a.style.display = "none");
+			return;
+		}
+		let o = S.current, s = t.getBoundingClientRect();
+		a.style.display = "block";
+		let c = n < r;
+		if (i === "row") {
+			let e = c ? s.top + s.height - o.height : s.top;
+			a.style.top = `${e}px`, a.style.left = `${s.left}px`, a.style.width = `${s.width}px`, a.style.height = `${o.height}px`;
+		} else {
+			let t = (e.tableRef?.current)?.getBoundingClientRect(), n = c ? s.left + s.width - o.width : s.left;
+			a.style.top = `${t?.top ?? s.top}px`, a.style.left = `${n}px`, a.style.width = `${o.width}px`, a.style.height = `${t?.height ?? s.height}px`;
+		}
+	}, [e.placeholderRef, e.tableRef]), D = i((t, n, r) => {
+		if (t === null || n === null) return;
+		let i = S.current, a = null;
+		if (r === "row") {
+			let r = e.bodyRef.current;
+			if (!r) return;
+			let o = r.querySelectorAll(".draggable[data-type=\"row\"]");
+			for (let e = 0; e < o.length; e++) {
+				let r = o[e], s = +r.dataset.index, c = r.firstElementChild;
+				if (!c) continue;
+				let l = "";
+				s > t && s <= n ? l = `translateY(-${i.height}px)` : s < t && s >= n && (l = `translateY(${i.height}px)`), c.style.transform = l, c.style.transition = s === t ? "none" : C, s === n ? (r.setAttribute("data-drop-target", "true"), a = r) : r.removeAttribute("data-drop-target");
+			}
+		} else if (r === "column") {
+			let r = e.headerRef.current;
+			if (r) {
+				let e = r.querySelectorAll(".draggable[data-type=\"column\"]");
+				for (let r = 0; r < e.length; r++) {
+					let o = e[r], s = +o.dataset.index, c = o.firstElementChild;
+					if (!c) continue;
+					let l = "";
+					s > t && s <= n ? l = `translateX(-${i.width}px)` : s < t && s >= n && (l = `translateX(${i.width}px)`), c.style.transform = l, c.style.transition = s === t ? "none" : C, s === n ? (o.setAttribute("data-drop-target", "true"), a = o) : o.removeAttribute("data-drop-target");
+				}
+			}
+			let o = e.bodyRef.current;
+			if (o) {
+				let e = o.querySelectorAll(".td[data-col-index]");
+				for (let r = 0; r < e.length; r++) {
+					let a = e[r], o = +a.dataset.colIndex, s = "";
+					o > t && o <= n ? s = `translateX(-${i.width}px)` : o < t && o >= n && (s = `translateX(${i.width}px)`), a.style.transform = s, a.style.transition = C;
+				}
+			}
+		}
+		E(a, t, n, r);
+	}, [
+		e.bodyRef,
+		e.headerRef,
+		e.placeholderRef,
+		E
+	]), O = i(() => {
+		let t = e.placeholderRef?.current;
+		t && (t.style.display = "none");
+		let n = e.bodyRef.current;
+		if (n) {
+			let e = n.querySelectorAll(".draggable");
+			for (let t = 0; t < e.length; t++) {
+				e[t].removeAttribute("data-drop-target");
+				let n = e[t].firstElementChild;
+				n && (n.style.transform = "", n.style.transition = "");
+			}
+			let t = n.querySelectorAll(".td[data-col-index]");
+			for (let e = 0; e < t.length; e++) t[e].style.transform = "", t[e].style.transition = "";
+		}
+		let r = e.headerRef.current;
+		if (r) {
+			let e = r.querySelectorAll(".draggable");
+			for (let t = 0; t < e.length; t++) {
+				e[t].removeAttribute("data-drop-target");
+				let n = e[t].firstElementChild;
+				n && (n.style.transform = "", n.style.transition = "");
+			}
+		}
+	}, [e.bodyRef, e.headerRef]), k = i((t) => {
+		if (t.target !== t.currentTarget) {
+			let r = !1, i = ((e) => {
+				for (; e;) {
+					if (e.dataset?.dragHandle === "true" && (r = !0), e.dataset?.contextid || e.dataset?.disabled === "true") return null;
+					if (e.dataset?.id) return e;
+					e = e.parentNode;
+				}
+				return null;
+			})(t.target);
+			if (!i || !r && i.querySelector("[data-drag-handle]")) return;
+			let a = i.dataset.id, o = +i.dataset.index, s = i.dataset.type;
+			h.current = s, _.current = o, v.current = null;
+			let c = s === "row" ? e.bodyRef.current.scrollLeft : 0, l = i.getBoundingClientRect();
+			S.current = {
+				width: l.width,
+				height: l.height
+			};
+			let u = {
+				x: 0,
+				y: 0
+			};
+			t.type === "touchstart" ? (u.x = t.touches[0].clientX, u.y = t.touches[0].clientY) : (u.x = t.clientX - l.left - c, u.y = t.clientY - l.top), g.current = u;
+			let d = {
+				x: l.left + c,
+				y: l.top
+			};
+			s === "row" ? p.current = w() : p.current = T();
+			let f = e.bodyRef.current;
+			f && (m.current = f.getBoundingClientRect());
+			let y = e.cloneRef?.current;
+			y && (y.style.transform = `translate(${d.x}px, ${d.y}px)`), requestAnimationFrame(() => {
+				n({
+					type: "dragStart",
+					value: {
+						rect: {
+							draggedItemHeight: l.height,
+							draggedItemWidth: l.width
+						},
+						dragged: {
+							initial: u,
+							translate: d,
+							draggedID: a,
+							isDragging: !0,
+							sourceIndex: o
+						},
+						dragType: s
+					}
+				}), requestAnimationFrame(() => {
+					let t = e.cloneRef?.current, n = e.bodyRef.current;
+					if (t && n) {
+						if (s === "row") t.scrollLeft = n.scrollLeft;
+						else if (s === "column") {
+							let e = t.querySelector(".clone-body");
+							e && (e.scrollTop = n.scrollTop);
+						}
+					}
+				});
+			});
+		}
+	}, [
+		n,
+		e,
+		w,
+		T
+	]), A = i(() => {
+		let t = v.current, r = _.current, i = h.current;
+		p.current = null, m.current = null;
+		let a = e.cloneRef?.current;
+		a && (a.style.transform = "translate(0px, 0px)", a.scrollLeft = 0), O(), s && r !== null && t !== null && i && s({
+			sourceIndex: r,
+			targetIndex: t,
+			dragType: i
+		}), n({
+			type: "dragEnd",
+			value: {
+				targetIndex: t,
+				sourceIndex: r
+			}
+		}), l(), h.current = null, _.current = null, v.current = null;
+	}, [
+		n,
+		l,
+		e.cloneRef,
+		O,
+		s
+	]), j = i(() => {
+		p.current = null, m.current = null;
+		let e = _.current, t = v.current, n = h.current;
+		e !== null && t !== null && D(e, t, n);
+	}, [D]), M = i((t) => {
+		t.stopPropagation();
+		let n = g.current, i, a;
+		t.type === "touchmove" ? (i = t.touches[0].clientX - n.x, a = t.touches[0].clientY - n.y) : (i = t.clientX - n.x, a = t.clientY - n.y);
+		let o = e.cloneRef?.current;
+		if (o) {
+			o.style.transform = `translate(${i}px, ${a}px)`;
+			let t = e.bodyRef.current;
+			if (t) {
+				if (h.current === "row") o.scrollLeft = t.scrollLeft;
+				else if (h.current === "column") {
+					let e = o.querySelector(".clone-body");
+					e && (e.scrollTop = t.scrollTop);
+				}
+			}
+		}
+		f.current = !1, d.current = !1;
+		let s = e.bodyRef.current;
+		if (!s) return;
+		let { clientY: u, clientX: y } = t, S = m.current;
+		S || (S = s.getBoundingClientRect(), m.current = S);
+		let { top: C, bottom: E, left: O, right: k } = S, A = 0, j = h.current || r;
+		if (j === "row") {
+			let e = s.scrollTop, t = S.top, n = p.current;
+			n || (n = w(), p.current = n), n && n.length > 0 && (A = b(u - t + e, n)), u < C + 30 ? (c(-5, s, "vertical"), p.current = null) : u > E - 30 ? (c(5, s, "vertical"), p.current = null) : l();
+		} else {
+			let e = p.current;
+			e || (e = T(), p.current = e), e && e.length > 0 && (A = x(y, e)), y < O + 30 ? (c(-5, s, "horizontal"), p.current = null) : y > k - 30 ? (c(5, s, "horizontal"), p.current = null) : l();
+		}
+		A !== v.current && (v.current = A, requestAnimationFrame(() => {
+			D(_.current, A, j);
+		}));
+	}, [
+		r,
+		d,
+		f,
+		e.bodyRef,
+		e.cloneRef,
+		w,
+		T,
+		c,
+		l,
+		D
+	]), N = i(() => {
+		p.current = null, m.current = null;
+		let t = e.cloneRef?.current;
+		t && (t.style.transform = "translate(0px, 0px)", t.scrollLeft = 0), O(), n({
+			type: "dragEnd",
+			value: {
+				targetIndex: null,
+				sourceIndex: null
+			}
+		}), l(), h.current = null, _.current = null, v.current = null;
+	}, [
+		n,
+		l,
+		e.cloneRef,
+		O
+	]), P = i((e) => {
+		e.key === "Escape" && N();
+	}, [N]);
+	return o(() => {
+		if (t.isDragging) {
+			let t = e.bodyRef.current;
+			return window.addEventListener("mousemove", M, { passive: !0 }), window.addEventListener("touchmove", M, !1), window.addEventListener("touchend", A, !1), window.addEventListener("mouseup", A, !1), window.addEventListener("keydown", P), t?.addEventListener("scroll", j, { passive: !0 }), () => {
+				window.removeEventListener("mousemove", M), window.removeEventListener("touchmove", M, !1), window.removeEventListener("touchend", A, !1), window.removeEventListener("mouseup", A, !1), window.removeEventListener("keydown", P), t?.removeEventListener("scroll", j);
+			};
+		}
+	}, [
+		t.isDragging,
+		M,
+		A,
+		N,
+		P,
+		j,
+		e.bodyRef
+	]), { dragStart: k };
+}, T = {
+	columnDragRange: {
+		start: void 0,
+		end: void 0
+	},
+	rowDragRange: {
+		start: void 0,
+		end: void 0
+	},
+	defaultSizing: 50
+};
+function E(e, t) {
+	switch (t.type) {
+		case "setClone": return {
+			...e,
+			clone: t.value
+		};
+		case "setDragged": return {
+			...e,
+			dragged: {
+				...e.dragged,
+				...t.value
+			}
+		};
+		case "setDragType": return {
+			...e,
+			dragType: t.value
+		};
+		case "setRect": return {
+			...e,
+			rect: t.value
+		};
+		case "setTableDimensions": return {
+			...e,
+			tableDimensions: t.value
+		};
+		case "setTableRef": return {
+			...e,
+			refs: {
+				...e.refs,
+				tableRef: t.value
+			}
+		};
+		case "setBodyRef": return {
+			...e,
+			refs: {
+				...e.refs,
+				bodyRef: t.value
+			}
+		};
+		case "setHeaderRef": return {
+			...e,
+			refs: {
+				...e.refs,
+				headerRef: t.value
+			}
+		};
+		case "setCloneRef": return {
+			...e,
+			refs: {
+				...e.refs,
+				cloneRef: t.value
+			}
+		};
+		case "setPlaceholderRef": return {
+			...e,
+			refs: {
+				...e.refs,
+				placeholderRef: t.value
+			}
+		};
+		case "setBodyScrollBarWidth": return {
+			...e,
+			bodyScrollBarWidth: t.value
+		};
+		case "setWidths": return {
+			...e,
+			widths: t.value
+		};
+		case "setColumnIds": return {
+			...e,
+			columnIds: t.value
+		};
+		case "setOptions": return {
+			...e,
+			options: t.value ?? T
+		};
+		case "dragStart": return {
+			...e,
+			rect: t.value.rect,
+			dragged: {
+				...e.dragged,
+				...t.value.dragged
+			},
+			dragType: t.value.dragType
+		};
+		case "dragEnd": return {
+			...e,
+			clone: null,
+			dragged: {
+				initial: {
+					x: 0,
+					y: 0
+				},
+				translate: {
+					x: 0,
+					y: 0
+				},
+				isDragging: !1,
+				draggedID: null,
+				targetIndex: t.value?.targetIndex ?? null,
+				sourceIndex: t.value?.sourceIndex ?? null
+			},
+			dragType: null,
+			rect: {
+				draggedItemWidth: 0,
+				draggedItemHeight: 0
+			}
+		};
+		default: throw Error(`Unhandled action type: ${t.type}`);
+	}
+}
+var D = {
+	clone: null,
+	dragged: {
+		initial: {
+			x: 0,
+			y: 0
+		},
+		translate: {
+			x: 0,
+			y: 0
+		},
+		isDragging: !1,
+		draggedID: null,
+		targetIndex: null,
+		sourceIndex: null
+	},
+	dragType: null,
+	rect: {
+		draggedItemWidth: 0,
+		draggedItemHeight: 0
+	},
+	tableDimensions: {
+		height: 0,
+		width: 0
+	},
+	refs: {
+		tableRef: null,
+		bodyRef: null,
+		headerRef: null,
+		cloneRef: null,
+		placeholderRef: null
+	},
+	bodyScrollBarWidth: 0,
+	options: T,
+	widths: [],
+	columnIds: []
+}, O = {
+	position: "relative",
+	display: "flex",
+	flexFlow: "column"
+}, k = {
+	position: "fixed",
+	pointerEvents: "none",
+	zIndex: 3,
+	top: 0,
+	left: 0,
+	display: "none"
+}, A = n(({ children: e, className: t, style: n, options: r, onDragEnd: i, renderPlaceholder: a }, d) => {
+	let m = u(null), h = u(null), v = u(null);
+	s(d, () => m.current, []);
+	let [y, b] = l(E, D), x = c(() => ({
+		state: y,
+		dispatch: b
+	}), [y]);
+	o(() => {
+		b({
+			type: "setTableRef",
+			value: m
+		}), b({
+			type: "setCloneRef",
+			value: h
+		}), b({
+			type: "setPlaceholderRef",
+			value: v
+		});
+	}, [m]), o(() => {
+		let e = () => {
+			m.current && b({
+				type: "setTableDimensions",
+				value: {
+					height: m.current.offsetHeight,
+					width: m.current.offsetWidth
+				}
+			});
+		};
+		return e(), window.addEventListener("resize", e), () => {
+			window.removeEventListener("resize", e);
+		};
+	}, [m]), o(() => {
+		b({
+			type: "setOptions",
+			value: r
+		});
+	}, [r]);
+	let { dragStart: S } = w(y.refs, y.dragged, b, y.dragType, y.options, i), C = c(() => ({
+		position: "fixed",
+		zIndex: "5",
+		pointerEvents: "none",
+		top: 0,
+		left: 0,
+		display: "flex",
+		flexDirection: "column",
+		height: y.dragType === "row" ? y.rect.draggedItemHeight : `${y.tableDimensions.height - 20}px`,
+		width: y.dragType === "column" ? `${y.rect.draggedItemWidth}px` : `${y.tableDimensions.width - 20}px`,
+		overflow: "hidden",
+		boxShadow: y.dragged.isDragging ? "0 0 10px 0 rgba(0, 0, 0, 0.1)" : "none"
+	}), [
+		y.dragType,
+		y.dragged.isDragging,
+		y.rect.draggedItemHeight,
+		y.rect.draggedItemWidth,
+		y.tableDimensions.height,
+		y.tableDimensions.width
+	]);
+	return /* @__PURE__ */ f(_.Provider, {
+		value: x,
+		children: /* @__PURE__ */ p(g, {
+			className: y.dragged.isDragging ? "is-dragging" : "",
+			children: [
+				/* @__PURE__ */ f("div", {
+					id: "portalroot",
+					style: C,
+					ref: h,
+					children: y.clone
+				}),
+				a && /* @__PURE__ */ f("div", {
+					ref: v,
+					style: k,
+					children: a()
+				}),
+				/* @__PURE__ */ f("div", {
+					"data-contextid": "context",
+					ref: m,
+					onMouseDown: S,
+					onTouchStart: S,
+					style: {
+						...O,
+						...n
+					},
+					className: `table ${t ?? ""}`,
+					children: e
+				})
+			]
+		})
+	});
+});
+A.displayName = "TableProvider";
+//#endregion
+//#region src/Components/TableHeader.tsx
+var j = n(({ children: e, style: t, className: n }, r) => {
+	let i = u(null), a = r || i, { state: s, dispatch: l } = v();
+	o(() => {
+		l({
+			type: "setHeaderRef",
+			value: a
+		});
+	}, [l, a]);
+	let { HeaderScrollHandle: d } = y(s.refs), p = {
+		display: "flex",
+		flex: "1 0 auto"
+	}, m = c(() => ({
+		overflow: "hidden",
+		display: "flex",
+		paddingRight: `${s.bodyScrollBarWidth}px`,
+		userSelect: s.dragged.isDragging ? "none" : "auto",
+		...t
+	}), [
+		s.bodyScrollBarWidth,
+		s.dragged.isDragging,
+		t
+	]);
+	return o(() => {
+		a.current && l({
+			type: "setWidths",
+			value: Array.from(a.current.querySelectorAll(".th")).map((e) => {
+				let t = e.getAttribute("data-width");
+				return t ? parseInt(t, 10) : null;
+			})
+		});
+	}, [
+		e,
+		l,
+		a
+	]), o(() => {
+		a.current && l({
+			type: "setColumnIds",
+			value: Array.from(a.current.querySelectorAll(".draggable")).map((e) => e.getAttribute("data-id"))
+		});
+	}, [
+		e,
+		l,
+		a
+	]), /* @__PURE__ */ f("div", {
+		className: `header ${n ?? ""}`,
+		children: /* @__PURE__ */ f("div", {
+			className: "thead",
+			style: m,
+			"data-droppableid": "header",
+			onScroll: d,
+			ref: a,
+			children: /* @__PURE__ */ f("div", {
+				style: p,
+				className: "tr",
+				children: e
+			})
+		})
+	});
+});
+j.displayName = "TableHeader";
+//#endregion
+//#region src/Components/Draggable.tsx
+var M = r(({ children: t, id: n, index: r, type: i, styles: a = {} }) => {
+	let { state: s, dispatch: l } = v(), d = c(() => String(n) === String(s.dragged.draggedID) && s.dragged.isDragging, [
+		n,
+		s.dragged.draggedID,
+		s.dragged.isDragging
+	]), p = c(() => i === "row" ? S(r, s.options.rowDragRange.start, s.options.rowDragRange.end) : S(r, s.options.columnDragRange.start, s.options.columnDragRange.end), [
+		r,
+		s.options.columnDragRange.end,
+		s.options.columnDragRange.start,
+		s.options.rowDragRange.end,
+		s.options.rowDragRange.start,
+		i
+	]), m = u(null), h = u(!1);
+	o(() => {
+		m.current && (h.current = !!m.current.querySelector("[data-drag-handle]"));
+	});
+	let g = c(() => ({
+		cursor: d ? "-webkit-grabbing" : p || h.current ? "auto" : "-webkit-grab",
+		zIndex: d ? 2 : 1,
+		opacity: d ? 0 : 1,
+		pointerEvents: d ? "none" : "auto",
+		display: "flex"
+	}), [p, d]), _ = (n) => {
+		p || requestAnimationFrame(() => {
+			l({
+				type: "setClone",
+				value: e.cloneElement(t)
+			});
+		});
+	};
+	return /* @__PURE__ */ f("div", {
+		className: "draggable",
+		"data-id": n,
+		"data-index": r,
+		"data-type": i,
+		onMouseDown: _,
+		"data-disabled": p ? "true" : "false",
+		style: a,
+		children: /* @__PURE__ */ f("div", {
+			ref: m,
+			style: g,
+			children: t
+		})
+	});
+});
+M.displayName = "Draggable";
+//#endregion
+//#region src/Components/ColumnCell.tsx
+var N = r(({ children: e, width: t, style: n, className: r, ...i }) => {
+	let { state: a } = v(), o = c(() => t ?? a.options.defaultSizing, [t, a.options.defaultSizing]), s = c(() => ({
+		width: `${o}px`,
+		flex: `${o} 0 auto`
+	}), [o]);
+	return /* @__PURE__ */ f(M, {
+		...i,
+		styles: s,
+		type: "column",
+		children: /* @__PURE__ */ f("div", {
+			className: `th ${r ?? ""}`,
+			"data-width": t,
+			style: {
+				width: "100%",
+				...n
+			},
+			children: e
+		})
+	});
+});
+N.displayName = "ColumnCell";
+//#endregion
+//#region src/Components/TableBody.tsx
+var P = n(({ children: t, style: n, className: r }, i) => {
+	let a = u(null);
+	s(i, () => a.current, []);
+	let { state: l, dispatch: d } = v(), h = c(() => {
+		if (l.dragged.sourceIndex === null) return null;
+		let n = (t) => {
+			let r = [];
+			return e.Children.forEach(t, (t) => {
+				e.isValidElement(t) && (t.props.id !== void 0 && t.props.index !== void 0 && t.props.children ? r.push(t) : t.props.children && r.push(...n(t.props.children)));
+			}), r;
+		};
+		return n(t).map((t) => {
+			let n = e.Children.toArray(t.props.children).filter((t) => e.isValidElement(t) && String(t.props.index) === String(l.dragged.sourceIndex)).map((t) => e.cloneElement(t, { isClone: !0 }));
+			return e.cloneElement(t, {
+				...t.props,
+				children: n
+			});
+		});
+	}, [t, l.dragged.sourceIndex]);
+	o(() => {
+		d({
+			type: "setBodyRef",
+			value: a
+		});
+	}, [d, a]);
+	let { BodyScrollHandle: g } = y(l.refs), _ = c(() => ({
+		overflowX: "auto",
+		overflowY: "auto",
+		flex: 1,
+		userSelect: l.dragged.isDragging ? "none" : "auto",
+		...n
+	}), [l.dragged.isDragging, n]);
+	o(() => {
+		if (a.current) {
+			let e = a.current.clientWidth;
+			d({
+				type: "setBodyScrollBarWidth",
+				value: a.current.offsetWidth - e
+			});
+		}
+	}, [d, a]);
+	let b = a.current?.scrollHeight ?? 0;
+	return /* @__PURE__ */ p(e.Fragment, { children: [l.dragType === "column" && l.refs.cloneRef?.current && m(/* @__PURE__ */ f("div", {
+		className: "body clone-body",
+		"data-droppableid": "body",
+		style: {
+			overflow: "hidden",
+			flex: 1
+		},
+		children: /* @__PURE__ */ f("div", {
+			className: "rbody",
+			style: {
+				height: b,
+				position: "relative"
+			},
+			children: h
+		})
+	}), l.refs.cloneRef.current), /* @__PURE__ */ f("div", {
+		className: `body ${r ?? ""}`,
+		style: F,
+		children: /* @__PURE__ */ f("div", {
+			className: "ibody",
+			style: _,
+			"data-droppableid": "body",
+			onScroll: g,
+			ref: a,
+			children: t
+		})
+	})] });
+}), F = {
+	display: "flex",
+	overflow: "hidden",
+	flex: 1
+};
+P.displayName = "TableBody";
+//#endregion
+//#region src/Components/BodyRow.tsx
+var I = {
+	display: "flex",
+	flex: "1 0 auto",
+	minHeight: "24px"
+}, L = r(({ children: e, style: t, className: n, ...r }) => {
+	let i = c(() => t ? {
+		...I,
+		...t
+	} : I, [t]), a = h("tr", n);
+	return /* @__PURE__ */ f(M, {
+		...r,
+		type: "row",
+		children: /* @__PURE__ */ f("div", {
+			className: a,
+			style: i,
+			children: e
+		})
+	});
+});
+L.displayName = "BodyRow";
+//#endregion
+//#region src/Components/RowCell.tsx
+var R = r(({ children: e, style: t, className: n, isClone: r, ...i }) => {
+	let { index: a } = i, { state: o } = v(), s = c(() => o.columnIds[a] ?? "", [o.columnIds, a]), l = c(() => o.widths[a] ?? o.options.defaultSizing, [
+		o.widths,
+		a,
+		o.options.defaultSizing
+	]), u = c(() => r ? !1 : s === o.dragged.draggedID, [
+		r,
+		s,
+		o.dragged.draggedID
+	]), d = c(() => ({
+		display: "inline-flex",
+		opacity: u ? 0 : 1,
+		width: `${l}px`,
+		flex: `${l} 0 auto`,
+		...t
+	}), [
+		u,
+		l,
+		t
+	]);
+	return /* @__PURE__ */ f("div", {
+		className: `td ${n ?? ""}`,
+		style: d,
+		"data-col-index": a,
+		children: e
+	});
+});
+R.displayName = "RowCell";
+//#endregion
+//#region src/Components/DragHandle.tsx
+var z = r(({ children: e, className: t, style: n }) => /* @__PURE__ */ f("div", {
+	"data-drag-handle": "true",
+	className: t,
+	style: {
+		cursor: "-webkit-grab",
+		display: "inline-flex",
+		alignItems: "center",
+		...n
+	},
+	children: e
+}));
+z.displayName = "DragHandle";
+//#endregion
+export { L as BodyRow, N as ColumnCell, z as DragHandle, R as RowCell, P as TableBody, A as TableContainer, j as TableHeader, v as useTable };