flexitablesort 1.1.9 → 1.1.11

package/dist/index.es.js

@@ -1,15 +1,21 @@
-import e, { createContext as t, forwardRef as n, memo as r, useCallback as i, useContext as a, useEffect as o, useImperativeHandle as s, useLayoutEffect as c, useMemo as l, useReducer as u, useRef as d } from "react";
-import f from "styled-components";
-import { createPortal as p, flushSync as m } from "react-dom";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import _ from "classnames";
+import e, { createContext as t, forwardRef as n, memo as r, useCallback as i, useContext as a, useEffect as o, useImperativeHandle as s, useLayoutEffect as c, useMemo as l, useReducer as u, useRef as d, useState as f } from "react";
+import p from "styled-components";
+import { createPortal as m, flushSync as h } from "react-dom";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import v from "classnames";
 //#region src/Components/TableContainer/styles.tsx
-var v = f.div`
+var y = p.div`
   height: 100%;
 
   /* Structural elements: full reset */
-  &, & .table, & .header, & .thead, & .body, & .ibody,
-  & .draggable, & .tr {
+  &,
+  & .table,
+  & .header,
+  & .thead,
+  & .body,
+  & .ibody,
+  & .draggable,
+  & .tr {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
@@ -17,11 +23,13 @@ var v = f.div`
 
   /* User-facing cells: only box-sizing reset — no padding/margin override
      so className and styled-components can customize freely */
-  & .th, & .td {
+  & .th,
+  & .td {
     box-sizing: border-box;
   }
 
-  &.is-dragging, &.is-dragging * {
+  &.is-dragging,
+  &.is-dragging * {
     cursor: -webkit-grabbing !important;
     cursor: grabbing !important;
     user-select: none !important;
@@ -37,66 +45,68 @@ var v = f.div`
     cursor: -webkit-grab;
     cursor: grab;
   }
-`, y = t(void 0), b = () => {
-	let e = a(y);
+`, b = t(void 0), x = () => {
+	let e = a(b);
 	if (e === void 0) throw Error("useTable must be used within a TableProvider");
 	return e;
-}, x = 30, S = (e) => {
-	let t = d(!1), n = d(!1), r = d(0), a = d(null), o = d({
+}, S = 30, C = (e) => {
+	let { headerRef: t, bodyRef: n } = e, r = d(null), a = d(!1), s = d(!1), c = d(0), l = d(null), u = d({
 		x: 0,
 		y: 0
-	}), s = d(null), c = i((e) => {
-		s.current = e;
-	}, []), l = i(() => {
-		n.current = !1, t.current = !1, a.current !== null && (cancelAnimationFrame(a.current), a.current = null);
-	}, []), u = i((e, i, c) => {
-		let l = c === "vertical", d = l ? n : t;
-		if (!d.current) return;
-		let f = s.current;
-		if (f) {
-			let e = o.current;
-			if (l) {
-				let t = e.y < f.top + x, n = e.y > f.bottom - x;
+	}), f = d(null), p = i((e) => {
+		f.current = e;
+	}, []), m = i(() => {
+		s.current = !1, a.current = !1, l.current !== null && (cancelAnimationFrame(l.current), l.current = null);
+	}, []), h = i((e, t, n) => {
+		let i = n === "vertical", o = i ? s : a;
+		if (!o.current) return;
+		let d = f.current;
+		if (d) {
+			let e = u.current;
+			if (i) {
+				let t = e.y < d.top + S, n = e.y > d.bottom - S;
 				if (!t && !n) {
-					d.current = !1;
+					o.current = !1;
 					return;
 				}
 			} else {
-				let t = e.x < f.left + x, n = e.x > f.right - x;
+				let t = e.x < d.left + S, n = e.x > d.right - S;
 				if (!t && !n) {
-					d.current = !1;
+					o.current = !1;
 					return;
 				}
 			}
 		}
-		let p = l ? i.scrollHeight - i.clientHeight : i.scrollWidth - i.clientWidth;
-		l ? i.scrollTop += e : i.scrollLeft += e;
-		let m = l ? i.scrollTop : i.scrollLeft;
+		let p = i ? t.scrollHeight - t.clientHeight : t.scrollWidth - t.clientWidth;
+		i ? t.scrollTop += e : t.scrollLeft += e;
+		let m = i ? t.scrollTop : t.scrollLeft;
 		if (m >= p || m <= 0) {
-			d.current = !1;
+			o.current = !1;
 			return;
 		}
-		r.current += e / 1e3, a.current = requestAnimationFrame(() => u(e + r.current, i, c));
+		c.current += e / 1e3, l.current = requestAnimationFrame(() => r.current?.(e + c.current, t, n));
 	}, []);
-	return {
-		startAutoScroll: i((e, i, o) => {
-			let s = o === "vertical" ? n : t;
-			s.current || (s.current = !0, r.current = 0, a.current = requestAnimationFrame(() => u(e, i, o)));
-		}, [u]),
-		stopAutoScroll: l,
-		setContainerRect: c,
-		isAutoScrollingVertical: n,
-		isAutoScrollingHorizontal: t,
-		pointerRef: o,
-		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])
+	return o(() => {
+		r.current = h;
+	}, [h]), {
+		startAutoScroll: i((e, t, n) => {
+			let r = n === "vertical" ? s : a;
+			r.current || (r.current = !0, c.current = 0, l.current = requestAnimationFrame(() => h(e, t, n)));
+		}, [h]),
+		stopAutoScroll: m,
+		setContainerRect: p,
+		isAutoScrollingVertical: s,
+		isAutoScrollingHorizontal: a,
+		pointerRef: u,
+		BodyScrollHandle: i((e) => {
+			t?.current && e.currentTarget && (t.current.scrollLeft = e.currentTarget.scrollLeft);
+		}, [t]),
+		HeaderScrollHandle: i((e) => {
+			n?.current && e.currentTarget && (n.current.scrollLeft = e.currentTarget.scrollLeft);
+		}, [n])
 	};
-}, C = 300, w = 8;
-function T(e, t, n, r) {
+}, w = 300, T = 8;
+function E(e, t, n, r) {
 	let a = d(null), o = d({
 		x: 0,
 		y: 0
@@ -134,7 +144,7 @@ function T(e, t, n, r) {
 				} else if (h) r(n.clientX, n.clientY);
 				else {
 					let e = n.clientX - o.current.x, t = n.clientY - o.current.y;
-					(Math.abs(e) > w || Math.abs(t) > w) && (a.current &&= (clearTimeout(a.current), null), s.current = null, g = !0, _ = n.clientY, v = n.clientX);
+					(Math.abs(e) > T || Math.abs(t) > T) && (a.current &&= (clearTimeout(a.current), null), s.current = null, g = !0, _ = n.clientY, v = n.clientX);
 				}
 			}, x = () => {
 				h ? (S(), n()) : (u(), setTimeout(() => {
@@ -147,7 +157,7 @@ function T(e, t, n, r) {
 				a.current = null, h = !0;
 				let e = s.current;
 				s.current = null, e && t(e, p.clientX, p.clientY);
-			}, C);
+			}, w);
 		}, [
 			t,
 			n,
@@ -162,7 +172,7 @@ function T(e, t, n, r) {
 }
 //#endregion
 //#region src/Components/utils.ts
-var E = (e, t) => {
+var D = (e, t) => {
 	let n = e, r = 0, i = t.length - 1;
 	for (; r < i;) {
 		let e = Math.floor((r + i) / 2), a = t[e];
@@ -170,7 +180,7 @@ var E = (e, t) => {
 		n < a.itemTop ? i = e - 1 : r = e + 1;
 	}
 	return +t[r].index;
-}, D = (e, t) => {
+}, O = (e, t) => {
 	let n = e, r = 0, i = t.length - 1;
 	for (; r < i;) {
 		let e = Math.floor((r + i) / 2), a = t[e];
@@ -178,17 +188,20 @@ var E = (e, t) => {
 		n < a.itemLeft ? i = e - 1 : r = e + 1;
 	}
 	return +t[r].index;
-}, O = (e, t, n) => t !== void 0 && e < t || n !== void 0 && e > n, k = "transform 450ms cubic-bezier(0.2, 0, 0, 1)", A = 200, j = (e, t, n, r, a, s) => {
-	let { startAutoScroll: l, stopAutoScroll: u, setContainerRect: f, pointerRef: p } = S(e), h = d(null), g = d(null), _ = d(null), v = d({
+}, k = (e, t, n) => {
+	let r = Number(e);
+	return t !== void 0 && r < t || n !== void 0 && r > n;
+}, A = "transform 450ms cubic-bezier(0.2, 0, 0, 1)", j = 200, M = (e, t, n, r, a, s) => {
+	let { startAutoScroll: l, stopAutoScroll: u, setContainerRect: f, pointerRef: p } = C(e), m = d(null), g = d(null), _ = d(null), v = d({
 		x: 0,
 		y: 0
 	}), y = d(null), b = d(null), x = d({
 		width: 0,
 		height: 0
-	}), C = d({
+	}), S = d({
 		x: 0,
 		y: 0
-	}), w = d(!1), O = i(() => {
+	}), w = d(!1), T = 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 = [];
@@ -205,7 +218,7 @@ var E = (e, t) => {
 		}
 		let { start: s, end: c } = a.rowDragRange;
 		return (s || c) && (o = o.filter((e) => (!s || +e.index >= s) && (!c || +e.index < c))), o;
-	}, [e.bodyRef, a.rowDragRange]), j = i(() => {
+	}, [e.bodyRef, a.rowDragRange]), k = i(() => {
 		let t = e.headerRef?.current;
 		if (!t || !t.children[0]) return null;
 		let n = Array.from(t.children[0].children).map((e) => {
@@ -239,7 +252,7 @@ var E = (e, t) => {
 				let r = s[e], c = +r.dataset.index, l = r.firstElementChild;
 				if (!l) continue;
 				let u = "";
-				c > t && c <= n ? u = `translate${i}(-${o}px)` : c < t && c >= n && (u = `translate${i}(${o}px)`), l.style.transform = u, l.style.transition = c === t ? "none" : k, c === n ? (r.setAttribute("data-drop-target", "true"), a = r) : r.removeAttribute("data-drop-target");
+				c > t && c <= n ? u = `translate${i}(-${o}px)` : c < t && c >= n && (u = `translate${i}(${o}px)`), l.style.transform = u, l.style.transition = c === t ? "none" : A, c === n ? (r.setAttribute("data-drop-target", "true"), a = r) : r.removeAttribute("data-drop-target");
 			}
 		};
 		if (r === "row") o(e.bodyRef?.current ?? null, ".draggable[data-type=\"row\"]", "Y", i.height);
@@ -250,7 +263,7 @@ var E = (e, t) => {
 				let e = r.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 = k;
+					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 = A;
 				}
 			}
 		}
@@ -297,40 +310,40 @@ var E = (e, t) => {
 		let { element: o, foundHandle: s } = a;
 		if (!s && o.querySelector("[data-drag-handle]")) return;
 		let c = o.dataset.id, l = +o.dataset.index, u = o.dataset.type, d = t.type === "touchstart";
-		_.current = u, y.current = l, b.current = null, w.current = !1, d && o.dispatchEvent(new PointerEvent("pointerdown", {
+		_.current = u ?? null, y.current = l, b.current = null, w.current = !1, d && o.dispatchEvent(new PointerEvent("pointerdown", {
 			bubbles: !0,
 			pointerType: "mouse"
 		}));
-		let m = u === "row" ? e.bodyRef?.current?.scrollLeft ?? 0 : 0, S = o.getBoundingClientRect();
+		let h = u === "row" ? e.bodyRef?.current?.scrollLeft ?? 0 : 0, C = o.getBoundingClientRect();
 		x.current = {
-			width: S.width,
-			height: S.height
+			width: C.width,
+			height: C.height
 		};
-		let T = {
-			x: r - S.left - m,
-			y: i - S.top
+		let E = {
+			x: r - C.left - h,
+			y: i - C.top
 		};
-		v.current = T, C.current = {
+		v.current = E, S.current = {
 			x: r,
 			y: i
 		}, p.current = {
 			x: r,
 			y: i
 		};
-		let E = {
-			x: S.left + m,
-			y: S.top
+		let D = {
+			x: C.left + h,
+			y: C.top
 		};
-		h.current = u === "row" ? O() : j();
-		let D = e.bodyRef?.current;
-		if (D) {
-			let e = D.getBoundingClientRect();
+		m.current = u === "row" ? T() : k();
+		let O = e.bodyRef?.current;
+		if (O) {
+			let e = O.getBoundingClientRect();
 			g.current = e, f(e);
 		}
-		let k = e.tableRef?.current;
-		k && (k.style.touchAction = "none");
-		let A = e.cloneRef?.current;
-		A && (A.style.transform = `translate(${E.x}px, ${E.y}px)`);
+		let A = e.tableRef?.current;
+		A && (A.style.touchAction = "none");
+		let j = e.cloneRef?.current;
+		j && (j.style.transform = `translate(${D.x}px, ${D.y}px)`);
 		let M = e.tableRef?.current;
 		M && n({
 			type: "setTableDimensions",
@@ -342,17 +355,17 @@ var E = (e, t) => {
 			type: "dragStart",
 			value: {
 				rect: {
-					draggedItemHeight: S.height,
-					draggedItemWidth: S.width
+					draggedItemHeight: C.height,
+					draggedItemWidth: C.width
 				},
 				dragged: {
-					initial: T,
-					translate: E,
-					draggedID: c,
+					initial: E,
+					translate: D,
+					draggedID: c ?? null,
 					isDragging: !0,
 					sourceIndex: l
 				},
-				dragType: u
+				dragType: u ?? null
 			}
 		});
 		let N = () => {
@@ -369,15 +382,15 @@ var E = (e, t) => {
 	}, [
 		n,
 		e,
-		O,
-		j,
+		T,
+		k,
 		p,
 		f
 	]), L = i((t, r, i, a, o) => {
 		let c = e.cloneRef?.current;
 		c && (c.style.visibility = "hidden");
 		let l = e.tableRef?.current;
-		l && (l.style.touchAction = ""), m(() => {
+		l && (l.style.touchAction = ""), h(() => {
 			s && t !== null && r !== null && (i === "row" || i === "column") && s({
 				sourceIndex: t,
 				targetIndex: r,
@@ -407,11 +420,11 @@ var E = (e, t) => {
 			H.current = !1;
 		}, 400);
 		let t = b.current, n = y.current, r = _.current, i = e.bodyRef?.current, a = i?.scrollTop ?? 0, o = i?.scrollLeft ?? 0;
-		h.current = null, g.current = null, u(), _.current = null, y.current = null, b.current = null;
+		m.current = null, g.current = null, u(), _.current = null, y.current = null, b.current = null;
 		let s = e.cloneRef?.current, c = e.placeholderRef?.current;
 		if (s && c && c.style.display !== "none") {
 			let e = parseFloat(c.style.left) || 0, i = parseFloat(c.style.top) || 0;
-			s.style.transition = `transform ${A}ms cubic-bezier(0.2, 0, 0, 1)`, s.style.transform = `translate(${e}px, ${i}px)`, setTimeout(() => L(n, t, r, a, o), A);
+			s.style.transition = `transform ${j}ms cubic-bezier(0.2, 0, 0, 1)`, s.style.transform = `translate(${e}px, ${i}px)`, setTimeout(() => L(n, t, r, a, o), j);
 		} else L(n, t, r, a, o);
 	}, [
 		u,
@@ -419,12 +432,12 @@ var E = (e, t) => {
 		e.placeholderRef,
 		e.cloneRef,
 		L
-	]), z = d(() => {}), { touchStart: B, cancelLongPress: V, isTouchActiveRef: H } = T(e, I, R, (e, t) => z.current(e, t)), U = i((e) => {
+	]), z = d(() => {}), { touchStart: B, cancelLongPress: V, isTouchActiveRef: H } = E(e, I, R, (e, t) => z.current(e, t)), U = i((e) => {
 		e.target !== e.currentTarget && (H.current || I(e, e.clientX, e.clientY));
 	}, [I, H]), W = i((t, n) => {
 		if (w.current) return;
 		let i = v.current;
-		C.current = {
+		S.current = {
 			x: t,
 			y: n
 		}, p.current = {
@@ -446,15 +459,15 @@ var E = (e, t) => {
 		let s = g.current;
 		s || (s = o.getBoundingClientRect(), g.current = s);
 		let c = 0, d = _.current || r;
-		d === "row" ? n < s.top + 30 ? (l(-5, o, "vertical"), h.current = null) : n > s.bottom - 30 ? (l(5, o, "vertical"), h.current = null) : u() : t < s.left + 30 ? (l(-5, o, "horizontal"), h.current = null) : t > s.right - 30 ? (l(5, o, "horizontal"), h.current = null) : u();
+		d === "row" ? n < s.top + 30 ? (l(-5, o, "vertical"), m.current = null) : n > s.bottom - 30 ? (l(5, o, "vertical"), m.current = null) : u() : t < s.left + 30 ? (l(-5, o, "horizontal"), m.current = null) : t > s.right - 30 ? (l(5, o, "horizontal"), m.current = null) : u();
 		let f;
-		d === "row" ? (f = O(), h.current = f, f && f.length > 0 && (c = E(n - s.top + o.scrollTop, f))) : (f = j(), h.current = f, f && f.length > 0 && (c = D(t, f))), c !== b.current && (b.current = c, requestAnimationFrame(() => N(y.current, c, d)));
+		d === "row" ? (f = T(), m.current = f, f && f.length > 0 && (c = D(n - s.top + o.scrollTop, f))) : (f = k(), m.current = f, f && f.length > 0 && (c = O(t, f))), c !== b.current && (b.current = c, requestAnimationFrame(() => N(y.current, c, d)));
 	}, [
 		r,
 		e.bodyRef,
 		e.cloneRef,
-		O,
-		j,
+		T,
+		k,
 		l,
 		u,
 		N,
@@ -462,7 +475,7 @@ var E = (e, t) => {
 	]);
 	z.current = W;
 	let G = i(() => {
-		V(), h.current = null, g.current = null;
+		V(), m.current = null, g.current = null;
 		let t = e.cloneRef?.current;
 		t && (t.style.visibility = "hidden");
 		let r = e.tableRef?.current;
@@ -516,7 +529,7 @@ var E = (e, t) => {
 		dragStart: U,
 		touchStart: B
 	};
-}, M = {
+}, N = {
 	columnDragRange: {
 		start: void 0,
 		end: void 0
@@ -527,7 +540,7 @@ var E = (e, t) => {
 	},
 	defaultSizing: 50
 };
-function N(e, t) {
+function P(e, t) {
 	switch (t.type) {
 		case "setClone": return {
 			...e,
@@ -544,47 +557,15 @@ function N(e, t) {
 			...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 {
+		case "setRef": return {
 			...e,
 			refs: {
 				...e.refs,
-				placeholderRef: t.value
+				[t.refName]: t.value
 			}
 		};
 		case "setBodyScrollBarWidth": return {
@@ -601,7 +582,10 @@ function N(e, t) {
 		};
 		case "setOptions": return {
 			...e,
-			options: t.value ?? M
+			options: {
+				...e.options,
+				...t.value
+			}
 		};
 		case "dragStart": return {
 			...e,
@@ -635,10 +619,10 @@ function N(e, t) {
 				draggedItemHeight: 0
 			}
 		};
-		default: throw Error(`Unhandled action type: ${t.type}`);
+		default: throw Error("Unhandled action");
 	}
 }
-var P = {
+var F = {
 	clone: null,
 	dragged: {
 		initial: {
@@ -664,48 +648,51 @@ var P = {
 		width: 0
 	},
 	refs: {
-		tableRef: null,
-		bodyRef: null,
-		headerRef: null,
-		cloneRef: null,
-		placeholderRef: null
+		tableRef: { current: null },
+		bodyRef: { current: null },
+		headerRef: { current: null },
+		cloneRef: { current: null },
+		placeholderRef: { current: null }
 	},
 	bodyScrollBarWidth: 0,
-	options: M,
+	options: N,
 	widths: [],
 	columnIds: []
-}, F = {
+}, I = {
 	position: "relative",
 	display: "flex",
 	flexFlow: "column"
-}, I = {
+}, L = {
 	position: "fixed",
 	pointerEvents: "none",
 	zIndex: 3,
 	top: 0,
 	left: 0,
 	display: "none"
-}, L = n(({ children: e, className: t, style: n, options: r, onDragEnd: i, renderPlaceholder: a }, c) => {
+}, R = n(({ children: e, className: t, style: n, options: r, onDragEnd: i, renderPlaceholder: a }, c) => {
 	let f = d(null), p = d(null), m = d(null);
 	s(c, () => f.current, []);
-	let [_, b] = u(N, P), x = l(() => ({
-		state: _,
-		dispatch: b
-	}), [_]);
+	let [h, v] = u(P, F), x = l(() => ({
+		state: h,
+		dispatch: v
+	}), [h]);
 	o(() => {
-		b({
-			type: "setTableRef",
+		v({
+			type: "setRef",
+			refName: "tableRef",
 			value: f
-		}), b({
-			type: "setCloneRef",
+		}), v({
+			type: "setRef",
+			refName: "cloneRef",
 			value: p
-		}), b({
-			type: "setPlaceholderRef",
+		}), v({
+			type: "setRef",
+			refName: "placeholderRef",
 			value: m
 		});
 	}, [f]), o(() => {
 		let e = () => {
-			f.current && b({
+			f.current && v({
 				type: "setTableDimensions",
 				value: {
 					height: f.current.offsetHeight,
@@ -717,12 +704,12 @@ var P = {
 			window.removeEventListener("resize", e);
 		};
 	}, [f]), o(() => {
-		b({
+		r && v({
 			type: "setOptions",
 			value: r
 		});
 	}, [r]);
-	let { dragStart: S, touchStart: C } = j(_.refs, _.dragged, b, _.dragType, _.options, i), w = l(() => ({
+	let { dragStart: S, touchStart: C } = M(h.refs, h.dragged, v, h.dragType, h.options, i), w = l(() => ({
 		position: "fixed",
 		zIndex: "5",
 		pointerEvents: "none",
@@ -730,50 +717,53 @@ var P = {
 		left: 0,
 		display: "flex",
 		flexDirection: "column",
-		height: _.dragType === "row" ? _.rect.draggedItemHeight : `${_.tableDimensions.height}px`,
-		width: _.dragType === "column" ? `${_.rect.draggedItemWidth}px` : `${_.tableDimensions.width}px`,
+		height: h.dragType === "row" ? h.rect.draggedItemHeight : `${h.tableDimensions.height}px`,
+		width: h.dragType === "column" ? `${h.rect.draggedItemWidth}px` : `${h.tableDimensions.width}px`,
 		overflow: "hidden",
-		boxShadow: _.dragged.isDragging ? "0 0 10px 0 rgba(0, 0, 0, 0.1)" : "none"
+		boxShadow: h.dragged.isDragging ? "0 0 10px 0 rgba(0, 0, 0, 0.1)" : "none"
 	}), [
-		_.dragType,
-		_.dragged.isDragging,
-		_.rect.draggedItemHeight,
-		_.rect.draggedItemWidth,
-		_.tableDimensions.height,
-		_.tableDimensions.width
+		h.dragType,
+		h.dragged.isDragging,
+		h.rect.draggedItemHeight,
+		h.rect.draggedItemWidth,
+		h.tableDimensions.height,
+		h.tableDimensions.width
 	]);
-	return /* @__PURE__ */ h(y.Provider, {
+	return /* @__PURE__ */ g(b.Provider, {
 		value: x,
-		children: /* @__PURE__ */ g(v, {
-			className: _.dragged.isDragging ? "is-dragging" : "",
+		children: /* @__PURE__ */ _(y, {
+			className: h.dragged.isDragging ? "is-dragging" : "",
 			children: [
-				/* @__PURE__ */ h("div", {
+				/* @__PURE__ */ g("div", {
 					id: "portalroot",
 					style: {
 						...w,
-						visibility: _.dragged.isDragging ? "visible" : "hidden"
+						visibility: h.dragged.isDragging ? "visible" : "hidden"
 					},
 					ref: p,
-					children: /* @__PURE__ */ h("div", {
+					children: /* @__PURE__ */ g("div", {
 						style: {
 							flexShrink: 0,
 							order: -1
 						},
-						children: _.clone
+						children: h.clone
 					})
 				}),
-				a && /* @__PURE__ */ h("div", {
+				/* @__PURE__ */ g("div", {
 					ref: m,
-					style: I,
-					children: a()
+					style: L,
+					children: a ? a() : /* @__PURE__ */ g("div", { style: {
+						width: "100%",
+						height: "100%"
+					} })
 				}),
-				/* @__PURE__ */ h("div", {
+				/* @__PURE__ */ g("div", {
 					"data-contextid": "context",
 					ref: f,
 					onMouseDown: S,
 					onTouchStart: C,
 					style: {
-						...F,
+						...I,
 						...n
 					},
 					className: `table ${t ?? ""}`,
@@ -783,77 +773,82 @@ var P = {
 		})
 	});
 });
-L.displayName = "TableProvider";
+R.displayName = "TableProvider";
 //#endregion
 //#region src/Components/TableHeader.tsx
-var R = n(({ children: e, style: t, className: n }, r) => {
-	let i = d(null), a = r || i, { state: s, dispatch: u } = b();
+var z = n(({ children: e, style: t, className: n }, r) => {
+	let a = d(null), s = r || a, { state: u, dispatch: f } = x(), p = i((e) => "current" in e ? e.current : null, []);
 	o(() => {
-		u({
-			type: "setHeaderRef",
+		a.current && f({
+			type: "setRef",
+			refName: "headerRef",
 			value: a
 		});
-	}, [u, a]);
-	let { HeaderScrollHandle: f } = S(s.refs), p = {
+	}, [f]);
+	let { HeaderScrollHandle: m } = C(u.refs), h = {
 		display: "flex",
 		flex: "1 0 auto"
-	}, m = l(() => ({
+	}, _ = l(() => ({
 		overflow: "hidden",
 		display: "flex",
-		paddingRight: `${s.bodyScrollBarWidth}px`,
-		userSelect: s.dragged.isDragging ? "none" : "auto",
+		paddingRight: `${u.bodyScrollBarWidth}px`,
+		userSelect: u.dragged.isDragging ? "none" : "auto",
 		...t
 	}), [
-		s.bodyScrollBarWidth,
-		s.dragged.isDragging,
+		u.bodyScrollBarWidth,
+		u.dragged.isDragging,
 		t
 	]);
 	return c(() => {
-		a.current && u({
+		let e = p(s);
+		e && f({
 			type: "setWidths",
-			value: Array.from(a.current.querySelectorAll(".th")).map((e) => {
+			value: Array.from(e.querySelectorAll(".th")).map((e) => {
 				let t = e.getAttribute("data-width");
-				return t ? parseInt(t, 10) : null;
+				return t ? parseInt(t, 10) : 0;
 			})
 		});
 	}, [
 		e,
-		u,
-		a
+		f,
+		p,
+		s
 	]), c(() => {
-		a.current && u({
+		let e = p(s);
+		e && f({
 			type: "setColumnIds",
-			value: Array.from(a.current.querySelectorAll(".draggable")).map((e) => e.getAttribute("data-id"))
+			value: Array.from(e.querySelectorAll(".draggable")).map((e) => e.getAttribute("data-id") || "")
 		});
 	}, [
 		e,
-		u,
-		a
-	]), /* @__PURE__ */ h("div", {
+		f,
+		p,
+		s
+	]), /* @__PURE__ */ g("div", {
 		className: `header ${n ?? ""}`,
-		children: /* @__PURE__ */ h("div", {
+		children: /* @__PURE__ */ g("div", {
 			className: "thead",
-			style: m,
+			style: _,
 			"data-droppableid": "header",
-			onScroll: f,
-			ref: a,
-			children: /* @__PURE__ */ h("div", {
-				style: p,
+			onScroll: m,
+			ref: s,
+			children: /* @__PURE__ */ g("div", {
+				style: h,
 				className: "tr",
 				children: e
 			})
 		})
 	});
 });
-R.displayName = "TableHeader";
+z.displayName = "TableHeader";
 //#endregion
 //#region src/Components/Draggable.tsx
-var z = r(({ children: t, id: n, index: r, type: i, styles: a = {} }) => {
-	let { state: s, dispatch: c } = b(), u = l(() => String(n) === String(s.dragged.draggedID) && s.dragged.isDragging, [
+var B = r(({ children: t, id: n, index: r, type: i, styles: a = {} }) => {
+	let { state: s, dispatch: c } = x(), u = l(() => String(n) === String(s.dragged.draggedID) && s.dragged.isDragging, [
 		n,
 		s.dragged.draggedID,
 		s.dragged.isDragging
-	]), f = l(() => i === "row" ? O(r, s.options.rowDragRange.start, s.options.rowDragRange.end) : O(r, s.options.columnDragRange.start, s.options.columnDragRange.end), [
+	]), f = l(() => i === "row" ? k(r, s.options.rowDragRange.start, s.options.rowDragRange.end) : k(r, s.options.columnDragRange.start, s.options.columnDragRange.end), [
 		r,
 		s.options.columnDragRange.end,
 		s.options.columnDragRange.start,
@@ -862,23 +857,31 @@ var z = r(({ children: t, id: n, index: r, type: i, styles: a = {} }) => {
 		i
 	]), p = d(null), m = d(!1);
 	o(() => {
-		p.current && (m.current = !!p.current.querySelector("[data-drag-handle]"));
-	});
-	let g = l(() => ({
-		cursor: u ? "-webkit-grabbing" : f || m.current ? "auto" : "-webkit-grab",
+		m.current = !!p.current?.querySelector("[data-drag-handle]");
+	}, [t]);
+	let h = l(() => ({
+		cursor: u ? "-webkit-grabbing" : f ? "auto" : "-webkit-grab",
 		zIndex: u ? 2 : 1,
 		opacity: u ? 0 : 1,
 		pointerEvents: u ? "none" : "auto",
 		display: "flex"
-	}), [f, u]), _ = (n) => {
-		n.pointerType !== "touch" && (f || requestAnimationFrame(() => {
+	}), [f, u]);
+	o(() => {
+		p.current && p.current.querySelector("[data-drag-handle]") && (p.current.style.cursor = "auto");
+	}, [
+		t,
+		f,
+		u
+	]);
+	let _ = (n) => {
+		n.pointerType !== "touch" && (f || m.current && !n.target.closest("[data-drag-handle]") || requestAnimationFrame(() => {
 			c({
 				type: "setClone",
 				value: e.cloneElement(t)
 			});
 		}));
 	};
-	return /* @__PURE__ */ h("div", {
+	return /* @__PURE__ */ g("div", {
 		className: "draggable",
 		"data-id": n,
 		"data-index": r,
@@ -886,26 +889,26 @@ var z = r(({ children: t, id: n, index: r, type: i, styles: a = {} }) => {
 		onPointerDown: _,
 		"data-disabled": f ? "true" : "false",
 		style: a,
-		children: /* @__PURE__ */ h("div", {
+		children: /* @__PURE__ */ g("div", {
 			ref: p,
-			style: g,
+			style: h,
 			children: t
 		})
 	});
 });
-z.displayName = "Draggable";
+B.displayName = "Draggable";
 //#endregion
 //#region src/Components/ColumnCell.tsx
-var B = r(({ children: e, width: t, style: n, className: r, ...i }) => {
-	let { state: a } = b(), o = l(() => t ?? a.options.defaultSizing, [t, a.options.defaultSizing]), s = l(() => ({
+var V = r(({ children: e, width: t, style: n, className: r, ...i }) => {
+	let { state: a } = x(), o = l(() => t ?? a.options.defaultSizing, [t, a.options.defaultSizing]), s = l(() => ({
 		width: `${o}px`,
 		flex: `${o} 0 auto`
 	}), [o]);
-	return /* @__PURE__ */ h(z, {
+	return /* @__PURE__ */ g(B, {
 		...i,
 		styles: s,
 		type: "column",
-		children: /* @__PURE__ */ h("div", {
+		children: /* @__PURE__ */ g("div", {
 			className: `th ${r ?? ""}`,
 			"data-width": t,
 			style: {
@@ -916,14 +919,18 @@ var B = r(({ children: e, width: t, style: n, className: r, ...i }) => {
 		})
 	});
 });
-B.displayName = "ColumnCell";
+V.displayName = "ColumnCell";
 //#endregion
 //#region src/Components/TableBody.tsx
-var V = n(({ children: t, style: n, className: r }, i) => {
-	let a = d(null);
-	s(i, () => a.current, []);
-	let { state: c, dispatch: u } = b(), f = l(() => {
-		if (c.dragged.sourceIndex === null) return null;
+var H = {
+	display: "flex",
+	overflow: "hidden",
+	flex: 1
+}, U = n(({ children: t, style: n, className: r }, i) => {
+	let [a, u] = f(0), p = d(null);
+	s(i, () => p.current, []);
+	let { state: h, dispatch: v } = x(), y = l(() => {
+		if (h.dragged.sourceIndex === null) return null;
 		let n = (t) => {
 			let r = [];
 			return e.Children.forEach(t, (t) => {
@@ -931,95 +938,92 @@ var V = n(({ children: t, style: n, className: r }, i) => {
 			}), r;
 		};
 		return n(t).map((t) => {
-			let n = e.Children.toArray(t.props.children).filter((t) => e.isValidElement(t) && String(t.props.index) === String(c.dragged.sourceIndex)).map((t) => e.cloneElement(t, { isClone: !0 }));
+			let n = e.Children.toArray(t.props.children).filter((t) => e.isValidElement(t) && String(t.props.index) === String(h.dragged.sourceIndex)).map((t) => e.cloneElement(t, {
+				key: t.props.index,
+				isClone: !0
+			}));
 			return e.cloneElement(t, {
+				key: t.props.id,
 				...t.props,
 				children: n
 			});
 		});
-	}, [t, c.dragged.sourceIndex]);
+	}, [t, h.dragged.sourceIndex]);
 	o(() => {
-		u({
-			type: "setBodyRef",
-			value: a
+		v({
+			type: "setRef",
+			refName: "bodyRef",
+			value: p
 		});
-	}, [u, a]);
-	let { BodyScrollHandle: m } = S(c.refs), _ = l(() => ({
+	}, [v, p]);
+	let { BodyScrollHandle: b } = C(h.refs), S = l(() => ({
 		overflowX: "auto",
 		overflowY: "auto",
 		flex: 1,
-		userSelect: c.dragged.isDragging ? "none" : "auto",
+		userSelect: h.dragged.isDragging ? "none" : "auto",
 		...n
-	}), [c.dragged.isDragging, n]);
-	o(() => {
-		if (a.current) {
-			let e = a.current.clientWidth;
-			u({
+	}), [h.dragged.isDragging, n]);
+	return o(() => {
+		if (p.current) {
+			let e = p.current.clientWidth;
+			v({
 				type: "setBodyScrollBarWidth",
-				value: a.current.offsetWidth - e
+				value: p.current.offsetWidth - e
 			});
 		}
-	}, [u, a]);
-	let v = a.current?.scrollHeight ?? 0;
-	return /* @__PURE__ */ g(e.Fragment, { children: [c.dragType === "column" && c.refs.cloneRef?.current && p(/* @__PURE__ */ h("div", {
+	}, [v, p]), c(() => {
+		p.current && u(p.current.scrollHeight);
+	}, [p, t]), /* @__PURE__ */ _(e.Fragment, { children: [h.dragType === "column" && h.refs.cloneRef?.current && m(/* @__PURE__ */ g("div", {
 		className: "body clone-body",
 		"data-droppableid": "body",
 		style: {
 			overflow: "hidden",
 			flex: 1
 		},
-		children: /* @__PURE__ */ h("div", {
+		children: /* @__PURE__ */ g("div", {
 			className: "rbody",
 			style: {
-				height: v,
+				height: a,
 				position: "relative"
 			},
-			children: f
+			children: y && e.Children.toArray(y)
 		})
-	}), c.refs.cloneRef.current), /* @__PURE__ */ h("div", {
+	}), h.refs.cloneRef.current), /* @__PURE__ */ g("div", {
 		className: `body ${r ?? ""}`,
 		style: H,
-		children: /* @__PURE__ */ h("div", {
+		children: /* @__PURE__ */ g("div", {
 			className: "ibody",
-			style: _,
+			style: S,
 			"data-droppableid": "body",
-			onScroll: m,
-			ref: a,
+			onScroll: b,
+			ref: p,
 			children: t
 		})
 	})] });
-}), H = {
-	display: "flex",
-	overflow: "hidden",
-	flex: 1
-};
-V.displayName = "TableBody";
-//#endregion
-//#region src/Components/BodyRow.tsx
-var U = {
+}), W = {
 	display: "flex",
 	flex: "1 0 auto",
 	minHeight: "24px"
-}, W = r(({ children: e, style: t, className: n, ...r }) => {
+}, G = r(({ children: e, style: t, className: n, ...r }) => {
 	let i = l(() => t ? {
-		...U,
+		...W,
 		...t
-	} : U, [t]), a = _("tr", n);
-	return /* @__PURE__ */ h(z, {
+	} : W, [t]), a = v("tr", n);
+	return /* @__PURE__ */ g(B, {
 		...r,
 		type: "row",
-		children: /* @__PURE__ */ h("div", {
+		children: /* @__PURE__ */ g("div", {
 			className: a,
 			style: i,
 			children: e
 		})
 	});
 });
-W.displayName = "BodyRow";
+G.displayName = "BodyRow";
 //#endregion
 //#region src/Components/RowCell.tsx
-var G = r(({ children: e, style: t, className: n, isClone: r, ...i }) => {
-	let { index: a } = i, { state: o } = b(), s = l(() => o.columnIds[a] ?? "", [o.columnIds, a]), c = l(() => o.widths[a] ?? o.options.defaultSizing, [
+var K = r(({ children: e, style: t, className: n, isClone: r, ...i }) => {
+	let { index: a } = i, { state: o } = x(), s = l(() => o.columnIds[a] ?? "", [o.columnIds, a]), c = l(() => o.widths[a] ?? o.options.defaultSizing, [
 		o.widths,
 		a,
 		o.options.defaultSizing
@@ -1038,17 +1042,17 @@ var G = r(({ children: e, style: t, className: n, isClone: r, ...i }) => {
 		c,
 		t
 	]);
-	return /* @__PURE__ */ h("div", {
+	return /* @__PURE__ */ g("div", {
 		className: `td ${n ?? ""}`,
 		style: d,
 		"data-col-index": a,
 		children: e
 	});
 });
-G.displayName = "RowCell";
+K.displayName = "RowCell";
 //#endregion
 //#region src/Components/DragHandle.tsx
-var K = r(({ children: e, className: t, style: n }) => /* @__PURE__ */ h("div", {
+var q = r(({ children: e, className: t, style: n }) => /* @__PURE__ */ g("div", {
 	"data-drag-handle": "true",
 	className: t,
 	style: {
@@ -1059,6 +1063,6 @@ var K = r(({ children: e, className: t, style: n }) => /* @__PURE__ */ h("div",
 	},
 	children: e
 }));
-K.displayName = "DragHandle";
+q.displayName = "DragHandle";
 //#endregion
-export { W as BodyRow, B as ColumnCell, K as DragHandle, G as RowCell, V as TableBody, L as TableContainer, R as TableHeader, b as useTable };
+export { G as BodyRow, V as ColumnCell, q as DragHandle, K as RowCell, U as TableBody, R as TableContainer, z as TableHeader, x as useTable };