@thewrong/ui 0.1.0 → 0.2.0

package/dist/components/table/components/PaginationFooter.esm.js

@@ -0,0 +1,80 @@
+import { Select as e } from "../../select/Select.esm.js";
+import { KeyboardNavButton as t } from "./KeyboardNavButton.esm.js";
+import { PageJumpInput as n } from "./PageJumpInput.esm.js";
+import { Pagination as r } from "./Pagination.esm.js";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/table/components/PaginationFooter.tsx
+var s = [
+	30,
+	50,
+	100
+];
+function c({ currentPage: c, totalPages: l, onPageChange: u, pageSize: d, pageSizeOptions: f = s, onPageSizeChange: p, hasPreviousPage: m, hasNextPage: h, totalElements: g, showTotalCount: _ = !0, enablePageJump: v = !0, enableKeyboardPagination: y = !0, "data-testid": b }) {
+	let x = m ?? c > 1, S = h ?? c < l, C = (e) => {
+		y && (e.altKey || e.metaKey || e.ctrlKey || e.shiftKey || (e.key === "ArrowLeft" && x ? (e.preventDefault(), u(c - 1)) : e.key === "ArrowRight" && S && (e.preventDefault(), u(c + 1))));
+	};
+	return /* @__PURE__ */ o("nav", {
+		"aria-label": "페이지 네비게이션",
+		className: "@container/pagebar group/footer flex flex-wrap items-center justify-between gap-x-3 gap-y-2 shrink-0",
+		children: [/* @__PURE__ */ o("div", {
+			className: "flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-neutral-600 dark:text-neutral-300",
+			children: [
+				_ && g !== void 0 && /* @__PURE__ */ o("span", { children: [
+					"총 ",
+					g.toLocaleString(),
+					"건"
+				] }),
+				p && d !== void 0 && /* @__PURE__ */ o("div", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ a("span", {
+						className: "text-neutral-500",
+						children: "페이지당"
+					}), /* @__PURE__ */ a("div", {
+						className: "w-20",
+						children: /* @__PURE__ */ a(e, {
+							variant: "box",
+							selectSize: "mini",
+							value: String(d),
+							onChange: (e) => p(Number(e)),
+							options: f.map((e) => ({
+								value: String(e),
+								label: String(e)
+							})),
+							placeholder: "선택",
+							"data-testid": b ? `${b}-page-size` : void 0
+						})
+					})]
+				}),
+				/* @__PURE__ */ a("div", {
+					className: "contents @min-[640px]/pagebar:hidden",
+					children: v && l > 1 && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(n, {
+						currentPage: c,
+						totalPages: l,
+						onPageChange: u,
+						"data-testid": b ? `${b}-page-jump` : void 0
+					}), y && /* @__PURE__ */ a(t, { onKeyDown: C })] })
+				})
+			]
+		}), /* @__PURE__ */ o("div", {
+			className: "flex items-center gap-3 @min-[640px]/pagebar:flex-1 @min-[640px]/pagebar:justify-end @max-[639px]/pagebar:w-full @max-[639px]/pagebar:justify-center",
+			children: [/* @__PURE__ */ a("div", {
+				className: "hidden @min-[640px]/pagebar:contents",
+				children: v && l > 1 && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(n, {
+					currentPage: c,
+					totalPages: l,
+					onPageChange: u,
+					"data-testid": b ? `${b}-page-jump` : void 0
+				}), y && /* @__PURE__ */ a(t, { onKeyDown: C })] })
+			}), /* @__PURE__ */ a(r, {
+				currentPage: c,
+				totalPages: l,
+				onPageChange: u,
+				hasPreviousPage: x,
+				hasNextPage: S,
+				"data-testid": b ? `${b}-pagination` : void 0
+			})]
+		})]
+	});
+}
+//#endregion
+export { c as PaginationFooter };

package/dist/components/table/components/SortableHeaderCell.cjs.js

@@ -0,0 +1 @@
+let e=require("react/jsx-runtime"),t=require("@dnd-kit/sortable"),n=require("@dnd-kit/utilities");function r({id:r,disabled:i=!1,as:a=`div`,colSpan:o,rowSpan:s,className:c,style:l,children:u}){let{setNodeRef:d,attributes:f,listeners:p,transform:m,transition:h,isDragging:g}=(0,t.useSortable)({id:r,disabled:i});return(0,e.jsx)(a,{ref:d,className:c,style:{...l,transform:n.CSS.Translate.toString(m),transition:h,opacity:g?.5:1,cursor:i?void 0:`grab`},...a===`th`?{...o===void 0?{}:{colSpan:o},...s===void 0?{}:{rowSpan:s}}:{},...i?{}:f,...i?{}:p,children:u})}exports.SortableHeaderCell=r;

package/dist/components/table/components/SortableHeaderCell.esm.js

@@ -0,0 +1,30 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useSortable as t } from "@dnd-kit/sortable";
+import { CSS as n } from "@dnd-kit/utilities";
+//#region src/components/table/components/SortableHeaderCell.tsx
+function r({ id: r, disabled: i = !1, as: a = "div", colSpan: o, rowSpan: s, className: c, style: l, children: u }) {
+	let { setNodeRef: d, attributes: f, listeners: p, transform: m, transition: h, isDragging: g } = t({
+		id: r,
+		disabled: i
+	});
+	return /* @__PURE__ */ e(a, {
+		ref: d,
+		className: c,
+		style: {
+			...l,
+			transform: n.Translate.toString(m),
+			transition: h,
+			opacity: g ? .5 : 1,
+			cursor: i ? void 0 : "grab"
+		},
+		...a === "th" ? {
+			...o === void 0 ? {} : { colSpan: o },
+			...s === void 0 ? {} : { rowSpan: s }
+		} : {},
+		...i ? {} : f,
+		...i ? {} : p,
+		children: u
+	});
+}
+//#endregion
+export { r as SortableHeaderCell };

package/dist/components/table/hooks/useColumnPresets.cjs.js

@@ -0,0 +1 @@
+const e=require("../column-group-utils.cjs.js"),t=require("../../../lib/column-preset-storage.cjs.js");let n=require("react");function r(e,t){let n=new Set(t),r=new Set(e),i=e.filter(e=>n.has(e)),a=t.filter(e=>!r.has(e)),o=[...i,...a];if(o.length===e.length){let t=!0;for(let n=0;n<o.length;n++)if(o[n]!==e[n]){t=!1;break}if(t)return e}return o}function i(e,t){return!e||e.columnOrder.length===0?{columnOrder:t,hiddenColumns:[],columnWidths:e?.columnWidths??{}}:{columnOrder:r(e.columnOrder,t),hiddenColumns:e.hiddenColumns??[],columnWidths:e.columnWidths??{}}}function a(e,t){if(e.columnOrder.length!==t.columnOrder.length)return!1;for(let n=0;n<e.columnOrder.length;n++)if(e.columnOrder[n]!==t.columnOrder[n])return!1;if(e.hiddenColumns.length!==t.hiddenColumns.length)return!1;let n=new Set(t.hiddenColumns);for(let t of e.hiddenColumns)if(!n.has(t))return!1;let r=Object.keys(e.columnWidths),i=Object.keys(t.columnWidths);if(r.length!==i.length)return!1;for(let n of r)if(e.columnWidths[n]!==t.columnWidths[n])return!1;return!0}function o({pageKey:o,columns:s,columnGroups:c,legacyStorageKey:l}){let u=(0,n.useMemo)(()=>e.getDefaultSlotOrder(e.buildColumnSlots(s,c)),[s,c]),[d,f]=(0,n.useState)(1),[p,m]=(0,n.useState)(u),[h,g]=(0,n.useState)([]),[_,v]=(0,n.useState)({}),[y,b]=(0,n.useState)({columnOrder:u,hiddenColumns:[],columnWidths:{}}),x=(0,n.useCallback)(e=>{b(e),m(e.columnOrder),g(e.hiddenColumns),v(e.columnWidths)},[]),S=(0,n.useRef)(void 0),C=(0,n.useRef)(l);return C.current=l,(0,n.useEffect)(()=>{if(!o){S.current=o,f(1),x({columnOrder:u,hiddenColumns:[],columnWidths:{}});return}let e=S.current!==o;if(S.current=o,e){let e=C.current;e&&t.ColumnPresetStorage.migrateFromLegacyStorage(o,e);let n=t.ColumnPresetStorage.getActivePreset(o),r=i(t.ColumnPresetStorage.getPresetColumns(o,n),u);f(n),x(r);return}m(e=>r(e,u)),b(e=>{let t=r(e.columnOrder,u);return t===e.columnOrder?e:{...e,columnOrder:t}})},[x,u,o]),{activePreset:d,columnOrder:p,hiddenColumns:h,columnWidths:_,isDirty:(0,n.useMemo)(()=>!a({columnOrder:p,hiddenColumns:h,columnWidths:_},y),[p,h,_,y]),hasPreset:(0,n.useCallback)(e=>o?t.ColumnPresetStorage.hasPreset(o,e):!1,[o]),applyPreset:(0,n.useCallback)(e=>{if(f(e),!o){x({columnOrder:u,hiddenColumns:[],columnWidths:{}});return}t.ColumnPresetStorage.setActivePreset(o,e),x(i(t.ColumnPresetStorage.getPresetColumns(o,e),u))},[x,u,o]),saveActivePreset:(0,n.useCallback)(()=>!o||p.length===0?!1:(t.ColumnPresetStorage.savePreset(o,d,{columnOrder:p,hiddenColumns:h,columnWidths:_}),b({columnOrder:p,hiddenColumns:h,columnWidths:_}),!0),[d,p,_,h,o]),saveAsPreset:(0,n.useCallback)(e=>o?p.length===0?!1:(t.ColumnPresetStorage.savePreset(o,e,{columnOrder:p,hiddenColumns:h,columnWidths:_}),t.ColumnPresetStorage.setActivePreset(o,e),f(e),b({columnOrder:p,hiddenColumns:h,columnWidths:_}),!0):(f(e),!1),[p,_,h,o]),resetActivePreset:(0,n.useCallback)(()=>{o&&t.ColumnPresetStorage.clearPreset(o,d),x({columnOrder:u,hiddenColumns:[],columnWidths:{}})},[d,x,u,o]),setColumnOrder:(0,n.useCallback)(e=>{m(e)},[]),setHiddenColumns:(0,n.useCallback)(e=>{g(e)},[]),setColumnWidths:(0,n.useCallback)(e=>{v(e)},[]),setColumnWidth:(0,n.useCallback)((e,t)=>{v(n=>{let r={...n};return t>0?r[e]=t:delete r[e],r})},[])}}exports.useColumnPresets=o;

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

@@ -0,0 +1,165 @@
+import { buildColumnSlots as e, getDefaultSlotOrder as t } from "../column-group-utils.esm.js";
+import { ColumnPresetStorage as n } from "../../../lib/column-preset-storage.esm.js";
+import { useCallback as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
+//#region src/components/table/hooks/useColumnPresets.ts
+function c(e, t) {
+	let n = new Set(t), r = new Set(e), i = e.filter((e) => n.has(e)), a = t.filter((e) => !r.has(e)), o = [...i, ...a];
+	if (o.length === e.length) {
+		let t = !0;
+		for (let n = 0; n < o.length; n++) if (o[n] !== e[n]) {
+			t = !1;
+			break;
+		}
+		if (t) return e;
+	}
+	return o;
+}
+function l(e, t) {
+	return !e || e.columnOrder.length === 0 ? {
+		columnOrder: t,
+		hiddenColumns: [],
+		columnWidths: e?.columnWidths ?? {}
+	} : {
+		columnOrder: c(e.columnOrder, t),
+		hiddenColumns: e.hiddenColumns ?? [],
+		columnWidths: e.columnWidths ?? {}
+	};
+}
+function u(e, t) {
+	if (e.columnOrder.length !== t.columnOrder.length) return !1;
+	for (let n = 0; n < e.columnOrder.length; n++) if (e.columnOrder[n] !== t.columnOrder[n]) return !1;
+	if (e.hiddenColumns.length !== t.hiddenColumns.length) return !1;
+	let n = new Set(t.hiddenColumns);
+	for (let t of e.hiddenColumns) if (!n.has(t)) return !1;
+	let r = Object.keys(e.columnWidths), i = Object.keys(t.columnWidths);
+	if (r.length !== i.length) return !1;
+	for (let n of r) if (e.columnWidths[n] !== t.columnWidths[n]) return !1;
+	return !0;
+}
+function d({ pageKey: d, columns: f, columnGroups: p, legacyStorageKey: m }) {
+	let h = a(() => t(e(f, p)), [f, p]), [g, _] = s(1), [v, y] = s(h), [b, x] = s([]), [S, C] = s({}), [w, T] = s({
+		columnOrder: h,
+		hiddenColumns: [],
+		columnWidths: {}
+	}), E = r((e) => {
+		T(e), y(e.columnOrder), x(e.hiddenColumns), C(e.columnWidths);
+	}, []), D = o(void 0), O = o(m);
+	return O.current = m, i(() => {
+		if (!d) {
+			D.current = d, _(1), E({
+				columnOrder: h,
+				hiddenColumns: [],
+				columnWidths: {}
+			});
+			return;
+		}
+		let e = D.current !== d;
+		if (D.current = d, e) {
+			let e = O.current;
+			e && n.migrateFromLegacyStorage(d, e);
+			let t = n.getActivePreset(d), r = l(n.getPresetColumns(d, t), h);
+			_(t), E(r);
+			return;
+		}
+		y((e) => c(e, h)), T((e) => {
+			let t = c(e.columnOrder, h);
+			return t === e.columnOrder ? e : {
+				...e,
+				columnOrder: t
+			};
+		});
+	}, [
+		E,
+		h,
+		d
+	]), {
+		activePreset: g,
+		columnOrder: v,
+		hiddenColumns: b,
+		columnWidths: S,
+		isDirty: a(() => !u({
+			columnOrder: v,
+			hiddenColumns: b,
+			columnWidths: S
+		}, w), [
+			v,
+			b,
+			S,
+			w
+		]),
+		hasPreset: r((e) => d ? n.hasPreset(d, e) : !1, [d]),
+		applyPreset: r((e) => {
+			if (_(e), !d) {
+				E({
+					columnOrder: h,
+					hiddenColumns: [],
+					columnWidths: {}
+				});
+				return;
+			}
+			n.setActivePreset(d, e), E(l(n.getPresetColumns(d, e), h));
+		}, [
+			E,
+			h,
+			d
+		]),
+		saveActivePreset: r(() => !d || v.length === 0 ? !1 : (n.savePreset(d, g, {
+			columnOrder: v,
+			hiddenColumns: b,
+			columnWidths: S
+		}), T({
+			columnOrder: v,
+			hiddenColumns: b,
+			columnWidths: S
+		}), !0), [
+			g,
+			v,
+			S,
+			b,
+			d
+		]),
+		saveAsPreset: r((e) => d ? v.length === 0 ? !1 : (n.savePreset(d, e, {
+			columnOrder: v,
+			hiddenColumns: b,
+			columnWidths: S
+		}), n.setActivePreset(d, e), _(e), T({
+			columnOrder: v,
+			hiddenColumns: b,
+			columnWidths: S
+		}), !0) : (_(e), !1), [
+			v,
+			S,
+			b,
+			d
+		]),
+		resetActivePreset: r(() => {
+			d && n.clearPreset(d, g), E({
+				columnOrder: h,
+				hiddenColumns: [],
+				columnWidths: {}
+			});
+		}, [
+			g,
+			E,
+			h,
+			d
+		]),
+		setColumnOrder: r((e) => {
+			y(e);
+		}, []),
+		setHiddenColumns: r((e) => {
+			x(e);
+		}, []),
+		setColumnWidths: r((e) => {
+			C(e);
+		}, []),
+		setColumnWidth: r((e, t) => {
+			C((n) => {
+				let r = { ...n };
+				return t > 0 ? r[e] = t : delete r[e], r;
+			});
+		}, [])
+	};
+}
+//#endregion
+export { d as useColumnPresets };

package/dist/components/table/hooks/useColumnResize.cjs.js

@@ -0,0 +1 @@
+let e=require("react");function t({columns:t,defaultWidth:n=150,minWidth:r=50,maxWidth:i,tableRef:a,storageKey:o,controlledWidths:s,onColumnWidthsChange:c}){let l=s!==void 0,u=(0,e.useCallback)(()=>{if(l||!o)return{};try{let e=localStorage.getItem(o);if(e){let t=JSON.parse(e),n={};return Object.entries(t).forEach(([e,t])=>{typeof t==`number`&&t>=r&&(n[e]=t)}),n}}catch(e){console.warn(`[ColumnResize] Failed to load saved widths:`,e)}return{}},[l,o,r]),[d,f]=(0,e.useState)(()=>u()),p=l?s:d,m=(0,e.useCallback)(e=>{if(l){let t=typeof e==`function`?e(p):e;c?.(t);return}f(e)},[p,l,c]);(0,e.useEffect)(()=>{if(!l&&!(!o||Object.keys(d).length===0))try{localStorage.setItem(o,JSON.stringify(d))}catch(e){console.warn(`[ColumnResize] Failed to save widths:`,e)}},[d,l,o]);let h=(0,e.useRef)(null),g=(0,e.useRef)(null),_=(0,e.useCallback)(e=>{if(typeof e==`string`)return e;if(typeof e==`number`)return String(e);if(e==null)return``;if(Array.isArray(e))return e.map(e=>_(e)).join(``);if(typeof e==`object`&&`props`in e){let t=e.props;if(t?.children)return _(t.children)}return``},[]),v=(0,e.useCallback)(e=>{if(!g.current)return n;let i=t.find(t=>t.key===e)?.header,a=typeof i==`string`?i:_(i);g.current.textContent=a||e,g.current.style.fontSize=`14px`,g.current.style.fontWeight=`600`,g.current.style.padding=`0 24px`;let o=g.current.offsetWidth;return Math.max(r,o+20)},[t,_,n,r]);return{columnWidths:p,handleMouseDown:(0,e.useCallback)((e,t)=>{t.preventDefault(),t.stopPropagation();let o=p[e]||n;h.current={key:e,startX:t.clientX,startWidth:o};let s=a?.current?.querySelector(`colgroup col[data-col-key="${CSS.escape(e)}"]`)??null,c=a?.current??null,l=(c?parseFloat(c.style.width)||c.offsetWidth:0)-o,u=c?.parentElement?.clientWidth||1/0,d=Math.min(i??1/0,u),f=o,g=null,_=e=>{if(!h.current)return;let t=e.clientX-h.current.startX,n=Math.max(r,h.current.startWidth+t);f=Math.max(r,Math.min(n,d)),g===null&&(g=requestAnimationFrame(()=>{g=null,s&&(s.style.width=`${f}px`),c&&(c.style.width=`${l+f}px`)}))},v=()=>{g!==null&&cancelAnimationFrame(g);let e=h.current?.key;h.current=null,document.removeEventListener(`mousemove`,_),document.removeEventListener(`mouseup`,v),e&&m(t=>({...t,[e]:f}))};document.addEventListener(`mousemove`,_),document.addEventListener(`mouseup`,v)},[p,n,r,i,a,m]),handleDoubleClick:(0,e.useCallback)(()=>{},[]),getColumnWidth:(0,e.useCallback)((e,t)=>p[e]?`${p[e]}px`:t?typeof t==`number`?`${t}px`:t:`${v(e)}px`,[p,v]),measureRef:g}}exports.useColumnResize=t;

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

@@ -0,0 +1,106 @@
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+//#region src/components/table/hooks/useColumnResize.ts
+function i({ columns: i, defaultWidth: a = 150, minWidth: o = 50, maxWidth: s, tableRef: c, storageKey: l, controlledWidths: u, onColumnWidthsChange: d }) {
+	let f = u !== void 0, p = e(() => {
+		if (f || !l) return {};
+		try {
+			let e = localStorage.getItem(l);
+			if (e) {
+				let t = JSON.parse(e), n = {};
+				return Object.entries(t).forEach(([e, t]) => {
+					typeof t == "number" && t >= o && (n[e] = t);
+				}), n;
+			}
+		} catch (e) {
+			console.warn("[ColumnResize] Failed to load saved widths:", e);
+		}
+		return {};
+	}, [
+		f,
+		l,
+		o
+	]), [m, h] = r(() => p()), g = f ? u : m, _ = e((e) => {
+		if (f) {
+			let t = typeof e == "function" ? e(g) : e;
+			d?.(t);
+			return;
+		}
+		h(e);
+	}, [
+		g,
+		f,
+		d
+	]);
+	t(() => {
+		if (!f && !(!l || Object.keys(m).length === 0)) try {
+			localStorage.setItem(l, JSON.stringify(m));
+		} catch (e) {
+			console.warn("[ColumnResize] Failed to save widths:", e);
+		}
+	}, [
+		m,
+		f,
+		l
+	]);
+	let v = n(null), y = n(null), b = e((e) => {
+		if (typeof e == "string") return e;
+		if (typeof e == "number") return String(e);
+		if (e == null) return "";
+		if (Array.isArray(e)) return e.map((e) => b(e)).join("");
+		if (typeof e == "object" && "props" in e) {
+			let t = e.props;
+			if (t?.children) return b(t.children);
+		}
+		return "";
+	}, []), x = e((e) => {
+		if (!y.current) return a;
+		let t = i.find((t) => t.key === e)?.header, n = typeof t == "string" ? t : b(t);
+		y.current.textContent = n || e, y.current.style.fontSize = "14px", y.current.style.fontWeight = "600", y.current.style.padding = "0 24px";
+		let r = y.current.offsetWidth;
+		return Math.max(o, r + 20);
+	}, [
+		i,
+		b,
+		a,
+		o
+	]);
+	return {
+		columnWidths: g,
+		handleMouseDown: e((e, t) => {
+			t.preventDefault(), t.stopPropagation();
+			let n = g[e] || a;
+			v.current = {
+				key: e,
+				startX: t.clientX,
+				startWidth: n
+			};
+			let r = c?.current?.querySelector(`colgroup col[data-col-key="${CSS.escape(e)}"]`) ?? null, i = c?.current ?? null, l = (i ? parseFloat(i.style.width) || i.offsetWidth : 0) - n, u = i?.parentElement?.clientWidth || Infinity, d = Math.min(s ?? Infinity, u), f = n, p = null, m = (e) => {
+				if (!v.current) return;
+				let t = e.clientX - v.current.startX, n = Math.max(o, v.current.startWidth + t);
+				f = Math.max(o, Math.min(n, d)), p === null && (p = requestAnimationFrame(() => {
+					p = null, r && (r.style.width = `${f}px`), i && (i.style.width = `${l + f}px`);
+				}));
+			}, h = () => {
+				p !== null && cancelAnimationFrame(p);
+				let e = v.current?.key;
+				v.current = null, document.removeEventListener("mousemove", m), document.removeEventListener("mouseup", h), e && _((t) => ({
+					...t,
+					[e]: f
+				}));
+			};
+			document.addEventListener("mousemove", m), document.addEventListener("mouseup", h);
+		}, [
+			g,
+			a,
+			o,
+			s,
+			c,
+			_
+		]),
+		handleDoubleClick: e(() => {}, []),
+		getColumnWidth: e((e, t) => g[e] ? `${g[e]}px` : t ? typeof t == "number" ? `${t}px` : t : `${x(e)}px`, [g, x]),
+		measureRef: y
+	};
+}
+//#endregion
+export { i as useColumnResize };

package/dist/components/table/hooks/useFillEmptyRows.cjs.js

@@ -0,0 +1 @@
+let e=require("react");function t({enabled:t,containerRef:n,theadRef:r,tbodyRef:i,excludeRowsSelector:a,remainingMode:o,observeTbody:s=!1,deps:c=[]}){let[l,u]=(0,e.useState)(0),[d,f]=(0,e.useState)(null);return(0,e.useLayoutEffect)(()=>{if(!t){u(e=>e===0?e:0);return}let e=n.current,c=r.current,l=i.current;if(!e||!c||!l)return;let d=()=>{let t=e.clientHeight,n=c.offsetHeight,r=l.querySelectorAll(a);if(r.length===0){u(0),f(null);return}let i=0;r.forEach(e=>{i+=e.offsetHeight});let s=i/r.length;if(s<=0)return;f(e=>e===s?e:s);let d=o===`tbody-height`?l.offsetHeight:i,p=t-n-d,m=p>0?Math.floor(p/s):0;u(e=>e===m?e:m)};d();let p=null,m=new ResizeObserver(()=>{p===null&&(p=requestAnimationFrame(()=>{p=null,d()}))});return m.observe(e),s&&m.observe(l),()=>{m.disconnect(),p!==null&&cancelAnimationFrame(p)}},[t,a,o,s,...c]),{emptyRowCount:l,measuredRowHeight:d}}exports.useFillEmptyRows=t;

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

@@ -0,0 +1,49 @@
+import { useLayoutEffect as e, useState as t } from "react";
+//#region src/components/table/hooks/useFillEmptyRows.ts
+function n({ enabled: n, containerRef: r, theadRef: i, tbodyRef: a, excludeRowsSelector: o, remainingMode: s, observeTbody: c = !1, deps: l = [] }) {
+	let [u, d] = t(0), [f, p] = t(null);
+	return e(() => {
+		if (!n) {
+			d((e) => e === 0 ? e : 0);
+			return;
+		}
+		let e = r.current, t = i.current, l = a.current;
+		if (!e || !t || !l) return;
+		let u = () => {
+			let n = e.clientHeight, r = t.offsetHeight, i = l.querySelectorAll(o);
+			if (i.length === 0) {
+				d(0), p(null);
+				return;
+			}
+			let a = 0;
+			i.forEach((e) => {
+				a += e.offsetHeight;
+			});
+			let c = a / i.length;
+			if (c <= 0) return;
+			p((e) => e === c ? e : c);
+			let u = s === "tbody-height" ? l.offsetHeight : a, f = n - r - u, m = f > 0 ? Math.floor(f / c) : 0;
+			d((e) => e === m ? e : m);
+		};
+		u();
+		let f = null, m = new ResizeObserver(() => {
+			f === null && (f = requestAnimationFrame(() => {
+				f = null, u();
+			}));
+		});
+		return m.observe(e), c && m.observe(l), () => {
+			m.disconnect(), f !== null && cancelAnimationFrame(f);
+		};
+	}, [
+		n,
+		o,
+		s,
+		c,
+		...l
+	]), {
+		emptyRowCount: u,
+		measuredRowHeight: f
+	};
+}
+//#endregion
+export { n as useFillEmptyRows };

package/dist/components/table/hooks/useInfiniteScroll.cjs.js

@@ -0,0 +1 @@
+let e=require("react");function t({fetchNextPage:t,hasNextPage:n,isFetchingNextPage:r,scrollElement:i,threshold:a=80,enabled:o=!0}){let s=(0,e.useRef)(null),c=(0,e.useRef)(null),l=(0,e.useCallback)(e=>{let[i]=e;i.isIntersecting&&n&&!r&&o&&t()},[n,r,t,o]);return(0,e.useEffect)(()=>{if(!o)return;s.current=new IntersectionObserver(l,{root:i||null,rootMargin:`100px`,threshold:0});let e=c.current;return e&&s.current&&s.current.observe(e),()=>{s.current&&e&&s.current.unobserve(e)}},[l,i,a,o]),{sentinelRef:c}}exports.useInfiniteScroll=t;

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

@@ -0,0 +1,32 @@
+import { useCallback as e, useEffect as t, useRef as n } from "react";
+//#region src/components/table/hooks/useInfiniteScroll.ts
+function r({ fetchNextPage: r, hasNextPage: i, isFetchingNextPage: a, scrollElement: o, threshold: s = 80, enabled: c = !0 }) {
+	let l = n(null), u = n(null), d = e((e) => {
+		let [t] = e;
+		t.isIntersecting && i && !a && c && r();
+	}, [
+		i,
+		a,
+		r,
+		c
+	]);
+	return t(() => {
+		if (!c) return;
+		l.current = new IntersectionObserver(d, {
+			root: o || null,
+			rootMargin: "100px",
+			threshold: 0
+		});
+		let e = u.current;
+		return e && l.current && l.current.observe(e), () => {
+			l.current && e && l.current.unobserve(e);
+		};
+	}, [
+		d,
+		o,
+		s,
+		c
+	]), { sentinelRef: u };
+}
+//#endregion
+export { r as useInfiniteScroll };

package/dist/components/table/hooks/useTableColumnState.cjs.js

@@ -0,0 +1 @@
+const e=require("../components/ColumnPresetSelector.cjs.js"),t=require("./useColumnPresets.cjs.js");let n=require("react"),r=require("react/jsx-runtime");function i({pageKey:i,columns:a,columnGroups:o,showSelector:s=!0,selectorClassName:c}){let l=t.useColumnPresets({pageKey:i,columns:a,columnGroups:o});return{columnState:(0,n.useMemo)(()=>({columnOrder:l.columnOrder,hiddenColumns:l.hiddenColumns,columnWidths:l.columnWidths,onColumnOrderChange:l.setColumnOrder,onColumnWidthsChange:l.setColumnWidths}),[l.columnOrder,l.hiddenColumns,l.columnWidths,l.setColumnOrder,l.setColumnWidths]),selector:s&&i?(0,r.jsx)(e.ColumnPresetSelector,{columns:a,columnGroups:o,activePreset:l.activePreset,columnOrder:l.columnOrder,hiddenColumns:l.hiddenColumns,columnWidths:l.columnWidths,isDirty:l.isDirty,hasPreset:l.hasPreset,onApplyPreset:l.applyPreset,onSaveActivePreset:l.saveActivePreset,onResetActivePreset:l.resetActivePreset,onColumnOrderChange:l.setColumnOrder,onHiddenColumnsChange:l.setHiddenColumns,onSetColumnWidth:l.setColumnWidth,className:c}):null}}exports.useTableColumnState=i;

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

@@ -0,0 +1,46 @@
+import { ColumnPresetSelector as e } from "../components/ColumnPresetSelector.esm.js";
+import { useColumnPresets as t } from "./useColumnPresets.esm.js";
+import { useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/table/hooks/useTableColumnState.tsx
+function i({ pageKey: i, columns: a, columnGroups: o, showSelector: s = !0, selectorClassName: c }) {
+	let l = t({
+		pageKey: i,
+		columns: a,
+		columnGroups: o
+	});
+	return {
+		columnState: n(() => ({
+			columnOrder: l.columnOrder,
+			hiddenColumns: l.hiddenColumns,
+			columnWidths: l.columnWidths,
+			onColumnOrderChange: l.setColumnOrder,
+			onColumnWidthsChange: l.setColumnWidths
+		}), [
+			l.columnOrder,
+			l.hiddenColumns,
+			l.columnWidths,
+			l.setColumnOrder,
+			l.setColumnWidths
+		]),
+		selector: s && i ? /* @__PURE__ */ r(e, {
+			columns: a,
+			columnGroups: o,
+			activePreset: l.activePreset,
+			columnOrder: l.columnOrder,
+			hiddenColumns: l.hiddenColumns,
+			columnWidths: l.columnWidths,
+			isDirty: l.isDirty,
+			hasPreset: l.hasPreset,
+			onApplyPreset: l.applyPreset,
+			onSaveActivePreset: l.saveActivePreset,
+			onResetActivePreset: l.resetActivePreset,
+			onColumnOrderChange: l.setColumnOrder,
+			onHiddenColumnsChange: l.setHiddenColumns,
+			onSetColumnWidth: l.setColumnWidth,
+			className: c
+		}) : null
+	};
+}
+//#endregion
+export { i as useTableColumnState };

package/dist/components/table/hooks/useTableDragSelection.cjs.js

@@ -0,0 +1 @@
+let e=require("react");function t({rows:t,getRowId:n,isSelected:r,setSelected:i,enabled:a=!0,scrollContainerRef:o,edgeSize:s=60,maxSpeed:c=14}){let l=(0,e.useRef)(!1),u=(0,e.useRef)(!0),d=(0,e.useRef)(null),f=(0,e.useRef)(null),p=(0,e.useRef)(null),m=(0,e.useRef)(t);m.current=t;let h=(0,e.useRef)(n);h.current=n;let g=(0,e.useRef)(r);g.current=r;let _=(0,e.useRef)(i);_.current=i;let v=(0,e.useMemo)(()=>{let e=new Map;for(let r=0;r<t.length;r++)e.set(n(t[r]),r);return e},[t]),y=(0,e.useRef)(v);y.current=v;let b=(0,e.useCallback)(()=>{p.current!=null&&(cancelAnimationFrame(p.current),p.current=null),f.current=null},[]),x=(0,e.useCallback)(()=>{if(p.current=null,!l.current)return;let e=o?.current,t=f.current;if(!e||t==null)return;let n=e.getBoundingClientRect(),r=0;if(t<n.top+s){let e=(n.top+s-t)/s;r=-Math.ceil(c*Math.min(1,Math.max(0,e)))}else if(t>n.bottom-s){let e=(t-(n.bottom-s))/s;r=Math.ceil(c*Math.min(1,Math.max(0,e)))}r!==0&&(e.scrollTop+=r),p.current=requestAnimationFrame(x)},[s,c,o]);(0,e.useEffect)(()=>{if(!a)return;let e=()=>{l.current=!1,d.current=null,b()},t=e=>{l.current&&(f.current=e.clientY,p.current??=requestAnimationFrame(x))};return window.addEventListener(`mouseup`,e),window.addEventListener(`mousemove`,t),()=>{window.removeEventListener(`mouseup`,e),window.removeEventListener(`mousemove`,t),b()}},[a,b,x]);let S=e=>e==null?-1:y.current.get(e)??-1;return{onRowMouseDown:(0,e.useCallback)(e=>{if(!a)return;let t=m.current[e];t&&(l.current=!0,d.current=h.current(t),u.current=!g.current(t),_.current(t,u.current))},[a]),onRowMouseEnter:(0,e.useCallback)(e=>{if(!a||!l.current)return;let t=m.current,n=t[e];if(!n)return;let r=h.current(n);if(r===d.current)return;let i=S(d.current),o=i===-1?e:i,s=Math.min(o,e),c=Math.max(o,e);for(let e=s;e<=c;e++){let n=t[e];n&&g.current(n)!==u.current&&_.current(n,u.current)}d.current=r},[a])}}exports.useTableDragSelection=t;

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

@@ -0,0 +1,76 @@
+import { useCallback as e, useEffect as t, useMemo as n, useRef as r } from "react";
+//#region src/components/table/hooks/useTableDragSelection.ts
+function i({ rows: i, getRowId: a, isSelected: o, setSelected: s, enabled: c = !0, scrollContainerRef: l, edgeSize: u = 60, maxSpeed: d = 14 }) {
+	let f = r(!1), p = r(!0), m = r(null), h = r(null), g = r(null), _ = r(i);
+	_.current = i;
+	let v = r(a);
+	v.current = a;
+	let y = r(o);
+	y.current = o;
+	let b = r(s);
+	b.current = s;
+	let x = n(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t = 0; t < i.length; t++) e.set(a(i[t]), t);
+		return e;
+	}, [i]), S = r(x);
+	S.current = x;
+	let C = e(() => {
+		g.current != null && (cancelAnimationFrame(g.current), g.current = null), h.current = null;
+	}, []), w = e(() => {
+		if (g.current = null, !f.current) return;
+		let e = l?.current, t = h.current;
+		if (!e || t == null) return;
+		let n = e.getBoundingClientRect(), r = 0;
+		if (t < n.top + u) {
+			let e = (n.top + u - t) / u;
+			r = -Math.ceil(d * Math.min(1, Math.max(0, e)));
+		} else if (t > n.bottom - u) {
+			let e = (t - (n.bottom - u)) / u;
+			r = Math.ceil(d * Math.min(1, Math.max(0, e)));
+		}
+		r !== 0 && (e.scrollTop += r), g.current = requestAnimationFrame(w);
+	}, [
+		u,
+		d,
+		l
+	]);
+	t(() => {
+		if (!c) return;
+		let e = () => {
+			f.current = !1, m.current = null, C();
+		}, t = (e) => {
+			f.current && (h.current = e.clientY, g.current ??= requestAnimationFrame(w));
+		};
+		return window.addEventListener("mouseup", e), window.addEventListener("mousemove", t), () => {
+			window.removeEventListener("mouseup", e), window.removeEventListener("mousemove", t), C();
+		};
+	}, [
+		c,
+		C,
+		w
+	]);
+	let T = (e) => e == null ? -1 : S.current.get(e) ?? -1;
+	return {
+		onRowMouseDown: e((e) => {
+			if (!c) return;
+			let t = _.current[e];
+			t && (f.current = !0, m.current = v.current(t), p.current = !y.current(t), b.current(t, p.current));
+		}, [c]),
+		onRowMouseEnter: e((e) => {
+			if (!c || !f.current) return;
+			let t = _.current, n = t[e];
+			if (!n) return;
+			let r = v.current(n);
+			if (r === m.current) return;
+			let i = T(m.current), a = i === -1 ? e : i, o = Math.min(a, e), s = Math.max(a, e);
+			for (let e = o; e <= s; e++) {
+				let n = t[e];
+				n && y.current(n) !== p.current && b.current(n, p.current);
+			}
+			m.current = r;
+		}, [c])
+	};
+}
+//#endregion
+export { i as useTableDragSelection };

package/dist/components/table/hooks/useTableSort.cjs.js

@@ -0,0 +1 @@
+let e=require("react");function t({initialSort:t,serverSide:n=!1,onSort:r}={}){let[i,a]=(0,e.useState)(t||null);return{sort:i,handleSort:(0,e.useCallback)(e=>{let t={key:e,direction:i?.key===e?i.direction===`asc`?`desc`:i.direction===`desc`?null:`asc`:`asc`},o=t.direction===null?null:t;a(o),n&&r&&o&&r(o)},[i,n,r]),sortedData:(0,e.useCallback)((e,t)=>!i||!i.direction||n?e:[...e].sort((e,n)=>{let r=t(e,i.key),a=t(n,i.key);if(r==null&&a==null)return 0;if(r==null)return 1;if(a==null)return-1;if(typeof r==`number`&&typeof a==`number`)return i.direction===`asc`?r-a:a-r;let o=String(r),s=String(a),c=o.localeCompare(s,`ko`,{numeric:!0});return i.direction===`asc`?c:-c}),[i,n])}}exports.useTableSort=t;

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

@@ -0,0 +1,30 @@
+import { useCallback as e, useState as t } from "react";
+//#region src/components/table/hooks/useTableSort.ts
+function n({ initialSort: n, serverSide: r = !1, onSort: i } = {}) {
+	let [a, o] = t(n || null);
+	return {
+		sort: a,
+		handleSort: e((e) => {
+			let t = {
+				key: e,
+				direction: a?.key === e ? a.direction === "asc" ? "desc" : a.direction === "desc" ? null : "asc" : "asc"
+			}, n = t.direction === null ? null : t;
+			o(n), r && i && n && i(n);
+		}, [
+			a,
+			r,
+			i
+		]),
+		sortedData: e((e, t) => !a || !a.direction || r ? e : [...e].sort((e, n) => {
+			let r = t(e, a.key), i = t(n, a.key);
+			if (r == null && i == null) return 0;
+			if (r == null) return 1;
+			if (i == null) return -1;
+			if (typeof r == "number" && typeof i == "number") return a.direction === "asc" ? r - i : i - r;
+			let o = String(r), s = String(i), c = o.localeCompare(s, "ko", { numeric: !0 });
+			return a.direction === "asc" ? c : -c;
+		}), [a, r])
+	};
+}
+//#endregion
+export { n as useTableSort };

package/dist/components/table/hooks/useVirtualTable.cjs.js

@@ -0,0 +1 @@
+let e=require("react"),t=require("@tanstack/react-virtual");function n({count:n,estimateSize:r=50,overscan:i=5,scrollElement:a}){let o=(0,e.useRef)(null),s=(0,t.useVirtualizer)({count:n,getScrollElement:()=>a||o.current,estimateSize:()=>r,overscan:i,enabled:n>0});return(0,e.useMemo)(()=>({virtualizer:s,parentRef:o}),[s])}exports.useVirtualTable=n;